v8.06

Updated ChangeLog.
Have all iPhone use mobile view by default, while still having possibility to use mobile/desktop switch button for desktop mode.
2025-10-20 03:29:24 +03:00 · 2025-10-20 03:13:32 +03:00 · 2025-10-20 03:11:02 +03:00 · 2025-10-20 03:00:21 +03:00 · 2025-10-20 02:58:30 +03:00 · 2025-10-20 02:32:08 +03:00
1233 changed files with 553855 additions and 164438 deletions
@@ -1,25 +1,30 @@
-FROM ubuntu:21.10
-LABEL maintainer="sgr"
+FROM ubuntu:24.04
+LABEL maintainer="wekan"
+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

-ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python3 git ca-certificates iproute2"
-ENV DEBIAN_FRONTEND=noninteractive
+ENV BUILD_DEPS="apt-utils gnupg gosu wget bzip2 g++ iproute2 apt-transport-https libarchive-tools"
+ENV DEV_DEPS="curl python3 ca-certificates build-essential git"
+ARG DEBIAN_FRONTEND=noninteractive

 ENV \
    DEBUG=false \
-    NODE_VERSION=v14.21.3 \
-    METEOR_RELEASE=1.10.2 \
+    NODE_VERSION=v14.21.4 \
+    METEOR_RELEASE=METEOR@2.14 \
    USE_EDGE=false \
    METEOR_EDGE=1.5-beta.17 \
-    NPM_VERSION=latest \
+    NPM_VERSION=6.14.17 \
    FIBERS_VERSION=4.0.1 \
    ARCHITECTURE=linux-x64 \
    SRC_PATH=./ \
    WITH_API=true \
    RESULTS_PER_PAGE="" \
+    DEFAULT_BOARD_ID="" \
    ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
    ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
    ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
@@ -27,15 +32,14 @@ ENV \
    ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD=60 \
    ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW=15 \
    ACCOUNTS_COMMON_LOGIN_EXPIRATION_IN_DAYS=90 \
-    RICHER_CARD_COMMENT_EDITOR=false \
-    CARD_OPENED_WEBHOOK_ENABLED=false \
-    ATTACHMENTS_STORE_PATH="" \
    ATTACHMENTS_UPLOAD_EXTERNAL_PROGRAM="" \
    ATTACHMENTS_UPLOAD_MIME_TYPES="" \
    ATTACHMENTS_UPLOAD_MAX_SIZE=0 \
    AVATARS_UPLOAD_EXTERNAL_PROGRAM="" \
    AVATARS_UPLOAD_MIME_TYPES="" \
    AVATARS_UPLOAD_MAX_SIZE=0 \
+    RICHER_CARD_COMMENT_EDITOR=false \
+    CARD_OPENED_WEBHOOK_ENABLED=false \
    MAX_IMAGE_PIXEL="" \
    IMAGE_COMPRESS_RATIO="" \
    NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
@@ -47,12 +51,15 @@ ENV \
    MATOMO_SITE_ID="" \
    MATOMO_DO_NOT_TRACK=true \
    MATOMO_WITH_USERNAME=false \
+    METRICS_ALLOWED_IP_ADDRESSES="" \
    BROWSER_POLICY_ENABLED=true \
    TRUSTED_URL="" \
    WEBHOOKS_ATTRIBUTES="" \
    OAUTH2_ENABLED=false \
+    OIDC_REDIRECTION_ENABLED=false \
    OAUTH2_CA_CERT="" \
    OAUTH2_ADFS_ENABLED=false \
+    OAUTH2_B2C_ENABLED=false \
    OAUTH2_LOGIN_STYLE=redirect \
    OAUTH2_CLIENT_ID="" \
    OAUTH2_SECRET="" \
@@ -69,6 +76,9 @@ ENV \
    LDAP_ENABLE=false \
    LDAP_PORT=389 \
    LDAP_HOST="" \
+    LDAP_AD_SIMPLE_AUTH="" \
+    LDAP_USER_AUTHENTICATION=false \
+    LDAP_USER_AUTHENTICATION_FIELD=uid \
    LDAP_BASEDN="" \
    LDAP_LOGIN_FALLBACK=false \
    LDAP_RECONNECT=true \
@@ -86,8 +96,6 @@ ENV \
    LDAP_ENCRYPTION=false \
    LDAP_CA_CERT="" \
    LDAP_REJECT_UNAUTHORIZED=false \
-    LDAP_USER_AUTHENTICATION=false \
-    LDAP_USER_AUTHENTICATION_FIELD=uid \
    LDAP_USER_SEARCH_FILTER="" \
    LDAP_USER_SEARCH_SCOPE="" \
    LDAP_USER_SEARCH_FIELD="" \
@@ -142,65 +150,32 @@ ENV \
    SAML_IDENTIFIER_FORMAT="" \
    SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
    SAML_ATTRIBUTES="" \
-    DEFAULT_WAIT_SPINNER="" \
+    ORACLE_OIM_ENABLED=false \
+    WAIT_SPINNER="" \
+    WRITABLE_PATH=/data \
    S3=""
-# \
-#    NODE_OPTIONS="--max_old_space_size=4096"

-#---------------------------------------------------------------------
-# 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"
+
+#---------------------------------------------
+# == at docker-compose.yml: AUTOLOGIN WITH OIDC/OAUTH2 ====
+# https://github.com/wekan/wekan/wiki/autologin
+#- OIDC_REDIRECTION_ENABLED=true
 #---------------------------------------------------------------------

-# Install OS
-RUN set -o xtrace \
-  && useradd --user-group -m --system --home-dir /home/wekan wekan \
-  && apt-get update \
-  && apt-get install --assume-yes --no-install-recommends apt-utils apt-transport-https ca-certificates 2>&1 \
-  && apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}
-
-# Install NodeJS
-RUN set -o xtrace \
-  && cd /tmp \
-  && curl -fsSLO --compressed "https://nodejs.org/dist/$NODE_VERSION/node-$NODE_VERSION-$ARCHITECTURE.tar.xz" \
-  && curl -fsSLO --compressed "https://nodejs.org/dist/$NODE_VERSION/SHASUMS256.txt.asc" \
-  && grep " node-$NODE_VERSION-$ARCHITECTURE.tar.xz\$" SHASUMS256.txt.asc | sha256sum -c - \
-  && tar -xJf "node-$NODE_VERSION-$ARCHITECTURE.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
-  && rm "node-$NODE_VERSION-$ARCHITECTURE.tar.xz" SHASUMS256.txt.asc \
-  && ln -s /usr/local/bin/node /usr/local/bin/nodejs \
-  && mkdir -p /usr/local/lib/node_modules/fibers/.node-gyp /root/.node-gyp/${NODE_VERSION} /home/wekan/.config \
-  && npm install -g npm@${NPM_VERSION} \
-  && chown wekan:wekan --recursive /home/wekan/.config
-
-ENV DEBIAN_FRONTEND=dialog
-
-USER wekan
-
-# Install Meteor
-RUN set -o xtrace \
-  && cd /home/wekan \
-  && curl https://install.meteor.com/?release=$METEOR_VERSION --output /home/wekan/install-meteor.sh \
-  # Replace tar with bsdtar in the install script; https://github.com/jshimko/meteor-launchpad/issues/39
-  && sed --in-place "s/tar -xzf.*/bsdtar -xf \"\$TARBALL_FILE\" -C \"\$INSTALL_TMPDIR\"/g" /home/wekan/install-meteor.sh \
-  && sed --in-place 's/VERBOSITY="--silent"/VERBOSITY="--progress-bar"/' /home/wekan/install-meteor.sh \
-  && printf "\n[-] Installing Meteor $METEOR_VERSION...\n\n" \
-  && sh /home/wekan/install-meteor.sh
-
 ENV PATH=$PATH:/home/wekan/.meteor/

-USER root
-
-RUN echo "export PATH=$PATH" >> /etc/environment
-
-USER wekan
+RUN <<EOR
+echo "export PATH=$PATH" >> /etc/environment
+EOR

 # Copy source dir
-RUN set -o xtrace \
-  && mkdir -p /home/wekan/app/.meteor \
-  && mkdir -p /home/wekan/app/packages
+RUN <<EOR
+set -o xtrace
+
+mkdir -p /home/wekan/app/.meteor
+mkdir -p /home/wekan/app/packages
+EOR

 COPY \
    .meteor/.finished-upgraders \
@@ -225,44 +200,83 @@ COPY \
    packages \
    /home/wekan/app/packages/

-USER root
+# Install OS
+RUN <<EOR
+set -o xtrace

-RUN set -o xtrace \
-  && chown -R wekan:wekan /home/wekan/app /home/wekan/.meteor
+# Add non-root user wekan
+useradd --user-group --system --home-dir /home/wekan wekan
+# OS dependencies
+apt-get update --assume-yes
+apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS} ${DEV_DEPS}

-USER wekan
+# Meteor installer doesn't work with the default tar binary, so using bsdtar while installing.
+# https://github.com/coreos/bugs/issues/1095#issuecomment-350574389
+cp $(which tar) $(which tar)~
+ln -sf $(which bsdtar) $(which tar)

-RUN \
-    set -o xtrace && \
-    # Build app
-    cd /home/wekan/app && \
-    /home/wekan/.meteor/meteor add standard-minifier-js && \
-    /home/wekan/.meteor/meteor npm install && \
-    /home/wekan/.meteor/meteor build --directory /home/wekan/app_build
+# Install NodeJS
+cd /tmp

-RUN \
-    set -o xtrace && \
-    cd /home/wekan/app_build/bundle/programs/server/ && \
-    chmod u+w package.json npm-shrinkwrap.json && \
-    npm install && \
-    cd node_modules/fibers && \
-    node build.js
+# 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/${NODE_VERSION}/SHASUMS256.txt"
+
+# Verify nodejs authenticity
+grep "node-${NODE_VERSION}-${ARCHITECTURE}.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
+rm "node-$NODE_VERSION-$ARCHITECTURE.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"
+
+# Install node dependencies
+npm install -g npm@${NPM_VERSION}
+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
+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 (Development)
+cd /home/wekan/app
+gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js
+gosu wekan:wekan /home/wekan/.meteor/meteor npm install
+
+# Put back the original tar
+mv $(which tar)~ $(which tar)

-USER root
 # Cleanup
-RUN \
-    set -o xtrace && \
-    apt-get clean -y && \
-    apt-get autoremove -y && \
-    rm -Rf /tmp/* && \
-    rm -Rf /home/wekan/app_build && \
-    rm -Rf /var/cache/apt /var/lib/apt/lists && \
-    rm -Rf /var/lib/apt/lists/*
+apt-get remove --purge --assume-yes ${BUILD_DEPS}
+apt-get install --assume-yes --no-install-recommends build-essential
+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
+
+mkdir /data
+chown wekan --recursive /data
+EOR

 USER wekan

 ENV PORT=3000
 EXPOSE $PORT
+
+STOPSIGNAL SIGKILL
 WORKDIR /home/wekan/app

 #---------------------------------------------------------------------
@@ -272,7 +286,6 @@ WORKDIR /home/wekan/app
 # Add more stack:
 #   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
 #---------------------------------------------------------------------
-#TODO:
-#CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 /build/main.js"]
+#

 CMD ["/home/wekan/.meteor/meteor", "run", "--verbose", "--settings", "settings.json"]
@@ -1,257 +0,0 @@
-name: wekan
-version: 0
-version-script: git describe --tags |  cut -c 2-
-summary: The open-source kanban
-description: |
-   Wekan is an open-source and collaborative kanban board application.
-
-   Whether you’re maintaining a personal todo list, planning your holidays with some friends, or working in a team on your next revolutionary idea, Kanban boards are an unbeatable tool to keep your things organized. They give you a visual overview of the current state of your project, and make you productive by allowing you to focus on the few items that matter the most.
-   Depending on target environment, some configuration settings might need to be adjusted.
-   For full list of configuration options call:
-   $ wekan.help
-
-confinement: strict
-grade: stable
-
-architectures:
-  - amd64
-
-plugs:
-  mongodb-plug:
-    interface: content
-    target: $SNAP_DATA/shared
-
-hooks:
-  configure:
-    plugs:
-      - network
-      - network-bind
-
-slots:
-  mongodb-slot:
-    interface: content
-    write:
-      - $SNAP_DATA/share
-
-apps:
-    wekan:
-        command: wekan-control
-        daemon: simple
-        plugs: [network, network-bind]
-
-    mongodb:
-        command: mongodb-control
-        daemon: simple
-        plugs: [network, network-bind]
-
-    caddy:
-        command: caddy-control
-        daemon: simple
-        plugs: [network, network-bind]
-
-    help:
-        command: wekan-help
-
-    database-backup:
-        command: mongodb-backup
-        plugs: [network, network-bind]
-
-    database-list-backups:
-        command: ls -al $SNAP_COMMON/db-backups/
-
-    database-restore:
-        command: mongodb-restore
-        plugs: [network, network-bind]
-
-parts:
-    mongodb:
-        source: https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-4.2.6.tgz
-        plugin: dump
-        stage-packages: [libssl1.0.0, libcurl3]
-        filesets:
-            mongo:
-                - usr
-                - bin
-                - lib
-        stage:
-            - $mongo
-        prime:
-            - $mongo
-
-    wekan:
-        source: .
-        plugin: nodejs
-        node-engine: 14.21.3
-        node-packages:
-            - node-gyp
-            - node-pre-gyp
-            - fibers
-        build-packages:
-            - ca-certificates
-            - apt-utils
-            - python
-            - python3
-            - g++
-            - capnproto
-            - curl
-            - libcurl3
-            - execstack
-            - nodejs
-            - npm
-        stage-packages:
-            - libfontconfig1
-        override-build: |
-            echo "Cleaning environment first"
-            rm -rf ~/.meteor ~/.npm /usr/local/lib/node_modules
-            # Create the OpenAPI specification
-            rm -rf .build
-            ## Use Meteor 1.8.x on Snap
-            #rm -rf .meteor
-            #mv .snap-meteor-1.8/.meteor .
-            #mv .snap-meteor-1.8/package.json .
-            #mv .snap-meteor-1.8/package-lock.json .
-            ## Meteor 1.9.x has changes to Buffer() => Buffer.alloc(), so reverting those
-            #mv .snap-meteor-1.8/cfs_access-point.txt fix-download-unicode/
-            #mv .snap-meteor-1.8/export.js models/
-            #mv .snap-meteor-1.8/wekanCreator.js models/
-            #mv .snap-meteor-1.8/ldap.js packages/wekan-ldap/server/ldap.js
-            #mv .snap-meteor-1.8/oidc_server.js packages/wekan-oidc/oidc_server.js
-            rm -rf .snap-meteor-1.8
-            #mkdir -p .build/python
-            #cd .build/python
-            #git clone --depth 1 -b master https://github.com/Kronuz/esprima-python
-            #cd esprima-python
-            #python3 setup.py install
-            #cd ../../..
-            #mkdir -p ./public/api
-            #python3 ./openapi/generate_openapi.py --release $(git describe --tags --abbrev=0) > ./public/api/wekan.yml
-            # we temporary need api2html and mkdirp
-            #npm install -g api2html@0.3.0
-            #npm install -g mkdirp
-            #api2html -c ./public/logo-header.png -o ./public/api/wekan.html ./public/api/wekan.yml
-            #npm uninstall -g mkdirp
-            #npm uninstall -g api2html
-            # Node Fibers 100% CPU usage issue:
-            # https://github.com/wekan/wekan-mongodb/issues/2#issuecomment-381453161
-            # https://github.com/meteor/meteor/issues/9796#issuecomment-381676326
-            # https://github.com/sandstorm-io/sandstorm/blob/0f1fec013fe7208ed0fd97eb88b31b77e3c61f42/shell/server/00-startup.js#L99-L129
-            # Also see beginning of wekan/server/authentication.js
-            #   import Fiber from "fibers";
-            #   Fiber.poolSize = 1e9;
-            # OLD: Download node version 8.12.0 prerelease build => Official node 8.12.0 has been released
-            # Description at https://releases.wekan.team/node.txt
-            ##echo "375bd8db50b9c692c0bbba6e96d4114cd29bee3770f901c1ff2249d1038f1348  node" >> node-SHASUMS256.txt.asc
-            ##curl https://releases.wekan.team/node -o node
-            # Verify Fibers patched node authenticity
-            ##echo "Fibers 100% CPU issue patched node authenticity:"
-            ##grep node node-SHASUMS256.txt.asc | shasum -a 256 -c -
-            ##rm -f node-SHASUMS256.txt.asc
-            ##chmod +x node
-            ##mv node `which node`
-            # DOES NOT WORK: paxctl fix.
-            # Removed from build-packages: - paxctl
-            #echo "Applying paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303"
-            #paxctl -mC `which node`
-            #echo "Installing npm"
-            #curl -L https://www.npmjs.com/install.sh | sh
-            echo "Installing meteor"
-            curl https://install.meteor.com/ -o install_meteor.sh
-            #sed -i "s|RELEASE=.*|RELEASE=\"1.8.1-beta.0\"|g" install_meteor.sh
-            chmod +x install_meteor.sh
-            sh install_meteor.sh
-            rm install_meteor.sh
-            # REPOS BELOW ARE INCLUDED TO WEKAN REPO
-            #if [ ! -d "packages" ]; then
-            #  mkdir packages
-            #fi
-            #if [ ! -d "packages/kadira-flow-router" ]; then
-            #  cd packages
-            #  git clone --depth 1 -b master https://github.com/wekan/flow-router.git kadira-flow-router
-            #  cd ..
-            #fi
-            #if [ ! -d "packages/meteor-useraccounts-core" ]; then
-            #  cd packages
-            #  git clone --depth 1 -b master https://github.com/meteor-useraccounts/core.git meteor-useraccounts-core
-            #  sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' meteor-useraccounts-core/package.js
-            #  cd ..
-            #fi
-            #if [ ! -d "packages/meteor-accounts-cas" ]; then
-            #  cd packages
-            #  git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-cas.git meteor-accounts-cas
-            #  cd ..
-            #fi
-            #if [ ! -d "packages/wekan-ldap" ]; then
-            #  cd packages
-            #  git clone --depth 1 -b master https://github.com/wekan/wekan-ldap.git
-            #  cd ..
-            #fi
-            #if [ ! -d "packages/wekan-scrollbar" ]; then
-            #  cd packages
-            #  git clone --depth 1 -b master https://github.com/wekan/wekan-scrollbar.git
-            #  cd ..
-            #fi
-            #if [ ! -d "packages/wekan_accounts-oidc" ]; then
-            #  cd packages
-            #  git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-oidc.git
-            #  mv meteor-accounts-oidc/packages/switch_accounts-oidc wekan-accounts-oidc
-            #  mv meteor-accounts-oidc/packages/switch_oidc wekan-oidc
-            #  rm -rf meteor-accounts-oidc
-            #  cd ..
-            #fi
-            #if [ ! -d "packages/markdown" ]; then
-            #  cd packages
-            #  git clone --depth 1 -b master --recurse-submodules https://github.com/wekan/markdown.git
-            #  cd ..
-            #fi
-            rm -rf .build
-            meteor add standard-minifier-js --allow-superuser
-            meteor npm install --allow-superuser
-            meteor npm install --allow-superuser --save babel-runtime
-            meteor build .build --directory --allow-superuser
-            cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/packages/cfs_access-point.js
-            #Removed binary version of bcrypt because of security vulnerability that is not fixed yet.
-            #https://github.com/wekan/wekan/commit/4b2010213907c61b0e0482ab55abb06f6a668eac
-            #https://github.com/wekan/wekan/commit/7eeabf14be3c63fae2226e561ef8a0c1390c8d3c
-            #cd .build/bundle/programs/server/npm/node_modules/meteor/npm-bcrypt
-            #rm -rf node_modules/bcrypt
-            #meteor npm install --save bcrypt
-            # Change from npm-bcrypt directory back to .build/bundle/programs/server directory.
-            #cd ../../../../
-            # Change to directory .build/bundle/programs/server
-            cd .build/bundle/programs/server
-            npm install
-            npm install --allow-superuser --save babel-runtime
-            #meteor npm install --save bcrypt
-            # Change back to Wekan source directory
-            cd ../../../..
-            cp -r .build/bundle/* $SNAPCRAFT_PART_INSTALL/
-            cp .build/bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-gyp/node_modules/tar/lib/.mkdir.js.swp
-            # Meteor 1.8.x additional .swp remove
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
-
-        organize:
-            README: README.wekan
-        prime:
-            - -lib/node_modules/node-pre-gyp/node_modules/tar/lib/.unpack.js.swp
-
-    helpers:
-        source: snap-src
-        plugin: dump
-
-    caddy:
-        plugin: dump
-        source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
-        source-type: tar
-        organize:
-          caddy: bin/caddy
-          CHANGES.txt: CADDY_CHANGES.txt
-          EULA.txt: CADDY_EULA.txt
-          LICENSES.txt: CADDY_LICENSES.txt
-          README.txt: CADDY_README.txt
-        stage:
-          - -init
@@ -1,198 +0,0 @@
-#!/bin/bash
-
-echo "Note: If you use other locale than en_US.UTF-8 , you need to additionally install en_US.UTF-8"
-echo "      with 'sudo dpkg-reconfigure locales' , so that MongoDB works correctly."
-echo "      You can still use any other locale as your main locale."
-
-#Below script installs newest node 8.x for Debian/Ubuntu/Mint.
-#NODE_VERSION=12.21.0
-#X64NODE="https://nodejs.org/dist/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64.tar.gz"
-
-function pause(){
-	read -p "$*"
-}
-
-function cprec(){
-	if [[ -d "$1" ]]; then
-		if [[ ! -d "$2" ]]; then
-			sudo mkdir -p "$2"
-		fi
-
-		for i in $(ls -A "$1"); do
-			cprec "$1/$i" "$2/$i"
-		done
-	else
-		sudo cp "$1" "$2"
-	fi
-}
-
-# sudo npm doesn't work right, so this is a workaround
-function npm_call(){
-	TMPDIR="/tmp/tmp_npm_prefix"
-	if [[ -d "$TMPDIR" ]]; then
-		rm -rf $TMPDIR
-	fi
-	mkdir $TMPDIR
-	NPM_PREFIX="$(npm config get prefix)"
-	npm config set prefix $TMPDIR
-	npm "$@"
-	npm config set prefix "$NPM_PREFIX"
-
-	echo "Moving files to $NPM_PREFIX"
-	for i in $(ls -A $TMPDIR); do
-		cprec "$TMPDIR/$i" "$NPM_PREFIX/$i"
-	done
-	rm -rf $TMPDIR
-}
-
-#function wekan_repo_check(){
-## UNCOMMENTING, IT'S NOT REQUIRED THAT /HOME/USERNAME IS /HOME/WEKAN
-#	git_remotes="$(git remote show 2>/dev/null)"
-#	res=""
-#	for i in $git_remotes; do
-#		res="$(git remote get-url $i | sed 's/.*wekan\/wekan.*/wekan\/wekan/')"
-#		if [[ "$res" == "wekan/wekan" ]]; then
-#		    break
-#		fi
-#	done
-#
-#	if [[ "$res" != "wekan/wekan" ]]; then
-#		echo "$PWD is not a wekan repository"
-#		exit;
-#	fi
-#}
-
-echo
-PS3='Please enter your choice: '
-options=("Install Wekan dependencies" "Build Wekan" "Run Meteor for dev on http://localhost:4000" "Run Meteor for dev on http://CURRENT-IP-ADDRESS:4000" "Run Meteor for dev on http://CUSTOM-IP-ADDRESS:PORT" "Quit")
-
-select opt in "${options[@]}"
-do
-    case $opt in
-        "Install Wekan dependencies")
-
-		if [[ "$OSTYPE" == "linux-gnu" ]]; then
-	                echo "Linux";
-			# Debian, Ubuntu, Mint
-			sudo apt-get install -y build-essential gcc g++ make git curl wget
-			# npm nodejs
-			#sudo npm -g install npm
-			curl -0 -L https://npmjs.org/install.sh | sudo sh
-			sudo chown -R $(id -u):$(id -g) $HOME/.npm
-			sudo npm -g install n
-			sudo n 12.21.0
-			#curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
-			#sudo apt-get install -y nodejs
-		elif [[ "$OSTYPE" == "darwin"* ]]; then
-		        echo "macOS";
-			pause '1) Install XCode 2) Install Node 8.x from https://nodejs.org/en/ 3) Press [Enter] key to continue.'
-		elif [[ "$OSTYPE" == "cygwin" ]]; then
-		        # POSIX compatibility layer and Linux environment emulation for Windows
-		        echo "TODO: Add Cygwin";
-			exit;
-		elif [[ "$OSTYPE" == "msys" ]]; then
-		        # Lightweight shell and GNU utilities compiled for Windows (part of MinGW)
-		        echo "TODO: Add msys on Windows";
-			exit;
-		elif [[ "$OSTYPE" == "win32" ]]; then
-		        # I'm not sure this can happen.
-		        echo "TODO: Add Windows";
-			exit;
-		elif [[ "$OSTYPE" == "freebsd"* ]]; then
-		        echo "TODO: Add FreeBSD";
-			exit;
-		else
-		        echo "Unknown"
-			echo ${OSTYPE}
-			exit;
-		fi
-
-		## Latest npm with Meteor 1.8.x
-		npm_call -g install npm
-		npm_call -g install node-gyp
-		# Latest fibers for Meteor 1.8.x
-		sudo mkdir -p /usr/local/lib/node_modules/fibers/.node-gyp
-		npm_call -g install fibers
-		# Install Meteor, if it's not yet installed
-		curl https://install.meteor.com | bash
-		sudo chown -R $(id -u):$(id -g) $HOME/.npm $HOME/.meteor
-		break
-		;;
-
-    "Build Wekan")
-		echo "Building Wekan."
-		#wekan_repo_check
-		# REPOS BELOW ARE INCLUDED TO WEKAN REPO
-		#rm -rf packages/kadira-flow-router packages/meteor-useraccounts-core packages/meteor-accounts-cas packages/wekan-ldap packages/wekan-ldap packages/wekan-scrfollbar packages/meteor-accounts-oidc packages/markdown
-		#mkdir packages
-		#cd packages
-		#git clone --depth 1 -b master https://github.com/wekan/flow-router.git kadira-flow-router
-		#git clone --depth 1 -b master https://github.com/meteor-useraccounts/core.git meteor-useraccounts-core
-		#git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-cas.git
-		#git clone --depth 1 -b master https://github.com/wekan/wekan-ldap.git
-		#git clone --depth 1 -b master https://github.com/wekan/wekan-scrollbar.git
-		#git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-oidc.git
-		#git clone --depth 1 -b master --recurse-submodules https://github.com/wekan/markdown.git
-                #mv meteor-accounts-oidc/packages/switch_accounts-oidc wekan_accounts-oidc
-                #mv meteor-accounts-oidc/packages/switch_oidc wekan_oidc
-                #rm -rf meteor-accounts-oidc
-		#if [[ "$OSTYPE" == "darwin"* ]]; then
-		#	echo "sed at macOS";
-		#	sed -i '' 's/api\.versionsFrom/\/\/api.versionsFrom/' ~/repos/wekan/packages/meteor-useraccounts-core/package.js
-		#else
-		#	echo "sed at ${OSTYPE}"
-		#	sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' ~/repos/wekan/packages/meteor-useraccounts-core/package.js
-		#fi
-		#cd ..
-		sudo chown -R $(id -u):$(id -g) $HOME/.npm $HOME/.meteor
-		rm -rf node_modules .meteor/local
-		npm install
-		rm -rf .build
-		meteor build .build --directory
-		cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/packages/cfs_access-point.js
-		# Remove legacy webbroser bundle, so that Wekan works also at Android Firefox, iOS Safari, etc.
-		rm -rf .build/bundle/programs/web.browser.legacy
-		#Removed binary version of bcrypt because of security vulnerability that is not fixed yet.
-		#https://github.com/wekan/wekan/commit/4b2010213907c61b0e0482ab55abb06f6a668eac
-		#https://github.com/wekan/wekan/commit/7eeabf14be3c63fae2226e561ef8a0c1390c8d3c
-		#cd ~/repos/wekan/.build/bundle/programs/server/npm/node_modules/meteor/npm-bcrypt
-		#rm -rf node_modules/bcrypt
-		#meteor npm install bcrypt
-		cd .build/bundle/programs/server
-		rm -rf node_modules
-		npm install
-		#meteor npm install bcrypt
-		cd ../../../..
-		echo Done.
-		break
-		;;
-
-    "Run Meteor for dev on http://localhost:4000")
-		WITH_API=true RICHER_CARD_COMMENT_EDITOR=false ROOT_URL=http://localhost:4000 meteor run --exclude-archs web.browser.legacy,web.cordova --port 4000
-		break
-		;;
-
-    "Run Meteor for dev on http://CURRENT-IP-ADDRESS:4000")
-		IPADDRESS=$(ip a | grep 'noprefixroute' | grep 'inet ' | cut -d: -f2 | awk '{ print $2}' | cut -d '/' -f 1)
-		echo "Your IP address is $IPADDRESS"
-		WITH_API=true RICHER_CARD_COMMENT_EDITOR=false ROOT_URL=http://$IPADDRESS:4000 meteor run --exclude-archs web.browser.legacy,web.cordova --port 4000
-		break
-		;;
-
-    "Run Meteor for dev on http://CUSTOM-IP-ADDRESS:PORT")
-		ip address
-		echo "From above list, what is your IP address?"
-		read IPADDRESS
-		echo "On what port you would like to run Wekan?"
-		read PORT
-		echo "ROOT_URL=http://$IPADDRESS:$PORT"
-    WITH_API=true RICHER_CARD_COMMENT_EDITOR=false ROOT_URL=http://$IPADDRESS:$PORT meteor run --exclude-archs web.browser.legacy,web.cordova --port $PORT
-		break
-    ;;
-
-    "Quit")
-		break
-    ;;
-    *) echo invalid option;;
-    esac
-done
@@ -1,155 +0,0 @@
-name: wekan
-version: git
-summary: The open-source kanban
-description: |
-   Wekan is an open-source and collaborative kanban board application.
-
-   Whether you’re maintaining a personal todo list, planning your holidays with some friends, or working in a team on your next revolutionary idea, Kanban boards are an unbeatable tool to keep your things organized. They give you a visual overview of the current state of your project, and make you productive by allowing you to focus on the few items that matter the most.
-   Depending on target environment, some configuration settings might need to be adjusted.
-   For full list of configuration options call:
-   $ wekan.help
-
-confinement: strict
-grade: stable
-base: core18
-
-architectures:
-  - amd64
-
-plugs:
-  mongodb-plug:
-    interface: content
-    target: $SNAP_DATA/shared
-
-hooks:
-  configure:
-    plugs:
-      - network
-      - network-bind
-
-slots:
-  mongodb-slot:
-    interface: content
-    write:
-      - $SNAP_DATA/share
-
-apps:
-    wekan:
-        command: wekan-control
-        daemon: simple
-        plugs: [network, network-bind]
-
-    mongodb:
-        command: mongodb-control
-        daemon: simple
-        plugs: [network, network-bind]
-
-    caddy:
-        command: caddy-control
-        daemon: simple
-        plugs: [network, network-bind]
-
-    help:
-        command: wekan-help
-
-    database-backup:
-        command: mongodb-backup
-        plugs: [network, network-bind]
-
-    database-list-backups:
-        command: ls -al $SNAP_COMMON/db-backups/
-
-    database-restore:
-        command: mongodb-restore
-        plugs: [network, network-bind]
-
-parts:
-    mongodb:
-        source: https://repo.mongodb.org/apt/ubuntu/dists/xenial/mongodb-org/4.2/multiverse/binary-amd64/mongodb-org-server_4.2.2_amd64.deb
-        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.14.tgz
-        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-3.2.22.tgz
-        plugin: dump
-        stage-packages: [libssl1.0.0, libcurl3]
-        filesets:
-            mongo:
-                - usr
-                - bin
-                - lib
-        stage:
-            - $mongo
-        prime:
-            - $mongo
-
-    wekan:
-        source: .
-        plugin: nodejs
-        node-engine: 14.19.0
-        node-packages:
-            - node-gyp
-            - node-pre-gyp
-            - fibers
-        build-packages:
-            - ca-certificates
-            - apt-utils
-            - build-essential
-            - python
-            - python3
-            - g++
-            - capnproto
-            - curl
-            - libcurl3
-            - execstack
-            - nodejs
-            - npm
-        stage-packages:
-            - libfontconfig1
-        override-build: |
-            echo "Cleaning environment first"
-            rm -rf ~/.meteor ~/.npm /usr/local/lib/node_modules
-            rm -rf .build
-            echo "Installing meteor"
-            curl https://install.meteor.com/ -o install_meteor.sh
-            chmod +x install_meteor.sh
-            sh install_meteor.sh
-            rm install_meteor.sh
-            rm -rf .build
-            meteor add standard-minifier-js --allow-superuser
-            meteor npm install --allow-superuser
-            meteor npm install --allow-superuser --save babel-runtime
-            meteor build .build --directory --allow-superuser
-            cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/packages/cfs_access-point.js
-            cd .build/bundle/programs/server
-            npm install
-            npm install --allow-superuser --save babel-runtime
-            # Change back to Wekan source directory
-            cd ../../../..
-            cp -r .build/bundle/* $SNAPCRAFT_PART_INSTALL/
-            cp .build/bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-gyp/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
-
-        organize:
-            README: README.wekan
-        prime:
-            - -lib/node_modules/node-pre-gyp/node_modules/tar/lib/.unpack.js.swp
-
-    helpers:
-        source: snap-src
-        plugin: dump
-
-    caddy:
-        plugin: dump
-        source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
-        source-type: tar
-        organize:
-          caddy: bin/caddy
-          CHANGES.txt: CADDY_CHANGES.txt
-          EULA.txt: CADDY_EULA.txt
-          LICENSES.txt: CADDY_LICENSES.txt
-          README.txt: CADDY_README.txt
-        stage:
-          - -init
@@ -1,183 +0,0 @@
-name: wekan
-version: '6.21'
-base: core20
-summary: Open Source kanban
-description: |
-   WeKan ® is an Open Source and collaborative kanban board application.
-
-   Whether you’re maintaining a personal todo list, planning your holidays with some friends, or working in a team on your next revolutionary idea, Kanban boards are an unbeatable tool to keep your things organized. They give you a visual overview of the current state of your project, and make you productive by allowing you to focus on the few items that matter the most.
-   Depending on target environment, some configuration settings might need to be adjusted.
-   For full list of configuration options call:
-   $ wekan.help
-
-confinement: strict
-grade: stable
-
-architectures:
-  - build-on: amd64
-    run-on: amd64
-
-  - build-on: arm64
-    run-on: arm64
-
-  - build-on: ppc64el
-    run-on: ppc64el
-
-  - build-on: s390x
-    run-on: s390x
-
-plugs:
-  mongodb-plug:
-    interface: content
-    target: $SNAP_DATA/shared
-
-hooks:
-  configure:
-    plugs:
-      - network
-      - network-bind
-
-slots:
-  mongodb-slot:
-    interface: content
-    write:
-      - $SNAP_DATA/share
-
-apps:
-    wekan:
-        command: wekan-control
-        daemon: simple
-        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
-        restart-condition: on-failure
-
-    mongodb:
-        command: mongodb-control
-        daemon: simple
-        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
-        restart-condition: on-failure
-
-    caddy:
-        command: caddy-control
-        daemon: simple
-        plugs: [network, network-bind]
-
-    help:
-        command: wekan-help
-
-    database-backup:
-        command: mongodb-backup
-        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
-
-    database-list-backups:
-        command: ls -al $SNAP_COMMON/db-backups/
-
-    database-restore:
-        command: mongodb-restore
-        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
-
-parts:
-    mongodb:
-        plugin: dump
-        source:
-          - on amd64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-amd64/mongodb-org-server_4.4.13_amd64.deb
-          - on arm64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-arm64/mongodb-org-server_4.4.13_arm64.deb
-          - on ppc64el: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-ppc64el/mongodb-org-server_4.4.13_ppc64el.deb
-          - on s390x: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-s390x/mongodb-org-server_4.4.13_s390x.deb
-        stage-packages:
-            - libssl1.1
-            - libcurl3-dev
-            - libcurl4-openssl-dev
-        filesets:
-            mongo:
-                - usr
-                - bin
-                - lib
-        stage:
-            - $mongo
-        prime:
-            - $mongo
-
-    wekan:
-        #plugin: npm
-        plugin: dump
-        source:
-        # Fixed URLs to some allowed GitHub releases URL.
-        # Non-GitHub build server file urls are not allowed at 2022-03-02 and later.
-          - on amd64: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-amd64.zip
-          - on arm64: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-arm64.zip
-          - on ppc64el: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-ppc64el.zip
-          - on s390x: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-s390x.zip
-#        npm-node-version: 14.19.1
-#        node-packages:
-#            - node-gyp
-#            - node-pre-gyp
-#            - fibers
-#        build-packages:
-#          - npm
-#            - build-essential
-#            - ca-certificates
-#            - apt-utils
-#            - python
-#            - python3
-#            - g++
-#            - capnproto
-#            - curl
-#            - execstack
-#            - nodejs
-#            - npm
-#          - p7zip-full
-#        stage-packages:
-#            - libfontconfig1
-        override-build: |
-          cp -r bundle/* $SNAPCRAFT_PART_INSTALL/
-          cp bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
-          rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
-          snapcraftctl build
-        organize:
-            README: README.wekan
-        prime:
-            - -lib/node_modules/node-pre-gyp/node_modules/tar/lib/.unpack.js.swp
-            - -lib/node_modules/weka*
-
-    helpers:
-        source: snap-src
-        plugin: dump
-
-    caddy:
-        plugin: dump
-        ## Caddy v1 is not developed anymore. TODO: Sometime migrate to Caddy v2.
-        ## https://caddy.community/t/caddyfile-v1-adapter/9129
-        ## https://github.com/caddyserver/caddy/tree/v1
-        #source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
-        #source-type: tar
-        # Using last working binary that was downloaded from above URL to Wekan Snap,
-        # and .txt files from https://github.com/caddyserver/caddy/tree/v1/dist
-        source: https://wekan.github.io/caddy-v1-linux-amd64.7z
-        source-type: 7z
-        organize:
-          caddy: bin/caddy
-          CHANGES.txt: CADDY_CHANGES.txt
-          EULA.txt: CADDY_EULA.txt
-          LICENSES.txt: CADDY_LICENSES.txt
-          README.txt: CADDY_README.txt
-        stage:
-          - -init
-
-    caddy2:
-        plugin: dump
-        source:
-        # Fixed URLs to some allowed GitHub releases URL.
-        # Non-GitHub build server file urls are not allowed at 2022-03-02 and later.
-          - on amd64: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-amd64.zip
-          - on arm64: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-arm64.zip
-          - on ppc64el: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-ppc64el.zip
-          - on s390x: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-s390x.zip
-        source-type: zip
-        organize:
-          caddy: bin/caddy
-          CHANGES.txt: CADDY_CHANGES.txt
-          EULA.txt: CADDY_EULA.txt
-          LICENSES.txt: CADDY_LICENSES.txt
-          README.txt: CADDY_README.txt
-        stage:
-          - -init
@@ -1,3 +1,3 @@
 # These are supported funding model platforms

-custom: ['https://wekan.team/commercial-support/']
+custom: ['https://wekan.fi/commercial-support/']
@@ -1,18 +1,27 @@
 ## Issue
-<!--
-**[PLEASE UPGRADE](https://github.com/wekan/wekan/wiki/Backup)** to the newest WeKan ® before reporting an 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
-
-The following types of issues should be reported separately:
- SECURITY ISSUES: https://github.com/wekan/wekan/blob/master/SECURITY.md
- UCS: https://github.com/wekan/univention/issues
-->
+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. -->
+
+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:
@@ -23,13 +32,25 @@ The following types of issues should be reported separately:
 * 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. -->
+
+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 Chrome shows more detailed info than Firefox. -->

-<!-- Please anonymize logs.
+
+#### 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 -->
+
+If logs are very long, attach them in .zip file
+
@@ -1,69 +0,0 @@
-name: "CodeQL"
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [master]
-  schedule:
-    - cron: '0 16 * * 3'
-
-permissions:
-  contents: read
-
-jobs:
-  analyze:
-    permissions:
-      actions: read  # for github/codeql-action/init to get workflow details
-      contents: read  # for actions/checkout to fetch code
-      security-events: write  # for github/codeql-action/autobuild to send a status report
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        # Override automatic language detection by changing the below list
-        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ['javascript', 'python']
-        # Learn more...
-        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
-
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
@@ -9,6 +9,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout Repository'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
      - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v3
+        uses: actions/dependency-review-action@v4
@@ -9,11 +9,11 @@ on:
  schedule:
    - cron: '28 23 * * *'
  push:
-    branches: [ master ]
+    branches: [ main ]
    # Publish semver tags as releases.
    tags: [ 'v*.*.*' ]
  pull_request:
-    branches: [ master ]
+    branches: [ main ]

 env:
  # Use docker.io for Docker Hub if empty
@@ -32,13 +32,13 @@ jobs:

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

      # 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@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef
        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@507c2f2dc502c992ad446e3d7a5dfbe311567a96
+        uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f
        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@3b5e8027fcad23fda98b2e3ac259d8d67585f671
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
        with:
          context: .
          push: ${{ github.event_name != 'pull_request' }}
@@ -3,7 +3,7 @@ name: Docker Image CI
 on:
  push:
    branches:
-      - master
+      - main

 permissions:
  contents: read
@@ -15,6 +15,6 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v5
    - name: Build the Docker image
      run: docker build . --file Dockerfile --tag wekan:$(date +%s)
@@ -3,7 +3,7 @@ name: Release Charts
 on:
  push:
    branches:
-      - master
+      - main

 permissions:
  contents: read
@@ -15,7 +15,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
        with:
          fetch-depth: 0

@@ -25,6 +25,6 @@ jobs:
          git config user.email "$GITHUB_ACTOR@users.noreply.github.com"

      - name: Run chart-releaser
-        uses: helm/chart-releaser-action@v1.5.0
+        uses: helm/chart-releaser-action@v1.7.0
        env:
          CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
@@ -3,7 +3,7 @@ name: Test suite
 on:
  push:
    branches:
-      - master
+      - main
  pull_request:

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

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

      # CACHING
      - name: Install Meteor
        id: cache-meteor-install
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        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@v3
+        uses: actions/cache@v4
        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@v3
+        uses: actions/cache@v4
        with:
          path: |
            .meteor/local/resolver-result-cache.json
@@ -125,7 +125,7 @@ jobs:
            v1-meteor_build_cache-

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

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

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

      - name: Download coverage
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v5
        with:
          name: coverage-folder
          path: .coverage/


      - name: Coverage Report
-        uses: VeryGoodOpenSource/very_good_coverage@v2.1.0
+        uses: VeryGoodOpenSource/very_good_coverage@v3.0.0
        with:
          path: ".coverage/lcov.info"
          min_coverage: 1 # TODO add tests and increase to 95!
@@ -6,7 +6,7 @@
 meteor-base@1.5.1

 # Build system
-ecmascript@0.16.5
+ecmascript@0.16.8
 standard-minifier-js@2.8.1
 mquandalle:jade
 coffeescript@2.4.1!
@@ -16,16 +16,15 @@ es5-shim@4.8.0

 # Collections
 aldeed:collection2
-cfs:standard-packages
 cottz:publish-relations
 dburles:collection-helpers
 idmontie:migrations
 easy:search
-mongo@1.16.4
+mongo@1.16.8
 mquandalle:collection-mutations

 # Account system
-accounts-password@2.3.3
+accounts-password@2.4.0
 useraccounts:core
 useraccounts:flow-routing
 useraccounts:unstyled
@@ -39,39 +38,34 @@ wekan-accounts-oidc

 # Utilities
 check@1.3.2
-jquery@1.11.10
+jquery@3.0.0!
 random@1.2.1
 reactive-dict@1.3.1
 session@1.2.1
-tracker@1.3.0
-underscore@1.0.11
+tracker@1.3.3
+underscore@1.0.13
 arillo:flow-router-helpers
 audit-argument-checks@1.0.7
-kadira:blaze-layout
 kadira:dochead
 mquandalle:autofocus
 ongoworks:speakingurl
 raix:handlebar-helpers
 http@2.0.0! # force new http package

+# Datepicker (disabled - using native HTML inputs)
+# wekan-bootstrap-datepicker
+
 # UI components
-blaze
 ostrio:i18n
 reactive-var@1.0.12
-fortawesome:fontawesome
 mousetrap:mousetrap
 mquandalle:jquery-textcomplete
 mquandalle:mousetrap-bindglobal
-peerlibrary:blaze-components
 templates:tabs
 meteor-autosize
-rajit:bootstrap3-datepicker
 shell-server@0.5.0
-email@2.2.3
-horka:swipebox
-dynamic-import@0.7.2
-cfs:gridfs
-rzymek:fullcalendar
+email@2.2.5
+dynamic-import@0.7.3
 msavin:usercache
 # Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
 meteorhacks:subs-manager
@@ -79,58 +73,8 @@ meteorhacks:aggregate@1.3.0
 wekan-markdown
 konecty:mongo-counter
 percolate:synced-cron
-cfs:filesystem
 ostrio:cookies
 ostrio:files@2.3.0
-rajit:bootstrap3-datepicker-fi
-rajit:bootstrap3-datepicker-ar
-rajit:bootstrap3-datepicker-bg
-rajit:bootstrap3-datepicker-br
-rajit:bootstrap3-datepicker-ca
-rajit:bootstrap3-datepicker-cs
-rajit:bootstrap3-datepicker-da
-rajit:bootstrap3-datepicker-de
-rajit:bootstrap3-datepicker-el
-rajit:bootstrap3-datepicker-en-gb
-rajit:bootstrap3-datepicker-eo
-rajit:bootstrap3-datepicker-es
-rajit:bootstrap3-datepicker-eu
-rajit:bootstrap3-datepicker-fa
-rajit:bootstrap3-datepicker-fr
-rajit:bootstrap3-datepicker-gl
-rajit:bootstrap3-datepicker-he
-rajit:bootstrap3-datepicker-hi
-rajit:bootstrap3-datepicker-hu
-rajit:bootstrap3-datepicker-hy
-rajit:bootstrap3-datepicker-id
-rajit:bootstrap3-datepicker-it
-rajit:bootstrap3-datepicker-ja
-rajit:bootstrap3-datepicker-ka
-rajit:bootstrap3-datepicker-km
-rajit:bootstrap3-datepicker-ko
-rajit:bootstrap3-datepicker-lv
-rajit:bootstrap3-datepicker-mk
-rajit:bootstrap3-datepicker-mn
-rajit:bootstrap3-datepicker-nb
-rajit:bootstrap3-datepicker-nl
-rajit:bootstrap3-datepicker-oc
-rajit:bootstrap3-datepicker-pl
-rajit:bootstrap3-datepicker-pt-br
-rajit:bootstrap3-datepicker-pt
-rajit:bootstrap3-datepicker-ro
-rajit:bootstrap3-datepicker-ru
-rajit:bootstrap3-datepicker-sl
-rajit:bootstrap3-datepicker-sr
-rajit:bootstrap3-datepicker-sv
-rajit:bootstrap3-datepicker-sw
-rajit:bootstrap3-datepicker-ta
-rajit:bootstrap3-datepicker-th
-rajit:bootstrap3-datepicker-tr
-rajit:bootstrap3-datepicker-uk
-rajit:bootstrap3-datepicker-vi
-rajit:bootstrap3-datepicker-zh-cn
-rajit:bootstrap3-datepicker-zh-tw
-easylogic:summernote
 pascoual:pdfkit
 lmieulet:meteor-coverage
 meteortesting:mocha@2.0.3
@@ -139,6 +83,14 @@ matb33:collection-hooks
 simple:json-routes
 kadira:flow-router
 spacebars
-service-configuration@1.3.1
+service-configuration@1.3.2
 communitypackages:picker
-minifier-css@1.6.2
+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
@@ -1 +1 @@
-METEOR@2.10.0
+METEOR@2.14
@@ -1,6 +1,6 @@
-accounts-base@2.2.6
-accounts-oauth@1.4.2
-accounts-password@2.3.3
+accounts-base@2.2.10
+accounts-oauth@1.4.3
+accounts-password@2.4.0
 aldeed:collection2@2.10.0
 aldeed:collection2-core@1.2.0
 aldeed:schema-deny@1.1.0
@@ -10,63 +10,42 @@ 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.2
+babel-compiler@7.10.5
 babel-runtime@1.5.1
 base64@1.0.12
 binary-heap@1.0.11
-blaze@2.6.1
+blaze@2.7.1
 blaze-tools@1.1.3
-boilerplate-generator@1.7.1
+boilerplate-generator@1.7.2
 caching-compiler@1.2.2
 caching-html-compiler@1.2.1
-callback-hook@1.5.0
-cfs:access-point@0.1.49
-cfs:base-package@0.0.30
-cfs:collection@0.5.5
-cfs:collection-filters@0.2.4
-cfs:data-man@0.0.6
-cfs:file@0.1.17
-cfs:filesystem@0.1.2
-cfs:gridfs@0.0.34
-cfs:http-methods@0.0.32
-cfs:http-publish@0.0.13
-cfs:power-queue@0.9.11
-cfs:reactive-list@0.0.9
-cfs:reactive-property@0.0.4
-cfs:standard-packages@0.5.10
-cfs:storage-adapter@0.2.4
-cfs:tempstore@0.1.6
-cfs:upload-http@0.0.20
-cfs:worker@0.1.5
+callback-hook@1.5.1
 check@1.3.2
-coffeescript@2.4.1
+coffeescript@2.7.0
 coffeescript-compiler@2.4.1
-communitypackages:picker@1.1.0
+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-rate-limiter@1.1.1
-ddp-server@2.6.0
+ddp-rate-limiter@1.2.1
+ddp-server@2.7.0
 deps@1.0.12
 diff-sequence@1.1.2
-dynamic-import@0.7.2
+dynamic-import@0.7.3
 easy:search@2.2.1
-easylogic:summernote@0.8.8
 easysearch:components@2.2.2
 easysearch:core@2.2.2
-ecmascript@0.16.5
-ecmascript-runtime@0.8.0
+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.3
+email@2.2.5
 es5-shim@4.8.0
-fetch@0.1.3
-fortawesome:fontawesome@4.7.0
+fetch@0.1.4
 geojson-utils@1.0.11
-horka:swipebox@1.0.2
 hot-code-push@1.0.4
 html-tools@1.1.3
 htmljs@1.1.1
@@ -74,18 +53,17 @@ http@2.0.0
 id-map@1.1.1
 idmontie:migrations@1.0.3
 inter-process-messaging@0.1.1
-jquery@1.11.11
+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
-livedata@1.0.18
 lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.3.1
-matb33:collection-hooks@1.2.0
+logging@1.3.3
+matb33:collection-hooks@1.3.0
 mdg:validation-error@0.5.1
-meteor@1.11.0
+meteor@1.11.5
 meteor-autosize@5.0.1
 meteor-base@1.5.1
 meteorhacks:aggregate@1.3.0
@@ -93,17 +71,17 @@ meteorhacks:collection-utils@1.2.0
 meteorhacks:picker@1.0.3
 meteorhacks:subs-manager@1.6.4
 meteortesting:browser-tests@1.4.2
-meteortesting:mocha@2.0.4
+meteortesting:mocha@2.1.0
 meteortesting:mocha-core@8.0.1
-minifier-css@1.6.2
+minifier-css@1.6.4
 minifier-js@2.7.5
 minifiers@1.1.8-faster-rebuild.0
-minimongo@1.9.1
-modern-browsers@0.1.9
-modules@0.19.0
+minimongo@1.9.3
+modern-browsers@0.1.10
+modules@0.20.0
 modules-runtime@0.13.1
 momentjs:moment@2.29.3
-mongo@1.16.4
+mongo@1.16.8
 mongo-decimal@0.1.3
 mongo-dev-server@1.1.0
 mongo-id@1.0.8
@@ -116,16 +94,16 @@ 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.12.1
-oauth@2.1.3
+npm-mongo@4.17.2
+oauth@2.2.1
 oauth2@1.3.2
-observe-sequence@1.0.20
+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.2
-ostrio:i18n@3.2.0
+ostrio:files@2.3.3
+ostrio:i18n@3.2.1
 pascoual:pdfkit@1.0.7
 peerlibrary:assert@0.3.0
 peerlibrary:base-component@0.17.1
@@ -133,79 +111,29 @@ 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.3.2
+percolate:synced-cron@1.5.2
 promise@0.12.2
 raix:eventemitter@0.1.3
 raix:handlebar-helpers@0.2.5
-rajit:bootstrap3-datepicker@1.7.1_1
-rajit:bootstrap3-datepicker-ar@1.7.1
-rajit:bootstrap3-datepicker-bg@1.7.1
-rajit:bootstrap3-datepicker-br@1.7.1
-rajit:bootstrap3-datepicker-ca@1.7.1
-rajit:bootstrap3-datepicker-cs@1.7.1
-rajit:bootstrap3-datepicker-da@1.7.1
-rajit:bootstrap3-datepicker-de@1.7.1
-rajit:bootstrap3-datepicker-el@1.7.1
-rajit:bootstrap3-datepicker-en-gb@1.7.1
-rajit:bootstrap3-datepicker-eo@1.7.1
-rajit:bootstrap3-datepicker-es@1.7.1
-rajit:bootstrap3-datepicker-eu@1.7.1
-rajit:bootstrap3-datepicker-fa@1.7.1
-rajit:bootstrap3-datepicker-fi@1.7.1
-rajit:bootstrap3-datepicker-fr@1.7.1
-rajit:bootstrap3-datepicker-gl@1.7.1
-rajit:bootstrap3-datepicker-he@1.7.1
-rajit:bootstrap3-datepicker-hi@1.7.1
-rajit:bootstrap3-datepicker-hu@1.7.1
-rajit:bootstrap3-datepicker-hy@1.7.1
-rajit:bootstrap3-datepicker-id@1.7.1
-rajit:bootstrap3-datepicker-it@1.7.1
-rajit:bootstrap3-datepicker-ja@1.7.1
-rajit:bootstrap3-datepicker-ka@1.7.1
-rajit:bootstrap3-datepicker-km@1.7.1
-rajit:bootstrap3-datepicker-ko@1.7.1
-rajit:bootstrap3-datepicker-lv@1.7.1
-rajit:bootstrap3-datepicker-mk@1.7.1
-rajit:bootstrap3-datepicker-mn@1.7.1
-rajit:bootstrap3-datepicker-nb@1.7.1
-rajit:bootstrap3-datepicker-nl@1.7.1
-rajit:bootstrap3-datepicker-oc@1.7.1
-rajit:bootstrap3-datepicker-pl@1.7.1
-rajit:bootstrap3-datepicker-pt@1.7.1
-rajit:bootstrap3-datepicker-pt-br@1.7.1
-rajit:bootstrap3-datepicker-ro@1.7.1
-rajit:bootstrap3-datepicker-ru@1.7.1
-rajit:bootstrap3-datepicker-sl@1.7.1
-rajit:bootstrap3-datepicker-sr@1.7.1
-rajit:bootstrap3-datepicker-sv@1.7.1
-rajit:bootstrap3-datepicker-sw@1.7.1
-rajit:bootstrap3-datepicker-ta@1.7.1
-rajit:bootstrap3-datepicker-th@1.7.1
-rajit:bootstrap3-datepicker-tr@1.7.1
-rajit:bootstrap3-datepicker-uk@1.7.1
-rajit:bootstrap3-datepicker-vi@1.7.1
-rajit:bootstrap3-datepicker-zh-cn@1.7.1
-rajit:bootstrap3-datepicker-zh-tw@1.7.1
 random@1.2.1
-rate-limit@1.0.9
-react-fast-refresh@0.2.5
+rate-limit@1.1.1
+react-fast-refresh@0.2.8
 reactive-dict@1.3.1
 reactive-var@1.0.12
 reload@1.3.1
 retry@1.1.0
 routepolicy@1.1.1
-rzymek:fullcalendar@3.8.0
-service-configuration@1.3.1
+service-configuration@1.3.3
 session@1.2.1
 sha@1.0.9
 shell-server@0.5.0
 simple:authenticate-user-by-token@1.2.1
 simple:json-routes@2.3.1
-simple:rest-accounts-password@1.2.1
+simple:rest-accounts-password@1.2.2
 simple:rest-bearer-token-parser@1.1.1
 simple:rest-json-error-handler@1.1.1
-socket-stream-client@0.5.0
-spacebars@1.3.0
+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
@@ -213,23 +141,24 @@ templating@1.4.1
 templating-compiler@1.4.1
 templating-runtime@1.5.0
 templating-tools@1.2.2
-tracker@1.3.0
-twbs:bootstrap@3.3.6
+tracker@1.3.3
+typescript@4.9.5
 ui@1.0.13
-underscore@1.0.11
+underscore@1.0.13
 url@1.3.2
 useraccounts:core@1.16.2
 useraccounts:flow-routing@1.15.0
 useraccounts:unstyled@1.14.2
-webapp@1.13.3
+webapp@1.13.6
 webapp-hashing@1.1.1
 wekan-accounts-cas@0.1.0
 wekan-accounts-lockout@1.0.0
 wekan-accounts-oidc@1.0.10
 wekan-accounts-sandstorm@0.8.0
+wekan-fullcalendar@3.10.5
 wekan-ldap@0.0.2
 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.9
+zodern:types@1.0.10
@@ -1,10 +1,9 @@
 [main]
 host     = https://www.transifex.com
-lang_map = 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
+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

 [o:wekan:p:wekan:r:application]
 file_filter = imports/i18n/data/<lang>.i18n.json
 source_file = imports/i18n/data/en.i18n.json
 source_lang = en
 type        = KEYVALUEJSON
-
@@ -1,55 +0,0 @@
-# This is the configuration of the Transifex tool that we use to manage the
-# translations on Wekan. Documentation at: http://docs.transifex.com/client.
-#
-# Push
-# ====
-#
-# It is recommended that contributors use the Transifex web UI to create and
-# edit translated strings. However in case a contributor has directly jumped
-# into the code and made its translations in the corresponding i18n.json file
-# we can push it using
-#
-# > tx push -t -l ar
-#
-# Where `ar` is the language identifier. In addition, the project maintainer
-# should push the English source file to Transifex at least before each release
-# candidate using:
-#
-# > tx push -s
-#
-# Pull
-# ====
-#
-# The set of accepted language is directly managed in Transifex, the only
-# restriction we define to bundle a new language in the application, is that its
-# completion is at least at 75%.
-#
-# We use:
-#
-# > tx pull
-#
-# to download new versions of existing translations, and
-#
-# > tx pull -a --minimum-perc=75
-#
-# to download new sufficiently advanced translations.
-
-[main]
-host = https://www.transifex.com
-# tap:i18n requires us to use `-` separator in the language identifiers whereas
-# Transifex uses a `_` separator, without an option to customize it on one side
-# or the other, so we need to do a Manual mapping.
-lang_map = ar_DZ:ar-DZ, ar_EG:ar-EG, az_AZ:az-AZ, az@latin:az-LA, bg_BG:bg, cs_CZ:cs-CZ, cy_GB:cy-GB, de_AT:de-AT, de_CH:de-CH, en_BR:en-BR, en_DE:en-DE, en_IT:en-IT, en_GB:en-GB, en_MY:en-MY, et_EE:et-EE, ast_ES:ast-ES, es_AR:es-AR, en@ysv:en-YS, es_CL:es-CL, es_419:es-LA, es_PE:es-PE, es_MX:es-MX, es_TX:es-TX, es_PY:es-PY, el_GR:el-GR, fa_IR:fa-IR, ja-Hira:ja-HI, ja_JP:ja, fi_FI:fi, fr_FR:fr-FR, fr_CH:fr-CH, fy_NL:fy-NL, gl_ES:gl-ES, gu_IN:gu-IN, he_IL:he-IL, hi_IN:hi-IN, hu_HU:hu, id_ID:id, mn_MN:mn, ms_MY:ms-MY, nl_NL:nl-NL, ko_KR:ko-KR, lv_LV:lv, pl_PL:pl-PL, pt_BR:pt-BR, ro_RO:ro-RO, ru_UA:ru-UA, sl_SI:sl, uk_UA:uk-UA, uz@Arab:uz-AR, uz@Latn:uz-LA, uz_UZ:uz-UZ, vec:ve-CC, vep:ve-PP, vls:vl-SS, war:wa-RR, vi_VN:vi-VN, zh_CN:zh-CN, zh_TW:zh-TW, zh_Hans:zh-Hans, zh_HK:zh-HK, zu_ZA:zu-ZA
-
-[wekan.application]
-file_filter = imports/i18n/data/<lang>.i18n.json
-source_lang = en
-type = KEYVALUEJSON
-
-# We might have a dedicated second resource later to translate the “Welcome
-# Board” data.
-#
-# [wekan.welcomeBoard]
-# file_filter = private/welcomeBoard/<lang>.json
-# source_lang = en
-# type = KEYVALUEJSON
@@ -1,45 +1,57 @@
 {
  "version": "0.2.0",
  "configurations": [
-      {
-          "type": "chrome",
-          "request": "launch",
-          "name": "Meteor: Chrome",
-          "url": "http://localhost:3000",
-          "webRoot": "${workspaceFolder}"
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Meteor: Node",
+      "runtimeExecutable": "meteor",
+      "runtimeArgs": [
+        "--port=4000",
+        "--exclude-archs=web.browser.legacy,web.cordova",
+        "--raw-logs"
+      ],
+      "env": {
+        "WRITABLE_PATH": "/tmp/uploads",
      },
-      {
-          "type": "node",
-          "request": "launch",
-          "name": "Meteor: Node",
-          "runtimeExecutable": "/home/wekan/.meteor/meteor",
-          "runtimeArgs": ["run", "--inspect-brk=9229"],
-          "outputCapture": "std",
-          "port": 9229,
-          "timeout": 60000
+      "outputCapture": "std",
+      "restart": true,
+      "timeout": 60000
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Meteor: Chrome",
+      "url": "http://localhost:4000",
+      "sourceMapPathOverrides": {
+        "meteor://💻app/*": "${workspaceFolder}/*"
      },
-      {
-          "type": "node",
-          "request": "launch",
-          "name": "Test: Node",
-          "runtimeExecutable": "meteor",
-          "runtimeArgs": [
-            "test",
-            "--inspect-brk=9229",
-            "--port=4040",
-            "--exclude-archs=web.browser.legacy,web.cordova",
-            "--driver-package=meteortesting:mocha",
-            "--settings=settings.json"
-          ],
-          "outputCapture": "std",
-          "port": 9229,
-          "timeout": 60000
-      }
+      "userDataDir": "${env:HOME}/.vscode/chrome"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Test: Node",
+      "runtimeExecutable": "meteor",
+      "runtimeArgs": [
+        "test",
+        "--port=4040",
+        "--exclude-archs=web.browser.legacy,web.cordova",
+        "--driver-package=meteortesting:mocha",
+        "--settings=settings.json",
+        "--raw-logs"
+      ],
+      "env": {
+        "TEST_WATCH": "1"
+      },
+      "outputCapture": "std",
+      "timeout": 60000
+    }
  ],
  "compounds": [
-      {
-          "name": "Meteor: All",
-          "configurations": ["Meteor: Node", "Meteor: Chrome"]
-      }
+    {
+      "name": "Meteor: All",
+      "configurations": ["Meteor: Node", "Meteor: Chrome"]
+    }
  ]
 }
@@ -1,12 +1,13 @@
 {
-  "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"]
+}
@@ -0,0 +1,22 @@
+# Code of Conduct
+
+For all code at WeKan GitHub Organization https://github.com/wekan
+
+- All code in pull requests need to have permission already to add it to WeKan with MIT license, and will become MIT license.
+- All code xet7 add is MIT license.
+- For any dependencies, permissive licenses like https://copyfree.org are preferred
+- For anything currently that is non-permissive (like GPL, AGPL, SSPL), those will be replaced with permissive-licensed alternatives
+
+# Reporting about violations or something else
+
+## Private reports
+
+- Email support@wekan.fi
+- Security issues: [SECURITY.md](SECURITY.md)
+- License violations
+- Anything private, sensitive or negative
+
+## Public
+
+- Feature Requests and Bug Reports https://github.com/wekan/wekan/issues
+- Anything happy, positive, encouraging, helping, at friendly WeKan Global FOSS Community
@@ -1,19 +1,35 @@
+## About money
+
+Not paid:
+
+- Money is not paid for these, everyone uses their own time at their own cost:
+  - Security reports, see [SECURITY.md](SECURITY.md)
+  - Pull requests
+  - xet7 checking pull requests
+- Public Community Support
+  - https://github.com/wekan/wekan/issues
+
+Paid by customers of WeKan Team:
+
+- Commercial Support at https://wekan.fi/commercial-support/
+  - Support
+  - Private Chat
+  - Features
+  - Fixes
+  - Hosting
+
 ## Contributing Security related

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

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

 ## Contributing to Documentation Wiki

-Please clone wiki:
-```
-git clone https://github.com/wekan/wekan.wiki
-```
-Edit .md files, and add changed files in .zip attachment
-directly to comment of new issue at
-https://github.com/wekan/wekan/issues 
+Fork WeKan repo https://github.com/wekan/wekan ,
+edit `docs` directory content at GitHub web interface,
+and click send PR.

 ## Contributing code

@@ -22,7 +38,7 @@ https://github.com/wekan/wekan/issues
 WeKan code contributors Hall of Fame is at ChangeLog, where
 GitHub usernames are mentioned with changes added:

-https://github.com/wekan/wekan/blob/master/CHANGELOG.md
+https://github.com/wekan/wekan/blob/main/CHANGELOG.md

 Changes can be like typo fixes, bugfixes, features, or anything else
 like for example at open GitHub issues https://github.com/wekan/wekan/issues .
@@ -42,7 +58,7 @@ About 300 persons have contributed to WeKan, stats at:

 https://www.openhub.net/p/wekan

-WeKan maintainer xet7 checks PR for typos etc before accepting to WeKan,
+WeKan maintainer xet7 reviews PR for typos etc before accepting to WeKan,
 so that WeKan code will still work OK.

 ## Contributing translations
@@ -53,7 +69,7 @@ https://transifex.com/wekan/wekan
 When adding new features, in your PR to
 https://github.com/wekan/wekan/pulls
 only add new English source language strings
-to https://github.com/wekan/wekan/blob/master/imports/i18n/data/en.i18n.json
+to https://github.com/wekan/wekan/blob/main/imports/i18n/data/en.i18n.json

 Maintainer of WeKan xet7 downloads all newest
 translations from Transifex and adds
@@ -62,12 +78,10 @@ new release.

 ## About WeKan Organization https://github.com/wekan

-xet7 rarely adds any new members to GitHub Organization,
-because xet7 prefers to check PRs.
+Only xet7 has write access to WeKan Organization.

-For some repos (other than https://github.com/wekan/wekan ),
-some contributors have direct commit access.
+xet7 reviews all PRs before merging.

-Some contributors are mentioned at this outdated page:
+There has been over 300 contributors to WeKan, newest stats at:

-https://github.com/wekan/wekan/wiki/Team
+https://www.openhub.net/p/wekan
@@ -1,10 +1,8 @@
-FROM --platform=linux/amd64 ubuntu:22.10 as wekan
+FROM ubuntu:24.04
 LABEL maintainer="wekan"
-
-# 2022-09-04:
-# - above "--platform=linux/amd64 ubuntu:22.04 as wekan" is needed to build Dockerfile
-#   correctly on Mac M1 etc, to not get this error:
-#   https://stackoverflow.com/questions/71040681/qemu-x86-64-could-not-open-lib64-ld-linux-x86-64-so-2-no-such-file-or-direc
+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,
@@ -13,24 +11,23 @@ LABEL maintainer="wekan"
 # 2021-09-18:
 # - Above Ubuntu base image copied from Docker Hub ubuntu:hirsute-20210825
 #   to Quay to avoid Docker Hub rate limits.
-
-# Set the environment variables (defaults where required)
-# DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
-# ENV BUILD_DEPS="paxctl"
 ARG DEBIAN_FRONTEND=noninteractive

-ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-essential git ca-certificates python3" \
+ENV BUILD_DEPS="apt-utils gnupg gosu wget bzip2 g++ curl libarchive-tools build-essential git ca-certificates python3 unzip"
+
+ENV \
    DEBUG=false \
-    NODE_VERSION=v14.21.3 \
-    METEOR_RELEASE=2.8.1 \
+    NODE_VERSION=v14.21.4 \
+    METEOR_RELEASE=METEOR@2.14 \
    USE_EDGE=false \
    METEOR_EDGE=1.5-beta.17 \
-    NPM_VERSION=latest \
+    NPM_VERSION=6.14.17 \
    FIBERS_VERSION=4.0.1 \
    ARCHITECTURE=linux-x64 \
    SRC_PATH=./ \
    WITH_API=true \
    RESULTS_PER_PAGE="" \
+    DEFAULT_BOARD_ID="" \
    ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
    ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
    ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
@@ -65,9 +62,11 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
    OIDC_REDIRECTION_ENABLED=false \
    OAUTH2_CA_CERT="" \
    OAUTH2_ADFS_ENABLED=false \
+    OAUTH2_B2C_ENABLED=false \
    OAUTH2_LOGIN_STYLE=redirect \
    OAUTH2_CLIENT_ID="" \
    OAUTH2_SECRET="" \
+    OAUTH2_SECRET_FILE="" \
    OAUTH2_SERVER_URL="" \
    OAUTH2_AUTH_ENDPOINT="" \
    OAUTH2_USERINFO_ENDPOINT="" \
@@ -93,6 +92,7 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
    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="" \
@@ -158,9 +158,12 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
    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" \
+#   NODE_OPTIONS="--max_old_space_size=4096"

 #---------------------------------------------
 # == at docker-compose.yml: AUTOLOGIN WITH OIDC/OAUTH2 ====
@@ -169,97 +172,115 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
 #---------------------------------------------------------------------

 # Copy the app to the image
-COPY ${SRC_PATH} /home/wekan/app
+#COPY ${SRC_PATH} /home/wekan/app

-RUN \
-    set -o xtrace && \
-    # Add non-root user wekan
-    useradd --user-group --system --home-dir /home/wekan wekan && \
-    \
-    # OS dependencies
-    apt-get update -y && apt-get install -y --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
-    cp $(which tar) $(which tar)~ && \
-    ln -sf $(which bsdtar) $(which tar) && \
-    \
-    # Download nodejs
-    wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
-    wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
-    #---------------------------------------------------------------------------------------------
-    \
-    # Verify nodejs authenticity
-    grep ${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | shasum -a 256 -c - && \
-    rm -f SHASUMS256.txt.asc && \
-    \
-    # Install Node
-    tar xvzf node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
-    rm node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
-    mv node-${NODE_VERSION}-${ARCHITECTURE} /opt/nodejs && \
-    ln -s /opt/nodejs/bin/node /usr/bin/node && \
-    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
-    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/${NODE_VERSION} /home/wekan/.config && \
-    chown wekan --recursive /home/wekan/.config && \
-    \
-    #DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
-    #paxctl -mC `which node` && \
-    \
-    # Install Node dependencies. Python path for node-gyp.
-    npm install -g npm@${NPM_VERSION} && \
-    \
-    # Change user to wekan and install meteor
-    cd /home/wekan/ && \
-    chown wekan --recursive /home/wekan && \
-    echo "Starting meteor ${METEOR_RELEASE} installation...   \n" && \
-    gosu wekan:wekan curl https://install.meteor.com/ | /bin/sh && \
-    mv /root/.meteor /home/wekan/ && \
-    chown wekan --recursive /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
-    cd /home/wekan/app && \
-    mkdir -p /home/wekan/.npm && \
-    chown wekan --recursive /home/wekan/.npm /home/wekan/.config /home/wekan/.meteor && \
-    chmod u+w *.json && \
-    gosu wekan:wekan npm install && \
-    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 npm install && \
-    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 && \
-    \
-    # Put back the original tar
-    mv $(which tar)~ $(which tar) && \
-    \
-    # Cleanup
-    apt-get remove --purge -y ${BUILD_DEPS} && \
-    apt-get autoremove -y && \
-    npm uninstall -g api2html &&\
-    rm -R /tmp/* && \
-    rm -R /var/lib/apt/lists/* && \
-    rm -R /home/wekan/.meteor && \
-    rm -R /home/wekan/app && \
-    rm -R /home/wekan/app_build && \
-    mkdir /data && \
-    chown wekan --recursive /data
-    #cat /home/wekan/python/esprima-python/files.txt | xargs rm -R && \
-    #rm -R /home/wekan/python
-    #rm /home/wekan/install_meteor.sh
+# Install OS
+RUN <<EOR
+set -o xtrace
+
+# Add non-root user wekan
+useradd --user-group --system --home-dir /home/wekan wekan
+# OS dependencies
+apt-get update --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
+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
+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/v8.06/wekan-8.06-amd64.zip"
+unzip wekan-8.06-amd64.zip
+rm wekan-8.06-amd64.zip
+mv /home/wekan/app/bundle /build
+
+# Put back the 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
+EOR
+
+USER wekan

 ENV PORT=8080
 EXPOSE $PORT
-USER wekan

 STOPSIGNAL SIGKILL
+WORKDIR /home/wekan/app

 #---------------------------------------------------------------------
 # https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
@@ -270,6 +291,6 @@ STOPSIGNAL SIGKILL
 #---------------------------------------------------------------------
 #
 # 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 /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"]
@@ -1,24 +1,18 @@
-FROM amd64/alpine:3.7 AS builder
+FROM arm64v8/ubuntu:23.04 AS builder
+#FROM amd64/alpine:latest AS builder

 # Set the environment variables for builder
-ENV QEMU_VERSION=v4.2.0-6 \
+ENV QEMU_VERSION=v7.2.0-1 \
    QEMU_ARCHITECTURE=aarch64 \
    NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v14.21.3 \
+    NODE_VERSION=v14.21.4 \
    WEKAN_VERSION=latest  \
-    WEKAN_ARCHITECTURE=arm64 \
-    NODE_OPTIONS="--max_old_space_size=4096"
-
-#---------------------------------------------------------------------
-# 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"
-#---------------------------------------------------------------------
+    WEKAN_ARCHITECTURE=arm64

    # Install dependencies
-RUN apk update && apk add ca-certificates outils-sha1 && \
+#RUN apk update && apk add ca-certificates outils-sha1 && \
+RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections
+RUN apt update && apt install ca-certificates wget unzip -y && \
    \
    # Download qemu static for our architecture
    wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
@@ -33,29 +27,38 @@ RUN apk update && apk add ca-certificates outils-sha1 && \
    unzip wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
    \
    # Download node and shasums
-    wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
-    wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
    \
    # Verify nodejs authenticity
-    grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | sha256sum -c - && \
+    grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt | sha256sum -c - && \
    \
    # Extract node and remove tar.gz
    tar xvzf node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz

 # Build wekan dockerfile
-FROM arm64v8/ubuntu:19.10
+FROM --platform=linux/arm64 arm64v8/ubuntu:23.04
 LABEL maintainer="wekan"

 # Set the environment variables (defaults where required)
 ENV QEMU_ARCHITECTURE=aarch64 \
    NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v14.21.3 \
+    NODE_VERSION=v14.21.4 \
    NODE_ENV=production \
    NPM_VERSION=latest \
    WITH_API=true \
    PORT=8080 \
    ROOT_URL=http://localhost \
-    MONGO_URL=mongodb://127.0.0.1:27017/wekan
+    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
@@ -75,24 +78,21 @@ RUN \
    ln -s /opt/nodejs/bin/node /usr/bin/node && \
    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
-    chown wekan --recursive /home/wekan/.config && \
-    \
-    # Install Node dependencies
-    npm install -g npm@${NPM_VERSION}
+    chown wekan --recursive /home/wekan/.config
+
+#    \
+#    # Install Node dependencies
+#    #npm install -g npm@${NPM_VERSION} && \
+#    \
+#    # Install Health Check dependencies
+#    #apk add curl
+#
+#HEALTHCHECK --start-period=30s --interval=30s --timeout=10s --retries=3 \
+#  CMD curl --fail "http://localhost:$PORT" || exit 1

 EXPOSE $PORT
 USER wekan

-#---------------------------------------------------------------------
-# 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", "/home/wekan/bundle/main.js"]
-
-#CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 /home/wekan/bundle/main.js"]
+# CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 --max-old-space-size=8192 /home/wekan/bundle/main.js"]
 CMD ["bash", "-c", "ulimit -s 65500; exec node /home/wekan/bundle/main.js"]

@@ -0,0 +1,99 @@
+FROM arm64v8/ubuntu:23.04 AS builder
+#FROM --platform=linux/amd64 amd64/ubuntu:23.04 AS builder
+#FROM --platform=linux/amd64 ghcr.io/wekan/wekan:main AS builder
+#FROM arm64v8/ubuntu:23.04 AS builder
+#FROM amd64/alpine:latest AS builder
+
+# Set the environment variables for builder
+ENV QEMU_VERSION=v7.2.0-1 \
+    QEMU_ARCHITECTURE=s390x \
+    NODE_ARCHITECTURE=linux-s390x \
+    NODE_VERSION=v14.21.4 \
+    WEKAN_VERSION=latest  \
+    WEKAN_ARCHITECTURE=s390x
+
+    # Install dependencies
+#RUN apk update && apk add ca-certificates outils-sha1 && \
+RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections
+RUN apt update && apt install ca-certificates wget unzip -y && \
+    \
+    # Download qemu static for our architecture
+    wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
+    \
+    # Download wekan and shasum
+    wget https://releases.wekan.team/${WEKAN_ARCHITECTURE}/wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
+    wget https://releases.wekan.team/${WEKAN_ARCHITECTURE}/SHA256SUMS.txt && \
+    # Verify wekan
+    grep wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip SHA256SUMS.txt | sha256sum -c - && \
+    \
+    # Unzip wekan
+    unzip wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
+    \
+    # Download node and shasums
+    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    \
+    # Verify nodejs authenticity
+    grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt | sha256sum -c - && \
+    \
+    # Extract node and remove tar.gz
+    tar xvzf node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz
+
+# Build wekan dockerfile
+FROM --platform=linux/s390x s390x/ubuntu:23.04
+LABEL maintainer="wekan"
+
+# Set the environment variables (defaults where required)
+ENV QEMU_ARCHITECTURE=s390x \
+    NODE_ARCHITECTURE=linux-s390x \
+    NODE_VERSION=v14.21.4 \
+    NODE_ENV=production \
+    NPM_VERSION=latest \
+    WITH_API=true \
+    PORT=8080 \
+    ROOT_URL=http://localhost \
+    MONGO_URL=mongodb://127.0.0.1:27017/wekan \
+    LDAP_AUTHENTIFICATION_PASSWORD_FILE="" \
+    OAUTH2_SECRET_FILE="" \
+    MAIL_SERVICE_PASSWORD_FILE="" \
+    MONGO_PASSWORD_FILE="" \
+    S3_SECRET_FILE=""
+
+# Copy qemu-static to image
+COPY --from=builder qemu-${QEMU_ARCHITECTURE}-static /usr/bin
+
+# Copy the app to the image
+COPY --from=builder bundle /home/wekan/bundle
+
+# Copy
+COPY --from=builder node-${NODE_VERSION}-${NODE_ARCHITECTURE} /opt/nodejs
+
+RUN \
+    set -o xtrace && \
+    # Add non-root user wekan
+    useradd --user-group --system --home-dir /home/wekan wekan && \
+    \
+    # Install Node
+    ln -s /opt/nodejs/bin/node /usr/bin/node && \
+    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
+    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
+    chown wekan --recursive /home/wekan/.config
+
+#    \
+#    # Install Node dependencies
+#    #npm install -g npm@${NPM_VERSION} && \
+#    \
+#    # Install Health Check dependencies
+#    #apk add curl
+#
+#HEALTHCHECK --start-period=30s --interval=30s --timeout=10s --retries=3 \
+#  CMD curl --fail "http://localhost:$PORT" || exit 1
+
+EXPOSE $PORT
+USER wekan
+
+CMD ["bash", "-c", "ulimit -s 65500; exec node /home/wekan/bundle/main.js"]
@@ -0,0 +1,40 @@
+# Future
+
+## Moved Import/Export/Sync issues to Big Picture Roadmap wiki page
+
+This change is limited to only Import/Export/Sync issues, while those are In Progress of being fixed.
+
+2023-11-21 xet7 closed 261 issues that are linked at https://github.com/wekan/wekan/wiki/Sync ,
+that is Roadmap of Import/Export/Sync in WeKan. It means, that those issues progress will be
+updated at that wiki page, when xet7 and other WeKan contributors fix those.
+Many of those issues are In Progress of being fixed and added.
+
+## Platform Updates
+
+Issues related to platforms are being closed, because only list of working platforms is mentioned now
+at WeKan website https://wekan.github.io Install section and at [ChangeLog](https://github.com/wekan/wekan/blob/main/CHANGELOG.md)
+where is this new text:
+
+> Newest WeKan at amd64 platforms: Linux bundle, Snap Candidate, Docker, Kubernetes. Fixing other platforms In Progress. 
+
+Platform support changes often, because:
+
+- There are many dependencies, that update or break or change often
+- Node.js segfaults at some CPU/OS
+- Some platforms have build errors
+
+Roadmap is to update all existing platforms, and add more platforms.
+
+Upcoming platform upgrades:
+
+- Fix migrations, so that newest WeKan can be released to Snap Stable. (Currently newest is at Snap Candidate).
+
+## WeKan features
+
+Most Meteor WeKan features are listed here:
+
+https://github.com/wekan/wekan/wiki/Deep-Dive-Into-WeKan
+
+Remaining features and all changes are listed here:
+
+https://github.com/wekan/wekan/blob/main/CHANGELOG.md
@@ -0,0 +1,10 @@
+# Governance
+
+Anyone can send pull request to https://github.com/wekan/wekan/wiki/pulls ,
+if there is permission to add code to WeKan with MIT license.
+
+As maintainer, xet7 checks all pull requests and merges them.
+
+Only xet7 has write access to repo https://github.com/wekan/wekan
+
+
@@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2014-2019 The Wekan Team
+Copyright (c) Lauri Ojansivu

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,36 +1,43 @@
-[Gitpod Ready-to-Code](https://gitpod.io/#https://github.com/wekan/wekan)
-
 # WeKan ® - Open Source kanban

+## Downloads
+
+https://wekan.fi/install/
+
 ## Docker Containers

+- [GitHub](https://github.com/wekan/wekan/pkgs/container/wekan)
 - [Quay](https://quay.io/repository/wekan/wekan)
 - [Docker Hub](https://hub.docker.com/r/wekanteam/wekan)

-Other platforms and compatible software versions at https://wekan.github.io Download section.
+docker-compose.yml at https://github.com/wekan/wekan/blob/main/docker-compose.yml
+
+## Standards
+
+- [WeKan and Standard for Public Code](https://wekan.fi/standard-for-public-code/) assessment was made at 2023-11.
+  Currently Wekan meets 8 out of 16 criteria out of the box.
+  Some others could be met with small changes.

 ## Code stats

+- [CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/4619)
 - [Code Climate](https://codeclimate.com/github/wekan/wekan)
 - [Open Hub](https://www.openhub.net/p/wekan)
 - [OSS Insight](https://ossinsight.io/analyze/wekan/wekan)
- [CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/4619)

-## [Translate WeKan ® at Transifex](https://transifex.com/wekan/wekan)
+## Translate WeKan ® at Transifex

-Translations to non-English languages are accepted only at [Transifex](https://transifex.com/wekan/wekan) using webbrowser.
+Translations to non-English languages are accepted only at [Transifex](https://app.transifex.com/wekan/wekan) using webbrowser.
 New English strings of new features can be added as PRs to master branch file wekan/imports/i18n/data/en.i18n.json .

-## [WeKan ® feature requests and bugs](https://github.com/wekan/wekan/issues)
+## WeKan ® feature requests and bugs

 Please add most of your questions as GitHub issue: [WeKan ® Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
 It's better than at chat where details get lost when chat scrolls up.

-## Chat
+## Discussions

-[Discussions][discussions] - WeKan Community GitHub Discussions, that are not [Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
-
-[WeKan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)
+[IRC](https://github.com/wekan/wekan/blob/main/docs/FAQ/IRC-FAQ.md)

 ## Docker: Latest tag has newest release

@@ -40,8 +47,8 @@ See bottom of https://github.com/wekan/wekan/issues/3874
 ## FAQ

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

 ## About WeKan ®

@@ -58,27 +65,24 @@ install Wekan on your own computer or server. In fact we encourage you to do
 that by providing one-click installation on various platforms.

 - WeKan ® is used in [most countries of the world](https://snapcraft.io/wekan).
- WeKan ® largest user has 22k users using WeKan ® in their company.
- WeKan ® has been [translated](https://transifex.com/wekan/wekan) to about 105 languages.
+- WeKan ® largest user has 30k users using WeKan ® in their company.
+- WeKan ® has been [translated](https://app.transifex.com/wekan/) to about 105 languages.
 - [Features][features]: WeKan ® has real-time user interface.
- [Platforms][platforms]: WeKan ® supports many platforms.
+- [Platforms](https://wekan.fi/install/): WeKan ® supports many platforms.
  WeKan ® is critical part of new platforms Wekan is currently being integrated to.

 ## Requirements

- 64bit: Linux [Snap](https://github.com/wekan/wekan-snap/wiki/Install) or [Sandstorm](https://sandstorm.io) /
-  [Mac](https://github.com/wekan/wekan/wiki/Mac) / [Windows](https://github.com/wekan/wekan/wiki/Install-Wekan-from-source-on-Windows).
-  [More Platforms](https://github.com/wekan/wekan/wiki/Platforms), bundle for RasPi3 ARM and other CPUs where Node.js and MongoDB exists.
 - 1 GB RAM minimum free for WeKan ®. Production server should have minimum total 4 GB RAM.
-  For thousands of users, for example with [Docker](https://github.com/wekan/wekan/blob/master/docker-compose.yml): 3 frontend servers,
+  For thousands of users, for example with [Docker](https://github.com/wekan/wekan/blob/main/docker-compose.yml): 3 frontend servers,
  each having 2 CPU and 2 wekan-app containers. One backend wekan-db server with many CPUs.
 - Enough disk space and alerts about low disk space. If you run out disk space, MongoDB database gets corrupted.
 - SECURITY: Updating to newest WeKan ® version very often. Please check you do not have automatic updates of Sandstorm or Snap turned off.
  Old versions have security issues because of old versions Node.js etc. Only newest WeKan ® is supported.
  WeKan ® on Sandstorm is not usually affected by any Standalone WeKan ® (Snap/Docker/Source) security issues.
 - [Reporting all new bugs immediately](https://github.com/wekan/wekan/issues).
-  New features and fixes are added to WeKan ® [many times a day](https://github.com/wekan/wekan/blob/master/CHANGELOG.md).
- [Backups](https://github.com/wekan/wekan/wiki/Backup) of WeKan ® database once a day miminum.
+  New features and fixes are added to WeKan ® [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
+- [Backups](https://github.com/wekan/wekan/blob/main/docs/Backup/Backup.md) of WeKan ® database once a day miminum.
  Bugs, updates, users deleting list or card, harddrive full, harddrive crash etc can eat your data. There is no undo yet.
  Some bug can cause WeKan ® board to not load at all, requiring manual fixing of database content.

@@ -89,16 +93,24 @@ that by providing one-click installation on various platforms.
 [Developer Documentation][dev_docs]

 - There is many companies and individuals contributing code to WeKan ®, to add features and bugfixes
-  [many times a day](https://github.com/wekan/wekan/blob/master/CHANGELOG.md).
+  [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
 - [Please add Add new Feature Requests and Bug Reports immediately](https://github.com/wekan/wekan/issues).
- [Commercial Support](https://wekan.team/commercial-support/).
+- [Commercial Support](https://wekan.fi/commercial-support/).

 We also welcome sponsors for features and bugfixes.
 By working directly with WeKan ® you get the benefit of active maintenance and new features added by growing WeKan ® developer community.

+## Getting Started with Development
+
+The default branch uses [Meteor 2 with Node.js 14](https://wekan.fi/install/).
+
+To contribute, [create a fork](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md#2-create-fork-of-httpsgithubcomwekanwekan-at-github-web-page) and run `./rebuild-wekan.sh` (or `./rebuild-wekan.bat` on Windows) as detailed [here](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md#3-select-option-1-to-install-dependencies-and-then-enter). Once you're ready, please test your code and [submit a pull request (PR)](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md#7-test).
+
+Please refer to the [developer documentation](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Developer-Documentation.md) for more information.
+
 ## Screenshot

-[More screenshots at Features page](https://github.com/wekan/wekan/wiki/Features)
+[More screenshots at Features page](https://github.com/wekan/wekan/tree/main/docs/Features)

 [![Screenshot of WeKan ®][screenshot_wekan]][roadmap_wekan]

@@ -107,16 +119,12 @@ By working directly with WeKan ® you get the benefit of active maintenance and
 WeKan ® is released under the very permissive [MIT license](LICENSE), and made
 with [Meteor](https://www.meteor.com).

-[platforms]: https://github.com/wekan/wekan/wiki/Platforms
-[dev_docs]: https://github.com/wekan/wekan/wiki/Developer-Documentation
-[screenshot_wekan]: https://wekan.github.io/wekan-markdown.png
+[dev_docs]: https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Developer-Documentation.md
+[screenshot_wekan]: https://wekan.fi/wekan-dark-mode.png
 [features]: https://github.com/wekan/wekan/wiki/Features
 [roadmap_wekan]: https://boards.wekan.team/b/D2SzJKZDS4Z48yeQH/wekan-open-source-kanban-board-with-mit-license
 [wekan_issues]: https://github.com/wekan/wekan/issues
-[wekan_issues]: https://github.com/wekan/wekan/issues
 [docker_image]: https://hub.docker.com/r/wekanteam/wekan/
-[wekan_wiki]: https://github.com/wekan/wekan/wiki
-[translate_wekan]: https://www.transifex.com/wekan/wekan/
+[translate_wekan]: https://app.transifex.com/wekan/wekan/
 [open_source]: https://en.wikipedia.org/wiki/Open-source_software
 [free_software]: https://en.wikipedia.org/wiki/Free_software
-[discussions]: https://github.com/wekan/wekan/discussions
@@ -0,0 +1,113 @@
+# 🔐 WeKan — Login System Overview
+
+This document provides a detailed overview of WeKan’s **login and authentication system**, covering client-side UI, server-side logic, external authentication methods, and potential upgrade paths.
+
+---
+
+## 🖥️ Login Web UI
+
+WeKan's login interface is implemented using a combination of:
+
+- `layouts.jade` – Login HTML structure
+- `layouts.js` – Login logic and interactivity
+- `layouts.css` – Styling and layout
+
+📁 Source: [`client/components/main`](https://github.com/wekan/wekan/tree/main/client/components/main)
+
+---
+
+## ⚙️ Server-Side Authentication
+
+Server-side login functionality is handled in:
+
+- [`server/authentication.js`](https://github.com/wekan/wekan/blob/main/server/authentication.js)
+
+Other related configurations:
+
+- 🔧 Account config: [`config/accounts.js`](https://github.com/wekan/wekan/blob/main/config/accounts.js)
+- 📨 Sign-up invitations: [`models/settings.js#L275`](https://github.com/wekan/wekan/blob/main/models/settings.js#L275)
+- 👤 User creation logic: [`models/users.js#L1339`](https://github.com/wekan/wekan/blob/main/models/users.js#L1339)
+
+---
+
+## 👥 Meteor User Accounts
+
+WeKan utilizes Meteor’s `accounts` system. Relevant resources:
+
+- 📚 Meteor 2.x Accounts Docs: [v2-docs.meteor.com/api/accounts](https://v2-docs.meteor.com/api/accounts)
+- 🔍 Meteor Packages:
+  - [`packages`](https://github.com/wekan/wekan/blob/main/.meteor/packages)
+  - [`versions`](https://github.com/wekan/wekan/blob/main/.meteor/versions)
+- 📦 Meteor 2.14 core packages: [Meteor 2.14 packages](https://github.com/meteor/meteor/tree/release/METEOR%402.14/packages)
+
+---
+
+## 🔐 External Authentication (OIDC, LDAP, etc.)
+
+WeKan supports external authentication methods via internal packages.
+
+📁 See [`packages/`](https://github.com/wekan/wekan/tree/main/packages) for:
+- OpenID Connect (OIDC)
+- LDAP
+- OAuth and other integrations
+
+---
+
+## 📦 NPM & AtmosphereJS Dependencies
+
+- 🔗 `package.json`: [Dependencies list](https://github.com/wekan/wekan/blob/main/package.json)
+- 🧩 WekanTeam scoped NPM packages: [@wekanteam on npm](https://www.npmjs.com/search?q=%40wekanteam)
+- ☁️ AtmosphereJS Meteor packages: [atmospherejs.com](https://atmospherejs.com)
+
+---
+
+## 🚧 Meteor Version & Upgrade Notes
+
+- 📌 Current Version: **Meteor 2.14**
+  - [`.meteor/release`](https://github.com/wekan/wekan/blob/main/.meteor/release)
+- 🔧 Maintained with only **critical fixes** until ~Summer 2025
+- 🚀 Migration to **Meteor 3** or a new framework is under consideration
+
+📘 Meteor 3 API: [docs.meteor.com/api/accounts](https://docs.meteor.com/api/accounts)
+
+---
+
+## 🧪 Prototypes & Examples
+
+### 🐘 PHP Prototype Sign-Up
+
+Used in experimental versions:
+
+- Step 1: [`sign-up1.php`](https://github.com/wekan/php/blob/main/page/sign-up1.php)
+- Step 2: [`sign-up2.php`](https://github.com/wekan/php/blob/main/page/sign-up2.php)
+- Main entry: [`index.php#L72-L83`](https://github.com/wekan/php/blob/main/public/index.php#L72-L83)
+
+---
+
+### 🎨 WeKan Studio Prototype
+
+Sign-up logic in the **WeKan Studio** version:
+
+- [`signUp.fmt`](https://github.com/wekan/wekanstudio/blob/main/srv/templates/login/signUp.fmt)
+
+---
+
+## 📎 Future Considerations
+
+- Upgrading to **Meteor 3.x**
+- Refactoring frontend logic to fix translation rendering order
+- Exploring **simplified authentication systems** in future prototypes
+
+---
+
+## 🔗 Project Links
+
+- 🔧 Main Repo: [github.com/wekan/wekan](https://github.com/wekan/wekan)
+- 🌐 Website: [wekan.github.io](https://wekan.github.io)
+- 📚 Documentation: [Wekan Wiki](https://github.com/wekan/wekan/wiki)
+
+---
+
+
+
+---
@@ -1,10 +1,12 @@
-Security is very important to us. If you discover any issue regarding security, please disclose
-the information responsibly by sending an email to support (at) wekan.team using
-[this PGP public key](support-at-wekan.team_pgp-publickey.asc) and not by
-creating a GitHub issue. We will respond swiftly to fix verifiable security issues.
+About money, see [CONTRIBUTING.md](CONTRIBUTING.md)

-We thank you with a place at our hall of fame page, that is
-at https://wekan.github.io/hall-of-fame
+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.
+
+We thank you with a place at our hall of fame page, that is at https://wekan.fi/hall-of-fame

 ## How should reports be formatted?

@@ -29,7 +31,7 @@ added to the Wekan Hall of Fame.
 ## Which domains are in scope?

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

 Please don't perform research that could impact other users. Secondly, please keep
 the reports short and succinct. If we fail to understand the logics of your bug, we will tell you.
@@ -48,31 +50,132 @@ like Snap and Docker have their own specific sandboxing etc features.

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

-Wekan uses xss package for input fields like cards, as you can see from
-[package.json](https://github.com/wekan/wekan/blob/master/package.json). Other used versions can be seen from
-[Meteor versions file](https://github.com/wekan/wekan/blob/master/.meteor/versions).
-Forms can include markdown links, html, image tags etc like you see at https://wekan.github.io .
-It's possible to add attachments to cards, and markdown/html links to files.
+- Wekan private board attachments are not accessible without logging in.
+- There is feature to set board public, so that board is visible without logging in in readonly mode, with realtime updates.
+- Admin Panel has feature to disable all public boards, so all boards are private.

-Wekan attachments are not accessible without logging in. Import from Trello works by copying
-Trello export JSON to Wekan Trello import page, and in Trello JSON file there is direct links to all publicly
-accessible Trello attachment files, that Standalone Wekan downloads directly to Wekan MongoDB database in
-[CollectionFS](https://github.com/wekan/wekan/pull/875) format. When Wekan board is exported in
-Wekan JSON format, all board attachments are included in Wekan JSON file as base64 encoded text.
-That Wekan JSON format file can be imported to Sandstorm Wekan with all the attachments, when we get
-latest Wekan version working on Sandstorm, only couple of bugs are left before that. In Sandstorm it's not
-possible yet to import from Trello with attachments, because Wekan does not implement Sandstorm-compatible
-access to outside of Wekan grain.
+## SSL/TLS

-Standalone Wekan only has password auth currently, there is work in progress to add
-[oauth2](https://github.com/wekan/wekan/pull/1578), [Openid](https://github.com/wekan/wekan/issues/538),
-[LDAP](https://github.com/wekan/wekan/issues/119) etc. If you need more login security for Standalone Wekan now,
-it's possible add additional [Google Auth proxybouncer](https://github.com/wekan/wekan/wiki/Let's-Encrypt-and-Google-Auth) in front of password auth, and then use Google Authenticator for Google Auth. Standalone Wekan does have [brute force protection with eluck:accounts-lockout and browser-policy clickjacking protection](https://github.com/wekan/wekan/blob/master/CHANGELOG.md#v080-2018-04-04-wekan-release). You can also optionally use some [WAF](https://en.wikipedia.org/wiki/Web_application_firewall)
-like for example [AWS WAF](https://aws.amazon.com/waf/).
+- SSL/TLS encrypts traffic between webbrowser and webserver.
+- 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

-[All Wekan Platforms](https://github.com/wekan/wekan/wiki/Platforms)
+## XSS
+
+- Dompurify https://www.npmjs.com/package/dompurify
+  - WeKan uses dompurify npm package to filter for XSS at fields like cards, as you can see from
+    [package.json](https://github.com/wekan/wekan/blob/main/package.json). Other used versions can be seen from
+    [Meteor versions file](https://github.com/wekan/wekan/blob/main/.meteor/versions).
+  - Forms can include markdown links, html, image tags etc like you see at https://wekan.github.io .
+  - It's possible to add attachments to cards, and markdown/html links to files.
+  - Dompurify cleans up viewed code, so Javascript in input fields does not execute
+    - https://wekan.github.io/hall-of-fame/fieldbleed/
+- Reaction in comment is now checked, that it does not have extra added code
+  - https://wekan.github.io/hall-of-fame/reactionbleed/
+- https://github.com/wekan/wekan/blob/main/packages/markdown/src/template-integration.js#L76
+
+## QA about PubSub
+
+Q:
+
+Hello,
+I have just seen the Meteor DevTools Evolved extension and was wondering if anyone had asked themselves the question of security.
+Insofar as all data is shown in the minimongo tab in plain text.
+How can data be hidden from this extension?
+
+A:
+
+## PubSub
+
+- It is not security issue to show some text or image, that user has permission to see. It is a security issue, if browserside is some text or image that user should not see.
+- Meteor has browserside minimongo database, made with Javascript, updated with Publish/Subscribe, PubSub.
+- Publish/Subscribe means, that realtime web framework reads database changes stream, and then immediately updates webpage,
+  like like dashboards, chat, kanban. That is the point in any realtime web framework in any programming language.
+- Yes, you should check with Meteor DevTools Evolved Chromium/Firefox extension that at minimongo is only text that user has permission to see.
+- Do checking as logged in user, and logged out user.
+- Check permissions and sanitize before allowing some change, because someone could modify content of input field,
+  PubSub/websocket data (for example with Burp Suite Community Edition), etc.
+- If you have REST API, also check that only those that have login token, and have permission, can view or edit text
+- You should not include any data user is not allowed to see. Not to webpage text, not to websockets/PubSub, etc.
+- Minimongo should not have password hashes PubSub https://wekan.github.io/hall-of-fame/userbleed/
+- PubSub uses Websockets, so you need those to be enabled at webserver like Caddy/Nginx/Apache etc, examples of settings
+  at right menu of https://github.com/wekan/wekan/wiki
+- Clientside https://github.com/wekan/wekan/tree/main/client/components subscribes to 
+  PubSub https://github.com/wekan/wekan/tree/main/server/publications or calls meteor methods at https://github.com/wekan/wekan/tree/main/models
+- For Admin:
+  - You can have input field for password https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
+  - You can save password to database https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
+  - Check that only current user or Admin can change password https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
+    - Note that currentUser uses code like Meteor.user() in .js file
+  - Do not have password hashes in PubSub https://github.com/wekan/wekan/blob/main/server/publications/users.js
+  - Only show Admin Panel to Admin https://github.com/wekan/wekan/blob/main/client/components/settings/settingBody.jade#L3
+- If there is a lot of data, use pagination https://github.com/wekan/wekan/blob/main/client/components/settings/peopleBody.js
+- Only have limited amount of data published in PubSub. Limit in MongoDB query in publications how much is published. Too much could make browser too slow.
+- Use Environment variables for any email etc passwords.
+- But what if you would like to remove minimongo? And only use Meteor methods for saving? In that case, you don't have realtime updates,
+  and you need to write much more code to load and save data yourself, handle any multi user data saving conflicts yourself,
+  and many Meteor Atmospherejs.com PubSub using packages would not work anymore https://github.com/wekan/we
+
+## PubSub: Fix that user can not change to Admin
+
+- With PubSub, there is checking, that someone modifying Websockets content, like permission isAdmin, can not change to Admin.
+- https://github.com/wekan/wekan/commit/cbad4cf5943d47b916f64b4582f8ca76a9dfd743
+- https://wekan.github.io/hall-of-fame/adminbleed/
+
+## Permissions and Roles
+
+- For any user permissions, it's best to use Meteor package package https://github.com/Meteor-Community-Packages/meteor-roles .
+- Currently WeKan has custom hardcoded permissions, WeKan does not yet use that meteor-roles package.
+  - Using permissions at WeKan sidebar https://github.com/wekan/wekan/blob/main/client/components/sidebar/sidebar.js#L1854-L1875
+  - List of roles https://github.com/wekan/wekan/wiki/REST-API-Role . Change at board or Admin Panel. Also Organizations/Teams.
+  - Worker role: https://github.com/wekan/wekan/issues/2788
+  - Not implemented yet: Granular Roles https://github.com/wekan/wekan/issues/3022
+- Check is user logged in, with `if (Meteor.user()) {`
+- Check is code running at server `if (Meteor.isServer()) {` or client `if Meteor.isClient()) {` .
+- Here is some authentication code https://github.com/wekan/wekan/blob/main/server/authentication.js
+
+## Environment variables
+
+- For any passwords, use environment variables, those are serverside
+- Do not copy environment variable to public variable that is visible browserside https://github.com/wekan/wekan/blob/main/server/max-size.js
+
+```
+Meteor.startup(() => {
+  if (process.env.HEADER_LOGIN_ID) {
+    Meteor.settings.public.attachmentsUploadMaxSize   = process.env.ATTACHMENTS_UPLOAD_MAX_SIZE;
+    Meteor.settings.public.attachmentsUploadMimeTypes = process.env.ATTACHMENTS_UPLOAD_MIME_TYPES;
+    Meteor.settings.public.avatarsUploadMaxSize       = process.env.AVATARS_UPLOAD_MAX_SIZE;
+```
+
+- For serverside, you can set Meteor.settings.variablename, without text public
+- For WeKan kanban, there is feature for setting board public, it can be viewed by anyone, there is realtime updates. But 
+- Some of those permissions are checked at users.js models at https://github.com/wekan/wekan/tree/main/models
+- Environment variables are used for email server passwords, etc, at all platforms https://github.com/wekan/wekan/commit/a781c0e7dcfdbe34c1483ee83cec12455b7026f7
+
+## Escape HTML comment tags so that HTML comments are visible
+
+- Someone reported, that it is problem that content of HTML comments in edit mode, are not visible at at view mode, so this makes HTML comments visible.
+- https://github.com/wekan/wekan/commit/167863d95711249e69bb3511175d73b34acbbdb3
+- https://wekan.github.io/hall-of-fame/invisiblebleed/
+
+## Attachments: XSS in filename is sanitized
+
+- https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
+- https://wekan.github.io/hall-of-fame/filebleed/
+
+## Brute force login protection
+
+- https://github.com/wekan/wekan/commit/23e5e1e3bd081699ce39ce5887db7e612616014d
+- https://github.com/wekan/wekan/tree/main/packages/wekan-accounts-lockout

 ### Sandstorm Wekan Security

@@ -105,12 +208,6 @@ a security issue, we'd like to know about it, and also how to fix it:

 Typical already known or "no impact" bugs such as:

- Brute force password guessing. Currently there is
-  [brute force protection with eluck:accounts-lockout](https://github.com/wekan/wekan/blob/master/CHANGELOG.md#v080-2018-04-04-wekan-release).
- Security issues related to that Wekan uses Meteor 1.6.0.1 related packages, and upgrading to newer
-  Meteor 1.6.1 is complicated process that requires lots of changes to many dependency packages.
-  Upgrading [has been tried many times, spending a lot of time](https://github.com/meteor/meteor/issues/9609)
-  but there still is issues. Helping with package upgrades is very welcome.
 - [Wekan API old tokens not replaced correctly](https://github.com/wekan/wekan/issues/1437)
 - Missing Cookie flags on non-session cookies or 3rd party cookies
 - Logout CSRF
@@ -121,7 +218,7 @@ 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 (at) wekan.team .
+We welcome all fixes to improve security by email to security@wekan.team

 ## Bonus Points

@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v6.76.0"
+appVersion: "v8.06.0"
 files:
  userUploads:
    - README.md
@@ -37,8 +37,30 @@ If *nix:  chmod +x api.py => ./api.py users
    python3 api.py customfields BOARDID # Custom Fields of BOARDID
    python3 api.py customfield BOARDID CUSTOMFIELDID # Info of CUSTOMFIELDID
    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
+    python3 api.py addcardwithlabel AUTHORID BOARDID SWIMLANEID LISTID CARDTITLE CARDDESCRIPTION LABELIDS # Add a card and a label
+    python3 api.py editboardtitle BOARDID NEWBOARDTITLE # Edit board title
+    python3 api.py copyboard BOARDID NEWBOARDTITLE # Copy a board
+    python3 api.py createlabel BOARDID LABELCOLOR LABELNAME (Color available: `white`, `green`, `yellow`, `orange`, `red`, `purple`, `blue`, `sky`, `lime`, `pink`, `black`, `silver`, `peachpuff`, `crimson`, `plum`, `darkgreen`, `slateblue`, `magenta`, `gold`, `navy`, `gray`, `saddlebrown`, `paleturquoise`, `mistyrose`, `indigo`) # Create a new label
+    python3 api.py editcardcolor BOARDID LISTID CARDID COLOR (Color available: `white`, `green`, `yellow`, `orange`, `red`, `purple`, `blue`, `sky`, `lime`, `pink`, `black`, `silver`, `peachpuff`, `crimson`, `plum`, `darkgreen`, `slateblue`, `magenta`, `gold`, `navy`, `gray`, `saddlebrown`, `paleturquoise`, `mistyrose`, `indigo`) # Edit card color
+    python3 api.py addchecklist BOARDID CARDID TITLE ITEM1 ITEM2 ITEM3 ITEM4 (You can add multiple items or just one, or also without any item, just TITLE works as well. * If items or Title contains spaces, you should add ' between them.) # Add checklist + item on a card
+    python3 api.py deleteallcards BOARDID SWIMLANEID ( * Be careful will delete ALL CARDS INSIDE the swimlanes automatically in every list * ) # Delete all cards on a swimlane
+    python3 api.py checklistid BOARDID CARDID # Retrieve Checklist ID attached to a card
+    python3 api.py checklistinfo BOARDID CARDID CHECKLISTID # Get checklist info
+    python3 api.py get_list_cards_count BOARDID LISTID # Retrieve how many cards in a list
+    python3 api.py get_board_cards_count BOARDID # Retrieve how many cards in a board

+    
  Admin API:
    python3 api.py users                # All users
    python3 api.py boards               # All Public Boards
@@ -178,6 +200,52 @@ if arguments == 10:
        print(body.text)
        # ------- ADD CUSTOM FIELD TO BOARD END -----------

+if arguments == 8:
+
+    if sys.argv[1] == 'addcardwithlabel':
+        # ------- ADD CARD WITH LABEL START -----------
+        authorid = sys.argv[2]
+        boardid = sys.argv[3]
+        swimlaneid = sys.argv[4]
+        listid = sys.argv[5]
+        cardtitle = sys.argv[6]
+        carddescription = sys.argv[7]
+        labelIds = sys.argv[8]  # Aggiunto labelIds
+
+        cardtolist = wekanurl + apiboards + boardid + s + l + s + listid + s + cs
+        # Add card
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        post_data = {
+            'authorId': '{}'.format(authorid),
+            'title': '{}'.format(cardtitle),
+            'description': '{}'.format(carddescription),
+            'swimlaneId': '{}'.format(swimlaneid),
+            'labelIds': labelIds
+        }
+
+        body = requests.post(cardtolist, data=post_data, headers=headers)
+        print(body.text)
+
+        # If ok id card
+        if body.status_code == 200:
+            card_data = body.json()
+            new_card_id = card_data.get('_id')
+
+            # Updating card
+            if new_card_id:
+                edcard = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + new_card_id
+                put_data = {'labelIds': labelIds}
+                body = requests.put(edcard, data=put_data, headers=headers)
+                print("=== EDIT CARD ===\n")
+                body = requests.get(edcard, headers=headers)
+                data2 = body.text.replace('}', "}\n")
+                print(data2)
+            else:
+                print("Error obraining ID.")
+        else:
+            print("Error adding card.")
+        # ------- ADD CARD WITH LABEL END -----------
+
 if arguments == 7:

    if sys.argv[1] == 'addcard':
@@ -217,7 +285,72 @@ if arguments == 6:
        print(data2)
        # ------- EDIT CARD END -----------

-if arguments == 4:
+    if sys.argv[1] == 'editcustomfield':
+
+        # ------- EDIT CUSTOMFIELD START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        customfieldid = sys.argv[5]
+        newcustomfieldvalue = sys.argv[6]
+        edfield = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid + s + 'customFields' + s + customfieldid
+        #print(edfield)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        post_data = {'_id': '{}'.format(customfieldid), 'value': '{}'.format(newcustomfieldvalue)}
+        #print(post_data)
+        body = requests.post(edfield, data=post_data, headers=headers)
+        print("=== EDIT CUSTOMFIELD ===\n")
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- EDIT CUSTOMFIELD END -----------
+
+if arguments == 5:
+
+    if sys.argv[1] == 'addlabel':
+
+        # ------- EDIT CARD ADD LABEL START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        labelIds = sys.argv[5]
+        edcard = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid
+        print(edcard)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        put_data = {'labelIds': labelIds}
+        body = requests.put(edcard, data=put_data, headers=headers)
+        print("=== ADD LABEL ===\n")
+        body = requests.get(edcard, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- EDIT CARD ADD LABEL END -----------
+
+    if sys.argv[1] == 'editcardcolor':
+        # ------- EDIT CARD COLOR START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        newcolor = sys.argv[5]  
+
+        valid_colors = ['white', 'green', 'yellow', 'orange', 'red', 'purple', 'blue', 'sky', 'lime', 'pink', 'black',
+                    'silver', 'peachpuff', 'crimson', 'plum', 'darkgreen', 'slateblue', 'magenta', 'gold', 'navy',
+                    'gray', 'saddlebrown', 'paleturquoise', 'mistyrose', 'indigo']
+
+        if newcolor not in valid_colors:
+            print("Invalid color. Choose a color from the list.")
+            sys.exit(1)
+
+        edcard = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid
+        print(edcard)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        put_data = {'color': '{}'.format(newcolor)}  
+        body = requests.put(edcard, data=put_data, headers=headers)
+        print("=== EDIT CARD COLOR ===\n")
+        body = requests.get(edcard, headers=headers)
+        data2 = body.text.replace('}', "}\n")
+        print(data2)
+        # ------- EDIT CARD COLOR END -----------
+
+if arguments >= 4:

    if sys.argv[1] == 'newuser':

@@ -231,9 +364,155 @@ if arguments == 4:
        print("=== CREATE NEW USER ===\n")
        print(body.text)
        # ------- CREATE NEW USER END -----------
+        
+    if sys.argv[1] == 'getcard':
+
+        # ------- LIST OF CARD START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        listone = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print("=== INFO OF ONE LIST ===\n")
+        print("URL:", listone)  # Stampa l'URL per debug
+        try:
+            response = requests.get(listone, headers=headers)
+            print("=== RESPONSE ===\n")
+            print("Status Code:", response.status_code)  # Stampa il codice di stato per debug
+
+            if response.status_code == 200:
+                data2 = response.text.replace('}', "}\n")
+                print(data2)
+            else:
+                print(f"Error: {response.status_code}")
+                print(f"Response: {response.text}")
+        except Exception as e:
+            print(f"Error in the GET request: {e}")
+        # ------- LISTS OF CARD END -----------
+
+    if sys.argv[1] == 'createlabel':
+
+        # ------- CREATE LABEL START -----------
+        boardid = sys.argv[2]
+        labelcolor = sys.argv[3]
+        labelname = sys.argv[4]
+        label_url = wekanurl + apiboards + boardid + s + 'labels'
+        print(label_url)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        # Object to send
+        put_data = {'label': {'color': labelcolor, 'name': labelname}}
+        print("URL:", label_url)
+        print("Headers:", headers)
+        print("Data:", put_data)
+        try:
+          response = requests.put(label_url, json=put_data, headers=headers)
+          print("=== CREATE LABELS ===\n")
+          print("Response Status Code:", response.status_code)
+          print("Response Text:", response.text)
+        except Exception as e:
+          print("Error:", e)
+        # ------- CREATE LABEL END -----------
+
+    if sys.argv[1] == 'addchecklist':
+
+        # ------- ADD CHECKLIST START -----------
+        board_id = sys.argv[2]
+        card_id = sys.argv[3]
+        checklist_title = sys.argv[4]
+
+        # Aggiungi la checklist
+        checklist_url = wekanurl + apiboards + board_id + s + cs + s + card_id + '/checklists'
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        data = {'title': checklist_title}
+
+        response = requests.post(checklist_url, data=data, headers=headers)
+        response.raise_for_status()
+
+        result = json.loads(response.text)
+        checklist_id = result.get('_id')
+
+        print(f"Checklist '{checklist_title}' created. ID: {checklist_id}")
+
+        # Aggiungi gli items alla checklist
+        items_to_add = sys.argv[5:]  
+        for item_title in items_to_add:
+            checklist_item_url = wekanurl + apiboards + board_id + s + cs + s + card_id + s + 'checklists' + s + checklist_id + '/items'
+            item_data = {'title': item_title}
+
+            item_response = requests.post(checklist_item_url, data=item_data, headers=headers)
+            item_response.raise_for_status()
+
+            item_result = json.loads(item_response.text)
+            checklist_item_id = item_result.get('_id')
+
+            print(f"Item '{item_title}' added. ID: {checklist_item_id}")
+
+    if sys.argv[1] == 'checklistinfo':
+
+        # ------- ADD CHECKLIST START -----------
+        board_id = sys.argv[2]
+        card_id = sys.argv[3]
+        checklist_id = sys.argv[4]
+        checklist_url = wekanurl + apiboards + board_id + s + cs + s + card_id + '/checklists' + s + checklist_id
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        response = requests.get(checklist_url, headers=headers)
+
+        response.raise_for_status()
+
+        checklist_info = response.json()
+        print("Checklist Info:")
+        print(checklist_info)

 if arguments == 3:

+    if sys.argv[1] == 'editboardtitle':
+
+        # ------- EDIT BOARD TITLE START -----------
+        boardid = sys.argv[2]
+        boardtitle = sys.argv[3]
+        edboardtitle = wekanurl + apiboards + boardid + s + 'title'
+        print(edboardtitle)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        post_data = {'title': boardtitle}
+
+        body = requests.put(edboardtitle, json=post_data, headers=headers)
+        print("=== EDIT BOARD TITLE ===\n")
+        #body = requests.get(edboardtitle, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        if body.status_code == 200:
+            print("Succesfull!")
+        else:
+            print(f"Error: {body.status_code}")
+            print(body.text)
+
+        # ------- EDIT BOARD TITLE END -----------
+
+    if sys.argv[1] == 'copyboard':
+
+        # ------- COPY BOARD START -----------
+        boardid = sys.argv[2]
+        boardtitle = sys.argv[3]
+        edboardcopy = wekanurl + apiboards + boardid + s + 'copy'
+        print(edboardcopy)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        post_data = {'title': boardtitle}
+
+        body = requests.post(edboardcopy, json=post_data, headers=headers)
+        print("=== COPY BOARD ===\n")
+        #body = requests.get(edboardcopy, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        if body.status_code == 200:
+            print("Succesfull!")
+        else:
+            print(f"Error: {body.status_code}")
+            print(body.text)
+
+        # ------- COPY BOARD END -----------
+
    if sys.argv[1] == 'createlist':

        # ------- CREATE LIST START -----------
@@ -273,6 +552,90 @@ if arguments == 3:
        print(data2)
        # ------- INFO OF CUSTOM FIELD END -----------

+    if sys.argv[1] == 'cardsbyswimlane':
+    # ------- RETRIEVE CARDS BY SWIMLANE ID START -----------
+        boardid = sys.argv[2]
+        swimlaneid = sys.argv[3]
+        cardsbyswimlane = wekanurl + apiboards + boardid + s + sws + s + swimlaneid + s + cs
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print("=== CARDS BY SWIMLANE ID ===\n")
+        print("URL:", cardsbyswimlane)  # Debug
+        try:
+            body = requests.get(cardsbyswimlane, headers=headers)
+            print("Status Code:", body.status_code)  # Debug
+            data = body.text.replace('}', "}\n")
+            print("Data:", data)
+        except Exception as e:
+            print("Error GET:", e)
+    # ------- RETRIEVE CARDS BY SWIMLANE ID END -----------
+
+    if sys.argv[1] == 'deleteallcards':
+        boardid = sys.argv[2]
+        swimlaneid = sys.argv[3]
+
+        # ------- GET SWIMLANE CARDS START -----------
+        get_swimlane_cards_url = wekanurl + apiboards + boardid + s + "swimlanes" + s + swimlaneid + s + "cards"
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        try:
+            response = requests.get(get_swimlane_cards_url, headers=headers)
+            response.raise_for_status()
+            cards_data = response.json()
+
+            # Print the details of each card
+            for card in cards_data:
+                # ------- DELETE CARD START -----------
+                delete_card_url = wekanurl + apiboards + boardid + s + "lists" + s + card['listId'] + s + "cards" + s + card['_id']
+                try:
+                    response = requests.delete(delete_card_url, headers=headers)
+                    if response.status_code == 404:
+                        print(f"Card not found: {card['_id']}")
+                    else:
+                        response.raise_for_status()
+                        deleted_card_data = response.json()
+                        print(f"Card Deleted Successfully. Card ID: {deleted_card_data['_id']}")
+                except requests.exceptions.RequestException as e:
+                    print(f"Error deleting card: {e}")
+                # ------- DELETE CARD END -----------
+
+        except requests.exceptions.RequestException as e:
+            print(f"Error getting swimlane cards: {e}")
+            sys.exit(1)
+        # ------- GET SWIMLANE CARDS END -----------
+
+    if sys.argv[1] == 'get_list_cards_count':
+        # ------- GET LIST CARDS COUNT START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+
+        get_list_cards_count_url = wekanurl + apiboards + boardid +  s + l + s + listid + s + "cards_count"
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        try:
+            response = requests.get(get_list_cards_count_url, headers=headers)
+            response.raise_for_status()
+            data = response.json()
+            print(f"List Cards Count: {data['list_cards_count']}")
+        except requests.exceptions.RequestException as e:
+            print(f"Error: {e}")
+        # ------- GET LIST CARDS COUNT END -----------
+
+    if sys.argv[1] == 'checklistid':
+
+        # ------- ADD CHECKLIST START -----------
+        board_id = sys.argv[2]
+        card_id = sys.argv[3]
+
+        checklist_url = wekanurl + apiboards + board_id + s + cs + s + card_id + '/checklists'
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        response = requests.get(checklist_url, headers=headers)
+
+        response.raise_for_status()
+        checklists = response.json()
+        print("Checklists:")
+        for checklist in checklists:
+          print(checklist)
+
 if arguments == 2:

    # ------- BOARDS LIST START -----------
@@ -344,6 +707,22 @@ if arguments == 2:
        print(data2)
        # ------- LISTS OF ATTACHMENTS END -----------

+    if sys.argv[1] == 'get_board_cards_count':
+        # ------- GET BOARD CARDS COUNT START -----------
+        boardid = sys.argv[2]
+
+        get_board_cards_count_url = wekanurl + apiboards + boardid + s + "cards_count"
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        try:
+            response = requests.get(get_board_cards_count_url, headers=headers)
+            response.raise_for_status()
+            data = response.json()
+            print(f"Board Cards Count: {data['board_cards_count']}")
+        except requests.exceptions.RequestException as e:
+            print(f"Error: {e}")
+        # ------- GET BOARD CARDS COUNT END -----------
+
 if arguments == 1:

    if sys.argv[1] == 'users':
@@ -377,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,14 @@ 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
+import '/client/lib/migrationManager';
+import '/client/components/migrationProgress';
+
+// Import cron settings
+import '/client/components/settings/cronSettings';
@@ -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,55 +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;
-}
-.activities .activity .activity-desc .reactions {
-  display: flex;
-  margin-top: 5px;
-  gap: 5px;
-}
-.activities .activity .activity-desc .reactions .open-comment-reaction-popup {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  height: 24px;
-}
-.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
-  font-size: 17px;
-  font-weight: 500;
-  margin-left: 2px;
-}
-.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
-  font-size: 8px;
-  margin-top: -7px;
-  margin-left: 1px;
-}
-.activities .activity .activity-desc .reactions .reaction {
-  cursor: pointer;
-  border: 1px solid #808080;
-  border-radius: 15px;
-  display: flex;
-  padding: 2px 5px;
-}
-.activities .activity .activity-desc .reactions .reaction.selected {
-  background-color: #b0c4de;
-}
-.activities .activity .activity-desc .reactions .reaction:hover {
-  background-color: #b0c4de;
-}
-.activities .activity .activity-desc .reactions .reaction .reaction-count {
-  font-size: 12px;
+  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;
@@ -1,11 +1,12 @@
 template(name="activities")
-  .activities.js-sidebar-activities
-    //- We should use Template.dynamic here but there is a bug with
-    //- blaze-components: https://github.com/peerlibrary/meteor-blaze-components/issues/30
-    if $eq mode "board"
-      +boardActivities
-    else
-      +cardActivities
+  if showActivities
+    .activities.js-sidebar-activities
+      //- We should use Template.dynamic here but there is a bug with
+      //- blaze-components: https://github.com/peerlibrary/meteor-blaze-components/issues/30
+      if $eq mode "board"
+        +boardActivities
+      else
+        +cardActivities

 template(name="boardActivities")
  each activityData in currentBoard.activities
@@ -15,32 +16,6 @@ template(name="cardActivities")
  each activityData in activities
    +activity(activity=activityData card=card mode=mode)

-template(name="editOrDeleteComment")
-  = ' - '
-  a.js-open-inlined-form {{_ "edit"}}
-  = ' - '
-  a.js-delete-comment {{_ "delete"}}
-
-template(name="deleteCommentPopup")
-  p {{_ "comment-delete"}}
-  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
-
-template(name="commentReactions")
-  .reactions
-    each reaction in reactions
-      span.reaction(class="{{#if isSelected reaction.userIds}}selected{{/if}}" data-codepoint="#{reaction.reactionCodepoint}" title="{{userNames reaction.userIds}}")
-        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
-
-template(name="addReactionPopup")
-  .reactions-popup
-    each codepoint in codepoints
-      span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
-
 template(name="activity")
  .activity(data-id=activity._id)
    +userAvatar(userId=activity.user._id)
@@ -130,39 +105,17 @@ template(name="activity")
        | {{{_ 'activity-checklist-item-removed' (sanitize activity.checklist.title) cardLink}}}.

      //- comment activity ----------------------------------------------------
-      if($eq mode 'card')
-        //- if we are in card mode we display the comment in a way that it
-        //- can be edited by the owner
-        if($eq activity.activityType 'addComment')
-          +inlinedForm(classNames='js-edit-comment')
-            +editor(autofocus=true)
-              = activity.comment.text
-            .edit-controls
-              button.primary(type="submit") {{_ 'edit'}}
-              .fa.fa-times-thin.js-close-inlined-form
-          else
-            .activity-comment
-              +viewer
-                = activity.comment.text
-            +commentReactions(reactions=activity.comment.reactions commentId=activity.comment._id)
-            span(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}
-              if($eq currentUser._id activity.comment.userId)
-                +editOrDeleteComment
-              else if currentUser.isBoardAdmin
-                +editOrDeleteComment
+      if($eq activity.activityType 'deleteComment')
+        | {{{_ 'activity-deleteComment' activity.commentId}}}.

-        if($eq activity.activityType 'deleteComment')
-          | {{{_ 'activity-deleteComment' activity.commentId}}}.
+      if($eq activity.activityType 'editComment')
+        | {{{_ 'activity-editComment' activity.commentId}}}.

-        if($eq activity.activityType 'editComment')
-          | {{{_ 'activity-editComment' activity.commentId}}}.
-      else
-        //- if we are not in card mode we only display a summary of the comment
-        if($eq activity.activityType 'addComment')
-          | {{{_ 'activity-on' cardLink}}}
-          a.activity-comment(href="{{ activity.card.originRelativeUrl }}")
-            +viewer
-              = activity.comment.text
+      if($eq activity.activityType 'addComment')
+        | {{{_ 'activity-on' cardLink}}}
+        a.activity-comment(href="{{ activity.card.originRelativeUrl }}")
+          +viewer
+            = activity.comment.text

      //- date activity ------------------------------------------------
      if($eq activity.activityType 'a-receivedAt')
@@ -208,6 +161,9 @@ template(name="activity")
        if($eq activity.activityType 'archivedList')
          | {{_ 'activity-archived' (sanitize listLabel)}}.

+        if($eq activity.activityType 'changedListTitle')
+          | {{_ 'activity-changedListTitle' (sanitize listLabel) boardLabelLink}}
+
      //- member activity ----------------------------------------------------
      if($eq activity.activityType 'joinMember')
        if($eq user._id activity.member._id)
@@ -243,4 +199,4 @@ template(name="activity")
      else if(currentData.timeValue)
        | {{_ activity.activityType currentData.timeValue}}

-      span(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}
+      div(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}
@@ -1,4 +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;
@@ -12,39 +14,41 @@ BlazeComponent.extendComponent({
    const sidebar = Sidebar;
    sidebar && sidebar.callFirstWith(null, 'resetNextPeak');
    this.autorun(() => {
-      let mode = this.data().mode;
-      const capitalizedMode = Utils.capitalize(mode);
-      let searchId;
-      if (mode === 'linkedcard' || mode === 'linkedboard') {
-        searchId = Utils.getCurrentCard().linkedId;
-        mode = mode.replace('linked', '');
-      } else if (mode === 'card') {
-        searchId = Utils.getCurrentCardId();
-      } else {
-        searchId = Session.get(`current${capitalizedMode}`);
-      }
-      const limit = this.page.get() * activitiesPerPage;
-      const user = Meteor.user();
-      const hideSystem = user ? user.hasHiddenSystemMessages() : false;
-      if (searchId === null) return;
-
-      this.subscribe('activities', mode, searchId, limit, hideSystem, () => {
-        this.loadNextPageLocked = false;
-
-        // TODO the guard can be removed as soon as the TODO above is resolved
-        if (!sidebar) return;
-        // If the sibear peak hasn't increased, that mean that there are no more
-        // activities, and we can stop calling new subscriptions.
-        // XXX This is hacky! We need to know excatly and reactively how many
-        // activities there are, we probably want to denormalize this number
-        // dirrectly into card and board documents.
-        const nextPeakBefore = sidebar.callFirstWith(null, 'getNextPeak');
-        sidebar.calculateNextPeak();
-        const nextPeakAfter = sidebar.callFirstWith(null, 'getNextPeak');
-        if (nextPeakBefore === nextPeakAfter) {
-          sidebar.callFirstWith(null, 'resetNextPeak');
+      let mode = this.data()?.mode;
+      if (mode) {
+        const capitalizedMode = Utils.capitalize(mode);
+        let searchId;
+        const showActivities = this.showActivities();
+        if (mode === 'linkedcard' || mode === 'linkedboard') {
+          const currentCard = Utils.getCurrentCard();
+          searchId = currentCard.linkedId;
+          mode = mode.replace('linked', '');
+        } else if (mode === 'card') {
+          searchId = Utils.getCurrentCardId();
+        } else {
+          searchId = Session.get(`current${capitalizedMode}`);
        }
-      });
+        const limit = this.page.get() * activitiesPerPage;
+        if (searchId === null) return;
+
+        this.subscribe('activities', mode, searchId, limit, showActivities, () => {
+          this.loadNextPageLocked = false;
+
+          // TODO the guard can be removed as soon as the TODO above is resolved
+          if (!sidebar) return;
+          // If the sibear peak hasn't increased, that mean that there are no more
+          // activities, and we can stop calling new subscriptions.
+          // XXX This is hacky! We need to know excatly and reactively how many
+          // activities there are, we probably want to denormalize this number
+          // dirrectly into card and board documents.
+          const nextPeakBefore = sidebar.callFirstWith(null, 'getNextPeak');
+          sidebar.calculateNextPeak();
+          const nextPeakAfter = sidebar.callFirstWith(null, 'getNextPeak');
+          if (nextPeakBefore === nextPeakAfter) {
+            sidebar.callFirstWith(null, 'resetNextPeak');
+          }
+        });
+      }
    });
  },
  loadNextPage() {
@@ -53,19 +57,31 @@ BlazeComponent.extendComponent({
      this.loadNextPageLocked = true;
    }
  },
-}).register('activities');
-
-Template.activities.helpers({
-  activities() {
-    const ret = this.card.activities();
+  showActivities() {
+    let ret = false;
+    let mode = this.data()?.mode;
+    if (mode) {
+      if (mode === 'linkedcard' || mode === 'linkedboard') {
+        const currentCard = Utils.getCurrentCard();
+        ret = currentCard.showActivities ?? false;
+      } else if (mode === 'card') {
+        ret = this.data()?.card?.showActivities ?? false;
+      } else {
+        ret = Utils.getCurrentBoard().showActivities ?? false;
+      }
+    }
    return ret;
  },
-});
+  activities() {
+    const ret = this.data().card.activities();
+    return ret;
+  },
+}).register('activities');

 BlazeComponent.extendComponent({
  checkItem() {
    const checkItemId = this.currentData().activity.checklistItemId;
-    const checkItem = ChecklistItems.findOne({ _id: checkItemId });
+    const checkItem = ReactiveCache.getChecklistItem(checkItemId);
    return checkItem && checkItem.title;
  },

@@ -145,7 +161,7 @@ BlazeComponent.extendComponent({
  lastLabel() {
    const lastLabelId = this.currentData().activity.labelId;
    if (!lastLabelId) return null;
-    const lastLabel = Boards.findOne(
+    const lastLabel = ReactiveCache.getBoard(
      this.currentData().activity.boardId,
    ).getLabelById(lastLabelId);
    if (lastLabel && (lastLabel.name === undefined || lastLabel.name === '')) {
@@ -158,7 +174,7 @@ BlazeComponent.extendComponent({
  },

  lastCustomField() {
-    const lastCustomField = CustomFields.findOne(
+    const lastCustomField = ReactiveCache.getCustomField(
      this.currentData().activity.customFieldId,
    );
    if (!lastCustomField) return null;
@@ -166,7 +182,7 @@ BlazeComponent.extendComponent({
  },

  lastCustomFieldValue() {
-    const lastCustomField = CustomFields.findOne(
+    const lastCustomField = ReactiveCache.getCustomField(
      this.currentData().activity.customFieldId,
    );
    if (!lastCustomField) return null;
@@ -201,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;
@@ -233,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)
    );
  },

@@ -246,46 +258,20 @@ BlazeComponent.extendComponent({
    return customField.name;
  },

-  events() {
-    return [
-      {
-        // XXX We should use Popup.afterConfirmation here
-        'click .js-delete-comment': Popup.afterConfirm('deleteComment', () => {
-          const commentId = this.data().activity.commentId;
-          CardComments.remove(commentId);
-          Popup.back();
-        }),
-        'submit .js-edit-comment'(evt) {
-          evt.preventDefault();
-          const commentText = this.currentComponent()
-            .getValue()
-            .trim();
-          const commentId = Template.parentData().activity.commentId;
-          if (commentText) {
-            CardComments.update(commentId, {
-              $set: {
-                text: commentText,
-              },
-            });
-          }
-        },
-      },
-    ];
-  },
 }).register('activity');

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

 Template.commentReactions.events({
  'click .reaction'(event) {
-    if (Meteor.user().isBoardMember()) {
+    if (ReactiveCache.getCurrentUser().isBoardMember()) {
      const codepoint = event.currentTarget.dataset['codepoint'];
      const commentId = Template.instance().data.commentId;
-      const cardComment = CardComments.findOne({_id: commentId});
+      const cardComment = ReactiveCache.getCardComment(commentId);
      cardComment.toggleReaction(codepoint);
    }
  },
@@ -294,10 +280,10 @@ Template.commentReactions.events({

 Template.addReactionPopup.events({
  'click .add-comment-reaction'(event) {
-    if (Meteor.user().isBoardMember()) {
+    if (ReactiveCache.getCurrentUser().isBoardMember()) {
      const codepoint = event.currentTarget.dataset['codepoint'];
      const commentId = Template.instance().data.commentId;
-      const cardComment = CardComments.findOne({_id: commentId});
+      const cardComment = ReactiveCache.getCardComment(commentId);
      cardComment.toggleReaction(codepoint);
    }
    Popup.back();
@@ -325,12 +311,13 @@ Template.addReactionPopup.helpers({

 Template.commentReactions.helpers({
  isSelected(userIds) {
-    return userIds.includes(Meteor.user()._id);
+    return Meteor.userId() && userIds.includes(Meteor.userId());
  },
  userNames(userIds) {
-    return Users.find({_id: {$in: userIds}})
-                .map(user => user.profile.fullname)
-                .join(', ');
+    const ret = ReactiveCache.getUsers({_id: {$in: userIds}})
+      .map(user => user.profile.fullname)
+      .join(', ');
+    return ret;
  }
 })

@@ -346,7 +333,7 @@ function createCardLink(card, board) {
          href: card.originRelativeUrl(),
          class: 'action-card',
        },
-        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        sanitizeHTML(text),
      ),
    )
  );
@@ -363,7 +350,7 @@ function createBoardLink(board, list) {
          href: board.originRelativeUrl(),
          class: 'action-board',
        },
-        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        sanitizeHTML(text),
      ),
    )
  );
@@ -63,3 +63,78 @@
  display: block;
  margin: auto;
 }
+.comments {
+  clear: both;
+}
+.comments .comment {
+  margin: 0.5px 0;
+  padding: 6px 0;
+  display: flex;
+}
+.comments .comment .member {
+  width: 32px;
+  height: 32px;
+}
+.comments .comment .comment-member {
+  font-weight: 700;
+}
+.comments .comment .comment-desc {
+  word-wrap: break-word;
+  overflow: hidden;
+  flex: 1;
+  align-self: center;
+  margin: 0;
+  margin-left: 3px;
+  overflow: hidden;
+  word-break: break-word;
+}
+.comments .comment .comment-desc .comment-text {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.comments .comment .comment-desc .reactions {
+  display: flex;
+  margin-top: 5px;
+  gap: 5px;
+}
+.comments .comment .comment-desc .reactions .open-comment-reaction-popup {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  height: 24px;
+}
+.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
+  font-size: 17px;
+  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;
+}
+.comments .comment .comment-desc .reactions .reaction {
+  cursor: pointer;
+  border: 1px solid #808080;
+  border-radius: 15px;
+  display: flex;
+  padding: 2px 5px;
+}
+.comments .comment .comment-desc .reactions .reaction.selected {
+  background-color: #b0c4de;
+}
+.comments .comment .comment-desc .reactions .reaction:hover {
+  background-color: #b0c4de;
+}
+.comments .comment .comment-desc .reactions .reaction .reaction-count {
+  font-size: 12px;
+}
+.comments .comment .comment-desc .comment-meta {
+  font-size: 0.8em;
+  color: #999;
+}
@@ -7,3 +7,59 @@ template(name="commentForm")
        | {{getUnsavedValue 'cardComment' currentCard._id}}
      .add-controls
        button.primary.confirm.clear.js-add-comment(type="submit") {{_ 'comment'}}
+
+template(name="comments")
+  .comments
+    each commentData in getComments
+      +comment(commentData)
+
+template(name="comment")
+  .comment
+    +userAvatar(userId=userId)
+    p.comment-desc
+      span.comment-member
+        +memberName(user=user)
+
+      +inlinedForm(classNames='js-edit-comment')
+        +editor(autofocus=true)
+          = text
+        .edit-controls
+          button.primary(type="submit") {{_ 'edit'}}
+          .fa.fa-times-thin.js-close-inlined-form
+      else
+        .comment-text
+          +viewer
+            = text
+        +commentReactions(reactions=reactions commentId=_id)
+        span(title=createdAt).comment-meta {{ moment createdAt }}
+          if($eq currentUser._id userId)
+            +editOrDeleteComment
+          else if currentUser.isBoardAdmin
+            +editOrDeleteComment
+
+template(name="editOrDeleteComment")
+  = ' - '
+  a.js-open-inlined-form {{_ "edit"}}
+  = ' - '
+  a.js-delete-comment {{_ "delete"}}
+
+template(name="deleteCommentPopup")
+  p {{_ "comment-delete"}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
+template(name="commentReactions")
+  .reactions
+    each reaction in reactions
+      span.reaction(class="{{#if isSelected reaction.userIds}}selected{{/if}}" data-codepoint="#{reaction.reactionCodepoint}" title="{{userNames reaction.userIds}}")
+        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
+
+template(name="addReactionPopup")
+  .reactions-popup
+    each codepoint in codepoints
+      span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
+
@@ -1,3 +1,5 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 const commentFormIsOpen = new ReactiveVar(false);

 BlazeComponent.extendComponent({
@@ -24,7 +26,7 @@ BlazeComponent.extendComponent({
          let boardId = card.boardId;
          let cardId = card._id;
          if (card.isLinkedCard()) {
-            boardId = Cards.findOne(card.linkedId).boardId;
+            boardId = ReactiveCache.getCard(card.linkedId).boardId;
            cardId = card.linkedId;
          } else if (card.isLinkedBoard()) {
            boardId = card.linkedId;
@@ -53,6 +55,41 @@ BlazeComponent.extendComponent({
  },
 }).register('commentForm');

+BlazeComponent.extendComponent({
+  getComments() {
+    const ret = this.data().comments();
+    return ret;
+  },
+}).register("comments");
+
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        'click .js-delete-comment': Popup.afterConfirm('deleteComment', () => {
+          const commentId = this.data()._id;
+          CardComments.remove(commentId);
+          Popup.back();
+        }),
+        'submit .js-edit-comment'(evt) {
+          evt.preventDefault();
+          const commentText = this.currentComponent()
+            .getValue()
+            .trim();
+          const commentId = this.data()._id;
+          if (commentText) {
+            CardComments.update(commentId, {
+              $set: {
+                text: commentText,
+              },
+            });
+          }
+        },
+      },
+    ];
+  },
+}).register("comment");
+
 // XXX This should be a static method of the `commentForm` component
 function resetCommentInput(input) {
  input.val(''); // without manually trigger, input event won't be fired
@@ -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
+          | ⚙️
+          | {{_ 'converting-board'}}
+        p {{_ 'converting-board-description'}}
+      
+      .board-conversion-content
+        .conversion-progress
+          .progress-bar
+            .progress-fill(style="width: {{conversionProgress}}%")
+          .progress-text {{conversionProgress}}%
+        
+        .conversion-status
+          | ⚙️
+          | {{conversionStatus}}
+        
+        .conversion-time(style="{{#unless conversionEstimatedTime}}display: none;{{/unless}}")
+          | ⏰
+          | {{_ 'estimated-time-remaining'}}: {{conversionEstimatedTime}}
+      
+      .board-conversion-footer
+        .conversion-info
+          | ℹ️
+          | {{_ '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,19 +1,22 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 BlazeComponent.extendComponent({
  onCreated() {
    this.subscribe('archivedBoards');
  },

  isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },

  archivedBoards() {
-    return Boards.find(
+    const ret = ReactiveCache.getBoards(
      { archived: true },
      {
        sort: { archivedAt: -1, modifiedAt: -1 },
      },
    );
+    return ret;
  },

  events() {
@@ -25,8 +28,8 @@ BlazeComponent.extendComponent({
            Meteor.settings &&
            Meteor.settings.public &&
            Meteor.settings.public.sandstorm;
-          if (isSandstorm && Session.get('currentBoard')) {
-            const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          if (isSandstorm && Utils.getCurrentBoardId()) {
+            const currentBoard = Utils.getCurrentBoard();
            currentBoard.archive();
          }
          const board = this.currentData();
@@ -39,8 +42,8 @@ BlazeComponent.extendComponent({
            Meteor.settings &&
            Meteor.settings.public &&
            Meteor.settings.public.sandstorm;
-          if (isSandstorm && Session.get('currentBoard')) {
-            const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          if (isSandstorm && Utils.getCurrentBoardId()) {
+            const currentBoard = Utils.getCurrentBoard();
            Boards.remove(currentBoard._id);
          }
          Boards.remove(this._id);
@@ -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,9 +36,219 @@
  bottom: 0;
  transition: margin 0.1s;
  overflow-y: auto;
+  width: 100%;
+  min-width: 100%;
 }
-.board-wrapper .board-canvas.is-sibling-sidebar-open {
-  margin-right: 248px;
+
+/* 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 */
+    }
+
+/* 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;
@@ -36,15 +267,59 @@
 .board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
  display: none;
 }
-@media screen and (max-width: 800px) {
+/* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
+.board-wrapper.mobile-view {
+  width: 100% !important;
+  min-width: 100% !important;
+  left: 0 !important;
+  right: 0 !important;
+}
+
+.board-wrapper.mobile-view .board-canvas {
+  width: 100% !important;
+  min-width: 100% !important;
+  left: 0 !important;
+  right: 0 !important;
+}
+
+.board-wrapper.mobile-view .board-canvas.mobile-view .swimlane {
+  border-bottom: 1px solid #ccc;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  min-width: 100%;
+}
+
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
+  .board-wrapper {
+    width: 100% !important;
+    min-width: 100% !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
+
+  .board-wrapper .board-canvas {
+    width: 100% !important;
+    min-width: 100% !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
+
  .board-wrapper .board-canvas .swimlane {
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    margin: 0;
-    padding: 0 0px 0px 0;
+    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
+    width: 100%;
+    min-width: 100%;
  }
 }
 .calendar-event-green {
@@ -167,3 +442,65 @@
  border-color: #2b004d;
  color: #fff !important;
 }
+/* Modal Styles */
+.modal {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+}
+.modal-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 25%; /* Adjust the height to make it smaller */
+  position: relative;
+  margin: 10% auto; /* This margin will help center the modal vertically */
+  max-width: 400px; /* Adjust the max-width to make it smaller */
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+.modal-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 1px;
+  border-bottom: 1px solid #ccc;
+}
+.modal-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  font-size: 18px;
+}
+.modal-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 4px;
+  border-top: 1px solid #ccc;
+}
+.close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  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,10 @@
 template(name="board")
-  if isBoardReady.get
+  
+  if isMigrating.get
+    +migrationProgress
+  else if isConverting.get
+    +boardConversionProgress
+  else if isBoardReady.get
    if currentBoard
      if onlyShowCurrentCard
        +cardDetails(currentCard)
@@ -16,26 +21,42 @@ template(name="boardBody")
  if notDisplayThisBoard
   | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
  else
-    .board-wrapper(class=currentBoard.colorClass)
-      +sidebar
+    // 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}} | HasSwimlanes: {{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}}"
        class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
        class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
-        class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
+        class="{{#if draggingActive.get}}is-dragging-active{{/if}}"
+        class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}"
+        class="{{#if isMiniScreen}}mobile-view{{/if}}")
        if showOverlay.get
          .board-overlay
        if currentBoard.isTemplatesBoard
          each currentBoard.swimlanes
            +swimlane(this)
        else if isViewSwimlanes
-          each currentBoard.swimlanes
-            +swimlane(this)
+          if hasSwimlanes
+            each currentBoard.swimlanes
+              +swimlane(this)
+          else
+            // Fallback: If no swimlanes exist, show lists instead of empty message
+            +listsGroup(currentBoard)
        else if isViewLists
          +listsGroup(currentBoard)
        else if isViewCalendar
          +calendarView
        else
-          +listsGroup(currentBoard)
+          // Default view - show swimlanes if they exist, otherwise show lists
+          if hasSwimlanes
+            each currentBoard.swimlanes
+              +swimlane(this)
+          else
+            +listsGroup(currentBoard)
+      +sidebar

 template(name="calendarView")
  if isViewCalendar
@@ -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: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !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 .swimlane-header {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !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: 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;
+}
+
+.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: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !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;
 }
@@ -12,92 +12,87 @@ template(name="boardHeaderBar")
      if currentBoard
        if currentUser
          with currentBoard
-            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
-              i.fa.fa-pencil-square-o
+            if currentUser.isBoardAdmin
+              a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
+                | ✏️

-          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
-                = currentBoard.stars
+            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}}")
+              | {{#if isStarred}}⭐{{else}}☆{{/if}}
+              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}}")
+              | {{#if currentBoard.isPublic}}🌐{{else}}🔒{{/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"
+                | 👁️
+              if $eq watchLevel "tracking"
+                | 🔔
+              if $eq watchLevel "muted"
+                | 🔕
+              span {{_ watchLevel}}
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+              | {{sortCardsIcon}}
+              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
            if isSortActive
-              a.board-header-btn-close.js-sort-reset(title="Remove Sort")
-                i.fa.fa-times-thin
+              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
+                | ❌

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

+  .board-header-btns.center
+
  .board-header-btns.right
    if currentBoard
      if isMiniScreen
        if currentUser
          with currentBoard
            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
-              i.fa.fa-pencil-square-o
+              | ✏️

-          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
-                = currentBoard.stars
+            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'}}")
+              | {{#if isStarred}}⭐{{else}}☆{{/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}}")
-            span {{_ currentBoard.permission}}
+            a.board-header-btn(
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              title="{{_ currentBoard.permission}}")
+              | {{#if currentBoard.isPublic}}🌐{{else}}🔒{{/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(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"
+                | 👁️
+              if $eq watchLevel "tracking"
+                | 🔔
+              if $eq watchLevel "muted"
+                | 🔕
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+              | {{sortCardsIcon}}
            if isSortActive
-              a.board-header-btn-close.js-sort-reset(title="Remove Sort")
-                i.fa.fa-times-thin
+              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
+                | ❌

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

      if isSandstorm
        if currentUser
          a.board-header-btn.js-open-archived-board
-            i.fa.fa-archive
-            span {{_ 'archives'}}
+            | 📦

      //if showSort
      //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
@@ -107,60 +102,56 @@ template(name="boardHeaderBar")
      a.board-header-btn.js-open-filter-view(
          title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
          class="{{#if Filter.isActive}}emphasis{{/if}}")
-        i.fa.fa-filter
-        span {{#if Filter.isActive}}{{_ 'filter-on'}}{{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'}}")
-          i.fa.fa-caret-down
+          | ▼
          if $eq boardView 'board-view-swimlanes'
-            i.fa.fa-th-large
+            | 🏊
          if $eq boardView 'board-view-lists'
-            i.fa.fa-trello
+            | 📋
          if $eq boardView 'board-view-cal'
-            i.fa.fa-calendar
-          span {{#if boardView}}{{_ boardView}}{{else}}{{_ 'board-view-swimlanes'}}{{/if}}
+            | 📅

      if canModifyBoard
        a.board-header-btn.js-multiselection-activate(
            title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
            class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
-          i.fa.fa-check-square-o
-          span {{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}
-          if MultiSelection.isActive
-            a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
-              i.fa.fa-times-thin
+          | ☑️
+        if MultiSelection.isActive
+          a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+            | ❌

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

 template(name="boardVisibilityList")
  ul.pop-over-list
    li
      with "private"
        a.js-select-visibility
-          i.fa.fa-lock.colorful
+          | 🔒
          | {{_ 'private'}}
          if visibilityCheck
-            i.fa.fa-check
+            | ✅
          span.sub-name {{_ 'private-desc'}}
    if notAllowPrivateVisibilityOnly
      li
        with "public"
          a.js-select-visibility
-            i.fa.fa-globe.colorful
+            | 🌐
            | {{_ 'public'}}
            if visibilityCheck
-              i.fa.fa-check
+              | ✅
            span.sub-name {{_ 'public-desc'}}

 template(name="boardChangeVisibilityPopup")
@@ -171,26 +162,26 @@ template(name="boardChangeWatchPopup")
    li
      with "watching"
        a.js-select-watch
-          i.fa.fa-eye.colorful
+          | 👁️
          | {{_ 'watching'}}
          if watchCheck
-            i.fa.fa-check
+            | ✅
          span.sub-name {{_ 'watching-info'}}
    li
      with "tracking"
        a.js-select-watch
-          i.fa.fa-bell.colorful
+          | 🔔
          | {{_ 'tracking'}}
          if watchCheck
-            i.fa.fa-check
+            | ✅
          span.sub-name {{_ 'tracking-info'}}
    li
      with "muted"
        a.js-select-watch
-          i.fa.fa-bell-slash.colorful
+          | 🔕
          | {{_ 'muted'}}
          if watchCheck
-            i.fa.fa-check
+            | ✅
          span.sub-name {{_ 'muted-info'}}

 template(name="boardChangeViewPopup")
@@ -198,24 +189,24 @@ template(name="boardChangeViewPopup")
    li
      with "board-view-swimlanes"
        a.js-open-swimlanes-view
-          i.fa.fa-th-large.colorful
+          | 🏊
          | {{_ 'board-view-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
+          | 📋
          | {{_ '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
+          | 📅
          | {{_ 'board-view-cal'}}
          if $eq Utils.boardView "board-view-cal"
-            i.fa.fa-check
+            | ✅

 template(name="createBoard")
  form
@@ -227,11 +218,40 @@ template(name="createBoard")
    else
      p.quiet
        if $eq visibility.get 'public'
-          span.fa.fa-globe.colorful
+          span 🌐
          = " "
          | {{{_ 'board-public-info'}}}
        else
-          span.fa.fa-lock.colorful
+          span 🔒
+          = " "
+          | {{{_ '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="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 🌐
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span 🔒
          = " "
          | {{{_ 'board-private-info'}}}
        a.js-change-visibility {{_ 'change'}}.
@@ -255,10 +275,10 @@ template(name="createBoard")
 //     li
 //      a.js-sort-by(name="{{value.name}}")
 //        if $eq sortby value.name
-//           i(class="fa {{Direction}}")
+//           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
 //        | {{_ value.label }}{{_ value.shortLabel}}
 //        if $eq sortby value.name
-//           i(class="fa fa-check")
+//           | ✅

 template(name="boardChangeTitlePopup")
  form
@@ -278,14 +298,22 @@ template(name="boardCreateRulePopup")
 template(name="cardsSortPopup")
  ul.pop-over-list
    li
-      a.js-sort-due {{_ 'due-date'}}
+      a.js-sort-due
+        | 📅
+        | {{_ 'due-date'}}
      hr
    li
-      a.js-sort-title {{_ 'title-alphabetically'}}
+      a.js-sort-title
+        | 🔤
+        | {{_ 'title-alphabetically'}}
      hr
    li
-      a.js-sort-created-desc {{_ 'created-at-newest-first'}}
+      a.js-sort-created-desc
+        | ⬇️
+        | {{_ 'created-at-newest-first'}}
      hr
    li
-      a.js-sort-created-asc {{_ 'created-at-oldest-first'}}
+      a.js-sort-created-asc
+        | ⬆️
+        | {{_ 'created-at-oldest-first'}}

@@ -1,41 +1,12 @@
+import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import dragscroll from '@wekanteam/dragscroll';

 /*
 const DOWNCLS = 'fa-sort-down';
 const UPCLS = 'fa-sort-up';
 */
 const sortCardsBy = new ReactiveVar('');
-Template.boardMenuPopup.events({
-  'click .js-rename-board': Popup.open('boardChangeTitle'),
-  'click .js-custom-fields'() {
-    Sidebar.setView('customFields');
-    Popup.back();
-  },
-  'click .js-open-archives'() {
-    Sidebar.setView('archives');
-    Popup.back();
-  },
-  'click .js-change-board-color': Popup.open('boardChangeColor'),
-  'click .js-change-language': Popup.open('changeLanguage'),
-  'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    currentBoard.archive();
-    // XXX We should have some kind of notification on top of the page to
-    // confirm that the board was successfully archived.
-    FlowRouter.go('home');
-  }),
-  'click .js-delete-board': Popup.afterConfirm('deleteBoard', function() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    Popup.back();
-    Boards.remove(currentBoard._id);
-    FlowRouter.go('home');
-  }),
-  'click .js-outgoing-webhooks': Popup.open('outgoingWebhooks'),
-  'click .js-import-board': Popup.open('chooseBoardSource'),
-  'click .js-subtask-settings': Popup.open('boardSubtaskSettings'),
-  'click .js-card-settings': Popup.open('boardCardSettings'),
-  'click .js-minicard-settings': Popup.open('boardMinicardSettings'),
-});

 Template.boardChangeTitlePopup.events({
  submit(event, templateInstance) {
@@ -58,24 +29,26 @@ Template.boardChangeTitlePopup.events({

 BlazeComponent.extendComponent({
  watchLevel() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
    return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
  },

+
+
  isStarred() {
    const boardId = Session.get('currentBoard');
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
    return user && user.hasStarred(boardId);
  },

  // Only show the star counter if the number of star is greater than 2
  showStarCounter() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
    return currentBoard && currentBoard.stars >= 2;
  },
  /*
  showSort() {
-    return Meteor.user().hasSortBy();
+    return ReactiveCache.getCurrentUser().hasSortBy();
  },
  directionClass() {
    return this.currentDirection() === -1 ? DOWNCLS : UPCLS;
@@ -85,10 +58,10 @@ BlazeComponent.extendComponent({
    Meteor.call('setListSortBy', direction + this.currentListSortBy());
  },
  currentDirection() {
-    return Meteor.user().getListSortByDirection();
+    return ReactiveCache.getCurrentUser().getListSortByDirection();
  },
  currentListSortBy() {
-    return Meteor.user().getListSortBy();
+    return ReactiveCache.getCurrentUser().getListSortBy();
  },
  listSortShortDesc() {
    return `list-label-short-${this.currentListSortBy()}`;
@@ -99,7 +72,7 @@ BlazeComponent.extendComponent({
      {
        'click .js-edit-board-title': Popup.open('boardChangeTitle'),
        'click .js-star-board'() {
-          Meteor.user().toggleBoardStar(Session.get('currentBoard'));
+          ReactiveCache.getCurrentUser().toggleBoardStar(Session.get('currentBoard'));
        },
        'click .js-open-board-menu': Popup.open('boardMenu'),
        'click .js-change-visibility': Popup.open('boardChangeVisibility'),
@@ -109,10 +82,29 @@ BlazeComponent.extendComponent({
        },
        'click .js-toggle-board-view': Popup.open('boardChangeView'),
        'click .js-toggle-sidebar'() {
-          Sidebar.toggle();
+          console.log('Hamburger menu clicked');
+          // Use the same approach as keyboard shortcuts
+          if (typeof Sidebar !== 'undefined' && Sidebar && typeof Sidebar.toggle === 'function') {
+            console.log('Using Sidebar.toggle()');
+            Sidebar.toggle();
+          } else {
+            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') {
+                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'),
        /*
@@ -129,14 +121,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();
@@ -155,22 +155,33 @@ BlazeComponent.extendComponent({
      },
    ];
  },
+
 }).register('boardHeaderBar');

 Template.boardHeaderBar.helpers({
-  canModifyBoard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly()
-    );
-  },
  boardView() {
    return Utils.boardView();
  },
  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({
@@ -237,6 +248,7 @@ const CreateBoard = BlazeComponent.extendComponent({
            title: title,
            permission: 'private',
            type: 'template-container',
+            migrationVersion: 1, // Latest version - no migration needed
          }),
       );

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

@@ -313,7 +326,7 @@ const CreateBoard = BlazeComponent.extendComponent({
  onSubmit(event) {
    super.onSubmit(event);
    // Immediately star boards crated with the headerbar popup.
-    Meteor.user().toggleBoardStar(this.boardId.get());
+    ReactiveCache.getCurrentUser().toggleBoardStar(this.boardId.get());
  }
 }.register('headerBarCreateBoardPopup'));

@@ -322,12 +335,12 @@ BlazeComponent.extendComponent({
    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
  },
  visibilityCheck() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
    return this.currentData() === currentBoard.permission;
  },

  selectBoardVisibility() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
    const visibility = this.currentData();
    currentBoard.setVisibility(visibility);
    Popup.back();
@@ -344,7 +357,7 @@ BlazeComponent.extendComponent({

 BlazeComponent.extendComponent({
  watchLevel() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
    return currentBoard.getWatchLevel(Meteor.userId());
  },

@@ -384,7 +397,7 @@ BlazeComponent.extendComponent({
  allowedSortValues() {
    const types = [];
    const pushed = {};
-    Meteor.user()
+    ReactiveCache.getCurrentUser()
      .getListSortTypes()
      .forEach(type => {
        const key = type.replace(/^-/, '');
@@ -400,16 +413,16 @@ BlazeComponent.extendComponent({
    return types;
  },
  Direction() {
-    return Meteor.user().getListSortByDirection() === -1
+    return ReactiveCache.getCurrentUser().getListSortByDirection() === -1
      ? this.downClass
      : this.upClass;
  },
  sortby() {
-    return Meteor.user().getListSortBy();
+    return ReactiveCache.getCurrentUser().getListSortBy();
  },

  setSortBy(type = null) {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
    if (type === null) {
      type = user._getListSortBy();
    } else {
@@ -1,5 +1,86 @@
@import url("../../../css/reset.css") print, screen;

+/* Board List Header with Zoom Controls */
+.board-list-header {
+  display: flex;
+  justify-content: center;
+  margin: 1vh 0 2vh 0;
+  padding: 1vh 0;
+}
+
+.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;
+  text-decoration: none !important;
+  color: #000 !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 0.3vw !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;
+}
+
 .board-list {
  margin: 0 8px;
 }
@@ -22,8 +103,8 @@
  transform: rotate(4deg);
  display: block !important;
 }
-.board-list li.starred .fa-star,
-.board-list li.starred .fa-star-o {
+.board-list li.starred .is-star-active,
+.board-list li.starred .is-not-star-active {
  opacity: 1;
 }
 .board-list .board-list-item {
@@ -73,8 +154,8 @@
 .board-list .js-add-board :hover {
  background-color: #939393;
 }
-.board-list .fa-star,
-.board-list .fa-star-o {
+.board-list .is-star-active,
+.board-list .is-not-star-active {
  bottom: 0;
  font-size: 14px;
  height: 18px;
@@ -131,30 +212,30 @@
  transition-duration: 0.15s;
  transition-property: color, font-size, background;
 }
-.board-list li:hover a:hover .fa-star,
+.board-list li:hover a:hover .is-star-active,
 .board-list li:hover a:hover .fa-clone,
 .board-list li:hover a:hover .fa-archive,
-.board-list li:hover a:hover .fa-star-o {
+.board-list li:hover a:hover .is-not-star-active {
  color: #fff;
 }
-.board-list li:hover a .fa-star,
+.board-list li:hover a .is-star-active,
 .board-list li:hover a .fa-clone,
 .board-list li:hover a .fa-archive,
-.board-list li:hover a .fa-star-o {
+.board-list li:hover a .is-not-star-active {
  color: #fff;
  opacity: 0.75;
 }
-.board-list li:hover a .fa-star:hover,
+.board-list li:hover a .is-star-active:hover,
 .board-list li:hover a .fa-clone:hover,
 .board-list li:hover a .fa-archive:hover,
-.board-list li:hover a .fa-star-o:hover {
+.board-list li:hover a .is-not-star-active:hover {
  font-size: 18px;
  opacity: 1;
 }
-.board-list li:hover a .fa-star.is-star-active,
-.board-list li:hover a .fa-clone.is-star-active,
-.board-list li:hover a .fa-archive.is-star-active,
-.board-list li:hover a .fa-star-o.is-star-active {
+.board-list li:hover a .is-star-active,
+.board-list li:hover a .fa-clone,
+.board-list li:hover a .fa-archive,
+.board-list li:hover a .is-not-star-active {
  opacity: 1;
 }
 .board-backgrounds-list .board-background-select {
@@ -192,17 +273,144 @@
  font-size: 25px;
  color: #fff;
 }
-@media screen and (max-width: 800px) {
+/* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
+.board-list.mobile-view {
+  height: calc(100vh - 120px);
+  overflow-y: scroll !important;
+  overflow-x: hidden;
+  padding: 0 1rem;
+  margin: 0;
+  scrollbar-width: auto !important;
+  scrollbar-color: #888 #f1f1f1;
+}
+.board-list.mobile-view li {
+  width: 100%;
+  float: none;
+  display: block;
+  margin-bottom: 1rem;
+  padding-right: 50px; /* Space for drag handle */
+}
+.board-list.mobile-view .board-list-item {
+  overflow: visible;
+  height: 8rem;
+  width: 100%;
+  margin: 0;
+  padding-right: 50px; /* Ensure content doesn't overlap with drag handle */
+}
+
+.board-list.mobile-view .board-list-item .details {
+  padding-right: 50px; /* Extra space for drag handle */
+  width: 100%;
+  box-sizing: border-box;
+}
+.board-list.mobile-view .board-list-item-sub-name {
+  position: relative;
+  top: -100px;
+  left: -100px;
+}
+.board-list.mobile-view .board-handle {
+  position: absolute;
+  padding: 7px;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10px;
+  font-size: 24px;
+  color: #fff;
+  background: rgba(0,0,0,0.3);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: background-color 0.2s ease;
+}
+
+.board-list.mobile-view .board-handle:hover {
+  background: rgba(255, 255, 0, 0.8) !important; /* Yellow hover */
+}
+
+/* Force scrollbar to be visible on mobile view */
+.board-list.mobile-view::-webkit-scrollbar {
+  width: 12px !important;
+  display: block !important;
+  visibility: visible !important;
+}
+
+.board-list.mobile-view::-webkit-scrollbar-track {
+  background: #f1f1f1 !important;
+  border-radius: 6px !important;
+  display: block !important;
+  visibility: visible !important;
+}
+
+.board-list.mobile-view::-webkit-scrollbar-thumb {
+  background: #888 !important;
+  border-radius: 6px !important;
+  display: block !important;
+  visibility: visible !important;
+}
+
+.board-list.mobile-view::-webkit-scrollbar-thumb:hover {
+  background: #555 !important;
+}
+
+/* Force mobile view to have scrollable content */
+.board-list.mobile-view {
+  min-height: 100vh; /* Force content to be tall enough to scroll */
+}
+
+/* Hide archive and clone board buttons in mobile view */
+.board-list.mobile-view .js-archive-board,
+.board-list.mobile-view .js-clone-board {
+  display: none !important;
+}
+
+/* Change board drag handle to up-down arrow in mobile view */
+.board-list.mobile-view .board-handle.fa-arrows::before {
+  content: "↕️" !important;
+  font-family: inherit !important;
+}
+
+.board-list.mobile-view::after {
+  content: '';
+  display: block;
+  height: 100px;
+}
+
+@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),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
  .board-list {
    height: 100%;
-    overflow: scroll;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 1rem;
+    margin: 0;
  }
  .board-list li {
-    width: 50%;
+    width: 100%;
+    float: none;
+    display: block;
+    margin-bottom: 1rem;
+    padding-right: 50px; /* Space for drag handle */
  }
  .board-list .board-list-item {
-    overflow: hidden;
+    overflow: visible;
    height: 8rem;
+    width: 100%;
+    margin: 0;
+    padding-right: 50px; /* Ensure content doesn't overlap with drag handle */
+  }
+
+  .board-list .board-list-item .details {
+    padding-right: 50px; /* Extra space for drag handle */
+    width: 100%;
+    box-sizing: border-box;
  }
  .board-list .board-list-item-sub-name {
    position: relative;
@@ -216,19 +424,297 @@
    transform: translateY(-50%);
    right: 10px;
    font-size: 24px;
+    color: #fff;
+    background: rgba(0,0,0,0.3);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: background-color 0.2s ease;
+  }
+
+  .board-list .board-handle:hover {
+    background: rgba(255, 255, 0, 0.8) !important; /* Yellow hover */
  }
 }
+/* Very small screens - ensure one board per row */
@media screen and (max-width: 360px) {
-  li {
-    width: 100%;
+  .board-list li {
+    width: 100% !important;
+    float: none !important;
+    display: block !important;
  }
-  .board-handle {
+  .board-list .board-handle {
    position: absolute;
    padding: 7px;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    font-size: 24px;
+    color: #fff;
+    background: rgba(0,0,0,0.3);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* Mobile - make all text and icons 2x bigger above #content on All Boards page */
+@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),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
+  .wrapper {
+    font-size: 2em !important; /* 2x bigger base font size for All Boards page */
+  }
+
+  .wrapper * {
+    font-size: inherit !important; /* Inherit the 2x scaling */
+  }
+
+  .wrapper .fa, .wrapper .icon {
+    font-size: 2em !important; /* 2x bigger icons */
+  }
+
+  .board-list-header {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list-header h1 {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .AllBoardTeamsOrgs {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .AllBoardTeamsOrgs select {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .AllBoardTeamsOrgs input {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .AllBoardTeamsOrgs .fa {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list .board-list-item {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list .board-list-item-name {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list .board-list-item-desc {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list .minicard-members {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list .minicard-lists {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list .fa {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+
+  .board-list .board-handle {
+    font-size: 1em !important; /* Use inherited 2x scaling */
+  }
+}
+
+/* Fallback for iPhone devices using JavaScript detection - All Boards page */
+.iphone-device .wrapper {
+  font-size: 2em !important; /* 2x bigger base font size for All Boards page */
+}
+
+.iphone-device .wrapper * {
+  font-size: inherit !important; /* Inherit the 2x scaling */
+}
+
+.iphone-device .wrapper .fa, .iphone-device .wrapper .icon {
+  font-size: 2em !important; /* 2x bigger icons */
+}
+
+.iphone-device .board-list-header {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list-header h1 {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .AllBoardTeamsOrgs {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .AllBoardTeamsOrgs select {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .AllBoardTeamsOrgs input {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .AllBoardTeamsOrgs .fa {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list .board-list-item {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list .board-list-item-name {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list .board-list-item-desc {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list .minicard-members {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list .minicard-lists {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list .fa {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+.iphone-device .board-list .board-handle {
+  font-size: 1em !important; /* Use inherited 2x scaling */
+}
+
+/* iPhone 12 Mini and very small screens - make everything much larger */
+@media screen and (max-width: 400px) and (max-height: 900px) {
+  .board-list {
+    height: calc(100vh - 120px) !important;
+    overflow-y: scroll !important;
+    overflow-x: hidden !important;
+    -webkit-overflow-scrolling: touch;
+    padding: 0 0.5rem;
+  }
+
+  .board-list li {
+    width: 100% !important;
+    float: none !important;
+    display: block !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .board-list .board-list-item {
+    height: 12rem !important; /* Much taller */
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 1rem !important; /* More padding */
+    font-size: 18px !important; /* Much larger text */
+    line-height: 1.4 !important;
+  }
+
+  .board-list .board-list-item .board-list-item-name {
+    font-size: 20px !important; /* Larger board names */
+    font-weight: bold !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .board-list .board-list-item .board-list-item-desc {
+    font-size: 16px !important; /* Larger descriptions */
+    line-height: 1.3 !important;
+  }
+
+  .board-list .board-list-item .minicard-members {
+    font-size: 14px !important; /* Larger member avatars */
+  }
+
+  .board-list .board-list-item .minicard-lists {
+    font-size: 14px !important; /* Larger list counters */
+  }
+
+  .board-list .board-handle {
+    position: absolute;
+    padding: 10px !important;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 15px !important;
+    font-size: 28px !important; /* Much larger drag handle */
+    color: #fff;
+    background: rgba(0,0,0,0.4) !important;
+    border-radius: 50%;
+    width: 50px !important; /* Larger handle */
+    height: 50px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: background-color 0.2s ease;
+  }
+
+  .board-list .board-handle:hover {
+    background: rgba(255, 255, 0, 0.8) !important; /* Yellow hover */
+  }
+
+  /* Force scrollbar to be visible and larger */
+  .board-list::-webkit-scrollbar {
+    width: 16px !important; /* Much wider scrollbar */
+    display: block !important;
+    visibility: visible !important;
+  }
+
+  .board-list::-webkit-scrollbar-track {
+    background: #f1f1f1 !important;
+    border-radius: 8px !important;
+    display: block !important;
+    visibility: visible !important;
+  }
+
+  .board-list::-webkit-scrollbar-thumb {
+    background: #666 !important; /* Darker for better visibility */
+    border-radius: 8px !important;
+    display: block !important;
+    visibility: visible !important;
+    min-height: 50px !important; /* Minimum thumb size */
+  }
+
+  .board-list::-webkit-scrollbar-thumb:hover {
+    background: #333 !important;
+  }
+
+  /* Ensure scrollbar is always visible */
+  .board-list {
+    scrollbar-gutter: stable;
+    scrollbar-width: auto !important;
+    min-height: 100vh !important;
+  }
+
+  .board-list::after {
+    content: '';
+    display: block;
+    height: 200px !important; /* More space to ensure scrolling */
  }
 }
 .AllBoardTeamsOrgs {
@@ -279,3 +765,91 @@
  padding-right: 6px;
  text-align: center;
 }
+
+/* Fix multiple scrollbars issue on mobile */
+@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),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
+  .wrapper {
+    overflow: hidden;
+    height: 100vh;
+  }
+
+  .board-list {
+    overflow-y: scroll !important;
+    overflow-x: hidden !important;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: #888 #f1f1f1;
+    height: calc(100vh - 120px); /* Ensure there's content to scroll */
+  }
+
+  /* Force scrollbar to always be visible */
+  .board-list::-webkit-scrollbar {
+    width: 12px !important;
+    display: block !important;
+    visibility: visible !important;
+  }
+
+  .board-list::-webkit-scrollbar-track {
+    background: #f1f1f1 !important;
+    border-radius: 6px !important;
+    display: block !important;
+    visibility: visible !important;
+  }
+
+  .board-list::-webkit-scrollbar-thumb {
+    background: #888 !important;
+    border-radius: 6px !important;
+    display: block !important;
+    visibility: visible !important;
+  }
+
+  .board-list::-webkit-scrollbar-thumb:hover {
+    background: #555 !important;
+  }
+
+  /* Ensure scrollbar is always visible */
+  .board-list::-webkit-scrollbar-corner {
+    background: #f1f1f1 !important;
+  }
+
+  /* Force scrollbar to be visible */
+  .board-list {
+    scrollbar-gutter: stable;
+    scrollbar-width: auto !important;
+    min-height: 100vh; /* Force content to be tall enough to scroll */
+  }
+
+  /* Ensure there's always content to scroll */
+  .board-list::after {
+    content: '';
+    display: block;
+    height: 100px;
+  }
+
+  /* Ensure only one scrollbar is visible */
+  body {
+    overflow: hidden;
+  }
+
+  #content {
+    overflow: hidden;
+  }
+
+  /* Hide archive and clone board buttons in mobile view */
+  .board-list .js-archive-board,
+  .board-list .js-clone-board {
+    display: none !important;
+  }
+
+  /* Change board drag handle to up-down arrow in mobile view */
+  .board-list .board-handle.fa-arrows::before {
+    content: "↕️" !important;
+    font-family: inherit !important;
+  }
+}
+
@@ -1,5 +1,7 @@
 template(name="boardList")
  .wrapper
+    .board-list-header
+
    ul.AllBoardTeamsOrgs
      li.AllBoardTeams
        if userHasTeams
@@ -29,7 +31,7 @@ template(name="boardList")
            input#filterBtn(type="button" value="{{_ 'filter'}}")
            input#resetBtn(type="button" value="{{_ 'filter-clear'}}")

-    ul.board-list.clearfix.js-boards
+    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'}}
@@ -62,11 +64,9 @@ template(name="boardList")
                    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
+                  i.fa.board-handle(
+                      class="fa-arrows"
+                      title="{{_ 'drag-board'}}")
                    if isSandstorm
                      i.fa.js-clone-board(
                          class="fa-clone"
@@ -106,9 +106,10 @@ template(name="boardList")
                        each list in boardLists _id
                          .item
                            | {{ list }}
-                  i.fa.js-star-board(
-                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                  a.js-star-board(
+                    class="{{#if isStarred}}is-star-active{{else}}is-not-star-active{{/if}}"
                    title="{{_ 'star-board-title'}}")
+                    | {{#if isStarred}}⭐{{else}}☆{{/if}}
                  p.board-list-item-desc
                    +viewer
                      = description
@@ -116,32 +117,36 @@ template(name="boardList")
                    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
+                  i.fa.board-handle(
+                      class="fa-arrows"
+                      title="{{_ 'drag-board'}}")
                    if isSandstorm
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
+                      a.js-clone-board(
+                        class="fa-clone"
+                        title="{{_ 'duplicate-board'}}")
+                        | 📋
+                      a.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'}}")
+                      a.js-clone-board(
+                        class="fa-clone"
+                        title="{{_ 'duplicate-board'}}")
+                        | 📋
+                      a.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.js-clone-board(
+                        class="fa-clone"
+                        title="{{_ 'duplicate-board'}}")
+                        | 📋
+                      a.js-archive-board(
+                        class="fa-archive"
+                        title="{{_ 'archive-board'}}")
+                        | 📦

 template(name="boardListHeaderBar")
  h1 {{_ title }}
@@ -1,16 +1,18 @@
+import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';

 const subManager = new SubsManager();

 Template.boardList.helpers({
-  currentSetting() {
-    return Settings.findOne();
-  },
  hideCardCounterList() {
-    return Utils.isMiniScreen() && Session.get('currentBoard');
+    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
+       return Utils.isMiniScreen() && Session.get('currentBoard'); */
+    return true;
  },
  hideBoardMemberList() {
-    return Utils.isMiniScreen() && Session.get('currentBoard');
+    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
+       return Utils.isMiniScreen() && Session.get('currentBoard'); */
+    return true;
  },
 })

@@ -20,6 +22,9 @@ Template.boardListHeaderBar.events({
  },
 });

+Template.boardList.events({
+});
+
 Template.boardListHeaderBar.helpers({
  title() {
    //if (FlowRouter.getRouteName() === 'template-container') {
@@ -29,10 +34,10 @@ Template.boardListHeaderBar.helpers({
    //}
  },
  templatesBoardId() {
-    return Meteor.user() && Meteor.user().getTemplatesBoardId();
+    return ReactiveCache.getCurrentUser()?.getTemplatesBoardId();
  },
  templatesBoardSlug() {
-    return Meteor.user() && Meteor.user().getTemplatesBoardSlug();
+    return ReactiveCache.getCurrentUser()?.getTemplatesBoardSlug();
  },
 });

@@ -40,7 +45,7 @@ BlazeComponent.extendComponent({
  onCreated() {
    Meteor.subscribe('setting');
    Meteor.subscribe('tableVisibilityModeSettings');
-    let currUser = Meteor.user();
+    let currUser = ReactiveCache.getCurrentUser();
    let userLanguage;
    if (currUser && currUser.profile) {
      userLanguage = currUser.profile.language
@@ -84,7 +89,6 @@ BlazeComponent.extendComponent({
        // 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);
      },
    });
@@ -99,51 +103,34 @@ BlazeComponent.extendComponent({
    });
  },
  userHasTeams() {
-    if (Meteor.user() != null && Meteor.user().teams && Meteor.user().teams.length > 0)
+    if (ReactiveCache.getCurrentUser()?.teams?.length > 0)
      return true;
    else
      return false;
  },
  teamsDatas() {
-    if (Meteor.user().teams)
-      return Meteor.user().teams.sort((a, b) => a.teamDisplayName.localeCompare(b.teamDisplayName));
+    const teams = ReactiveCache.getCurrentUser()?.teams
+    if (teams)
+      return teams.sort((a, b) => a.teamDisplayName.localeCompare(b.teamDisplayName));
    else
      return [];
  },
  userHasOrgs() {
-    if (Meteor.user() != null && Meteor.user().orgs && Meteor.user().orgs.length > 0)
+    if (ReactiveCache.getCurrentUser()?.orgs?.length > 0)
      return true;
    else
      return false;
  },
-  /*
-    userHasTemplates(){
-      if(Meteor.user() != null && Meteor.user().orgs && Meteor.user().orgs.length > 0)
-        return true;
-      else
-        return false;
-    },
-  */
  orgsDatas() {
-    if (Meteor.user().orgs)
-      return Meteor.user().orgs.sort((a, b) => a.orgDisplayName.localeCompare(b.orgDisplayName));
+    const orgs = ReactiveCache.getCurrentUser()?.orgs;
+    if (orgs)
+      return orgs.sort((a, b) => a.orgDisplayName.localeCompare(b.orgDisplayName));
    else
      return [];
  },
  userHasOrgsOrTeams() {
-    let boolUserHasOrgs;
-    if (Meteor.user() != null && Meteor.user().orgs && Meteor.user().orgs.length > 0)
-      boolUserHasOrgs = true;
-    else
-      boolUserHasOrgs = false;
-
-    let boolUserHasTeams;
-    if (Meteor.user() != null && Meteor.user().teams && Meteor.user().teams.length > 0)
-      boolUserHasTeams = true;
-    else
-      boolUserHasTeams = false;
-
-    return (boolUserHasOrgs || boolUserHasTeams);
+    const ret = this.userHasOrgs() || this.userHasTeams();
+    return ret;
  },
  boards() {
    let query = {
@@ -165,17 +152,10 @@ BlazeComponent.extendComponent({
      if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue) {
        query.$and.push({ 'permission': 'private' });
      }
-      const currUser = Users.findOne(Meteor.userId());
+      const currUser = ReactiveCache.getCurrentUser();

-      // const currUser = Users.findOne(Meteor.userId(), {
-      //   fields: {
-      //     orgs: 1,
-      //     teams: 1,
-      //   },
-      // });
-
-      let orgIdsUserBelongs = currUser !== undefined && currUser.teams !== 'undefined' ? currUser.orgIdsUserBelongs() : '';
-      if (orgIdsUserBelongs && orgIdsUserBelongs != '') {
+      let orgIdsUserBelongs = currUser?.orgIdsUserBelongs() || '';
+      if (orgIdsUserBelongs) {
        let orgsIds = orgIdsUserBelongs.split(',');
        // for(let i = 0; i < orgsIds.length; i++){
        //   query.$and[2].$or.push({'orgs.orgId': orgsIds[i]});
@@ -185,8 +165,8 @@ BlazeComponent.extendComponent({
        query.$and[2].$or.push({ 'orgs.orgId': { $in: orgsIds } });
      }

-      let teamIdsUserBelongs = currUser !== undefined && currUser.teams !== 'undefined' ? currUser.teamIdsUserBelongs() : '';
-      if (teamIdsUserBelongs && teamIdsUserBelongs != '') {
+      let teamIdsUserBelongs = currUser?.teamIdsUserBelongs() || '';
+      if (teamIdsUserBelongs) {
        let teamsIds = teamIdsUserBelongs.split(',');
        // for(let i = 0; i < teamsIds.length; i++){
        //   query.$or[2].$or.push({'teams.teamId': teamsIds[i]});
@@ -204,51 +184,51 @@ BlazeComponent.extendComponent({
      };
    }

-    return Boards.find(query, {
+    const ret = ReactiveCache.getBoards(query, {
      sort: { sort: 1 /* boards default sorting */ },
    });
+    return ret;
  },
  boardLists(boardId) {
-    let boardLists = [];
-    const lists = Lists.find({ 'boardId': boardId, 'archived': false },{sort: ['sort','asc']});
-    lists.forEach(list => {
-      let cardCount = Cards.find({ 'boardId': boardId, 'listId': list._id }).count()
-      boardLists.push(`${list.title}: ${cardCount}`);
+    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
+    const lists = ReactiveCache.getLists({ 'boardId': boardId, 'archived': false },{sort: ['sort','asc']});
+    const ret = lists.map(list => {
+      let cardCount = ReactiveCache.getCards({ 'boardId': boardId, 'listId': list._id }).length;
+      return `${list.title}: ${cardCount}`;
    });
-    return boardLists
+    return ret;
+    */
+    return [];
  },

  boardMembers(boardId) {
-    let boardMembers = [];
-    const lists = Boards.findOne({ '_id': boardId })
-    let members = lists.members
-    members.forEach(member => {
-      boardMembers.push(member.userId);
-    });
-    return boardMembers
+    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
+    const lists = ReactiveCache.getBoard(boardId)
+    const boardMembers = lists?.members.map(member => member.userId);
+    return boardMembers;
+    */
+    return [];
  },

  isStarred() {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
    return user && user.hasStarred(this.currentData()._id);
  },
  isAdministrable() {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
    return user && user.isBoardAdmin(this.currentData()._id);
  },

  hasOvertimeCards() {
-    subManager.subscribe('board', this.currentData()._id, false);
    return this.currentData().hasOvertimeCards();
  },

  hasSpentTimeCards() {
-    subManager.subscribe('board', this.currentData()._id, false);
    return this.currentData().hasSpentTimeCards();
  },

  isInvited() {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
    return user && user.isInvitedTo(this.currentData()._id);
  },

@@ -258,38 +238,44 @@ BlazeComponent.extendComponent({
        'click .js-add-board': Popup.open('createBoard'),
        'click .js-star-board'(evt) {
          const boardId = this.currentData()._id;
-          Meteor.user().toggleBoardStar(boardId);
+          ReactiveCache.getCurrentUser().toggleBoardStar(boardId);
          evt.preventDefault();
        },
        'click .js-clone-board'(evt) {
-          let title = getSlug(Boards.findOne(this.currentData()._id).title) || 'cloned-board';
-          Meteor.call(
-            'copyBoard',
-            this.currentData()._id,
-            {
-              sort: Boards.find({ archived: false }).count(),
-              type: 'board',
-              title: Boards.findOne(this.currentData()._id).title,
-            },
-            (err, res) => {
-              if (err) {
-                console.error(err);
-              } else {
-                Session.set('fromBoard', null);
-                subManager.subscribe('board', res, false);
-                FlowRouter.go('board', {
-                  id: res,
-                  slug: title,
-                });
-              }
-            },
-          );
-          evt.preventDefault();
+          if (confirm(TAPi18n.__('duplicate-board-confirm'))) {
+            let title =
+              getSlug(ReactiveCache.getBoard(this.currentData()._id).title) ||
+              'cloned-board';
+            Meteor.call(
+              'copyBoard',
+              this.currentData()._id,
+              {
+                sort: ReactiveCache.getBoards({ archived: false }).length,
+                type: 'board',
+                title: ReactiveCache.getBoard(this.currentData()._id).title,
+              },
+              (err, res) => {
+                if (err) {
+                  console.error(err);
+                } else {
+                  Session.set('fromBoard', null);
+                  subManager.subscribe('board', res, false);
+                  FlowRouter.go('board', {
+                    id: res,
+                    slug: title,
+                  });
+                }
+              },
+            );
+            evt.preventDefault();
+          }
        },
        'click .js-archive-board'(evt) {
-          const boardId = this.currentData()._id;
-          Meteor.call('archiveBoard', boardId);
-          evt.preventDefault();
+          if (confirm(TAPi18n.__('archive-board-confirm'))) {
+            const boardId = this.currentData()._id;
+            Meteor.call('archiveBoard', boardId);
+            evt.preventDefault();
+          }
        },
        'click .js-accept-invite'() {
          const boardId = this.currentData()._id;
@@ -343,7 +329,7 @@ BlazeComponent.extendComponent({
              query.$and[2].$or.push({ 'orgs.orgId': { $in: selectedOrgsValues } });
            }

-            let filteredBoards = Boards.find(query, {}).fetch();
+            let filteredBoards = ReactiveCache.getBoards(query, {});
            let allBoards = document.getElementsByClassName("js-board");
            let currBoard;
            if (filteredBoards.length > 0) {
@@ -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;
@@ -1,90 +1,371 @@
-.slide {
-  /* swipebox slide background gradient of black to blue, so that back SVG images are visible */
-  background: rgb(2,0,36);
-  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 14%, rgba(0,212,255,1) 100%); 
+.hidden {
+  display: none;
 }
 .attachment-upload {
  text-align: center;
  font-weight: bold;
 }
-.attachments-galery {
+.attachment-gallery {
  display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
 }
-.attachments-galery .attachment-item {
-  width: 31.33%;
-  margin: 10px 1% 0;
-  text-align: center;
-  border-radius: 3px;
-  overflow: auto;
-  background: #ededed;
-  min-height: 120px;
+.attachment-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 16px;
 }
-.attachments-galery .attachment-item:hover {
+.attachment-item:hover {
  background: #e0e0e0;
 }
-.attachments-galery .attachment-item.add-attachment {
-  display: flex;
-  align-items: center;
-}
-.attachments-galery .attachment-item.add-attachment a {
+.attachment-thumbnail-container {
  display: block;
-  margin: auto;
+  width: 150px;
+  min-width: 150px;
+  max-height: 150px;
+  padding-right: 16px;
 }
-.attachments-galery .attachment-item .attachment-thumbnail {
-  height: 80px;
+.attachment-thumbnail {
+  max-width: 150px;
+  max-height: 150px;
+  min-height: 2em;
+  cursor: pointer;
+}
+.attachment-thumbnail-text {
+  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
-  position: relative;
+  font-size: 2em;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
-.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
+.attachment-details-container {
+  display: block;
+  flex-grow: 1;
+}
+.attachment-details {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 25px; /* Make sure the icons are not to far to the right */
+}
+.attachment-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.add-attachment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #555;
+  border-radius: 5px;
+  padding: 10px;
+  cursor: pointer;
+  margin-top: 16px;
+}
+.icon {
+  font-size: 1.5em;
+  cursor: pointer;
+  margin-left: 10px;
+}
+.icon:hover {
+  color: #666;
+}
+#viewer-overlay {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999 !important;
+  background: rgba(13, 13, 13, 0.95);
+}
+#viewer-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 100%;
+}
+#viewer-top-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px;
+}
+#attachment-name {
+  color: white;
+  font-size: 1.5em;
+  max-width: calc(
+    100% - 50px
+  ); /* Make sure the name does not overlap the close button */
+}
+#viewer-close {
+  color: white;
+  cursor: pointer;
+  font-size: 4em;
+}
+
+/* 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;
+}
+  top: 0;
+  right: 8px;
+  position: absolute;
+}
+.attachment-arrow {
+  font-size: 4em;
+  color: white;
+  cursor: pointer;
+  align-self: center;
+  margin: 0 20px;
+}
+#viewer-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100% - 50px);
+}
+#image-viewer {
+  background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% /
+    20px 20px; /* Checkerboard background for transparent images */
+  max-width: 100%;
  max-height: 100%;
-  max-width: 100%;
 }
-.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext {
-  text-transform: uppercase;
-  font-size: 1.6em;
+#pdf-viewer {
+  width: 40vw;
+  height: 100%;
 }
-.attachments-galery .attachment-item .attachment-details {
-  font-size: 0.75em;
-  margin: 3px;
+#txt-viewer {
+  background-color: white;
+  width: 40vw;
+  height: 100%;
 }
-.attachments-galery .attachment-item .attachment-details .attachment-details-actions a {
+.pdf-preview-error {
+  margin-top: 20vh;
  display: block;
+  font-size: 2em;
+  color: white;
 }
-.attachments-galery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu {
-  padding-top: 10px;
-}
-.attachment-image-preview {
-  max-width: 100px;
-  display: block;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-}
-.preview-clipboard-image {
-  width: 280px;
-  max-width: 100%;
-  height: 200px;
-  display: block;
-  border: 1px solid #000;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+
+@media screen and (max-width: 1600px) {
+  #pdf-viewer {
+    width: 60vw;
+  }
 }
+
@media screen and (max-width: 800px) {
-  .attachments-galery .attachment-item {
-    width: 48%;
+  #viewer-container {
+    display: block;
  }
-  .attachments-galery .attachment-item .attachment-thumbnail {
-    height: 130px;
+  .attachment-arrow {
+    position: absolute;
+    bottom: 2.2em;
+    font-size: 1.6em;
+    padding: 16px;
  }
-  .attachments-galery .attachment-item .attachment-details {
-    font-size: 1.1em;
+  #prev-attachment {
+    left: 0;
  }
-}
-@media screen and (max-width: 360px) {
-  .attachments-galery .attachment-item {
+  #next-attachment {
+    right: 0;
+  }
+  #pdf-viewer {
+    width: 100%;
+    height: calc(
+      100vh - 155px
+    ); /* Full height - height of top and bottom bars */
+  }
+  #txt-viewer {
+    width: 100%;
+    height: calc(
+      100vh - 155px
+    ); /* Full height - height of top and bottom bars */
+  }
+  #audio-viewer {
+    margin-top: 20%;
    width: 100%;
  }
-  .attachments-galery .attachment-item .attachment-thumbnail {
-    height: 200px;
+  .attachment-thumbnail-container {
+    width: 100px;
+    min-width: 100px;
+  }
+  .attachment-thumbnail {
+    max-width: 100px;
+  }
+  .attachment-details {
+    flex-direction: column;
+    margin-right: 0px;
+  }
+  .attachment-actions {
+    flex-direction: row;
+    margin-top: 10px;
  }
 }
+
+/* Attachment migration styles */
+.attachment-item.migrating {
+  position: relative;
+  opacity: 0.7;
+}
+
+.attachment-migration-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  border-radius: 4px;
+}
+
+.migration-spinner {
+  font-size: 24px;
+  color: #007cba;
+  margin-bottom: 8px;
+}
+
+.migration-text {
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+}
@@ -30,82 +30,116 @@ template(name="attachmentDeletePopup")
  p {{_ "attachment-delete-pop"}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

-template(name="attachmentsGalery")
-  .attachments-galery
+template(name="attachmentViewer")
+  #viewer-overlay.hidden
+    #viewer-top-bar
+      span#attachment-name
+      a#viewer-close ❌
+
+    #viewer-container
+      | ◀️
+      #viewer-content
+        img#image-viewer.hidden
+        video#video-viewer.hidden(controls="true")
+        audio#audio-viewer.hidden(controls="true")
+        object#pdf-viewer.hidden(type="application/pdf")
+          span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
+        object#txt-viewer.hidden(type="text/plain")
+      | ▶️
+
+template(name="attachmentGallery")
+
+  .attachment-gallery
+
+    if canModifyCard
+      a.attachment-item.add-attachment.js-add-attachment
+        | ➕
+
    each attachments
-      .attachment-item
-        a.attachment-thumbnail.swipebox(href="{{link}}" title="{{sanitize name}}")
+
+      .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
-              img.attachment-thumbnail-img(src="{{link}}" title="{{sanitize name}}")
+            if(isImage)
+              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}")
+            else if($eq extension 'svg')
+              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml")
            else if($eq extension 'mp3')
-              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+              video.attachment-thumbnail(title="{{sanitize name}}")
                source(src="{{link}}" type="audio/mpeg")
            else if($eq extension 'ogg')
-              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+              video.attachment-thumbnail(title="{{sanitize name}}")
                source(src="{{link}}" type="video/ogg")
            else if($eq extension 'webm')
-              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+              video.attachment-thumbnail(title="{{sanitize name}}")
                source(src="{{link}}" type="video/webm")
            else if($eq extension 'mp4')
-              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+              video.attachment-thumbnail(title="{{sanitize name}}")
                source(src="{{link}}" type="video/mp4")
            else
-              span.attachment-thumbnail-ext= extension
-        p.attachment-details
-          = name
-          span.file-size ({{fileSize size}})
-          span.attachment-details-actions
-            a.js-download(href="{{link}}?download=true", download="{{name}}")
-              i.fa.fa-download
-              | {{_ 'download'}}
-            if currentUser.isBoardMember
-              unless currentUser.isCommentOnly
-                unless currentUser.isWorker
-                  a.fa.fa-navicon.attachment-details-menu.js-open-attachment-menu(title="{{_ 'attachmentActionsPopup-title'}}")
+              span.attachment-thumbnail-text= extension

-    if currentUser.isBoardMember
-      unless currentUser.isCommentOnly
-        unless currentUser.isWorker
-          //li.attachment-item.add-attachment
-          a.js-add-attachment(title="{{_ 'add-attachment' }}")
-            i.fa.fa-plus
+        .attachment-details-container
+          .attachment-details
+            div
+              b
+                = name
+              span.file-size ({{fileSize size}})
+            .attachment-actions
+              a.js-download(href="{{link}}?download=true", download="{{name}}", title="{{_ 'download'}}")
+                | ⬇️
+              if currentUser.isBoardMember
+                unless currentUser.isCommentOnly
+                  unless currentUser.isWorker
+                    a.js-rename(title="{{_ 'rename'}}")
+                      | ✏️
+                    a.js-confirm-delete(title="{{_ 'delete'}}")
+                      | 🗑️
+                    a.js-open-attachment-menu(data-attachment-link="{{link}}", title="{{_ 'attachmentActionsPopup-title'}}")
+                      | ☰
+
+        // Migration spinner overlay
+        if isAttachmentMigrating _id
+          .attachment-migration-overlay
+            .migration-spinner
+              | ⚙️
+            .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-thumb-tack
+          | 📖
+          | 🖼️
          if isCover
            | {{_ 'remove-cover'}}
          else
            | {{_ 'add-cover'}}
      if currentUser.isBoardAdmin
-        a.js-rename
-          i.fa.fa-pencil-square-o
-          | {{_ 'rename'}}
-        a.js-confirm-delete
-          i.fa.fa-close
-          | {{_ 'delete'}}
-        p.attachment-storage
-          | {{versions.original.storage}}
+        if isImage
+          a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
+            | 🖼️
+            if isBackgroundImage
+              | {{_ 'remove-background-image'}}
+            else
+              | {{_ 'add-background-image'}}

        if $neq versions.original.storage "fs"
          a.js-move-storage-fs
-            i.fa.fa-arrow-right
+            | ▶️
            | {{_ 'attachment-move-storage-fs'}}

        if $neq versions.original.storage "gridfs"
          if versions.original.storage
            a.js-move-storage-gridfs
-              i.fa.fa-arrow-right
+              | ▶️
              | {{_ 'attachment-move-storage-gridfs'}}

        if $neq versions.original.storage "s3"
          if versions.original.storage
            a.js-move-storage-s3
-              i.fa.fa-arrow-right
+              | ▶️
              | {{_ 'attachment-move-storage-s3'}}

 template(name="attachmentRenamePopup")
@@ -1,10 +1,34 @@
+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');

-Template.attachmentsGalery.events({
+// We store current card ID and the ID of currently opened attachment in a
+// global var. This is used so that we know what's the next attachment to open
+// when the user clicks on the prev/next button in the attachment viewer.
+let cardId = null;
+let openAttachmentId = null;
+
+// Used to store the start and end coordinates of a touch event for attachment swiping
+let touchStartCoords = null;
+let touchEndCoords = null;
+
+// Stores link to the attachment for which attachment actions popup was opened
+attachmentActionsLink = null;
+
+Template.attachmentGallery.events({
+  'click .open-preview'(event) {
+
+    openAttachmentId = $(event.currentTarget).attr("data-attachment-id");
+    cardId = $(event.currentTarget).attr("data-card-id");
+
+    openAttachmentViewer(openAttachmentId);
+  },
  'click .js-add-attachment': Popup.open('cardAttachments'),
  // If we let this event bubble, FlowRouter will handle it and empty the page
  // content, see #101.
@@ -12,18 +36,242 @@ Template.attachmentsGalery.events({
    event.stopPropagation();
  },
  'click .js-open-attachment-menu': Popup.open('attachmentActions'),
+  'mouseover .js-open-attachment-menu'(event) { // For some reason I cannot combine handlers for "click .js-open-attachment-menu" and "mouseover .js-open-attachment-menu" events so this is a quick workaround.
+    attachmentActionsLink = event.currentTarget.getAttribute("data-attachment-link");
+  },
+  'click .js-rename': Popup.open('attachmentRename'),
+  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
+      Attachments.remove(this._id);
+      Popup.back();
+  }),
 });

-Template.attachmentsGalery.helpers({
+function getNextAttachmentId(currentAttachmentId, offset = 0) {
+    const attachments = ReactiveCache.getAttachments({'meta.cardId': cardId});
+
+  let i = 0;
+  for (; i < attachments.length; i++) {
+    if (attachments[i]._id === currentAttachmentId) {
+      break;
+    }
+  }
+  return attachments[(i + offset + 1 + attachments.length) % attachments.length]._id;
+}
+
+function getPrevAttachmentId(currentAttachmentId, offset = 0) {
+  const attachments = ReactiveCache.getAttachments({'meta.cardId': cardId});
+
+  let i = 0;
+  for (; i < attachments.length; i++) {
+    if (attachments[i]._id === currentAttachmentId) {
+      break;
+    }
+  }
+  return attachments[(i + offset - 1 + attachments.length) % attachments.length]._id;
+}
+
+function attachmentCanBeOpened(attachment) {
+  return (
+    attachment.isImage ||
+    attachment.isPDF ||
+    attachment.isText ||
+    attachment.isJSON ||
+    attachment.isVideo ||
+    attachment.isAudio
+  );
+}
+
+function openAttachmentViewer(attachmentId) {
+  const attachment = ReactiveCache.getAttachment(attachmentId);
+
+  // Check if we can open the attachment (if we have a viewer for it) and exit if not
+  if (!attachmentCanBeOpened(attachment)) {
+    return;
+  }
+
+  /*
+  Instructions for adding a new viewer:
+    - add a new case to the switch statement below
+    - implement cleanup in the closeAttachmentViewer() function, if necessary
+    - mark attachment type as openable by adding a new condition to the attachmentCanBeOpened function
+  */
+  switch(true){
+    case (attachment.isImage):
+      $("#image-viewer").attr("src", attachment.link());
+      $("#image-viewer").removeClass("hidden");
+      break;
+    case (attachment.isPDF):
+      $("#pdf-viewer").attr("data", attachment.link());
+      $("#pdf-viewer").removeClass("hidden");
+      break;
+    case (attachment.isVideo):
+      // We have to create a new <source> DOM element and append it to the video
+      // element, otherwise the video won't load
+      let videoSource = document.createElement('source');
+      videoSource.setAttribute('src', attachment.link());
+      $("#video-viewer").append(videoSource);
+
+      $("#video-viewer").removeClass("hidden");
+      break;
+    case (attachment.isAudio):
+      // We have to create a new <source> DOM element and append it to the audio
+      // element, otherwise the audio won't load
+      let audioSource = document.createElement('source');
+      audioSource.setAttribute('src', attachment.link());
+      $("#audio-viewer").append(audioSource);
+
+      $("#audio-viewer").removeClass("hidden");
+      break;
+    case (attachment.isText):
+    case (attachment.isJSON):
+      $("#txt-viewer").attr("data", attachment.link());
+      $("#txt-viewer").removeClass("hidden");
+      break;
+  }
+
+  $('#attachment-name').text(attachment.name);
+  $('#viewer-overlay').removeClass('hidden');
+}
+
+function closeAttachmentViewer() {
+  $("#viewer-overlay").addClass("hidden");
+
+  // We need to reset the viewers to avoid showing previous attachments
+  $("#image-viewer").attr("src", "");
+  $("#image-viewer").addClass("hidden");
+
+  $("#pdf-viewer").attr("data", "");
+  $("#pdf-viewer").addClass("hidden");
+
+  $("#txt-viewer").attr("data", "");
+  $("#txt-viewer").addClass("hidden");
+
+  $("#video-viewer").get(0).pause(); // Stop playback
+  $("#video-viewer").get(0).currentTime = 0;
+  $("#video-viewer").empty();
+  $("#video-viewer").addClass("hidden");
+
+  $("#audio-viewer").get(0).pause(); // Stop playback
+  $("#audio-viewer").get(0).currentTime = 0;
+  $("#audio-viewer").empty();
+  $("#audio-viewer").addClass("hidden");
+}
+
+function openNextAttachment() {
+  closeAttachmentViewer();
+
+    let i = 0;
+    // Find an attachment that can be opened
+    while (true) {
+      const id = getNextAttachmentId(openAttachmentId, i);
+      const attachment = ReactiveCache.getAttachment(id);
+      if (attachmentCanBeOpened(attachment)) {
+        openAttachmentId = id;
+        openAttachmentViewer(id);
+        break;
+      }
+      i++;
+    }
+}
+
+function openPrevAttachment() {
+  closeAttachmentViewer();
+
+    let i = 0;
+    // Find an attachment that can be opened
+    while (true) {
+      const id = getPrevAttachmentId(openAttachmentId, i);
+      const attachment = ReactiveCache.getAttachment(id);
+      if (attachmentCanBeOpened(attachment)) {
+        openAttachmentId = id;
+        openAttachmentViewer(id);
+        break;
+      }
+      i--;
+    }
+}
+
+function processTouch(){
+
+  xDist = touchEndCoords.x - touchStartCoords.x;
+  yDist = touchEndCoords.y - touchStartCoords.y;
+
+  console.log("xDist: " + xDist);
+
+  // Left swipe
+  if (Math.abs(xDist) > Math.abs(yDist) && xDist < 0) {
+    openNextAttachment();
+  }
+
+  // Right swipe
+  if (Math.abs(xDist) > Math.abs(yDist) && xDist > 0) {
+    openPrevAttachment();
+  }
+
+  // Up swipe
+  if (Math.abs(yDist) > Math.abs(xDist) && yDist < 0) {
+    closeAttachmentViewer();
+  }
+
+}
+
+Template.attachmentViewer.events({
+  'touchstart #viewer-container'(event) {
+    console.log("touchstart")
+    touchStartCoords = {
+      x: event.changedTouches[0].screenX,
+      y: event.changedTouches[0].screenY
+    }
+  },
+  'touchend #viewer-container'(event) {
+    console.log("touchend")
+    touchEndCoords = {
+      x: event.changedTouches[0].screenX,
+      y: event.changedTouches[0].screenY
+    }
+    processTouch();
+  },
+  'click #viewer-container'(event) {
+
+    // Make sure the click was on #viewer-container and not on any of its children
+    if(event.target !== event.currentTarget) {
+      event.stopPropagation();
+      return;
+    }
+
+    closeAttachmentViewer();
+  },
+  'click #viewer-content'(event) {
+
+    // Make sure the click was on #viewer-content and not on any of its children
+    if(event.target !== event.currentTarget) {
+      event.stopPropagation();
+      return;
+    }
+
+    closeAttachmentViewer();
+  },
+  'click #viewer-close'() {
+    closeAttachmentViewer();
+  },
+  'click #next-attachment'() {
+    openNextAttachment();
+  },
+  'click #prev-attachment'() {
+    openPrevAttachment();
+  },
+});
+
+Template.attachmentGallery.helpers({
  isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
  fileSize(size) {
    const ret = filesize(size);
    return ret;
  },
  sanitize(value) {
-    return DOMPurify.sanitize(value);
+    return sanitizeHTML(value);
  },
 });

@@ -51,34 +299,13 @@ Template.cardAttachmentsPopup.events({
    const files = event.currentTarget.files;
    if (files) {
      let uploads = [];
-      for (const file of files) {
-        const fileId = new ObjectID().toString();
-        // If filename is not same as sanitized filename, has XSS, then cancel upload
-        if (file.name !== DOMPurify.sanitize(file.name)) {
-          return false;
-        }
-        const config = {
-          file: file,
-          fileId: fileId,
-          meta: Utils.getCommonAttachmentMetaFrom(card),
-          chunkSize: 'dynamic',
-        };
-        config.meta.fileId = fileId;
-        const uploader = Attachments.insert(
-          config,
-          false,
-        );
+      const uploaders = handleFileUpload(card, files);
+
+      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);
@@ -86,8 +313,7 @@ Template.cardAttachmentsPopup.events({
            Popup.back();
          }
        });
-        uploader.start();
-      }
+      });
    }
  },
  'click .js-computer-upload'(event, templateInstance) {
@@ -101,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 => {
@@ -172,25 +497,40 @@ Template.previewClipboardImagePopup.events({

 BlazeComponent.extendComponent({
  isCover() {
-    const ret = Cards.findOne(this.data().meta.cardId).coverId == this.data()._id;
+    const ret = ReactiveCache.getCard(this.data().meta.cardId).coverId == this.data()._id;
    return ret;
  },
+  isBackgroundImage() {
+    //const currentBoard = Utils.getCurrentBoard();
+    //return currentBoard.backgroundImageURL === $(".attachment-thumbnail-img").attr("src");
+    return false;
+  },
  events() {
    return [
      {
-        'click .js-rename': Popup.open('attachmentRename'),
-        'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
-          Attachments.remove(this._id);
-          Popup.back(2);
-        }),
        'click .js-add-cover'() {
-          Cards.findOne(this.data().meta.cardId).setCover(this.data()._id);
+          ReactiveCache.getCard(this.data().meta.cardId).setCover(this.data()._id);
          Popup.back();
        },
        'click .js-remove-cover'() {
-          Cards.findOne(this.data().meta.cardId).unsetCover();
+          ReactiveCache.getCard(this.data().meta.cardId).unsetCover();
          Popup.back();
        },
+        'click .js-add-background-image'() {
+          const currentBoard = Utils.getCurrentBoard();
+          currentBoard.setBackgroundImageURL(attachmentActionsLink);
+          Utils.setBackgroundImage(attachmentActionsLink);
+          Popup.back();
+          event.preventDefault();
+        },
+        'click .js-remove-background-image'() {
+          const currentBoard = Utils.getCurrentBoard();
+          currentBoard.setBackgroundImageURL("");
+          Utils.setBackgroundImage("");
+          Popup.back();
+          Utils.reload();
+          event.preventDefault();
+        },
        'click .js-move-storage-fs'() {
          Meteor.call('moveAttachmentToStorage', this.data()._id, "fs");
          Popup.back();
@@ -228,12 +568,29 @@ 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(2);
+          Popup.back();
        },
      }
    ]
  }
 }).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();
+});
@@ -6,10 +6,10 @@ template(name="cardCustomFieldsPopup")
                    span.full-name
                      = name
                    if hasCustomField
-                      i.fa.fa-check
+                      | ✅
    hr
    a.quiet-button.full.js-settings
-        i.fa.fa-cog
+        | ⚙️
        span {{_ 'settings'}}

 template(name="cardCustomField")
@@ -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
@@ -66,7 +66,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
@@ -79,13 +79,14 @@ template(name="cardCustomField-currency")

 template(name="cardCustomField-date")
    if canModifyCard
-      a.js-edit-date(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
+      a.js-edit-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
        if value
          div.card-date
            time(datetime="{{showISODate}}")
              | {{showDate}}
-              b
-                | {{showWeek}}
+              if showWeekOfYear
+                b
+                  | {{showWeek}}
        else
          | {{_ 'edit'}}
    else
@@ -93,8 +94,9 @@ template(name="cardCustomField-date")
        div.card-date
          time(datetime="{{showISODate}}")
            | {{showDate}}
-            b
-              | {{showWeek}}
+            if showWeekOfYear
+                b
+                | {{showWeek}}

 template(name="cardCustomField-dropdown")
    if canModifyCard
@@ -111,7 +113,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
@@ -132,7 +134,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'

@@ -37,14 +58,6 @@ const CardCustomField = BlazeComponent.extendComponent({
    self.card = Utils.getCurrentCard();
    self.customFieldId = this.data()._id;
  },
-
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly()
-    );
-  },
 });
 CardCustomField.register('cardCustomField');

@@ -142,27 +155,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() {
+    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() {
@@ -171,8 +190,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';
    }
@@ -180,7 +199,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() {
@@ -199,7 +218,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) {
@@ -42,23 +42,67 @@
 .card-date.long-overdue.is-active {
  background-color: #fd3e24;
 }
+
+/* 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;
@@ -1,20 +1,131 @@
 template(name="dateBadge")
  if canModifyCard
-    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
      time(datetime="{{showISODate}}")
        | {{showDate}}
-        b
-          | {{showWeek}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
  else
-    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
      time(datetime="{{showISODate}}")
        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="dateCustomField")
+  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+      if showWeekOfYear
        b
          | {{showWeek}}

-template(name="dateCustomField")
-  a(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
+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}}
-      b
-        | {{showWeek}}
+      if showWeekOfYear
+        b
+          | {{showWeek}}
+
+template(name="editCardReceivedDatePopup")
+  form.edit-card-received-date
+    .datepicker
+    .clear-date
+      a.js-clear-date {{_ 'clear'}}
+    .datepicker-actions
+      button.primary.wide.left(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right {{_ 'delete'}}
+
+template(name="editCardStartDatePopup")
+  form.edit-card-start-date
+    .datepicker
+    .clear-date
+      a.js-clear-date {{_ 'clear'}}
+    .datepicker-actions
+      button.primary.wide.left(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right {{_ 'delete'}}
+
+template(name="editCardDueDatePopup")
+  form.edit-card-due-date
+    .datepicker
+    .clear-date
+      a.js-clear-date {{_ 'clear'}}
+    .datepicker-actions
+      button.primary.wide.left(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right {{_ 'delete'}}
+
+template(name="editCardEndDatePopup")
+  form.edit-card-end-date
+    .datepicker
+    .clear-date
+      a.js-clear-date {{_ 'clear'}}
+    .datepicker-actions
+      button.primary.wide.left(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right {{_ 'delete'}}
@@ -1,28 +1,38 @@
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
-
-Template.dateBadge.helpers({
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-});
+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(date);
+    this.card.setReceived(formatDateTime(date));
  }

  _deleteDate() {
@@ -33,22 +43,17 @@ Template.dateBadge.helpers({
 // editCardStartDatePopup
 (class extends DatePicker {
  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getStart() && this.date.set(moment(this.data().getStart()));
+    super.onCreated(formatDateTime(now()));
+    this.data().getStart() && this.date.set(new Date(this.data().getStart()));
  }

  onRendered() {
    super.onRendered();
-    if (moment.isDate(this.card.getReceived())) {
-      this.$('.js-datepicker').datepicker(
-        'setStartDate',
-        this.card.getReceived(),
-      );
-    }
+    // DatePicker base class handles initialization with native HTML inputs
  }

  _storeDate(date) {
-    this.card.setStart(date);
+    this.card.setStart(formatDateTime(date));
  }

  _deleteDate() {
@@ -60,18 +65,16 @@ Template.dateBadge.helpers({
 (class extends DatePicker {
  onCreated() {
    super.onCreated('1970-01-01 17:00:00');
-    this.data().getDue() && this.date.set(moment(this.data().getDue()));
+    this.data().getDue() && this.date.set(new Date(this.data().getDue()));
  }

  onRendered() {
    super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
+    // DatePicker base class handles initialization with native HTML inputs
  }

  _storeDate(date) {
-    this.card.setDue(date);
+    this.card.setDue(formatDateTime(date));
  }

  _deleteDate() {
@@ -82,19 +85,17 @@ Template.dateBadge.helpers({
 // editCardEndDatePopup
 (class extends DatePicker {
  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getEnd() && this.date.set(moment(this.data().getEnd()));
+    super.onCreated(formatDateTime(now()));
+    this.data().getEnd() && this.date.set(new Date(this.data().getEnd()));
  }

  onRendered() {
    super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
+    // DatePicker base class handles initialization with native HTML inputs
  }

  _storeDate(date) {
-    this.card.setEnd(date);
+    this.card.setEnd(formatDateTime(date));
  }

  _deleteDate() {
@@ -111,23 +112,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() {
+    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() {
@@ -140,7 +147,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()));
    });
  }

@@ -152,9 +159,9 @@ class CardReceivedDate extends CardDate {
    const theDate = this.date.get();
    // if dueAt, endAt and startAt exist & are > receivedAt, receivedAt doesn't need to be flagged
    if (
-      (startAt && theDate.isAfter(startAt)) ||
-      (endAt && theDate.isAfter(endAt)) ||
-      (dueAt && theDate.isAfter(dueAt))
+      (startAt && isAfter(theDate, startAt)) ||
+      (endAt && isAfter(theDate, endAt)) ||
+      (dueAt && isAfter(theDate, dueAt))
    )
      classes += 'long-overdue';
    else classes += 'current';
@@ -162,9 +169,10 @@ class CardReceivedDate extends CardDate {
  }

  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() {
@@ -180,7 +188,7 @@ 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()));
    });
  }

@@ -191,15 +199,18 @@ class CardStartDate extends CardDate {
    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)))
+    if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt)))
      classes += 'long-overdue';
-    else if (theDate.isAfter(now)) classes += '';
+    else if (isAfter(theDate, now)) classes += '';
    else 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() {
@@ -215,7 +226,7 @@ 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()));
    });
  }

@@ -225,17 +236,20 @@ class CardDueDate extends CardDate {
    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 (endAt && isAfter(theDate, 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';
+    else if (diff(now, theDate, 'days') >= 2) classes += 'long-overdue';
+    else if (diff(now, theDate, 'minute') >= 0) classes += 'due';
+    else if (diff(now, theDate, 'days') >= -1) classes += 'almost-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() {
@@ -251,7 +265,7 @@ 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()));
    });
  }

@@ -260,13 +274,13 @@ class CardEndDate extends CardDate {
    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';
+    else if (isBefore(theDate, dueAt)) classes += 'current';
+    else if (isAfter(theDate, dueAt)) classes += 'due';
    return classes;
  }

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

  events() {
@@ -286,12 +300,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() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
  }

  showDate() {
@@ -304,7 +327,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() {
@@ -318,32 +344,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('L');
+    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('L');
+    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('L');
+    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'));

@@ -352,7 +408,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() {
@@ -360,10 +416,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() {
@@ -379,7 +437,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() {
@@ -387,10 +445,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() {
@@ -1,3 +1,31 @@
+/* Date Format Selector */
+.card-details-item-date-format {
+  margin-bottom: 10px;
+}
+
+.card-details-item-date-format .card-details-item-title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: #333;
+}
+
+.card-details-item-date-format .js-date-format-selector {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.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;
@@ -5,7 +33,7 @@
  float: left;
  height: 30px;
  width: 30px;
-  margin: 0 4px 4px 0;
+  margin: .3vh;
  cursor: pointer;
  user-select: none;
  z-index: 1;
@@ -70,23 +98,23 @@
 }
 .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;
 }
 .card-details {
  padding: 0;
  flex-shrink: 0;
-  flex-basis: 600px;
+  flex-basis: min(600px, 80vw);
  will-change: flex-basis;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #f7f7f7;
-  border-radius: bottom 3px;
-  z-index: 20;
+  border-radius: bottom 0.4vw;
+  z-index: 30;
  animation: flexGrowIn 0.1s;
-  box-shadow: 0 0 7px 0 #b3b3b3;
+  box-shadow: 0 0 0.9vh 0 #b3b3b3;
  transition: flex-basis 0.1s;
  box-sizing: border-box;
 }
@@ -95,7 +123,7 @@
 }
 .card-details .card-details-canvas {
  width: auto;
-  padding: 0 20px;
+  padding: 0 2.5vw;
 }
 .card-details .card-details-header {
  margin: 0 -20px 5px;
@@ -196,6 +224,9 @@
  margin-right: 10px;
  padding: 10px;
 }
+.card-details .card-description i.fa.fa-pencil-square-o {
+  float: right;
+}
 .card-details .card-description textarea {
  min-height: 100px;
 }
@@ -245,6 +276,14 @@
  padding-top: 10px;
 }
@media screen and (min-width: 801px) {
+  .card-details {
+    top: 97px;
+    left: calc(50% - (600px / 2));
+    width: 600px;
+    bottom: 0;
+    position: fixed;
+    resize: both;
+  }
  .card-details-maximized {
    padding: 0;
    flex-shrink: 0;
@@ -259,10 +298,9 @@
    box-shadow: 0 0 7px 0 #b3b3b3;
    transition: flex-basis 0.1s;
    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: calc(100% - 20px);
+    top: 97px;
+    left: 0px;
+    height: calc(100% - 100px);
    width: calc(100% - 20px);
    float: left;
  }
@@ -586,3 +624,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;
+}
@@ -2,21 +2,29 @@ template(name="cardDetailsPopup")
  +cardDetails(popupCard)

 template(name="cardDetails")
-  section.card-details.js-card-details(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}'): .card-details-canvas
+
+  +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
    .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 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'}}")
-          if currentUser.isBoardMember
-            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(
+            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+              | ❌
+            if canModifyCard
+              if cardMaximized
+                a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+                  | 🔽
+              else
+                a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+                  | 🔼
+          if canModifyCard
+            a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+              | ☰
+            a.card-copy-button.js-copy-link(
              id="cardURL_copy"
              class="fa-link"
              title="{{_ 'copy-card-link-to-clipboard'}}"
@@ -25,10 +33,12 @@ template(name="cardDetails")
            span.copied-tooltip {{_ 'copied'}}
        else
          unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
-          if currentUser.isBoardMember
-            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(
+            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+              | ❌
+          if canModifyCard
+            a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+              | ☰
+            a.card-copy-mobile-button.js-copy-link(
              id="cardURL_copy"
              class="fa-link"
              title="{{_ 'copy-card-link-to-clipboard'}}"
@@ -43,7 +53,8 @@ template(name="cardDetails")
                  | ##{getCardNumber}
              = getTitle
            if isWatching
-              i.card-details-watch.fa.fa-eye
+              i.card-details-watch
+                | 👁️
        .card-details-path
          each parentList
            | &nbsp; &gt; &nbsp;
@@ -61,13 +72,33 @@ 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
+          | 📤
+          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
+                | ⚠️
+                span {{_ 'upload-failed'}}
+            else if $eq status 'completed'
+              .upload-progress-success
+                | ✅
+                span {{_ 'upload-completed'}}
+
    .card-details-left

      .card-details-items
        if currentBoard.allowsLabels
          .card-details-item.card-details-item-labels
            h3.card-details-item-title
-              i.fa.fa-tags
+              | 🏷️
              | {{_ 'labels'}}
            a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
              each labels
@@ -77,15 +108,25 @@ template(name="cardDetails")
            if canModifyCard
              unless currentUser.isWorker
                a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
-                  i.fa.fa-plus
+                  | ➕

        if currentBoard.hasAnyAllowsDate
          hr

+          .card-details-item.card-details-item-date-format
+            h3.card-details-item-title
+              | 📅
+              | {{_ '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
-              i.fa.fa-sign-out
+              | 📥
              | {{_ 'card-received'}}
            if getReceived
              +cardReceivedDate
@@ -93,12 +134,12 @@ template(name="cardDetails")
              if canModifyCard
                unless currentUser.isWorker
                  a.card-label.add-label.js-received-date
-                    i.fa.fa-plus
+                    | ➕

        if currentBoard.allowsStartDate
          .card-details-item.card-details-item-start
            h3.card-details-item-title
-              i.fa.fa-hourglass-start
+              | 🚀
              | {{_ 'card-start'}}
            if getStart
              +cardStartDate
@@ -106,12 +147,12 @@ template(name="cardDetails")
              if canModifyCard
                unless currentUser.isWorker
                  a.card-label.add-label.js-start-date
-                    i.fa.fa-plus
+                    | ➕

        if currentBoard.allowsDueDate
          .card-details-item.card-details-item-due
            h3.card-details-item-title
-              i.fa.fa-sign-in
+              | ⏰
              | {{_ 'card-due'}}
            if getDue
              +cardDueDate
@@ -119,12 +160,12 @@ template(name="cardDetails")
              if canModifyCard
                unless currentUser.isWorker
                  a.card-label.add-label.js-due-date
-                    i.fa.fa-plus
+                    | ➕

        if currentBoard.allowsEndDate
          .card-details-item.card-details-item-end
            h3.card-details-item-title
-              i.fa.fa-hourglass-end
+              | 🏁
              | {{_ 'card-end'}}
            if getEnd
              +cardEndDate
@@ -132,7 +173,7 @@ template(name="cardDetails")
              if canModifyCard
                unless currentUser.isWorker
                  a.card-label.add-label.js-end-date
-                    i.fa.fa-plus
+                    | ➕

        if currentBoard.hasAnyAllowsUser
          hr
@@ -140,7 +181,7 @@ template(name="cardDetails")
        if currentBoard.allowsCreator
          .card-details-item.card-details-item-creator
            h3.card-details-item-title
-              i.fa.fa-user
+              | 👤
              | {{_ 'creator'}}

            +userAvatar(userId=userId noRemove=true)
@@ -150,7 +191,7 @@ template(name="cardDetails")
        if currentBoard.allowsMembers
          .card-details-item.card-details-item-members
            h3.card-details-item-title
-              i.fa.fa-users
+              | 👤s
              | {{_ 'members'}}
            each userId in getMembers
              +userAvatar(userId=userId cardId=_id)
@@ -158,30 +199,30 @@ template(name="cardDetails")
            if canModifyCard
              unless currentUser.isWorker
                a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
-                  i.fa.fa-plus
+                  | ➕

        //if assigneeSelected
        if currentBoard.allowsAssignee
          .card-details-item.card-details-item-assignees
            h3.card-details-item-title
-              i.fa.fa-user
+              | 👤
              | {{_ 'assignee'}}
            each userId in getAssignees
              +userAvatar(userId=userId cardId=_id assignee=true)
              | {{! XXX Hack to hide syntaxic coloration /// }}
            if canModifyCard
              a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
-                i.fa.fa-plus
+                | ➕
            if currentUser.isWorker
              unless assigneeSelected
                a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
-                  i.fa.fa-plus
+                  | ➕

        //.card-details-items
        if currentBoard.allowsRequestedBy
          .card-details-item.card-details-item-name
            h3.card-details-item-title
-              i.fa.fa-shopping-cart
+              | 🛒
              | {{_ 'requested-by'}}
            if canModifyCard
              unless currentUser.isWorker
@@ -201,7 +242,7 @@ template(name="cardDetails")
        if currentBoard.allowsAssignedBy
          .card-details-item.card-details-item-name
            h3.card-details-item-title
-              i.fa.fa-user-plus
+              | 👤-plus
              | {{_ 'assigned-by'}}
            if canModifyCard
              unless currentUser.isWorker
@@ -224,7 +265,7 @@ template(name="cardDetails")
        if currentBoard.allowsCardSortingByNumber
          .card-details-item.card-details-sort-order
            h3.card-details-item-title
-              i.fa.fa-sort
+              | 🔢
              | {{_ 'sort'}}
            if canModifyCard
              +inlinedForm(classNames="js-card-details-sort")
@@ -237,7 +278,7 @@ template(name="cardDetails")
        if currentBoard.allowsShowLists
          .card-details-item.card-details-show-lists
            h3.card-details-item-title
-              i.fa.fa-list
+              | 📋
              | {{_ 'list'}}
            select.js-select-card-details-lists(disabled="{{#unless canModifyCard}}disabled{{/unless}}")
              each currentBoard.lists
@@ -263,23 +304,25 @@ template(name="cardDetails")
              hr
            .card-details-item.card-details-item-customfield
              h3.card-details-item-title
-                i.fa.fa-list-alt
+                | 📋-alt
                = definition.name
              +cardCustomField
-          .material-toggle-switch(title="{{_ 'change'}} {{_ 'custom-fields'}} {{_ 'layout'}}")
-            if customFieldsGrid
-              input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton" checked="checked")
-            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'}}")
+
+          if $gt customFieldsWD.length 1
+            .material-toggle-switch(title="{{_ 'change'}} {{_ 'custom-fields'}} {{_ 'layout'}}")
+              if customFieldsGrid
+                input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton" checked="checked")
+              else
+                input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton")
+              label.toggle-label(for="toggleCustomFieldsGridButton")
+          a.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")

      if getVoteQuestion
        hr
        .vote-title
          div.flex
            h3
-              i.fa.fa-thumbs-up
+              | 👍
              | {{_ 'vote-question'}}
            if getVoteEnd
              +voteEndDate
@@ -297,11 +340,11 @@ template(name="cardDetails")
        if showVotingButtons
          button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}")
            if voteState
-              i.fa.fa-thumbs-up
+              | 👍
            | {{_ '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
@@ -309,7 +352,7 @@ template(name="cardDetails")
        .poker-title
          div.flex
            h3
-              i.fa.fa-thumbs-up
+              | 👍
              | {{_ 'poker-question'}}
            if getPokerEnd
              +pokerEndDate
@@ -324,52 +367,52 @@ template(name="cardDetails")
              .poker-card
                span.inner.js-poker.js-poker-vote-one(class="{{#if $eq pokerState 'one'}}poker-voted{{/if}}") {{_ 'poker-one'}}
              if $eq pokerState "one"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-two(class="{{#if $eq pokerState 'two'}}poker-voted{{/if}}") {{_ 'poker-two'}}
              if $eq pokerState "two"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-three(class="{{#if $eq pokerState 'three'}}poker-voted{{/if}}") {{_ 'poker-three'}}
              if $eq pokerState "three"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-five(class="{{#if $eq pokerState 'five'}}poker-voted{{/if}}") {{_ 'poker-five'}}
              if $eq pokerState "five"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-eight(class="{{#if $eq pokerState 'eight'}}poker-voted{{/if}}") {{_ 'poker-eight'}}
              if $eq pokerState "eight"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-thirteen(class="{{#if $eq pokerState 'thirteen'}}poker-voted{{/if}}") {{_ 'poker-thirteen'}}
              if $eq pokerState "thirteen"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-twenty(class="{{#if $eq pokerState 'twenty'}}poker-voted{{/if}}") {{_ 'poker-twenty'}}
              if $eq pokerState "twenty"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-forty(class="{{#if $eq pokerState 'forty'}}poker-voted{{/if}}") {{_ 'poker-forty'}}
              if $eq pokerState "forty"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-one-hundred(class="{{#if $eq pokerState 'oneHundred'}}poker-voted{{/if}}") {{_ 'poker-oneHundred'}}
              if $eq pokerState "oneHundred"
-                i.fa.fa-check
+                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-unsure(class="{{#if $eq pokerState 'unsure'}}poker-voted{{/if}}") {{_ 'poker-unsure'}}
              if $eq pokerState "unsure"
-                i.fa.fa-check
+                | ✅

          if currentUser.isBoardAdmin
            button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}}
@@ -499,7 +542,7 @@ template(name="cardDetails")
              button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}}
            div.estimation-add
              button.js-poker-estimation
-                i.fa.fa-plus
+                | ➕
                | {{_ 'set-estimation'}}
              input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation")

@@ -509,22 +552,22 @@ template(name="cardDetails")
          if currentBoard.allowsDescriptionTitle
            hr
            h3.card-details-item-title
-              i.fa.fa-align-left
+              | 📝
              | {{_ '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
+                a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
+                  | ✏️
+                a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
                  if getDescription
                    +viewer
                      = getDescription
-                  else
-                    | {{_ 'edit'}}
                if (hasUnsavedValue 'cardDescription' _id)
                  p.quiet
                    | {{_ 'unsaved-description'}}
@@ -539,21 +582,41 @@ template(name="cardDetails")
          +viewer
            = getDescription

-      .card-checklist-attachmentGalerys
-        .card-checklist-attachmentGalery.card-checklists
+      .card-checklist-attachmentGalleries
+        .card-checklist-attachmentGallery.card-checklists
          if currentBoard.allowsChecklists
            hr
-            +checklists(cardId = _id)
+            +checklists(cardId = _id card = this)
          if currentBoard.allowsSubtasks
            hr
            +subtasks(cardId = _id)
        if currentBoard.allowsAttachments
          hr
          h3.card-details-item-title
-            i.fa.fa-paperclip
+            | 📎
            | {{_ 'attachments'}}
-          .card-checklist-attachmentGalery.card-attachmentGalery
-            +attachmentsGalery
+          if Meteor.settings.public.attachmentsUploadMaxSize
+            | {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}}
+            br
+          if Meteor.settings.public.attachmentsUploadMimeTypes
+            | {{_ 'allowed-upload-filetypes'}} {{Meteor.settings.public.attachmentsUploadMimeTypes}}
+            br
+          | {{_ 'invalid-file'}}
+          .card-checklist-attachmentGallery.card-attachmentGallery
+            +attachmentGallery
+      hr
+
+      unless currentUser.isNoComments
+        .comment-title
+          h3.card-details-item-title
+            | 💬
+            | {{_ 'comments'}}
+
+        if currentBoard.allowsComments
+          if currentUser.isBoardMember
+            unless currentUser.isNoComments
+              +commentForm
+              +comments
      hr

    .card-details-right
@@ -561,20 +624,16 @@ template(name="cardDetails")
      unless currentUser.isNoComments
        .activity-title
          h3.card-details-item-title
-            i.fa.fa-history
-            | {{ _ 'activity'}}
+            | 📜
+            | {{ _ 'activities'}}
          if currentUser.isBoardMember
-            .material-toggle-switch(title="{{_ 'hide-system-messages'}}")
-              //span.toggle-switch-title
-              if hiddenSystemMessages
-                input.toggle-switch(type="checkbox" id="toggleButton" checked="checked")
+            .material-toggle-switch(title="{{_ 'show-activities'}}")
+              if showActivities
+                input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard" checked="checked")
              else
-                input.toggle-switch(type="checkbox" id="toggleButton")
-              label.toggle-label(for="toggleButton")
-      if currentBoard.allowsComments
-        if currentUser.isBoardMember
-          unless currentUser.isNoComments
-            +commentForm
+                input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard")
+              label.toggle-label(for="toggleShowActivitiesCard")
+
      unless currentUser.isNoComments
        if isLoaded.get
          if isLinkedCard
@@ -585,41 +644,41 @@ 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
    li
      a.js-toggle-watch-card
        if isWatching
-          i.fa.fa-eye
+          | 👁️
          |  {{_ 'unwatch'}}
        else
-          i.fa.fa-eye-slash
+          | 👁️-slash
          |  {{_ 'watch'}}
  hr
  if canModifyCard
@@ -630,16 +689,16 @@ template(name="cardDetailsActionsPopup")
        //li: a.js-attachments {{_ 'card-edit-attachments'}}
        li
          a.js-start-voting
-            i.fa.fa-thumbs-up
+            | 👍
            | {{_ 'card-edit-voting'}}
        li
          a.js-start-planning-poker
-            i.fa.fa-thumbs-up
+            | 👍
            | {{_ 'card-edit-planning-poker'}}
        if currentUser.isBoardAdmin
          li
            a.js-custom-fields
-              i.fa.fa-list-alt
+              | 📋-alt
              | {{_ 'card-edit-custom-fields'}}
        //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
        //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
@@ -647,67 +706,75 @@ template(name="cardDetailsActionsPopup")
        //li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
        li
          a.js-spent-time
-            i.fa.fa-clock-o
+            | 🕐
            | {{_ 'editCardSpentTimePopup-title'}}
        li
          a.js-set-card-color
-            i.fa.fa-paint-brush
+            | 🎨
            | {{_ 'setCardColorPopup-title'}}
+        li
+          a.js-toggle-show-list-on-minicard
+            if showListOnMinicard
+              | 👁️
+              | {{_ 'hide-list-on-minicard'}}
+            else
+              | 👁️-slash
+              | {{_ 'show-list-on-minicard'}}
  hr
  ul.pop-over-list
    li
      a.js-export-card
-        i.fa.fa-share-alt
+        | 📤
        | {{_ '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'}}
    hr
    ul.pop-over-list
      li
        a.js-more
-          i.fa.fa-link
+          | 🔗
          | {{_ 'cardMorePopup-title'}}

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

 template(name="moveCardPopup")
@@ -762,7 +829,7 @@ template(name="cardMembersPopup")
            = user.profile.fullname
            | (<span class="username">{{ user.username }}</span>)
          if isCardMember
-            i.fa.fa-check
+            | ✅

 template(name="cardAssigneesPopup")
  input.card-assignees-filter(type="text" placeholder="{{_ 'search'}}")
@@ -776,7 +843,7 @@ template(name="cardAssigneesPopup")
              = user.profile.fullname
              | (<span class="username">{{ user.username }}</span>)
            if isCardAssignee
-              i.fa.fa-check
+              | ✅
  if currentUser.isWorker
    ul.pop-over-list.js-card-assignee-list
      li.item(class="{{#if currentUser.isCardAssignee}}active{{/if}}")
@@ -786,7 +853,7 @@ template(name="cardAssigneesPopup")
            = currentUser.profile.fullname
            | (<span class="username">{{ currentUser.username }}</span>)
          if currentUser.isCardAssignee
-            i.fa.fa-check
+            | ✅

 template(name="cardAssigneePopup")
  .board-assignee-menu
@@ -810,7 +877,7 @@ template(name="cardMorePopup")
    span.clearfix
      span {{_ 'link-card'}}
      = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      | {{#if board.isPublic}}🌐{{else}}🔒{{/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'}}
@@ -852,7 +919,7 @@ template(name="setCardColorPopup")
      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'}}

@@ -886,12 +953,12 @@ 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
+        | ⏰
        a.js-end-date
          span
            | {{_ 'card-end'}}
            unless getVoteEnd
-              i.fa.fa-plus
+              | ➕
        if getVoteEnd
          +voteEndDate

@@ -932,12 +999,12 @@ 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
+        | ⏰
        a.js-end-date
          span
            | {{_ 'card-end'}}
            unless getPokerEnd
-              i.fa.fa-plus
+              | ➕
        if getPokerEnd
          +pokerEndDate

@@ -1,6 +1,26 @@
-import moment from 'moment/min/moment-with-locales';
+import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
+import { 
+  formatDateTime, 
+  formatDate, 
+  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 Boards from '/models/boards';
 import Checklists from '/models/checklists';
@@ -11,6 +31,8 @@ import CardComments from '/models/cardComments';
 import { ALLOWED_COLORS } from '/config/const';
 import { UserAvatar } from '../users/userAvatar';
 import { DialogWithBoardSwimlaneList } from '/client/lib/dialogWithBoardSwimlaneList';
+import { handleFileUpload } from './attachments';
+import uploadProgressManager from '../../lib/uploadProgressManager';

 const subManager = new SubsManager();
 const { calculateIndexData } = Utils;
@@ -62,82 +84,13 @@ BlazeComponent.extendComponent({
    return card.findWatcher(Meteor.userId());
  },

-  hiddenSystemMessages() {
-    return Meteor.user().hasHiddenSystemMessages();
-  },
-
  customFieldsGrid() {
-    return Meteor.user().hasCustomFieldsGrid();
+    return ReactiveCache.getCurrentUser().hasCustomFieldsGrid();
  },


  cardMaximized() {
-    return !Utils.getPopupCardId() && Meteor.user().hasCardMaximized();
-  },
-
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-
-  scrollParentContainer() {
-    const cardPanelWidth = 600;
-    const parentComponent = this.parentComponent();
-
-    /*
-        // Incomplete fix about bug where opening card scrolls to wrong place
-        // https://github.com/wekan/wekan/issues/4572#issuecomment-1184149395
-        // TODO sometimes parentComponent is not available, maybe because it's not
-        // yet created?!
-        if (!parentComponent) return;
-        const bodyBoardComponent = parentComponent.parentComponent();
-    */
-
-    //On Mobile View Parent is Board, Not Board Body. I cant see how this funciton should work then.
-    if (bodyBoardComponent === null) return;
-    const $cardView = this.$(this.firstNode());
-    const $cardContainer = bodyBoardComponent.$('.js-swimlanes');
-
-    /*
-        // Incomplete fix about bug where opening card scrolls to wrong place
-        // https://github.com/wekan/wekan/issues/4572#issuecomment-1184149395
-        // TODO sometimes cardContainer is not available, maybe because it's not yet
-        // created?!
-        if (!$cardContainer) return;
-    */
-
-    const cardContainerScroll = $cardContainer.scrollLeft();
-    const cardContainerWidth = $cardContainer.width();
-
-    const cardViewStart = $cardView.offset().left;
-    const cardViewEnd = cardViewStart + cardPanelWidth;
-
-    let offset = false;
-    if (cardViewStart < 0) {
-      offset = cardViewStart;
-    } else if (cardViewEnd > cardContainerWidth) {
-      offset = cardViewEnd - cardContainerWidth;
-    }
-
-    if (offset) {
-      bodyBoardComponent.scrollLeft(cardContainerScroll + offset);
-    }
-
-    //Scroll top
-    const cardViewStartTop = $cardView.offset().top;
-    const cardContainerScrollTop = $cardContainer.scrollTop();
-
-    let topOffset = false;
-    if (cardViewStartTop !== 100) {
-      topOffset = cardViewStartTop - 100;
-    }
-    if (topOffset !== false) {
-      bodyBoardComponent.scrollTop(cardContainerScrollTop + topOffset);
-    }
+    return !Utils.getPopupCardId() && ReactiveCache.getCurrentUser().hasCardMaximized();
  },

  presentParentTask() {
@@ -152,7 +105,7 @@ BlazeComponent.extendComponent({
    const card = this.currentData();
    let result = '#';
    if (card) {
-      const board = Boards.findOne(card.boardId);
+      const board = ReactiveCache.getBoard(card.boardId);
      if (board) {
        result = FlowRouter.path('card', {
          boardId: card.boardId,
@@ -182,6 +135,11 @@ BlazeComponent.extendComponent({
    );
  },

+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
+
  /** returns if the list id is the current list id
   * @param listId list id to check
   * @return is the list id the current list id ?
@@ -201,15 +159,15 @@ BlazeComponent.extendComponent({
        cardId: card._id,
        boardId: card.boardId,
        listId: card.listId,
-        user: Meteor.user().username,
+        user: ReactiveCache.getCurrentUser().username,
        url: '',
      };

-      const integrations = Integrations.find({
+      const integrations = ReactiveCache.getIntegrations({
        boardId: { $in: [card.boardId, Integrations.Const.GLOBAL_WEBHOOK_ID] },
        enabled: true,
        activities: { $in: ['CardDetailsRendered', 'all'] },
-      }).fetch();
+      });

      if (integrations.length > 0) {
        integrations.forEach((integration) => {
@@ -296,7 +254,7 @@ BlazeComponent.extendComponent({
    });

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

    // Disable sorting if the current user is not a board member
@@ -348,6 +306,10 @@ BlazeComponent.extendComponent({
          const $tooltip = this.$('.card-details-header .copied-tooltip');
          Utils.showCopied(promise, $tooltip);
        },
+        'change .js-date-format-selector'(event) {
+          const dateFormat = event.target.value;
+          Meteor.call('changeDateFormat', dateFormat);
+        },
        'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
        'submit .js-card-description'(event) {
          event.preventDefault();
@@ -441,8 +403,11 @@ BlazeComponent.extendComponent({
          Session.set('cardDetailsIsDragging', false);
          Session.set('cardDetailsIsMouseDown', false);
        },
-        'click #toggleButton'() {
-          Meteor.call('toggleSystemMessages');
+        'click #toggleShowActivitiesCard'() {
+          this.data().toggleShowActivities();
+        },
+        'click #toggleHideCheckedChecklistItems'() {
+          this.data().toggleHideCheckedChecklistItems();
        },
        'click #toggleCustomFieldsGridButton'() {
          Meteor.call('toggleCustomFieldsGrid');
@@ -450,20 +415,10 @@ BlazeComponent.extendComponent({
        'click .js-maximize-card-details'() {
          Meteor.call('toggleCardMaximized');
          autosize($('.card-details'));
-          if (!Utils.isMiniScreen()) {
-            Meteor.setTimeout(() => {
-              this.scrollParentContainer();
-            }, 500);
-          }
        },
        'click .js-minimize-card-details'() {
          Meteor.call('toggleCardMaximized');
          autosize($('.card-details'));
-          if (!Utils.isMiniScreen()) {
-            Meteor.setTimeout(() => {
-              this.scrollParentContainer();
-            }, 500);
-          }
        },
        'click .js-vote'(e) {
          const forIt = $(e.target).hasClass('js-vote-positive');
@@ -523,7 +478,7 @@ BlazeComponent.extendComponent({
        'click .js-poker-finish'(e) {
          if ($(e.target).hasClass('js-poker-finish')) {
            e.preventDefault();
-            const now = moment().format('YYYY-MM-DD HH:mm');
+            const now = formatDateTime(new Date());
            this.data().setPokerEnd(now);
          }
        },
@@ -551,6 +506,62 @@ BlazeComponent.extendComponent({
            }
          }
        },
+        // Drag and drop file upload handlers
+        'dragover .js-card-details'(event) {
+          // Only prevent default for file drags to avoid interfering with other drag operations
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        'dragenter .js-card-details'(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 .js-card-details'(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 .js-card-details'(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 checklist item reorder)
+            if (!dataTransfer.files || dataTransfer.files.length === 0) {
+              return;
+            }
+
+            const files = dataTransfer.files;
+            if (files && files.length > 0) {
+              handleFileUpload(card, files);
+            }
+          }
+        },
      },
    ];
  },
@@ -560,6 +571,21 @@ Template.cardDetails.helpers({
  isPopup() {
    let ret = !!Utils.getPopupCardId();
    return ret;
+  },
+  isDateFormat(format) {
+    const currentUser = ReactiveCache.getCurrentUser();
+    if (!currentUser) return format === 'YYYY-MM-DD';
+    return currentUser.getDateFormat() === format;
+  },
+  // Upload progress helpers
+  hasActiveUploads() {
+    return uploadProgressManager.hasActiveUploads(this._id);
+  },
+  uploads() {
+    return uploadProgressManager.getUploadsForCard(this._id);
+  },
+  uploadCount() {
+    return uploadProgressManager.getUploadCountForCard(this._id);
  }
 });
 Template.cardDetailsPopup.onDestroyed(() => {
@@ -660,15 +686,11 @@ Template.cardDetailsActionsPopup.helpers({
  },

  isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },

-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly()
-    );
+  showListOnMinicard() {
+    return this.showListOnMinicard;
  },
 });

@@ -715,6 +737,12 @@ Template.cardDetailsActionsPopup.events({
      if (!err && ret) Popup.close();
    });
  },
+  'click .js-toggle-show-list-on-minicard'() {
+    const currentCard = this;
+    const newValue = !currentCard.showListOnMinicard;
+    Cards.update(currentCard._id, { $set: { showListOnMinicard: newValue } });
+    Popup.close();
+  },
 });

 BlazeComponent.extendComponent({
@@ -744,19 +772,8 @@ BlazeComponent.extendComponent({
 }).register('editCardTitleForm');

 Template.cardMembersPopup.onCreated(function () {
-  let currBoard = Boards.findOne(Session.get('currentBoard'));
+  let currBoard = Utils.getCurrentBoard();
  let members = currBoard.activeMembers();
-
-  // let query = {
-  //   "teams.teamId": { $in: currBoard.teams.map(t => t.teamId) },
-  // };
-
-  // let boardTeamUsers = Users.find(query, {
-  //   sort: { sort: 1 },
-  // });
-
-  // members = currBoard.activeMembers2(members, boardTeamUsers);
-
  this.members = new ReactiveVar(members);
 });

@@ -769,29 +786,19 @@ Template.cardMembersPopup.events({

 Template.cardMembersPopup.helpers({
  members() {
-    return Template.instance().members.get();
+    return _.sortBy(Template.instance().members.get(),'fullname');
  },
 });

 const filterMembers = (filterTerm) => {
-  let currBoard = Boards.findOne(Session.get('currentBoard'));
+  let currBoard = Utils.getCurrentBoard();
  let members = currBoard.activeMembers();

-  // let query = {
-  //   "teams.teamId": { $in: currBoard.teams.map(t => t.teamId) },
-  // };
-
-  // let boardTeamUsers = Users.find(query, {
-  //   sort: { sort: 1 },
-  // });
-
-  // members = currBoard.activeMembers2(members, boardTeamUsers);
-
  if (filterTerm) {
    members = members
      .map(member => ({
        member,
-        user: Users.findOne(member.userId)
+        user: ReactiveCache.getUser(member.userId)
      }))
      .filter(({ user }) =>
        (user.profile.fullname !== undefined && user.profile.fullname.toLowerCase().indexOf(filterTerm.toLowerCase()) !== -1)
@@ -830,11 +837,11 @@ Template.editCardAssignerForm.events({
 /** Move Card Dialog */
 (class extends DialogWithBoardSwimlaneList {
  getDialogOptions() {
-    const ret = Meteor.user().getMoveAndCopyDialogOptions();
+    const ret = ReactiveCache.getCurrentUser().getMoveAndCopyDialogOptions();
    return ret;
  }
  setDone(boardId, swimlaneId, listId, options) {
-    Meteor.user().setMoveAndCopyDialogOption(this.currentBoardId, options);
+    ReactiveCache.getCurrentUser().setMoveAndCopyDialogOption(this.currentBoardId, options);
    const card = this.data();
    const minOrder = card.getMinSort(listId, swimlaneId);
    card.move(boardId, swimlaneId, listId, minOrder - 1);
@@ -844,11 +851,11 @@ Template.editCardAssignerForm.events({
 /** Copy Card Dialog */
 (class extends DialogWithBoardSwimlaneList {
  getDialogOptions() {
-    const ret = Meteor.user().getMoveAndCopyDialogOptions();
+    const ret = ReactiveCache.getCurrentUser().getMoveAndCopyDialogOptions();
    return ret;
  }
  setDone(boardId, swimlaneId, listId, options) {
-    Meteor.user().setMoveAndCopyDialogOption(this.currentBoardId, options);
+    ReactiveCache.getCurrentUser().setMoveAndCopyDialogOption(this.currentBoardId, options);
    const card = this.data();

    // const textarea = $('#copy-card-title');
@@ -871,11 +878,11 @@ Template.editCardAssignerForm.events({
 /** Convert Checklist-Item to card dialog */
 (class extends DialogWithBoardSwimlaneList {
  getDialogOptions() {
-    const ret = Meteor.user().getMoveAndCopyDialogOptions();
+    const ret = ReactiveCache.getCurrentUser().getMoveAndCopyDialogOptions();
    return ret;
  }
  setDone(boardId, swimlaneId, listId, options) {
-    Meteor.user().setMoveAndCopyDialogOption(this.currentBoardId, options);
+    ReactiveCache.getCurrentUser().setMoveAndCopyDialogOption(this.currentBoardId, options);
    const card = this.data();

    const textarea = this.$('#copy-card-title');
@@ -889,7 +896,7 @@ Template.editCardAssignerForm.events({
        swimlaneId: swimlaneId,
        sort: 0,
      });
-      const card = Cards.findOne(_id);
+      const card = ReactiveCache.getCard(_id);
      const minOrder = card.getMinSort();
      card.move(card.boardId, card.swimlaneId, card.listId, minOrder - 1);

@@ -901,11 +908,11 @@ Template.editCardAssignerForm.events({
 /** Copy many cards dialog */
 (class extends DialogWithBoardSwimlaneList {
  getDialogOptions() {
-    const ret = Meteor.user().getMoveAndCopyDialogOptions();
+    const ret = ReactiveCache.getCurrentUser().getMoveAndCopyDialogOptions();
    return ret;
  }
  setDone(boardId, swimlaneId, listId, options) {
-    Meteor.user().setMoveAndCopyDialogOption(this.currentBoardId, options);
+    ReactiveCache.getCurrentUser().setMoveAndCopyDialogOption(this.currentBoardId, options);
    const card = this.data();

    const textarea = this.$('#copy-card-title');
@@ -949,13 +956,15 @@ BlazeComponent.extendComponent({
        'click .js-palette-color'() {
          this.currentColor.set(this.currentData().color);
        },
-        'click .js-submit'() {
+        'click .js-submit'(event) {
+          event.preventDefault();
          this.currentCard.setColor(this.currentColor.get());
-          Popup.close();
+          Popup.back();
        },
-        'click .js-remove-color'() {
+        'click .js-remove-color'(event) {
+          event.preventDefault();
          this.currentCard.setColor(null);
-          Popup.close();
+          Popup.back();
        },
      },
    ];
@@ -977,27 +986,27 @@ BlazeComponent.extendComponent({
  },

  boards() {
-    return Boards.find(
+    const ret = ReactiveCache.getBoards(
      {
        archived: false,
        'members.userId': Meteor.userId(),
-        _id: {
-          $ne: Meteor.user().getTemplatesBoardId(),
-        },
+        _id: { $ne: ReactiveCache.getCurrentUser().getTemplatesBoardId() },
      },
      {
        sort: { sort: 1 /* boards default sorting */ },
      },
    );
+    return ret;
  },

  cards() {
    const currentId = Utils.getCurrentCardId();
    if (this.parentBoard.get()) {
-      return Cards.find({
+      const ret = ReactiveCache.getCards({
        boardId: this.parentBoard.get(),
        _id: { $ne: currentId },
      });
+      return ret;
    } else {
      return [];
    }
@@ -1021,7 +1030,7 @@ BlazeComponent.extendComponent({

  setParentCardId(cardId) {
    if (cardId) {
-      this.parentCard = Cards.findOne(cardId);
+      this.parentCard = ReactiveCache.getCard(cardId);
    } else {
      this.parentCard = null;
    }
@@ -1040,7 +1049,7 @@ BlazeComponent.extendComponent({
        'click .js-delete': Popup.afterConfirm('cardDelete', function () {
          Popup.close();
          // verify that there are no linked cards
-          if (Cards.find({ linkedId: this._id }).count() === 0) {
+          if (ReactiveCache.getCards({ linkedId: this._id }).length === 0) {
            Cards.remove(this._id);
          } else {
            // TODO: Maybe later we can list where the linked cards are.
@@ -1128,8 +1137,8 @@ BlazeComponent.extendComponent({
 // editVoteEndDatePopup
 (class extends DatePicker {
  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getVoteEnd() && this.date.set(moment(this.data().getVoteEnd()));
+    super.onCreated(formatDateTime(now()));
+    this.data().getVoteEnd() && this.date.set(new Date(this.data().getVoteEnd()));
  }
  events() {
    return [
@@ -1140,12 +1149,12 @@ BlazeComponent.extendComponent({
          // if no time was given, init with 12:00
          const time =
            evt.target.time.value ||
-            moment(new Date().setHours(12, 0, 0)).format('LT');
+            formatTime(new Date().setHours(12, 0, 0));

          const dateString = `${evt.target.date.value} ${time}`;

          /*
-          const newDate = moment(dateString, 'L LT', true);
+          const newDate = parseDate(dateString, ['L LT'], true);
          if (newDate.isValid()) {
            // if active vote -  store it
            if (this.currentData().getVoteQuestion()) {
@@ -1159,28 +1168,27 @@ BlazeComponent.extendComponent({

          */

-          // Try to parse different date formats of all languages.
-          // This code is same for vote and planning poker.
-          const usaDate = moment(dateString, 'L LT', true);
-          const euroAmDate = moment(dateString, 'DD.MM.YYYY LT', true);
-          const euro24hDate = moment(dateString, 'DD.MM.YYYY HH.mm', true);
-          const eurodotDate = moment(dateString, 'DD.MM.YYYY HH:mm', true);
-          const minusDate = moment(dateString, 'YYYY-MM-DD HH:mm', true);
-          const slashDate = moment(dateString, 'DD/MM/YYYY HH.mm', true);
-          const dotDate = moment(dateString, 'DD/MM/YYYY HH:mm', true);
-          const brezhonegDate = moment(dateString, 'DD/MM/YYYY h[e]mm A', true);
-          const hrvatskiDate = moment(dateString, 'DD. MM. YYYY H:mm', true);
-          const latviaDate = moment(dateString, 'YYYY.MM.DD. H:mm', true);
-          const nederlandsDate = moment(dateString, 'DD-MM-YYYY HH:mm', true);
-          // greekDate does not work: el Greek Ελληνικά ,
-          // it has date format DD/MM/YYYY h:mm MM like 20/06/2021 11:15 MM
-          // where MM is maybe some text like AM/PM ?
-          // Also some other languages that have non-ascii characters in dates
-          // do not work.
-          const greekDate = moment(dateString, 'DD/MM/YYYY h:mm A', true);
-          const macedonianDate = moment(dateString, 'D.MM.YYYY H:mm', true);
+          // Try to parse different date formats using native Date parsing
+          const formats = [
+            'YYYY-MM-DD HH:mm',
+            'MM/DD/YYYY HH:mm',
+            'DD.MM.YYYY HH:mm',
+            'DD/MM/YYYY HH:mm',
+            'DD-MM-YYYY HH:mm'
+          ];
+          
+          let parsedDate = null;
+          for (const format of formats) {
+            parsedDate = parseDate(dateString, [format], true);
+            if (parsedDate) break;
+          }
+          
+          // Fallback to native Date parsing
+          if (!parsedDate) {
+            parsedDate = new Date(dateString);
+          }

-          if (usaDate.isValid()) {
+          if (isValidDate(parsedDate)) {
            // if active poker -  store it
            if (this.currentData().getPokerQuestion()) {
              this._storeDate(usaDate.toDate());
@@ -1359,9 +1367,9 @@ BlazeComponent.extendComponent({
 // editPokerEndDatePopup
 (class extends DatePicker {
  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
+    super.onCreated(formatDateTime(now()));
    this.data().getPokerEnd() &&
-      this.date.set(moment(this.data().getPokerEnd()));
+      this.date.set(new Date(this.data().getPokerEnd()));
  }

  /*
@@ -1379,7 +1387,7 @@ BlazeComponent.extendComponent({
    return moment.localeData().longDateFormat('LT');
  }

-  const newDate = moment(dateString, dateformat() + ' ' + timeformat(), true);
+  const newDate = parseDate(dateString, [dateformat() + ' ' + timeformat()], true);
  */

  events() {
@@ -1391,7 +1399,7 @@ BlazeComponent.extendComponent({
          // if no time was given, init with 12:00
          const time =
            evt.target.time.value ||
-            moment(new Date().setHours(12, 0, 0)).format('LT');
+            formatTime(new Date().setHours(12, 0, 0));

          const dateString = `${evt.target.date.value} ${time}`;

@@ -1402,7 +1410,7 @@ BlazeComponent.extendComponent({
          Maybe client/components/lib/datepicker.jade could have hidden input field for
          datepicker format that could be used to detect date format?

-          const newDate = moment(dateString, dateformat() + ' ' + timeformat(), true);
+          const newDate = parseDate(dateString, [dateformat() + ' ' + timeformat()], true);

          if (newDate.isValid()) {
            // if active poker -  store it
@@ -1415,28 +1423,27 @@ BlazeComponent.extendComponent({
            }
          */

-          // Try to parse different date formats of all languages.
-          // This code is same for vote and planning poker.
-          const usaDate = moment(dateString, 'L LT', true);
-          const euroAmDate = moment(dateString, 'DD.MM.YYYY LT', true);
-          const euro24hDate = moment(dateString, 'DD.MM.YYYY HH.mm', true);
-          const eurodotDate = moment(dateString, 'DD.MM.YYYY HH:mm', true);
-          const minusDate = moment(dateString, 'YYYY-MM-DD HH:mm', true);
-          const slashDate = moment(dateString, 'DD/MM/YYYY HH.mm', true);
-          const dotDate = moment(dateString, 'DD/MM/YYYY HH:mm', true);
-          const brezhonegDate = moment(dateString, 'DD/MM/YYYY h[e]mm A', true);
-          const hrvatskiDate = moment(dateString, 'DD. MM. YYYY H:mm', true);
-          const latviaDate = moment(dateString, 'YYYY.MM.DD. H:mm', true);
-          const nederlandsDate = moment(dateString, 'DD-MM-YYYY HH:mm', true);
-          // greekDate does not work: el Greek Ελληνικά ,
-          // it has date format DD/MM/YYYY h:mm MM like 20/06/2021 11:15 MM
-          // where MM is maybe some text like AM/PM ?
-          // Also some other languages that have non-ascii characters in dates
-          // do not work.
-          const greekDate = moment(dateString, 'DD/MM/YYYY h:mm A', true);
-          const macedonianDate = moment(dateString, 'D.MM.YYYY H:mm', true);
+          // Try to parse different date formats using native Date parsing
+          const formats = [
+            'YYYY-MM-DD HH:mm',
+            'MM/DD/YYYY HH:mm',
+            'DD.MM.YYYY HH:mm',
+            'DD/MM/YYYY HH:mm',
+            'DD-MM-YYYY HH:mm'
+          ];
+          
+          let parsedDate = null;
+          for (const format of formats) {
+            parsedDate = parseDate(dateString, [format], true);
+            if (parsedDate) break;
+          }
+          
+          // Fallback to native Date parsing
+          if (!parsedDate) {
+            parsedDate = new Date(dateString);
+          }

-          if (usaDate.isValid()) {
+          if (isValidDate(parsedDate)) {
            // if active poker -  store it
            if (this.currentData().getPokerQuestion()) {
              this._storeDate(usaDate.toDate());
@@ -1579,8 +1586,8 @@ EscapeActions.register(
  () => {
    // if card description diverges from database due to editing
    // ask user whether changes should be applied
-    if (Meteor.user()) {
-      if (Meteor.user().profile.rescueCardDescription == true) {
+    if (ReactiveCache.getCurrentUser()) {
+      if (ReactiveCache.getCurrentUser().profile.rescueCardDescription == true) {
        currentDescription = document.getElementsByClassName("editor js-new-description-input").item(0)
        if (currentDescription?.value && !(currentDescription.value === Utils.getCurrentCard().getDescription())) {
          if (confirm(TAPi18n.__('rescue-card-description-dialogue'))) {
@@ -1614,19 +1621,8 @@ EscapeActions.register(
 );

 Template.cardAssigneesPopup.onCreated(function () {
-  let currBoard = Boards.findOne(Session.get('currentBoard'));
+  let currBoard = Utils.getCurrentBoard();
  let members = currBoard.activeMembers();
-
-  // let query = {
-  //   "teams.teamId": { $in: currBoard.teams.map(t => t.teamId) },
-  // };
-
-  // let boardTeamUsers = Users.find(query, {
-  //   sort: { sort: 1 },
-  // });
-
-  // members = currBoard.activeMembers2(members, boardTeamUsers);
-
  this.members = new ReactiveVar(members);
 });

@@ -1652,17 +1648,17 @@ Template.cardAssigneesPopup.helpers({
  },

  members() {
-    return Template.instance().members.get();
+    return _.sortBy(Template.instance().members.get(),'fullname');
  },

  user() {
-    return Users.findOne(this.userId);
+    return ReactiveCache.getUser(this.userId);
  },
 });

 Template.cardAssigneePopup.helpers({
  userData() {
-    return Users.findOne(this.userId, {
+    return ReactiveCache.getUser(this.userId, {
      fields: {
        profile: 1,
        username: 1,
@@ -1671,21 +1667,10 @@ Template.cardAssigneePopup.helpers({
  },

  memberType() {
-    const user = Users.findOne(this.userId);
+    const user = ReactiveCache.getUser(this.userId);
    return user && user.isBoardAdmin() ? 'admin' : 'normal';
  },

-  /*
-    presenceStatusClassName() {
-      const user = Users.findOne(this.userId);
-      const userPresence = presences.findOne({ userId: this.userId });
-      if (user && user.isInvitedTo(Session.get('currentBoard'))) return 'pending';
-      else if (!userPresence) return 'disconnected';
-      else if (Session.equals('currentBoard', userPresence.state.currentBoardId))
-        return 'active';
-      else return 'idle';
-    },
-  */
  isCardAssignee() {
    const card = Template.parentData();
    const cardAssignees = card.getAssignees();
@@ -1694,13 +1679,13 @@ Template.cardAssigneePopup.helpers({
  },

  user() {
-    return Users.findOne(this.userId);
+    return ReactiveCache.getUser(this.userId);
  },
 });

 Template.cardAssigneePopup.events({
  'click .js-remove-assignee'() {
-    Cards.findOne(this.cardId).unassignAssignee(this.userId);
+    ReactiveCache.getCard(this.cardId).unassignAssignee(this.userId);
    Popup.back();
  },
  'click .js-edit-profile': Popup.open('editProfile'),
@@ -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}}
@@ -83,13 +83,3 @@ BlazeComponent.extendComponent({
    ];
  },
 }).register('cardSpentTime');
-
-Template.timeBadge.helpers({
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly()
-    );
-  },
-});
@@ -45,6 +45,9 @@ textarea.js-edit-checklist-item {
  border-radius: 16px;
  height: 100%;
 }
+.checklist-title {
+  padding: 10px;
+}
 .checklist-title .checkbox {
  float: left;
  width: 30px;
@@ -164,6 +167,21 @@ textarea.js-edit-checklist-item {
  color: #222;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }
+.add-checklist-top {
+  /* more space to checklists title */
+  padding-left: 20px;
+  /* + is easier clickable */
+  padding-right: 20px;
+}
+.add-checklist-top.js-open-inlined-form:hover {
+  background: #dbdbdb;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,.2);
+}
+.card-details-item-title {
+  /* max width for adding checklist at top */
+  width: 100%;
+}
 .checklist-details-menu {
  float: right;
  padding: 6px 10px 6px 10px;
@@ -1,37 +1,44 @@
 template(name="checklists")
  .checklists-title
    h3.card-details-item-title
-      i.fa.fa-check
+      | ✅
      | {{_ 'checklists'}}
-    if currentUser.isBoardMember
-      .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
-        //span.toggle-switch-title
-        if hideCheckedItems
-          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
+      if canModifyCard
+        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
+          +addChecklistItemForm
        else
-          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
-        label.toggle-label(for="toggleHideCheckedItemsButton")
+          a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
+            | ➕
+    if currentUser.isBoardMember
+      .material-toggle-switch(title="{{_ 'hide-finished-checklist'}}")
+        //span.toggle-switch-title
+        if card.hideFinishedChecklistIfItemsAreHidden
+          input.toggle-switch(type="checkbox" id="toggleHideFinishedChecklist" checked="checked")
+        else
+          input.toggle-switch(type="checkbox" id="toggleHideFinishedChecklist")
+        label.toggle-label(for="toggleHideFinishedChecklist")

  .card-checklist-items
    each checklist in checklists
-      +checklistDetail(checklist = checklist)
+      if checklist.showChecklist card.hideFinishedChecklistIfItemsAreHidden
+        +checklistDetail(checklist = checklist card = card)

  if canModifyCard
    +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
      +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=false)
    else
      a.add-checklist.js-open-inlined-form(title="{{_ 'add-checklist'}}")
-        i.fa.fa-plus
+        | ➕

 template(name="checklistDetail")
-  .js-checklist.checklist
+  .js-checklist.checklist.nodragscroll
    +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
      +editChecklistItemForm(checklist = checklist)
    else
      .checklist-title
        span
        if canModifyCard
-          a.fa.fa-navicon.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
+          a.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")

        if canModifyCard
          h4.title.js-open-inlined-form.is-editable
@@ -49,26 +56,32 @@ template(name="checklistDetail")
        .checklist-progress-text {{finishedPercent}}%
        .checklist-progress-bar
          .checklist-progress(style="width:{{finishedPercent}}%")
-    +checklistItems(checklist = checklist)
+    +checklistItems(checklist = checklist card = card)

 template(name="checklistDeletePopup")
  p {{_ 'confirm-checklist-delete-popup'}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

 template(name="addChecklistItemForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
  span.copied-tooltip {{_ 'copied'}}
  textarea.js-add-checklist-item(rows='1' autofocus)
  .edit-controls.clearfix
    button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
+    a.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
    if showNewlineBecomesNewChecklistItem
      .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItem'}}")
        input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItem")
        label.toggle-label(for="toggleNewlineBecomesNewChecklistItem")
+        | {{_ 'newLineNewItem'}}
+      if $eq position 'top'
+        .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItemOriginOrder'}}")
+          input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItemOriginOrder")
+          label.toggle-label(for="toggleNewlineBecomesNewChecklistItemOriginOrder")
+          | {{_ 'originOrder'}}

 template(name="editChecklistItemForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
  span.copied-tooltip {{_ 'copied'}}
  textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
    if $eq type 'item'
@@ -77,36 +90,42 @@ template(name="editChecklistItemForm")
      = checklist.title
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
+    a.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
    span(title=createdAt) {{ moment createdAt }}
    if canModifyCard
      a.js-delete-checklist-item {{_ "delete"}}...
      a.js-convert-checklist-item-to-card
-        i.fa.fa-copy
+        | 📋
        | {{_ 'convertChecklistItemToCardPopup-title'}}

 template(name="checklistItems")
+  if checklist.items.length
+    if canModifyCard
+      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist position="top")
+        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true position="top")
+      else
+        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
+          | ➕
  .checklist-items.js-checklist-items
    each item in checklist.items
      +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
        +editChecklistItemForm(type = 'item' item = item checklist = checklist)
      else
-        +checklistItemDetail(item = item checklist = checklist)
+        +checklistItemDetail(item = item checklist = checklist card = card)
    if canModifyCard
      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true)
      else
        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
-          i.fa.fa-plus
+          | ➕

 template(name='checklistItemDetail')
-  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}"
+  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if checklist.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}{{#if checklist.hideAllChecklistItems}} is-checked invisible{{/if}}"
    role="checkbox" aria-checked="{{#if item.isFinished }}true{{else}}false{{/if}}" tabindex="0")
    if canModifyCard
      .check-box-container
        .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
-      if isTouchScreenOrShowDesktopDragHandles
-        span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
+      span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
      .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title
@@ -120,14 +139,32 @@ template(name="checklistActionsPopup")
  ul.pop-over-list
    li
      a.js-delete-checklist.delete-checklist
-        i.fa.fa-trash
+        | 🗑️
        | {{_ "delete"}} ...
      a.js-move-checklist.move-checklist
-        i.fa.fa-arrow-right
+        | ➡️
        | {{_ "moveChecklist"}} ...
      a.js-copy-checklist.copy-checklist
-        i.fa.fa-copy
+        | 📋
        | {{_ "copyChecklist"}} ...
+      a.js-hide-checked-checklist-items
+        | 🙈
+        | {{_ "hideCheckedChecklistItems"}} ...
+        .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
+          if checklist.hideCheckedChecklistItems
+            input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}" checked="checked")
+          else
+            input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}")
+          label.toggle-label(for="toggleHideCheckedChecklistItems_{{checklist._id}}")
+      a.js-hide-all-checklist-items
+        | 🚫
+        | {{_ "hideAllChecklistItems"}} ...
+        .material-toggle-switch(title="{{_ 'hideAllChecklistItems'}}")
+          if checklist.hideAllChecklistItems
+            input.toggle-switch(type="checkbox" id="toggleHideAllChecklistItems_{{checklist._id}}" checked="checked")
+          else
+            input.toggle-switch(type="checkbox" id="toggleHideAllChecklistItems_{{checklist._id}}")
+          label.toggle-label(for="toggleHideAllChecklistItems_{{checklist._id}}")

 template(name="copyChecklistPopup")
  +copyAndMoveChecklist
@@ -140,10 +177,7 @@ template(name="copyAndMoveChecklist")
    label {{_ 'boards'}}:
    select.js-select-boards(autofocus)
      each boards
-        if $eq _id currentBoard._id
-          option(value="{{_id}}" selected) {{_ 'current'}}
-        else
-          option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}
+        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}

  label {{_ 'swimlanes'}}:
  select.js-select-swimlanes
@@ -1,3 +1,4 @@
+import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
@@ -54,7 +55,7 @@ BlazeComponent.extendComponent({
    });

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

    // Disable sorting if the current user is not a board member
@@ -71,15 +72,6 @@ BlazeComponent.extendComponent({
    });
  },

-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-
  /** returns the finished percent of the checklist */
  finishedPercent() {
    const ret = this.data().checklist.finishedPercent();
@@ -93,20 +85,32 @@ BlazeComponent.extendComponent({
    const textarea = this.find('textarea.js-add-checklist-item');
    const title = textarea.value.trim();
    let cardId = this.currentData().cardId;
-    const card = Cards.findOne(cardId);
+    const card = ReactiveCache.getCard(cardId);
    //if (card.isLinked()) cardId = card.linkedId;
-    if (card.isLinkedCard()) cardId = card.linkedId;
+    if (card.isLinkedCard()) {
+      cardId = card.linkedId;
+    }
+
+    let sortIndex;
+    let checklistItemIndex;
+    if (this.currentData().position === 'top') {
+      sortIndex = Utils.calculateIndexData(null, card.firstChecklist()).base;
+      checklistItemIndex = 0;
+    } else {
+      sortIndex = Utils.calculateIndexData(card.lastChecklist(), null).base;
+      checklistItemIndex = -1;
+    }

    if (title) {
      Checklists.insert({
        cardId,
        title,
-        sort: card.checklists().count(),
+        sort: sortIndex,
      });
      this.closeAllInlinedForms();
      setTimeout(() => {
        this.$('.add-checklist-item')
-          .last()
+          .eq(checklistItemIndex)
          .click();
      }, 100);
    }
@@ -115,6 +119,7 @@ BlazeComponent.extendComponent({
    event.preventDefault();
    const textarea = this.find('textarea.js-add-checklist-item');
    const newlineBecomesNewChecklistItem = this.find('input#toggleNewlineBecomesNewChecklistItem');
+    const newlineBecomesNewChecklistItemOriginOrder = this.find('input#toggleNewlineBecomesNewChecklistItemOriginOrder');
    const title = textarea.value.trim();
    const checklist = this.currentData().checklist;

@@ -122,14 +127,29 @@ BlazeComponent.extendComponent({
      let checklistItems = [title];
      if (newlineBecomesNewChecklistItem.checked) {
        checklistItems = title.split('\n').map(_value => _value.trim());
+        if (this.currentData().position === 'top') {
+          if (newlineBecomesNewChecklistItemOriginOrder.checked === false) {
+            checklistItems = checklistItems.reverse();
+          }
+        }
+      }
+      let addIndex;
+      let sortIndex;
+      if (this.currentData().position === 'top') {
+        sortIndex = Utils.calculateIndexData(null, checklist.firstItem()).base;
+        addIndex = -1;
+      } else {
+        sortIndex = Utils.calculateIndexData(checklist.lastItem(), null).base;
+        addIndex = 1;
      }
      for (let checklistItem of checklistItems) {
        ChecklistItems.insert({
          title: checklistItem,
          checklistId: checklist._id,
          cardId: checklist.cardId,
-          sort: Utils.calculateIndexData(checklist.lastItem()).base,
+          sort: sortIndex,
        });
+        sortIndex += addIndex;
      }
    }
    // We keep the form opened, empty it.
@@ -137,15 +157,6 @@ BlazeComponent.extendComponent({
    textarea.focus();
  },

-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-
  deleteItem() {
    const checklist = this.currentData().checklist;
    const item = this.currentData().item;
@@ -197,15 +208,8 @@ BlazeComponent.extendComponent({
  },

  events() {
-    const events = {
-      'click #toggleHideCheckedItemsButton'() {
-        Meteor.call('toggleHideCheckedItems');
-      },
-    };
-
    return [
      {
-        ...events,
        'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
        'submit .js-add-checklist': this.addChecklist,
        'submit .js-edit-checklist-title': this.editChecklist,
@@ -216,6 +220,10 @@ BlazeComponent.extendComponent({
        'focus .js-add-checklist-item': this.focusChecklistItem,
        // add and delete checklist / checklist-item
        'click .js-open-inlined-form': this.closeAllInlinedForms,
+        'click #toggleHideFinishedChecklist'(event) {
+          event.preventDefault();
+          this.data().card.toggleHideFinishedChecklist();
+        },
        keydown: this.pressKey,
      },
    ];
@@ -229,25 +237,26 @@ BlazeComponent.extendComponent({
  },

  boards() {
-    return Boards.find(
+    const ret = ReactiveCache.getBoards(
      {
        archived: false,
        'members.userId': Meteor.userId(),
-        _id: { $ne: Meteor.user().getTemplatesBoardId() },
+        _id: { $ne: ReactiveCache.getCurrentUser().getTemplatesBoardId() },
      },
      {
        sort: { sort: 1 /* boards default sorting */ },
      },
    );
+    return ret;
  },

  swimlanes() {
-    const board = Boards.findOne(this.selectedBoardId.get());
+    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
    return board.swimlanes();
  },

  aBoardLists() {
-    const board = Boards.findOne(this.selectedBoardId.get());
+    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
    return board.lists();
  },

@@ -265,29 +274,16 @@ BlazeComponent.extendComponent({

 Template.checklists.helpers({
  checklists() {
-    const card = Cards.findOne(this.cardId);
+    const card = ReactiveCache.getCard(this.cardId);
    const ret = card.checklists();
    return ret;
  },
-  hideCheckedItems() {
-    const currentUser = Meteor.user();
-    if (currentUser) return currentUser.hasHideCheckedItems();
-    return false;
-  },
 });

 BlazeComponent.extendComponent({
  onRendered() {
    autosize(this.$('textarea.js-add-checklist-item'));
  },
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
  events() {
    return [
      {
@@ -316,6 +312,16 @@ BlazeComponent.extendComponent({
        }),
        'click .js-move-checklist': Popup.open('moveChecklist'),
        'click .js-copy-checklist': Popup.open('copyChecklist'),
+        'click .js-hide-checked-checklist-items'(event) {
+          event.preventDefault();
+          this.data().checklist.toggleHideCheckedChecklistItems();
+          Popup.back();
+        },
+        'click .js-hide-all-checklist-items'(event) {
+          event.preventDefault();
+          this.data().checklist.toggleHideAllChecklistItems();
+          Popup.back();
+        },
      }
    ]
  }
@@ -325,14 +331,6 @@ BlazeComponent.extendComponent({
  onRendered() {
    autosize(this.$('textarea.js-edit-checklist-item'));
  },
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
  events() {
    return [
      {
@@ -349,19 +347,6 @@ BlazeComponent.extendComponent({
 }).register('editChecklistItemForm');

 Template.checklistItemDetail.helpers({
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-  hideCheckedItems() {
-    const user = Meteor.user();
-    if (user) return user.hasHideCheckedItems();
-    return false;
-  },
 });

 BlazeComponent.extendComponent({
@@ -384,11 +369,11 @@ BlazeComponent.extendComponent({
 /** Move Checklist Dialog */
 (class extends DialogWithBoardSwimlaneListCard {
  getDialogOptions() {
-    const ret = Meteor.user().getMoveChecklistDialogOptions();
+    const ret = ReactiveCache.getCurrentUser().getMoveChecklistDialogOptions();
    return ret;
  }
  setDone(cardId, options) {
-    Meteor.user().setMoveChecklistDialogOption(this.currentBoardId, options);
+    ReactiveCache.getCurrentUser().setMoveChecklistDialogOption(this.currentBoardId, options);
    this.data().checklist.move(cardId);
  }
 }).register('moveChecklistPopup');
@@ -396,11 +381,11 @@ BlazeComponent.extendComponent({
 /** Copy Checklist Dialog */
 (class extends DialogWithBoardSwimlaneListCard {
  getDialogOptions() {
-    const ret = Meteor.user().getCopyChecklistDialogOptions();
+    const ret = ReactiveCache.getCurrentUser().getCopyChecklistDialogOptions();
    return ret;
  }
  setDone(cardId, options) {
-    Meteor.user().setCopyChecklistDialogOption(this.currentBoardId, options);
+    ReactiveCache.getCurrentUser().setCopyChecklistDialogOption(this.currentBoardId, options);
    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;
@@ -6,7 +6,7 @@ template(name="formLabel")
  .palette-colors: each labels
    span.card-label.palette-color.js-palette-color(class="card-label-{{color}}")
      if(isSelected color)
-        i.fa.fa-check
+        | ✅

 template(name="createLabelPopup")
  form.create-label
@@ -28,7 +28,8 @@ template(name="cardLabelsPopup")
  ul.edit-labels-pop-over
    each board.labels
      li.js-card-label-item
-        a.card-label-edit-button.fa.fa-pencil.js-edit-label
+        a.card-label-edit-button.js-edit-label
+          | ✏️
        if isTouchScreenOrShowDesktopDragHandles
          span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
        span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
@@ -36,6 +37,5 @@ template(name="cardLabelsPopup")
            +viewer
              = name
            if(isLabelSelected ../_id)
-              i.card-label-selectable-icon.fa.fa-check
-  if currentUser.isBoardAdmin
-    a.quiet-button.full.js-add-label {{_ 'label-create'}}
+              | ✅
+  a.quiet-button.full.js-add-label {{_ 'label-create'}}
@@ -1,3 +1,5 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 let labelColors;
 Meteor.startup(() => {
  labelColors = Boards.simpleSchema()._schema['labels.$.color'].allowedValues;
@@ -32,7 +34,7 @@ Template.createLabelPopup.helpers({
  // is not already used in the board (although it's not a problem if two
  // labels have the same color).
  defaultColor() {
-    const labels = Boards.findOne(Session.get('currentBoard')).labels;
+    const labels = Utils.getCurrentBoard().labels;
    const usedColors = _.pluck(labels, 'color');
    const availableColors = _.difference(labelColors, usedColors);
    return availableColors.length > 1 ? availableColors[0] : labelColors[0];
@@ -50,7 +52,8 @@ BlazeComponent.extendComponent({
      appendTo: '.edit-labels-pop-over',
      helper(element, currentItem) {
        let ret = currentItem.clone();
-        if (currentItem.closest('.popup-container-depth-0').size() == 0) { // only set css transform at every sub-popup, not at the main popup
+        if (currentItem.closest('.popup-container-depth-0').length == 0)
+        { // only set css transform at every sub-popup, not at the main popup
          const content = currentItem.closest('.content')[0]
          const offsetLeft = content.offsetLeft;
          const offsetTop = $('.pop-over > .header').height() * -1;
@@ -117,38 +120,60 @@ Template.createLabelPopup.events({
  // Create the new label
  'submit .create-label'(event, templateInstance) {
    event.preventDefault();
-    const board = Boards.findOne(Session.get('currentBoard'));
+    const board = Utils.getCurrentBoard();
    const name = templateInstance
      .$('#labelName')
      .val()
      .trim();
-    const color = Blaze.getData(templateInstance.find('.fa-check')).color;
-    board.addLabel(name, color);
+    
+    // Find the selected color by looking for the palette color that contains the checkmark
+    let selectedColor = null;
+    templateInstance.$('.js-palette-color').each(function() {
+      if ($(this).text().includes('✅')) {
+        selectedColor = Blaze.getData(this).color;
+        return false; // break out of loop
+      }
+    });
+    
+    if (selectedColor) {
+      board.addLabel(name, selectedColor);
+    }
    Popup.back();
  },
 });

 Template.editLabelPopup.events({
  'click .js-delete-label': Popup.afterConfirm('deleteLabel', function () {
-    const board = Boards.findOne(Session.get('currentBoard'));
+    const board = Utils.getCurrentBoard();
    board.removeLabel(this._id);
    Popup.back(2);
  }),
  'submit .edit-label'(event, templateInstance) {
    event.preventDefault();
-    const board = Boards.findOne(Session.get('currentBoard'));
+    const board = Utils.getCurrentBoard();
    const name = templateInstance
      .$('#labelName')
      .val()
      .trim();
-    const color = Blaze.getData(templateInstance.find('.fa-check')).color;
-    board.editLabel(this._id, name, color);
+    
+    // Find the selected color by looking for the palette color that contains the checkmark
+    let selectedColor = null;
+    templateInstance.$('.js-palette-color').each(function() {
+      if ($(this).text().includes('✅')) {
+        selectedColor = Blaze.getData(this).color;
+        return false; // break out of loop
+      }
+    });
+    
+    if (selectedColor) {
+      board.editLabel(this._id, name, selectedColor);
+    }
    Popup.back();
  },
 });

 Template.cardLabelsPopup.helpers({
  isLabelSelected(cardId) {
-    return _.contains(Cards.findOne(cardId).labelIds, this._id);
+    return _.contains(ReactiveCache.getCard(cardId).labelIds, this._id);
  },
 });
@@ -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,12 +45,14 @@
 }
 .minicard-details-menu-with-handle {
  float: right;
-  font-size: 14px;
-  padding-right: 30px;
+  font-size: clamp(14px, 3vw, 18px);
+  padding-right: 4vw;
+  padding-left: 0.7vw;
 }
 .minicard-details-menu {
  float: right;
-  font-size: 14px;
+  font-size: clamp(14px, 3vw, 18px);
+  padding-left: 0.7vw;
 }
@media print {
  .minicard-details-menu,
@@ -61,7 +63,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;
 }
@@ -70,11 +72,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,
@@ -88,20 +90,20 @@
  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;
 }
 .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;
@@ -117,15 +119,22 @@
  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: 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: 0.7vw;
+  top: 0.7vh;
  display: none;
 }
@media only screen {
@@ -134,13 +143,13 @@
  }
 }
 .minicard .handle .fa-arrows {
-  font-size: 20px;
+  font-size: clamp(16px, 3vw, 20px);
  color: #ccc;
 }
 .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 {
@@ -149,7 +158,6 @@
  .minicard .minicard-title .viewer {
    display: block;
    word-wrap: break-word;
-    max-width: 230px;
  }
 }
 .minicard .dates {
@@ -158,11 +166,85 @@
  flex-wrap: wrap;
 }
 .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;
+}
+
+/* Font Awesome icons in minicard dates */
+.minicard .card-date i.fa {
+  margin-right: 0.3vw;
+  font-size: 0.9em;
+  vertical-align: middle;
+}
+
+/* Font Awesome icons in minicard spent time */
+.minicard .card-time i.fa {
+  margin-right: 0.3vw;
+  font-size: 0.9em;
+  vertical-align: middle;
 }
 .minicard .badges {
  float: left;
-  margin-top: 7px;
+  margin-top: 1vh;
  color: #808080;
 }
 .minicard .badges:empty {
@@ -170,14 +252,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 {
@@ -193,41 +275,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;
@@ -240,12 +322,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;
@@ -253,7 +336,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 {
@@ -264,9 +347,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 {
@@ -571,3 +654,26 @@
 .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;
+}
+
+.minicard-list-name i.fa {
+  font-size: 0.8em;
+  opacity: 0.7;
+}
@@ -1,59 +1,16 @@
 template(name="minicard")
-  .minicard(
+  .minicard.nodragscroll(
    class="{{#if isLinkedCard}}linked-card{{/if}}"
    class="{{#if isLinkedBoard}}linked-board{{/if}}"
    class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
-    if isTouchScreenOrShowDesktopDragHandles
-      a.fa.fa-navicon.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+    if canModifyCard
+      a.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'}}")
-    if cover
-      .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")
-    if labels
-      .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
-        each labels
-          unless hiddenMinicardLabelText
-            span.js-card-label.card-label(class="card-label-{{color}}" title=name)
-              +viewer
-                = name
-          if hiddenMinicardLabelText
-            .minicard-label(class="card-label-{{color}}" title="{{name}}")
-    .minicard-title
-      if $eq 'prefix-with-full-path' currentBoard.presentParentTask
-        .parent-prefix
-          | {{ parentString ' > ' }}
-      if $eq 'prefix-with-parent' currentBoard.presentParentTask
-        .parent-prefix
-          | {{ parentCardName }}
-      if isLinkedBoard
-        a.js-linked-link
-          span.linked-icon.fa.fa-folder
-      else if isLinkedCard
-        a.js-linked-link
-          span.linked-icon.fa.fa-id-card
-      if getArchived
-        span.linked-icon.linked-archived.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 }}
-
+        | ↕️
    .dates
      if getReceived
-        unless getStart
-          unless getDue
-            unless getEnd
-              .date
-                +minicardReceivedDate
+        .date
+          +minicardReceivedDate
      if getStart
        .date
          +minicardStartDate
@@ -65,31 +22,104 @@ template(name="minicard")
      if getSpentTime
        .date
          +cardSpentTime
+    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
+          | 📤
+          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
+                | ⚠️
+                span {{_ 'upload-failed'}}
+            else if $eq status 'completed'
+              .upload-progress-success
+                | ✅
+                span {{_ 'upload-completed'}}
+
+    .minicard-title
+      if $eq 'prefix-with-full-path' currentBoard.presentParentTask
+        .parent-prefix
+          | {{ parentString ' > ' }}
+      if $eq 'prefix-with-parent' currentBoard.presentParentTask
+        .parent-prefix
+          | {{ parentCardName }}
+      if isLinkedBoard
+        a.js-linked-link
+          span.linked-icon | 📁
+      else if isLinkedCard
+        a.js-linked-link
+          span.linked-icon | 🃏
+      if getArchived
+        span.linked-icon.linked-archived | 📦
+      +viewer
+        if currentBoard.allowsCardNumber
+          span.card-number
+            | ##{getCardNumber}
+        = getTitle
+    if labels
+      .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
+        each labels
+          unless hiddenMinicardLabelText
+            span.js-card-label.card-label(class="card-label-{{color}}" title=name)
+              +viewer
+                = name
+          if hiddenMinicardLabelText
+            .minicard-label(class="card-label-{{color}}" title="{{name}}")

    .minicard-custom-fields
      each customFieldsWD
        if definition.showOnCard
          if trueValue
            .minicard-custom-field
+              // If there is custom field label, show label at left,
+              // and value at right
              if definition.showLabelOnMiniCard
                .minicard-custom-field-item
                  +viewer
                    = definition.name
-              .minicard-custom-field-item
-                if $eq definition.type "currency"
-                  +viewer
-                    = formattedCurrencyCustomFieldValue(definition)
-                else if $eq definition.type "date"
-                  .date
-                    +minicardCustomFieldDate
-                else if $eq definition.type "checkbox"
-                  .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
-                else if $eq definition.type "stringtemplate"
-                  +viewer
-                    = formattedStringtemplateCustomFieldValue(definition)
-                else
-                  +viewer
-                    = trueValue
+                .minicard-custom-field-item
+                  if $eq definition.type "currency"
+                    +viewer
+                      = formattedCurrencyCustomFieldValue(definition)
+                  else if $eq definition.type "date"
+                    .date
+                      +minicardCustomFieldDate
+                  else if $eq definition.type "checkbox"
+                    .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
+                  else if $eq definition.type "stringtemplate"
+                    +viewer
+                      = formattedStringtemplateCustomFieldValue(definition)
+                  else
+                    +viewer
+                      = trueValue
+              else
+                // If there is no custom field label,
+                // show value full width
+                .minicard-custom-field-item-fullwidth
+                  if $eq definition.type "currency"
+                    +viewer
+                      = formattedCurrencyCustomFieldValue(definition)
+                  else if $eq definition.type "date"
+                    .date
+                      +minicardCustomFieldDate
+                  else if $eq definition.type "checkbox"
+                    .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
+                  else if $eq definition.type "stringtemplate"
+                    +viewer
+                      = formattedStringtemplateCustomFieldValue(definition)
+                  else
+                    +viewer
+                      = trueValue

    if showAssignee
      if getAssignees
@@ -103,56 +133,68 @@ template(name="minicard")
          each getMembers
            +userAvatar(userId=this)

-    if showCreator
+    if showCreatorOnMinicard
      .minicard-creator
        +userAvatar(userId=this.userId noRemove=true)

    .badges
-      unless currentUser.isNoComments
-        if comments.count
-          .badge(title="{{_ 'card-comments-title' comments.count }}")
-            span.badge-icon.fa.fa-comment-o.badge-comment
+      if canModifyCard
+        if comments.length
+          .badge(title="{{_ 'card-comments-title' comments.length }}")
+            span.badge-icon.badge-comment.badge-text | 💬
              = ' '
-              = comments.count
+              = comments.length
            //span.badge-comment.badge-text
            //|  {{_ 'comment'}}
      if getDescription
        unless currentBoard.allowsDescriptionTextOnMinicard
          .badge.badge-state-image-only(title=getDescription)
-            span.badge-icon.fa.fa-align-left
+            span.badge-icon | 📝
      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}}") | 👍
          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}}") | 👎
          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}}") | ✅
          if expiredPoker
            span.badge-text {{ getPokerEstimation }}
      if attachments.length
-        .badge
-          span.badge-icon.fa.fa-paperclip
-          span.badge-text= attachments.length
-      if checklists.count
+        if currentBoard.allowsBadgeAttachmentOnMinicard
+          .badge
+            span.badge-icon | 📎
+            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-icon | ☑️
          span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
      if allSubtasks.count
        .badge
-          span.badge-icon.fa.fa-sitemap
+          span.badge-icon | 🌐
          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
-        .badge
-          span.badge-icon.fa.fa-sort
-          span.badge-text.check-list-sort {{ sort }}
+        if currentBoard.allowsCardSortingByNumberOnMinicard
+          .badge
+            span.badge-icon | 🔢
+            span.badge-text.check-list-sort {{ sort }}
    if currentBoard.allowsDescriptionTextOnMinicard
      if getDescription
        .minicard-description
          +viewer
            | {{ getDescription }}
+    if shouldShowListOnMinicard
+      .minicard-list-name
+        | 📋
+        | {{ 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")
@@ -161,39 +203,53 @@ template(name="editCardSortOrderPopup")

 template(name="minicardDetailsActionsPopup")
  ul.pop-over-list
-    if currentUser.isBoardAdmin
+    if canModifyCard
      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'}}
      hr
+      li
+        a.js-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
+          | 👁️
+          |  {{_ 'unwatch'}}
+        else
+          | 👁️-slash
+          |  {{_ 'watch'}}
+
@@ -1,5 +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')
@@ -36,38 +39,46 @@ BlazeComponent.extendComponent({
    return ret;
  },

-  showCreator() {
-    if (this.data().board()) {
-      return (
-        this.data().board.allowsCreator === null ||
-        this.data().board().allowsCreator === undefined ||
-        this.data().board().allowsCreator
-      );
-      // return this.data().board().allowsCreator;
+  showCreatorOnMinicard() {
+    // cache "board" to reduce the mini-mongodb access
+    const board = this.data().board();
+    let ret = false;
+    if (board) {
+      ret = board.allowsCreatorOnMinicard ?? false;
    }
-    return false;
+    return ret;
+  },
+  isWatching() {
+    const card = this.currentData();
+    return card.findWatcher(Meteor.userId());
  },

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

  showAssignee() {
-    if (this.data().board()) {
-      return (
-        this.data().board.allowsAssignee === null ||
-        this.data().board().allowsAssignee === undefined ||
-        this.data().board().allowsAssignee
-      );
+    // cache "board" to reduce the mini-mongodb access
+    const board = this.data().board();
+    let ret = false;
+    if (board) {
+      ret =
+        board.allowsAssignee === null ||
+        board.allowsAssignee === undefined ||
+        board.allowsAssignee
+      ;
    }
-    return false;
+    return ret;
  },

  /** opens the card label popup only if clicked onto a label
@@ -98,6 +109,62 @@ 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'),
+        // 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);
+            }
+          }
+        },
      }
    ];
  },
@@ -105,7 +172,7 @@ BlazeComponent.extendComponent({

 Template.minicard.helpers({
  hiddenMinicardLabelText() {
-    currentUser = Meteor.user();
+    const currentUser = ReactiveCache.getCurrentUser();
    if (currentUser) {
      return (currentUser.profile || {}).hiddenMinicardLabelText;
    } else if (window.localStorage.getItem('hiddenMinicardLabelText')) {
@@ -120,6 +187,32 @@ Template.minicard.helpers({
      ? Meteor.connection._lastSessionId
      : null;
  },
+  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.currentBoard;
+    if (!currentBoard) return false;
+    return currentBoard.allowsShowListsOnMinicard || this.showListOnMinicard;
+  }
 });

 BlazeComponent.extendComponent({
@@ -168,4 +261,16 @@ Template.minicardDetailsActionsPopup.events({
    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();
+    });
+  },
 });
@@ -13,7 +13,7 @@ template(name="resultCard")
            .broken-cards-null
              | NULL
        if getBoard.archived
-          i.fa.fa-archive
+          | 📦
      li.result-card-context.result-card-context-separator
        = ' '
        | {{_ 'context-separator'}}
@@ -27,7 +27,7 @@ template(name="resultCard")
            .broken-cards-null
              | NULL
        if getSwimlane.archived
-          i.fa.fa-archive
+          | 📦
      li.result-card-context.result-card-context-separator
        = ' '
        | {{_ 'context-separator'}}
@@ -41,4 +41,4 @@ template(name="resultCard")
            .broken-cards-null
              | NULL
        if getList.archived
-          i.fa.fa-archive
+          | 📦
@@ -1,6 +1,6 @@
 template(name="subtasks")
  h3.card-details-item-title
-    i.fa.fa-sitemap
+    | 🌐
    | {{_ 'subtasks'}}
  if currentUser.isBoardAdmin
    if toggleDeleteDialog.get
@@ -16,7 +16,7 @@ template(name="subtasks")
      +addSubtaskItemForm
    else
      a.js-open-inlined-form(title="{{_ 'add-subtask'}}")
-        i.fa.fa-plus
+        | ➕

 template(name="subtaskDetail")
  .js-subtasks.subtask
@@ -26,8 +26,7 @@ template(name="subtaskDetail")
      .subtask-title
        span
        if canModifyCard
-          if currentUser.isBoardAdmin
-            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
@@ -41,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")
@@ -51,7 +50,7 @@ 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
+    a.js-close-inlined-form
    span(title=createdAt) {{ moment createdAt }}
    if canModifyCard
      if currentUser.isBoardAdmin
@@ -69,7 +68,7 @@ template(name="subtasksItems")
        +addSubtaskItemForm
      else
        a.add-subtask-item.js-open-inlined-form
-          i.fa.fa-plus
+          | ➕
          | {{_ 'add-subtask-item'}}...

 template(name='subtaskItemDetail')
@@ -93,9 +92,10 @@ template(name="subtaskActionsPopup")
  ul.pop-over-list
    li
      a.js-view-subtask(title="{{ subtask.title }}")
-        i.fa.fa-eye
+        | 👁️
        | {{_ "view-it"}}
-      a.js-delete-subtask.delete-subtask
-        i.fa.fa-trash
-        | {{_ "delete"}} ...
+      if currentUser.isBoardAdmin
+        a.js-delete-subtask.delete-subtask
+          | 🗑️
+          | {{_ "delete"}} ...

@@ -1,13 +1,4 @@
-BlazeComponent.extendComponent({
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-}).register('subtaskDetail');
+import { ReactiveCache } from '/imports/reactiveCache';

 BlazeComponent.extendComponent({
  addSubtask(event) {
@@ -15,19 +6,19 @@ BlazeComponent.extendComponent({
    const textarea = this.find('textarea.js-add-subtask-item');
    const title = textarea.value.trim();
    const cardId = this.currentData().cardId;
-    const card = Cards.findOne(cardId);
+    const card = ReactiveCache.getCard(cardId);
    const sortIndex = -1;
-    const crtBoard = Boards.findOne(card.boardId);
+    const crtBoard = ReactiveCache.getBoard(card.boardId);
    const targetBoard = crtBoard.getDefaultSubtasksBoard();
    const listId = targetBoard.getDefaultSubtasksListId();

    //Get the full swimlane data for the parent task.
-    const parentSwimlane = Swimlanes.findOne({
+    const parentSwimlane = ReactiveCache.getSwimlane({
      boardId: crtBoard._id,
      _id: card.swimlaneId,
    });
    //find the swimlane of the same name in the target board.
-    const targetSwimlane = Swimlanes.findOne({
+    const targetSwimlane = ReactiveCache.getSwimlane({
      boardId: targetBoard._id,
      title: parentSwimlane.title,
    });
@@ -70,15 +61,6 @@ BlazeComponent.extendComponent({
    textarea.focus();
  },

-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-
  deleteSubtask() {
    const subtask = this.currentData().subtask;
    if (subtask && subtask._id) {
@@ -86,6 +68,10 @@ BlazeComponent.extendComponent({
    }
  },

+  isBoardAdmin() {
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
+  },
+
  editSubtask(event) {
    event.preventDefault();
    const textarea = this.find('textarea.js-edit-subtask-item');
@@ -117,22 +103,14 @@ BlazeComponent.extendComponent({
  },
 }).register('subtasks');

-Template.subtaskItemDetail.helpers({
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-});
-
 BlazeComponent.extendComponent({
  // ...
 }).register('subtaskItemDetail');

 BlazeComponent.extendComponent({
+  isBoardAdmin() {
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
+  },
  events() {
    return [
      {
@@ -158,3 +136,14 @@ BlazeComponent.extendComponent({
    ]
  }
 }).register('subtaskActionsPopup');
+
+Template.editSubtaskItemForm.helpers({
+  user() {
+    return ReactiveCache.getUser(this.userId);
+  },
+  isBoardAdmin() {
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
+  },
+});
+
+
@@ -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,29 @@
+<template name="originalPosition">
+  <div class="original-position-info">
+    {{#if isLoading}}
+      <div class="original-position-loading">
+        <i class="fa fa-spinner fa-spin"></i> Loading original position...
+      </div>
+    {{else if showOriginalPosition}}
+      <div class="original-position-details">
+        {{#if hasMovedFromOriginal}}
+          <div class="original-position-moved">
+            <i class="fa fa-info-circle"></i>
+            <span class="original-position-text">{{getOriginalPositionDescription}}</span>
+          </div>
+        {{else}}
+          <div class="original-position-unchanged">
+            <i class="fa fa-check-circle"></i>
+            <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,17 +31,18 @@ button:focus {
  outline: 0;
 }
 input[type="file"] {
-  margin-bottom: 16px;
+  margin-bottom: 2vh;
 }
 input[type="radio"] {
  -webkit-appearance: radio;
+  appearance: radio;
  min-height: inherit;
 }
 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,
@@ -49,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,
@@ -96,30 +97,31 @@ input[type="email"]:disabled,
 textarea:disabled {
  background-color: #dcdcdc;
  border-color: #bfbfbf;
-  color: #8c8c8c;
+  color: #222;
  -webkit-touch-callout: none;
+   -webkit-user-select: none;
  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%;
 }
 option[disabled] {
-  color: #8c8c8c;
+  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;
@@ -134,14 +136,14 @@ button {
  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;
 }
 input[type="submit"] .wide,
 button .wide {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: 4vw;
+  padding-right: 4vw;
 }
 input[type="submit"]:hover,
 button:hover,
@@ -222,8 +224,8 @@ button.disabled:active,
 }
 fieldset {
  border: 1px solid #bfbfbf;
-  padding: 15px;
-  margin-bottom: 15px;
+  padding: 2vh 2vw;
+  margin-bottom: 2vh;
 }
 input[type="hidden"] {
  display: none;
@@ -231,18 +233,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 {
@@ -251,23 +253,23 @@ input[type="hidden"] {
 label {
  display: block;
  font-weight: 700;
-  margin-bottom: 4px;
+  margin-bottom: 0.5vh;
 }
 label.form-error {
-  color: #ba1212;
+  color: #d32f2f;
 }
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder,
 input::-moz-placeholder,
 textarea::-moz-placeholder {
-  color: #8c8c8c;
+  color: #333 !important;
 }
 .edit-controls,
 .add-controls {
  display: flex;
  align-items: center;
  margin-top: 0px;
-  margin-bottom: 12px;
+  margin-bottom: 1.5vh;
 }
@media print {
  .add-controls {
@@ -279,13 +281,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,6 +317,7 @@ textarea::-moz-placeholder {
  border-left: 2px solid transparent;
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
  transform-origin: 100% 100%;
 }
 .button-link {
@@ -322,6 +325,7 @@ textarea::-moz-placeholder {
  background: linear-gradient(#fff, #f5f5f5);
  border-radius: 3px;
  box-sizing: border-box;
+   -webkit-user-select: none;
  user-select: none;
  border: 1px solid #e3e3e3;
  border-bottom-color: #c2c2c2;
@@ -374,14 +378,14 @@ textarea::-moz-placeholder {
 .button-link.setting.disabled {
  background: #fff;
  border-color: #e9e9e9;
-  color: #8c8c8c;
+  color: #222;
  cursor: default;
 }
 .button-link.setting.disabled select {
  display: none;
 }
 .button-link.setting.disabled:hover .label {
-  color: #8c8c8c;
+  color: #222;
 }
 .button-link.setting.disabled,
 .button-link.setting.disabled:hover,
@@ -397,7 +401,7 @@ textarea::-moz-placeholder {
  color: #a8a8a8;
 }
 .button-link.setting .label {
-  color: #8c8c8c;
+  color: #222;
  display: block;
  font-size: 12px;
  line-height: 14px;
@@ -505,8 +509,9 @@ button.loud-text-button:hover {
 .emphasis-button,
 .quiet-button {
  border-radius: 3px;
+   -webkit-user-select: none;
  user-select: none;
-  color: #8c8c8c;
+    color: #222;
  display: block;
  margin: 2px 0;
  padding: 6px 8px;
@@ -571,7 +576,7 @@ button.loud-text-button:hover {
  top: 6px;
 }
 .big-link.none {
-  color: #8c8c8c;
+  color: #222;
  text-decoration: none;
 }
 .big-link.none:hover {
@@ -601,7 +606,7 @@ button.loud-text-button:hover {
 }
 .show-more {
  border-radius: 3px;
-  color: #8c8c8c;
+  color: #222;
  display: block;
  padding: 16px 8px 16px 40px;
  margin: 8px 0;
@@ -1,3 +1,5 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 export function csvGetMembersToMap(data) {
  // we will work on the list itself (an ordered array of objects) when a
  // mapping is done, we add a 'wekan' field to the object representing the
@@ -28,7 +30,7 @@ export function csvGetMembersToMap(data) {
      username: importedMember,
      id: importedMember,
    };
-    const wekanUser = Users.findOne({ username: importedMember.username });
+    const wekanUser = ReactiveCache.getUser({ username: importedMember.username });
    if (wekanUser) importedMember.wekanId = wekanUser._id;
    membersToMap.push(importedMember);
  }
@@ -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,3 +1,4 @@
+import { ReactiveCache } from '/imports/reactiveCache';
 import { trelloGetMembersToMap } from './trelloMembersMapper';
 import { wekanGetMembersToMap } from './wekanMembersMapper';
 import { csvGetMembersToMap } from './csvMembersMapper';
@@ -174,9 +175,9 @@ BlazeComponent.extendComponent({
            this._refreshMembers(
              this.members().map(member => {
                if (!member.wekanId) {
-                  let user = Users.findOne({ username: member.username });
+                  let user = ReactiveCache.getUser({ username: member.username });
                  if (!user) {
-                    user = Users.findOne({ importUsernames: member.username });
+                    user = ReactiveCache.getUser({ importUsernames: member.username });
                  }
                  if (user) {
                    // eslint-disable-next-line no-console
@@ -1,3 +1,5 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 export function trelloGetMembersToMap(data) {
  // we will work on the list itself (an ordered array of objects) when a
  // mapping is done, we add a 'wekan' field to the object representing the
@@ -5,7 +7,7 @@ export function trelloGetMembersToMap(data) {
  const membersToMap = data.members;
  // auto-map based on username
  membersToMap.forEach(importedMember => {
-    const wekanUser = Users.findOne({ username: importedMember.username });
+    const wekanUser = ReactiveCache.getUser({ username: importedMember.username });
    if (wekanUser) {
      importedMember.wekanId = wekanUser._id;
    }
@@ -1,3 +1,5 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 export function wekanGetMembersToMap(data) {
  // we will work on the list itself (an ordered array of objects) when a
  // mapping is done, we add a 'wekan' field to the object representing the
@@ -15,7 +17,7 @@ export function wekanGetMembersToMap(data) {
      importedMember.fullName = user.profile.fullname;
    }
    importedMember.username = user.username;
-    const wekanUser = Users.findOne({ username: importedMember.username });
+    const wekanUser = ReactiveCache.getUser({ username: importedMember.username });
    if (wekanUser) {
      importedMember.wekanId = wekanUser._id;
    }
@@ -7,17 +7,238 @@
  border-left: 1px solid #ccc;
  padding: 0;
  float: left;
-  min-width: 270px;
-  max-width: 270px;
-  /* Reverted incomplete change list width: */
-  /* https://github.com/wekan/wekan/issues/4558 */
-  /* Orinal width: 270px. Changes not saved yet: */
-  /*resize: both;  - List width and height resizeable */
-  /* overflow: auto; - List width and height resizeable */
+}
+
+/* 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;
+  /* Prevent vertical expansion but allow normal height */
+  overflow: hidden !important;
+}
+
+/* Ensure title text doesn't cause height changes for all lists */
+.list-header .list-header-name {
+  /* Prevent text wrapping to maintain consistent height */
+  white-space: nowrap !important;
+  /* Truncate text with ellipsis if too long */
+  text-overflow: ellipsis !important;
+  /* Ensure proper line height */
+  line-height: 1.2 !important;
+  /* Ensure it doesn't overflow */
+  overflow: hidden !important;
+  /* Add margin to prevent overlap with buttons */
+  margin-right: 120px !important;
+}
+
+/* Position drag handle at top-right corner for ALL lists */
+.list-header .list-header-handle {
+  /* Position at top-right corner, aligned with title text top */
+  position: absolute !important;
+  top: 2.5vh !important;
+  right: 1.5vw !important;
+  /* Ensure it's above other elements */
+  z-index: 15 !important;
+  /* Remove margin since it's absolutely positioned */
+  margin-right: 0 !important;
+  /* Ensure proper display */
+  display: inline-block !important;
+  /* Ensure it's clickable and shows proper cursor */
+  cursor: move !important;
+  pointer-events: auto !important;
+  /* Add some padding for better clickability */
+  padding: 4px !important;
+}
+
+/* Ensure buttons maintain original positioning */
+.js-swimlane .list[style*="--list-width"] .list-header .list-header-plus-top,
+.js-swimlane .list[style*="--list-width"] .list-header .js-collapse,
+.js-swimlane .list[style*="--list-width"] .list-header .js-open-list-menu,
+.dragscroll .list[style*="--list-width"] .list-header .list-header-plus-top,
+.dragscroll .list[style*="--list-width"] .list-header .js-collapse,
+.dragscroll .list[style*="--list-width"] .list-header .js-open-list-menu,
+[id^="swimlane-"] .list[style*="--list-width"] .list-header .list-header-plus-top,
+[id^="swimlane-"] .list[style*="--list-width"] .list-header .js-collapse,
+[id^="swimlane-"] .list[style*="--list-width"] .list-header .js-open-list-menu {
+  /* Use original positioning to maintain layout */
+  position: relative !important;
+  /* Maintain original spacing */
+  margin-right: 15px !important;
+  /* Ensure proper display */
+  display: inline-block !important;
+}
+
+/* Ensure watch icon and card count maintain original positioning */
+.js-swimlane .list[style*="--list-width"] .list-header .list-header-watch-icon,
+.dragscroll .list[style*="--list-width"] .list-header .list-header-watch-icon,
+[id^="swimlane-"] .list[style*="--list-width"] .list-header .list-header-watch-icon,
+.js-swimlane .list[style*="--list-width"] .list-header .cardCount,
+.dragscroll .list[style*="--list-width"] .list-header .cardCount,
+[id^="swimlane-"] .list[style*="--list-width"] .list-header .cardCount {
+  /* Use original positioning to maintain layout */
+  position: relative !important;
+  /* Maintain original spacing */
+  margin-right: 15px !important;
+  /* Ensure proper display */
+  display: inline-block !important;
+}
+[id^="swimlane-"] .list:first-child {
+  min-width: 2.5vw;
+}
+.list.list-auto-width {
+  flex: 1;
 }
 .list:first-child {
-  margin-left: 5px;
  border-left: none;
+  flex: none;
 }
 .card-details + .list {
  border-left: none;
@@ -34,8 +255,74 @@
  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: 60px;
+  max-width: 80px;
+  width: 60px;
+  min-height: 60vh;
+  height: 60vh;
+  overflow: visible;
+  position: relative;
+}
+.list.list-collapsed .list-header {
+  padding: 1vh 1.5vw 0.5vh;
+  min-height: 2.5vh !important;
+  height: auto !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  overflow: visible !important;
+  width: 100%;
+  max-width: 60px;
+  margin: 0 auto;
+}
+.list.list-collapsed .list-header .js-collapse {
+  margin: 0 auto 20px auto;
+  z-index: 10;
+  padding: 8px 12px;
+  font-size: 12px;
+  white-space: nowrap;
+  display: block;
+  width: fit-content;
+}
+.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;
+}
+
+.list.list-collapsed .list-header .list-rotated h2.list-header-name {
+  text-align: left;
+  overflow: visible;
+  white-space: nowrap;
+  display: block !important;
+  font-size: 12px;
+  line-height: 1.2;
+  color: #333;
+  background-color: rgba(255, 255, 255, 0.95);
+  border: 1px solid #ddd;
+  padding: 8px 4px;
+  border-radius: 4px;
+  margin: 0 auto;
+  width: 25vh;
+  height: 60vh;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(calc(-50% + 50px), -50%) rotate(0deg);
+  z-index: 10;
+  visibility: visible !important;
+  opacity: 1 !important;
+  pointer-events: none;
+}
+
 .list.list-composer .open-list-composer,
 .list .list-composer .open-list-composer {
  color: #8c8c8c;
@@ -43,24 +330,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: 20px 12px 4px;
+  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 {
@@ -71,15 +358,29 @@
 }
 .list-header .list-header-name {
  display: inline;
-  font-size: 16px;
-  line-height: 17px;
+  font-size: clamp(14px, 3vw, 18px);
+  line-height: 1.2;
  margin: 0;
  font-weight: bold;
-  min-height: 9px;
-  min-width: 30px;
+  min-height: 1.2vh;
+  min-width: 4vw;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
+}
+.list-rotated {
+  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;
@@ -98,6 +399,164 @@
  color: #a6a6a6;
  margin-right: 15px;
 }
+.list-header .list-header-collapse-right {
+  color: #a6a6a6;
+}
+.list-header .list-header-collapse-left {
+  color: #a6a6a6;
+  margin-right: 15px;
+}
+.list-header .js-collapse {
+  color: #a6a6a6;
+  margin-right: 15px;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 5px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  cursor: pointer;
+  font-size: 14px;
+}
+.list-header .js-collapse:hover {
+  background-color: #e0e0e0;
+  color: #333;
+}
+.list.list-collapsed .list-header .js-collapse {
+  display: inline-block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* Responsive adjustments for collapsed lists */
+@media (min-width: 768px) {
+  .list.list-collapsed {
+    min-width: 60px;
+    max-width: 80px;
+    width: 60px;
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    max-width: 60px;
+    margin: 0 auto;
+    min-height: 2.5vh !important;
+    height: auto !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: 15vh;
+    font-size: 12px;
+    height: 30px;
+    line-height: 1.2;
+    padding: 8px 4px;
+    margin: 0 auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(calc(-50% + 50px), -50%) rotate(0deg);
+    text-align: left;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid #ddd;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 0 auto 20px auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .list.list-collapsed {
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    min-height: 2.5vh !important;
+    height: auto !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: 15vh;
+    font-size: 12px;
+    height: 30px;
+    line-height: 1.2;
+    padding: 8px 4px;
+    margin: 0 auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(calc(-50% + 50px), -50%) rotate(0deg);
+    text-align: left;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid #ddd;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 0 auto 20px auto;
+  }
+}
+
+@media (min-width: 1200px) {
+  .list.list-collapsed {
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    min-height: 2.5vh !important;
+    height: auto !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: 15vh;
+    font-size: 12px;
+    height: 30px;
+    line-height: 1.2;
+    padding: 8px 4px;
+    margin: 0 auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(calc(-50% + 50px), -50%) rotate(0deg);
+    text-align: left;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid #ddd;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 0 auto 20px auto;
+  }
+}
+.list-header .list-header-collapse {
+  color: #a6a6a6;
+  margin-right: 15px;
+}
 .list-header .highlight {
  color: #ce1414;
 }
@@ -112,6 +571,9 @@
  color: #4d4d4d;
  padding-left: 4px;
 }
+.js-open-list-menu {
+  font-size: 18px;
+}
 .list-body {
  flex: 1 1 auto;
  flex-direction: column;
@@ -122,6 +584,8 @@
 .list-body .minicards {
  flex-grow: 1;
  flex-shrink: 0;
+  /** get card drag/drop working for empty swimlanes */
+  min-height: 32px;
 }
 .list-body .minicards form {
  margin-bottom: 9px;
@@ -173,19 +637,150 @@
 #js-wip-limit-edit div {
  float: left;
 }
-@media screen and (max-width: 800px) {
+#js-list-width-edit .list-width-error {
+  display: none;
+}
+/* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
+.mini-list.mobile-view {
+  flex: 0 0 60px;
+  height: auto;
+  width: 100%;
+  min-width: 100%;
+  border-left: 0px !important;
+  border-bottom: 1px solid #ccc;
+}
+.list.mobile-view {
+  display: contents;
+  flex-basis: auto;
+  width: 100%;
+  min-width: 100%;
+  border-left: 0px !important;
+}
+.list.mobile-view:first-child {
+  margin-left: 0px;
+}
+.list.mobile-view.ui-sortable-helper {
+  flex: 0 0 60px;
+  height: 60px;
+  width: 100%;
+  border-left: 0px !important;
+  border-bottom: 1px solid #ccc;
+}
+.list.mobile-view.ui-sortable-helper .list-header.ui-sortable-handle {
+  cursor: grabbing;
+}
+.list.mobile-view.placeholder {
+  flex: 0 0 60px;
+  height: 60px;
+  width: 100%;
+  border-left: 0px !important;
+  border-bottom: 1px solid #ccc;
+}
+.list.mobile-view .list-body {
+  padding: 15px 19px;
+  width: 100%;
+  min-width: 100%;
+}
+.list.mobile-view .list-header {
+  /*Updated padding values for mobile devices, this should fix text grouping issue*/
+  padding: 20px 0px 20px 0px;
+  border-bottom: 0px solid #e4e4e4;
+  min-height: 30px;
+  margin-top: 10px;
+  align-items: center;
+  width: 100%;
+  min-width: 100%;
+  /* Force grid layout for iPhone */
+  display: grid !important;
+  grid-template-columns: 30px 1fr auto auto !important;
+  gap: 10px !important;
+}
+.list.mobile-view .list-header .list-header-left-icon {
+  padding: 7px;
+  padding-right: 27px;
+  margin-top: 1px;
+  top: -7px;
+  left: -7px;
+}
+.list.mobile-view .list-header .list-header-menu-icon {
+  padding: 14px;
+  font-size: 40px !important;
+  text-align: center;
+  /* Force positioning for iPhone */
+  position: absolute !important;
+  right: 60px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  z-index: 10;
+}
+.list.mobile-view .list-header .list-header-handle {
+  padding: 14px;
+  font-size: 48px !important;
+  text-align: center;
+  /* Force positioning for iPhone */
+  position: absolute !important;
+  right: 10px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  z-index: 10;
+}
+.list.mobile-view .list-header .list-header-left-icon {
+  display: grid;
+  grid-row: 1/3;
+  grid-column: 1;
+}
+.list.mobile-view .list-header .list-header-name {
+  grid-row: 1;
+  grid-column: 2;
+  align-self: end;
+  font-size: 20px !important;
+  font-weight: bold;
+  line-height: 1.2;
+  padding-bottom: 2px;
+}
+.list.mobile-view .list-header .cardCount {
+  grid-row: 2;
+  grid-column: 2;
+  align-self: start;
+  font-size: 16px !important;
+  line-height: 1.2;
+}
+.list.mobile-view .list-header .list-header-menu {
+  grid-row: 1/3;
+  grid-column: 3;
+}
+.list.mobile-view .list-header .list-header-menu-icon {
+  grid-row: 1/3;
+  grid-column: 3;
+}
+.list.mobile-view .list-header .list-header-handle {
+  grid-row: 1/3;
+  grid-column: 4;
+}
+.list.mobile-view .list-header .inlined-form {
+  grid-row: 1/3;
+  grid-column: 1/4;
+}
+.list.mobile-view .list-header .edit-controls {
+  align-items: initial;
+}
+
+@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;
+    min-width: 100%;
+    border-left: 0px !important;
    border-bottom: 1px solid #ccc;
  }
  .list {
    display: contents;
    flex-basis: auto;
    width: 100%;
-    border-left: 0px;
+    min-width: 100%;
+    border-left: 0px !important;
  }
  .list:first-child {
    margin-left: 0px;
@@ -194,7 +789,7 @@
    flex: 0 0 60px;
    height: 60px;
    width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
    border-bottom: 1px solid #ccc;
  }
  .list.ui-sortable-helper .list-header.ui-sortable-handle {
@@ -204,19 +799,23 @@
    flex: 0 0 60px;
    height: 60px;
    width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
    border-bottom: 1px solid #ccc;
  }
  .list-body {
    padding: 15px 19px;
+    width: 100%;
+    min-width: 100%;
  }
  .list-header {
-    padding: 0 12px 0px;
+	  /*Updated padding values for mobile devices, this should fix text grouping issue*/
+    padding: 20px 0px 20px 0px;
    border-bottom: 0px solid #e4e4e4;
-    height: 60px;
+    min-height: 30px;
    margin-top: 10px;
-    display: flex;
    align-items: center;
+    width: 100%;
+    min-width: 100%;
  }
  .list-header .list-header-left-icon {
    padding: 7px;
@@ -226,24 +825,29 @@
    left: -7px;
  }
  .list-header .list-header-menu-icon {
+    padding: 14px;
+    font-size: 40px;
+    text-align: center;
+    /* iOS Safari fallback positioning */
    position: absolute;
-    padding: 7px;
+    right: 60px;
    top: 50%;
    transform: translateY(-50%);
-    right: 47px;
-    font-size: 20px;
  }
  .list-header .list-header-handle {
+    padding: 14px;
+    font-size: 48px;
+    text-align: center;
+    /* iOS Safari fallback positioning */
    position: absolute;
-    padding: 7px;
+    right: 10px;
    top: 50%;
    transform: translateY(-50%);
-    right: 10px;
-    font-size: 24px;
  }
  .list-header {
    display: grid;
-    grid-template-columns: 30px 5fr 1fr;
+    grid-template-columns: 30px 1fr auto auto;
+    gap: 10px;
  }
  .list-header .list-header-left-icon {
    display: grid;
@@ -254,16 +858,30 @@
    grid-row: 1;
    grid-column: 2;
    align-self: end;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 1.2;
+    padding-bottom: 2px;
  }
  .list-header .cardCount {
    grid-row: 2;
    grid-column: 2;
    align-self: start;
+    font-size: 16px;
+    line-height: 1.2;
  }
  .list-header .list-header-menu {
    grid-row: 1/3;
    grid-column: 3;
  }
+  .list-header .list-header-menu-icon {
+    grid-row: 1/3;
+    grid-column: 3;
+  }
+  .list-header .list-header-handle {
+    grid-row: 1/3;
+    grid-column: 4;
+  }
  .list-header .inlined-form {
    grid-row: 1/3;
    grid-column: 1/4;
@@ -272,6 +890,132 @@
    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;
+    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;
+}
 .link-board-wrapper {
  display: flex;
  align-items: baseline;
@@ -288,7 +1032,6 @@
 }
 .list-header-white {
  border-bottom: 6px solid #fff;
-  border: 1px solid #eee;
 }
 .list-header-green {
  border-bottom: 6px solid #3cb500;
@@ -321,7 +1064,7 @@
  border-bottom: 6px solid #51e898;
 }
 .list-header-silver {
-  border-bottom: 6px solid unset;
+  border-bottom: 6px solid #e4e4e4;
 }
 .list-header-peachpuff {
  border-bottom: 6px solid #ffdab9;
@@ -1,8 +1,11 @@
 template(name='list')
-  .list.js-list(id="js-list-{{_id}}")
+  .list.js-list(id="js-list-{{_id}}"
+                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
+    .list-resize-handle.js-list-resize-handle.nodragscroll

 template(name='miniList')
-  a.mini-list.js-select-list.js-list(id="js-list-{{_id}}")
+  a.mini-list.js-select-list.js-list(id="js-list-{{_id}}" class="{{#if isMiniScreen}}mobile-view{{/if}}")
    +listHeader
@@ -1,3 +1,4 @@
+import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 require('/client/lib/jquery-ui.js')

@@ -23,13 +24,8 @@ BlazeComponent.extendComponent({
  onRendered() {
    const boardComponent = this.parentComponent().parentComponent();

-    function userIsMember() {
-      return (
-        Meteor.user() &&
-        Meteor.user().isBoardMember() &&
-        !Meteor.user().isCommentOnly()
-      );
-    }
+    // Initialize list resize functionality immediately
+    this.initializeListResize();

    const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
    const $cards = this.$('.js-minicards');
@@ -60,6 +56,7 @@ BlazeComponent.extendComponent({
      distance: 7,
      items: itemsSelector,
      placeholder: 'minicard-wrapper placeholder',
+      scrollSpeed: 10,
      start(evt, ui) {
        ui.helper.css('z-index', 1000);
        ui.placeholder.height(ui.helper.height());
@@ -74,7 +71,7 @@ BlazeComponent.extendComponent({
        const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1;
        const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards);
        const listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
-        const currentBoard = Boards.findOne(Session.get('currentBoard'));
+        const currentBoard = Utils.getCurrentBoard();
        const defaultSwimlaneId = currentBoard.getDefaultSwimline()._id;
        let targetSwimlaneId = null;

@@ -96,7 +93,7 @@ BlazeComponent.extendComponent({
        $cards.sortable('cancel');

        if (MultiSelection.isActive()) {
-          Cards.find(MultiSelection.getMongoSelector(), { sort: ['sort'] }).forEach((card, i) => {
+          ReactiveCache.getCards(MultiSelection.getMongoSelector(), { sort: ['sort'] }).forEach((card, i) => {
            const newSwimlaneId = targetSwimlaneId
              ? targetSwimlaneId
              : card.swimlaneId || defaultSwimlaneId;
@@ -153,24 +150,20 @@ 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',
          // Disable drag-dropping when user is not member
-          !userIsMember(),
+          !Utils.canModifyBoard(),
          // Not disable drag-dropping while in multi-selection mode
-          // MultiSelection.isActive() || !userIsMember(),
+          // MultiSelection.isActive() || !Utils.canModifyBoard(),
        );
      }
    });
@@ -180,14 +173,13 @@ BlazeComponent.extendComponent({
      const currentBoardId = Tracker.nonreactive(() => {
        return Session.get('currentBoard');
      });
-      Cards.find({ boardId: currentBoardId }).fetch();
      Tracker.afterFlush(() => {
        $cards.find(itemsSelector).droppable({
          hoverClass: 'draggable-hover-card',
          accept: '.js-member,.js-label',
          drop(event, ui) {
            const cardId = Blaze.getData(this)._id;
-            const card = Cards.findOne(cardId);
+            const card = ReactiveCache.getCard(cardId);

            if (ui.draggable.hasClass('js-member')) {
              const memberId = Blaze.getData(ui.draggable.get(0)).userId;
@@ -201,6 +193,263 @@ BlazeComponent.extendComponent({
      });
    });
  },
+
+  listWidth() {
+    const user = ReactiveCache.getCurrentUser();
+    const list = Template.currentData();
+    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();
+    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;
+    }
+    
+    
+    // Only enable resize for non-collapsed, non-auto-width lists
+    const isAutoWidth = this.autoWidth();
+    if (list.collapsed || isAutoWidth) {
+      $resizeHandle.hide();
+      return;
+    }
+
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+    let minWidth = 100; // Minimum width as defined in the existing code
+    let maxWidth = this.listConstraint() || 1000; // Use constraint as max width
+    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, Math.min(maxWidth, 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, Math.min(maxWidth, 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 changes
+    component.autorun(() => {
+      if (component.autoWidth()) {
+        $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.miniList.events({
@@ -1,37 +1,38 @@
 template(name="listBody")
-  .list-body
-    .minicards.clearfix.js-minicards(class="{{#if reachedWipLimit}}js-list-full{{/if}}")
-      if cards.count
-        +inlinedForm(autoclose=false position="top")
-          +addCardForm(listId=_id position="top")
-      ul.sidebar-list
-        each customFieldsSum
-          li
-            +viewer
-              = name
-            if $eq customFieldsSum.type "number"
+  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")
+        ul.sidebar-list
+          each customFieldsSum
+            li
              +viewer
-                = value
-            if $eq customFieldsSum.type "currency"
-              +viewer
-                = formattedCurrencyCustomFieldValue(value)
-      each (cardsWithLimit (idOrNull ../../_id))
-        a.minicard-wrapper.js-minicard(href=originRelativeUrl
-          class="{{#if cardIsSelected}}is-selected{{/if}}"
-          class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
-          if MultiSelection.isActive
-            .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
-              class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
-          +minicard(this)
-      if (showSpinner (idOrNull ../../_id))
-        +spinnerList
+                = name
+              if $eq customFieldsSum.type "number"
+                +viewer
+                  = value
+              if $eq customFieldsSum.type "currency"
+                +viewer
+                  = formattedCurrencyCustomFieldValue(value)
+        each (cardsWithLimit (idOrNull ../../_id))
+          a.minicard-wrapper.js-minicard(href=originRelativeUrl
+            class="{{#if cardIsSelected}}is-selected{{/if}}"
+            class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+            if MultiSelection.isActive
+              .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
+                class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+            +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
+        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'}}")
+              | ➕

 template(name="spinnerList")
  .sk-spinner.sk-spinner-list(
@@ -53,7 +54,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 | ❌
+  .add-controls.clearfix
    unless currentBoard.isTemplatesBoard
      unless currentBoard.isTemplateBoard
        span.quiet
@@ -78,23 +80,23 @@ template(name="linkCardPopup")
    select.js-select-boards
      option(value="")
      each boards
-        option(value="{{_id}}") {{title}}
+        option(value="{{_id}}") {{isTitleDefault title}}
    input.primary.confirm.js-link-board(type="button" value="{{_ 'link'}}")

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

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

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

  .edit-controls.clearfix
    input.primary.confirm.js-done(type="button" value="{{_ 'link'}}")
@@ -1,3 +1,4 @@
+import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 import { Spinner } from '/client/lib/spinner';

@@ -15,10 +16,11 @@ BlazeComponent.extendComponent({
  },

  customFieldsSum() {
-    return CustomFields.find({
+    const ret = ReactiveCache.getCustomFields({
      boardIds: { $in: [Session.get('currentBoard')] },
      showSumAtTopOfList: true,
    });
+    return ret;
  },

  openForm(options) {
@@ -64,7 +66,7 @@ BlazeComponent.extendComponent({
        swimlaneId = this.parentComponent()
          .parentComponent()
          .data()._id; // Always swimlanes view
-        const swimlane = Swimlanes.findOne(swimlaneId);
+        const swimlane = ReactiveCache.getSwimlane(swimlaneId);
        // If this is the card templates swimlane, insert a card template
        if (swimlane.isCardTemplatesSwimlane()) cardType = 'template-card';
        // If this is the board templates swimlane, insert a board template and a linked card
@@ -112,7 +114,7 @@ BlazeComponent.extendComponent({
      // to appear
      const cardCount = this.data()
        .cards(this.idOrNull(swimlaneId))
-        .count();
+        .length;
      if (this.cardlimit.get() < cardCount) {
        this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
      }
@@ -200,25 +202,23 @@ BlazeComponent.extendComponent({
      archived: false,
    };
    if (swimlaneId) selector.swimlaneId = swimlaneId;
-    return Cards.find(Filter.mongoSelector(selector), {
+    const ret = ReactiveCache.getCards(Filter.mongoSelector(selector), {
      // sort: ['sort'],
      sort: sortBy,
      limit,
-    });
+    }, true);
+    return ret;
  },

  showSpinner(swimlaneId) {
    const list = Template.currentData();
-    return list.cards(swimlaneId).count() > this.cardlimit.get();
+    return list.cards(swimlaneId).length > this.cardlimit.get();
  },

  canSeeAddCard() {
    return (
      !this.reachedWipLimit() &&
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
+      Utils.canModifyCard()
    );
  },

@@ -227,10 +227,15 @@ BlazeComponent.extendComponent({
    return (
      !list.getWipLimit('soft') &&
      list.getWipLimit('enabled') &&
-      list.getWipLimit('value') <= list.cards().count()
+      list.getWipLimit('value') <= list.cards().length
    );
  },

+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
+
  cardDetailsPopup(event) {
    if (!Popup.isOpen()) {
      Popup.open("cardDetails")(event);
@@ -269,9 +274,8 @@ BlazeComponent.extendComponent({
    const currentBoardId = Session.get('currentBoard');
    arr = [];
    _.forEach(
-      Boards.findOne(currentBoardId)
-        .customFields()
-        .fetch(),
+      ReactiveCache.getBoard(currentBoardId)
+        .customFields(),
      function (field) {
        if (field.automaticallyOnCard || field.alwaysOnCard)
          arr.push({ _id: field._id, value: null });
@@ -288,8 +292,8 @@ BlazeComponent.extendComponent({

  getLabels() {
    const currentBoardId = Session.get('currentBoard');
-    if (Boards.findOne(currentBoardId).labels) {
-      return Boards.findOne(currentBoardId).labels.filter(label => {
+    if (ReactiveCache.getBoard(currentBoardId).labels) {
+      return ReactiveCache.getBoard(currentBoardId).labels.filter(label => {
        return this.labels.get().indexOf(label._id) > -1;
      });
    }
@@ -310,7 +314,8 @@ BlazeComponent.extendComponent({
      // Pressing Tab should open the form of the next column, and Maj+Tab go
      // in the reverse order
    } else if (evt.keyCode === 9) {
-      evt.preventDefault();
+      // Prevent custom focus movement on Tab key for accessibility
+      // evt.preventDefault();
      const isReverse = evt.shiftKey;
      const list = $(`#js-list-${this.data().listId}`);
      const listSelector = '.js-list:not(.js-list-composer)';
@@ -349,10 +354,10 @@ BlazeComponent.extendComponent({
        {
          match: /\B@([\w.-]*)$/,
          search(term, callback) {
-            const currentBoard = Boards.findOne(Session.get('currentBoard'));
+            const currentBoard = Utils.getCurrentBoard();
            callback(
              $.map(currentBoard.activeMembers(), member => {
-                const user = Users.findOne(member.userId);
+                const user = ReactiveCache.getUser(member.userId);
                return user.username.indexOf(term) === 0 ? user : null;
              }),
            );
@@ -374,7 +379,7 @@ BlazeComponent.extendComponent({
        {
          match: /\B#(\w*)$/,
          search(term, callback) {
-            const currentBoard = Boards.findOne(Session.get('currentBoard'));
+            const currentBoard = Utils.getCurrentBoard();
            callback(
              $.map(currentBoard.labels, label => {
                if (label.name == undefined) {
@@ -409,13 +414,16 @@ BlazeComponent.extendComponent({
        // or `Enter` to validation the auto-completion. We also need to stop the
        // event propagation to prevent the card from submitting (on `Enter`) or
        // going on the next column (on `Tab`).
+        /*
        onKeydown(evt, commands) {
-          if (evt.keyCode === 9 || evt.keyCode === 13) {
-            evt.stopPropagation();
-            return commands.KEY_ENTER;
-          }
+          // Prevent custom focus movement on Tab key for accessibility
+          // if (evt.keyCode === 9 || evt.keyCode === 13) {
+          //  evt.stopPropagation();
+          //  return commands.KEY_ENTER;
+          //}
          return null;
        },
+        */
      },
    );
  },
@@ -430,10 +438,10 @@ BlazeComponent.extendComponent({
    this.boardId = Session.get('currentBoard');
    // In order to get current board info
    subManager.subscribe('board', this.boardId, false);
-    this.board = Boards.findOne(this.boardId);
+    this.board = ReactiveCache.getBoard(this.boardId);
    // List where to insert card
-    const list = $(Popup._getTopStack().openerElement).closest('.js-list');
-    this.listId = Blaze.getData(list[0])._id;
+    this.list = $(Popup._getTopStack().openerElement).closest('.js-list');
+    this.listId = Blaze.getData(this.list[0])._id;
    // Swimlane where to insert card
    const swimlane = $(Popup._getTopStack().openerElement).closest(
      '.js-swimlane',
@@ -442,11 +450,11 @@ BlazeComponent.extendComponent({
    if (Utils.boardView() === 'board-view-swimlanes')
      this.swimlaneId = Blaze.getData(swimlane[0])._id;
    else if (Utils.boardView() === 'board-view-lists' || !Utils.boardView)
-      this.swimlaneId = Swimlanes.findOne({ boardId: this.boardId })._id;
+      this.swimlaneId = ReactiveCache.getSwimlane({ boardId: this.boardId })._id;
  },

  boards() {
-    const boards = Boards.find(
+    const ret = ReactiveCache.getBoards(
      {
        archived: false,
        'members.userId': Meteor.userId(),
@@ -457,16 +465,30 @@ BlazeComponent.extendComponent({
        sort: { sort: 1 /* boards default sorting */ },
      },
    );
-    return boards;
+    return ret;
  },

  swimlanes() {
    if (!this.selectedBoardId.get()) {
      return [];
    }
-    const swimlanes = Swimlanes.find({ boardId: this.selectedBoardId.get() });
-    if (swimlanes.count())
-      this.selectedSwimlaneId.set(swimlanes.fetch()[0]._id);
+    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
+    if (!board) {
+      return [];
+    }
+    
+    // Ensure default swimlane exists
+    board.getDefaultSwimline();
+    
+    const swimlanes = ReactiveCache.getSwimlanes(
+    {
+      boardId: this.selectedBoardId.get()
+    },
+    {
+      sort: { sort: 1 },
+    });
+    if (swimlanes.length)
+      this.selectedSwimlaneId.set(swimlanes[0]._id);
    return swimlanes;
  },

@@ -474,8 +496,14 @@ BlazeComponent.extendComponent({
    if (!this.selectedBoardId.get()) {
      return [];
    }
-    const lists = Lists.find({ boardId: this.selectedBoardId.get() });
-    if (lists.count()) this.selectedListId.set(lists.fetch()[0]._id);
+    const lists = ReactiveCache.getLists(
+    {
+      boardId: this.selectedBoardId.get()
+    },
+    {
+      sort: { sort: 1 },
+    });
+    if (lists.length) this.selectedListId.set(lists[0]._id);
    return lists;
  },

@@ -483,10 +511,9 @@ BlazeComponent.extendComponent({
    if (!this.board) {
      return [];
    }
-    const ownCardsIds = this.board.cards().map(card => {
-      return card.linkedId || card._id;
-    });
-    return Cards.find({
+    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(),
@@ -494,7 +521,24 @@ BlazeComponent.extendComponent({
      linkedId: { $nin: ownCardsIds },
      _id: { $nin: ownCardsIds },
      type: { $nin: ['template-card'] },
+    },
+    {
+      sort: { sort: 1 },
    });
+    return ret;
+  },
+
+  getSortIndex() {
+    const position = this.currentData().position;
+    let ret;
+    if (position === 'top') {
+      const firstCardDom = this.list.find('.js-minicard:first')[0];
+      ret = Utils.calculateIndex(null, firstCardDom).base;
+    } else if (position === 'bottom') {
+      const lastCardDom = this.list.find('.js-minicard:last')[0];
+      ret = Utils.calculateIndex(lastCardDom, null).base;
+    }
+    return ret;
  },

  events() {
@@ -519,16 +563,17 @@ BlazeComponent.extendComponent({
            Popup.back();
            return;
          }
+          const nextCardNumber = this.board.getNextCardNumber();
+          const sortIndex = this.getSortIndex();
          const _id = Cards.insert({
            title: $('.js-select-cards option:selected').text(), //dummy
            listId: this.listId,
            swimlaneId: this.swimlaneId,
            boardId: this.boardId,
-            sort: Lists.findOne(this.listId)
-              .cards()
-              .count(),
+            sort: sortIndex,
            type: 'cardType-linkedCard',
            linkedId,
+            cardNumber: nextCardNumber,
          });
          Filter.addException(_id);
          Popup.back();
@@ -540,21 +585,22 @@ BlazeComponent.extendComponent({
          const impBoardId = $('.js-select-boards option:selected').val();
          if (
            !impBoardId ||
-            Cards.findOne({ linkedId: impBoardId, archived: false })
+            ReactiveCache.getCard({ linkedId: impBoardId, archived: false })
          ) {
            Popup.back();
            return;
          }
+          const nextCardNumber = this.board.getNextCardNumber();
+          const sortIndex = this.getSortIndex();
          const _id = Cards.insert({
            title: $('.js-select-boards option:selected').text(), //dummy
            listId: this.listId,
            swimlaneId: this.swimlaneId,
            boardId: this.boardId,
-            sort: Lists.findOne(this.listId)
-              .cards()
-              .count(),
+            sort: sortIndex,
            type: 'cardType-linkedBoard',
            linkedId: impBoardId,
+            cardNumber: nextCardNumber,
          });
          Filter.addException(_id);
          Popup.back();
@@ -564,6 +610,31 @@ BlazeComponent.extendComponent({
  },
 }).register('linkCardPopup');

+Template.linkCardPopup.helpers({
+  isTitleDefault(title) {
+    // https://github.com/wekan/wekan/issues/4763
+    // https://github.com/wekan/wekan/issues/4742
+    // Translation text for "default" does not work, it returns an object.
+    // When that happens, try use translation "defaultdefault" that has same content of default, or return text "Default".
+    // This can happen, if swimlane does not have name.
+    // Yes, this is fixing the symptom (Swimlane title does not have title)
+    // instead of fixing the problem (Add Swimlane title when creating swimlane)
+    // because there could be thousands of swimlanes, adding name Default to all of them
+    // would be very slow.
+    if (title.startsWith("key 'default") && title.endsWith('returned an object instead of string.')) {
+      if (`${TAPi18n.__('defaultdefault')}`.startsWith("key 'default") && `${TAPi18n.__('defaultdefault')}`.endsWith('returned an object instead of string.')) {
+        return 'Default';
+      } else  {
+        return `${TAPi18n.__('defaultdefault')}`;
+      }
+    } else if (title === 'Default') {
+      return `${TAPi18n.__('defaultdefault')}`;
+    } else  {
+      return title;
+    }
+  },
+});
+
 BlazeComponent.extendComponent({
  mixins() {
    return [];
@@ -587,36 +658,28 @@ BlazeComponent.extendComponent({
      this.isListTemplateSearch ||
      this.isSwimlaneTemplateSearch ||
      this.isBoardTemplateSearch;
-    let board = {};
+
+    this.board = {};
    if (this.isTemplateSearch) {
-      //board = Boards.findOne((Meteor.user().profile || {}).templatesBoardId);
-      board._id = (Meteor.user().profile || {}).templatesBoardId;
+      const boardId = (ReactiveCache.getCurrentUser().profile || {}).templatesBoardId;
+      if (boardId) {
+        subManager.subscribe('board', boardId, false);
+        this.board = ReactiveCache.getBoard(boardId);
+      }
    } else {
-      // Prefetch first non-current board id
-      board = Boards.find({
-        archived: false,
-        'members.userId': Meteor.userId(),
-        _id: {
-          $nin: [
-            Session.get('currentBoard'),
-            (Meteor.user().profile || {}).templatesBoardId,
-          ],
-        },
-      });
+      this.board = Utils.getCurrentBoard();
    }
-    if (!board) {
+    if (!this.board) {
      Popup.back();
      return;
    }
-    const boardId = board._id;
+    this.boardId = this.board._id;
    // Subscribe to this board
-    subManager.subscribe('board', boardId, false);
-    this.selectedBoardId = new ReactiveVar(boardId);
+    subManager.subscribe('board', this.boardId, false);
+    this.selectedBoardId = new ReactiveVar(this.boardId);
+    this.list = $(Popup._getTopStack().openerElement).closest('.js-list');

    if (!this.isBoardTemplateSearch) {
-      this.boardId = Session.get('currentBoard');
-      // In order to get current board info
-      subManager.subscribe('board', this.boardId, false);
      this.swimlaneId = '';
      // Swimlane where to insert card
      const swimlane = $(Popup._getTopStack().openerElement).parents(
@@ -624,16 +687,15 @@ BlazeComponent.extendComponent({
      );
      if (Utils.boardView() === 'board-view-swimlanes')
        this.swimlaneId = Blaze.getData(swimlane[0])._id;
-      else this.swimlaneId = Swimlanes.findOne({ boardId: this.boardId })._id;
+      else this.swimlaneId = ReactiveCache.getSwimlane({ boardId: this.boardId })._id;
      // List where to insert card
-      const list = $(Popup._getTopStack().openerElement).closest('.js-list');
-      this.listId = Blaze.getData(list[0])._id;
+      this.listId = Blaze.getData(this.list[0])._id;
    }
    this.term = new ReactiveVar('');
  },

  boards() {
-    const boards = Boards.find(
+    const ret = ReactiveCache.getBoards(
      {
        archived: false,
        'members.userId': Meteor.userId(),
@@ -644,14 +706,14 @@ BlazeComponent.extendComponent({
        sort: { sort: 1 /* boards default sorting */ },
      },
    );
-    return boards;
+    return ret;
  },

  results() {
    if (!this.selectedBoardId) {
      return [];
    }
-    const board = Boards.findOne(this.selectedBoardId.get());
+    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
    if (!this.isTemplateSearch || this.isCardTemplateSearch) {
      return board.searchCards(this.term.get(), false);
    } else if (this.isListTemplateSearch) {
@@ -669,6 +731,19 @@ BlazeComponent.extendComponent({
    }
  },

+  getSortIndex() {
+    const position = this.data().position;
+    let ret;
+    if (position === 'top') {
+      const firstCardDom = this.list.find('.js-minicard:first')[0];
+      ret = Utils.calculateIndex(null, firstCardDom).base;
+    } else if (position === 'bottom') {
+      const lastCardDom = this.list.find('.js-minicard:last')[0];
+      ret = Utils.calculateIndex(lastCardDom, null).base;
+    }
+    return ret;
+  },
+
  events() {
    return [
      {
@@ -692,9 +767,8 @@ BlazeComponent.extendComponent({
          if (!this.isTemplateSearch || this.isCardTemplateSearch) {
            // Card insertion
            // 1. Common
-            element.sort = Lists.findOne(this.listId)
-              .cards()
-              .count();
+            element.cardNumber = this.board.getNextCardNumber();
+            element.sort = this.getSortIndex();
            // 1.A From template
            if (this.isTemplateSearch) {
              element.type = 'cardType-card';
@@ -707,15 +781,15 @@ BlazeComponent.extendComponent({
            Filter.addException(_id);
            // List insertion
          } else if (this.isListTemplateSearch) {
-            element.sort = Swimlanes.findOne(this.swimlaneId)
+            element.sort = ReactiveCache.getSwimlane(this.swimlaneId)
              .lists()
-              .count();
+              .length;
            element.type = 'list';
            _id = element.copy(this.boardId, this.swimlaneId);
          } else if (this.isSwimlaneTemplateSearch) {
-            element.sort = Boards.findOne(this.boardId)
+            element.sort = ReactiveCache.getBoard(this.boardId)
              .swimlanes()
-              .count();
+              .length;
            element.type = 'swimlane';
            _id = element.copy(this.boardId);
          } else if (this.isBoardTemplateSearch) {
@@ -723,7 +797,7 @@ BlazeComponent.extendComponent({
              'copyBoard',
              element.linkedId,
              {
-                sort: Boards.find({ archived: false }).count(),
+                sort: ReactiveCache.getBoards({ archived: false }).length,
                type: 'board',
                title: element.title,
              },
@@ -757,7 +831,7 @@ BlazeComponent.extendComponent({
      Meteor.settings.public.sandstorm;

    if (isSandstorm) {
-      const user = Meteor.user();
+      const user = ReactiveCache.getCurrentUser();
      if (user) {
        if (Utils.boardView() === 'board-view-swimlanes') {
          this.swimlaneId = this.parentComponent()
@@ -1,5 +1,5 @@
 template(name="listHeader")
-  .list-header.js-list-header(
+  .list-header.js-list-header.nodragscroll(
    class="{{#if limitToShowCardsCount}}list-header-card-count{{/if}}"
    class=colorClass)
    +inlinedForm
@@ -7,102 +7,135 @@ template(name="listHeader")
    else
      if isMiniScreen
        if currentList
-          a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
-      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}}")
-        +viewer
-          = title
-        if wipLimit.enabled
-         |&nbsp;(
-         span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.count}}
-         |/#{wipLimit.value})
-
-      if showCardsCountForList cards.count
-        span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.count}}
-
+          a.list-header-left-icon.js-unselect-list
+            | ◀️
+      else
+        if collapsed
+          if showCardsCountForList cards.length
+            br
+            span.cardCount {{cardsCount}}
+      if isMiniScreen
+        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}}")
+          +viewer
+            = title
+          if wipLimit.enabled
+           |&nbsp;(
+           span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.length}}
+           |/#{wipLimit.value})
+        if showCardsCountForList cards.length
+          span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}}
+      else
+        if collapsed
+          a.js-collapse(title="{{_ 'uncollapse'}}")
+            | ⬅️
+            | ➡️
+        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}}")
+            +viewer
+              = title
+            if wipLimit.enabled
+             |&nbsp;(
+             span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.length}}
+             |/#{wipLimit.value})
+        unless collapsed
+          if showCardsCountForList cards.length
+            span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}}
      if isMiniScreen
        if currentList
          if isWatching
-            i.list-header-watch-icon.fa.fa-eye
+            i.list-header-watch-icon | 👁️
          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'}}")
+                a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") ➕
+              a.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") ☰
        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 ▶️
+          a.list-header-handle.handle.js-list-handle ↕️
      else if currentUser.isBoardMember
        if isWatching
-          i.list-header-watch-icon.fa.fa-eye
-        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.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
+          i.list-header-watch-icon | 👁️
+        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.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") ➕
+                a.js-collapse(title="{{_ 'collapse'}}")
+                  | ⬅️
+                  | ➡️
+                a.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") ☰
+            if currentUser.isBoardMember
+              unless currentUser.isCommentOnly
+                a.list-header-handle.handle.js-list-handle ↕️

 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
+        | ❌

 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
+        | ↔️
+        |  {{_ 'set-list-width'}}
  ul.pop-over-list
    li
      a.js-toggle-watch-list
        if isWatching
-          i.fa.fa-eye
+          | 👁️
          |  {{_ 'unwatch'}}
        else
-          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.count
+      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'}}

 template(name="boardLists")
@@ -119,7 +152,7 @@ template(name="listMorePopup")
    span.clearfix
      span {{_ 'link-list'}}
      = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      | {{#if board.isPublic}}🌐{{else}}🔒{{/if}}
      input.inline-input(type="text" readonly value="{{ rootUrl }}")
    | {{_ 'added'}}
    span.date(title=list.createdAt) {{ moment createdAt 'LLL' }}
@@ -139,7 +172,7 @@ template(name="setWipLimitPopup")
    ul.pop-over-list
      li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}}
        if isWipLimitEnabled
-          i.fa.fa-check
+          | ✅
    if isWipLimitEnabled
      p
        input.wip-limit-value(type="number" value="{{ wipLimitValue }}" min="1" max="99")
@@ -156,12 +189,31 @@ template(name="wipLimitErrorPopup")
    p {{_ 'wipLimitErrorPopup-dialog-pt2'}}
    button.full.js-back-view(type="submit") {{_ 'cancel'}}

+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-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}}")
+          | {{#if isAutoWidth}}🗜️{{else}}📏{{/if}}
+          span {{_ 'auto-list-width'}}
+
+template(name="listWidthErrorPopup")
+  .list-width-invalid
+    p {{_ 'list-width-error-message'}} '&gt;=100'
+    button.full.js-back-view(type="submit") {{_ 'cancel'}}
+
 template(name="setListColorPopup")
  form.edit-label
    .palette-colors: each colors
      // note: we use the swimlane palette to have more than just the border
      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'}}
@@ -1,4 +1,6 @@
+import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import dragscroll from '@wekanteam/dragscroll';

 let listsColors;
 Meteor.startup(() => {
@@ -12,12 +14,12 @@ BlazeComponent.extendComponent({
      (!list.getWipLimit('enabled') ||
        list.getWipLimit('soft') ||
        !this.reachedWipLimit()) &&
-      !Meteor.user().isWorker()
+      !ReactiveCache.getCurrentUser().isWorker()
    );
  },

  isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
  starred(check = undefined) {
    const list = Template.currentData();
@@ -30,6 +32,17 @@ BlazeComponent.extendComponent({
      return !status;
    }
  },
+  collapsed(check = undefined) {
+    const list = Template.currentData();
+    const status = list.isCollapsed();
+    if (check === undefined) {
+      // just check
+      return status;
+    } else {
+      list.collapse(!status);
+      return !status;
+    }
+  },
  editTitle(event) {
    event.preventDefault();
    const newTitle = this.childComponents('inlinedForm')[0]
@@ -47,9 +60,9 @@ BlazeComponent.extendComponent({
  },

  limitToShowCardsCount() {
-    const currentUser = Meteor.user();
+    const currentUser = ReactiveCache.getCurrentUser();
    if (currentUser) {
-      return Meteor.user().getLimitToShowCardsCount();
+      return currentUser.getLimitToShowCardsCount();
    } else {
      return false;
    }
@@ -63,14 +76,15 @@ BlazeComponent.extendComponent({
        .parentComponent()
        .data()._id;

-    return list.cards(swimlaneId).count();
+    const ret = list.cards(swimlaneId).length;
+    return ret;
  },

  reachedWipLimit() {
    const list = Template.currentData();
    return (
      list.getWipLimit('enabled') &&
-      list.getWipLimit('value') <= list.cards().count()
+      list.getWipLimit('value') <= list.cards().length
    );
  },

@@ -78,7 +92,7 @@ BlazeComponent.extendComponent({
    const list = Template.currentData();
    return (
      list.getWipLimit('enabled') &&
-      list.getWipLimit('value') < list.cards().count()
+      list.getWipLimit('value') < list.cards().length
    );
  },

@@ -102,6 +116,10 @@ BlazeComponent.extendComponent({
          event.preventDefault();
          this.starred(!this.starred());
        },
+        'click .js-collapse'(event) {
+          event.preventDefault();
+          this.collapsed(!this.collapsed());
+        },
        'click .js-open-list-menu': Popup.open('listAction'),
        'click .js-add-card.list-header-plus-top'(event) {
          const listDom = $(event.target).parents(
@@ -123,13 +141,13 @@ BlazeComponent.extendComponent({

 Template.listHeader.helpers({
  isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
  }
 });

 Template.listActionPopup.helpers({
  isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },

  isWipLimitEnabled() {
@@ -138,7 +156,7 @@ Template.listActionPopup.helpers({

  isWatching() {
    return this.findWatcher(Meteor.userId());
-  },
+  }
 });

 Template.listActionPopup.events({
@@ -151,6 +169,7 @@ Template.listActionPopup.events({
    });
    Popup.back();
  },
+  'click .js-set-list-width': Popup.open('setListWidth'),
  'click .js-set-color-list': Popup.open('setListColor'),
  'click .js-select-cards'() {
    const cardIds = this.allCards().map(card => card._id);
@@ -183,7 +202,7 @@ BlazeComponent.extendComponent({
      10,
    );

-    if (limit < list.cards().count() && !list.getWipLimit('soft')) {
+    if (limit < list.cards().length && !list.getWipLimit('soft')) {
      Template.instance()
        .$('.wip-limit-error')
        .click();
@@ -198,9 +217,9 @@ BlazeComponent.extendComponent({

    if (
      list.getWipLimit('soft') &&
-      list.getWipLimit('value') < list.cards().count()
+      list.getWipLimit('value') < list.cards().length
    ) {
-      list.setWipLimit(list.cards().count());
+      list.setWipLimit(list.cards().length);
    }
    Meteor.call('enableSoftLimit', Template.currentData()._id);
  },
@@ -210,9 +229,9 @@ BlazeComponent.extendComponent({
    // 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().count()
+      list.getWipLimit('value') < list.cards().length
    ) {
-      list.setWipLimit(list.cards().count());
+      list.setWipLimit(list.cards().length);
    }
    Meteor.call('enableWipLimit', list._id);
  },
@@ -244,17 +263,16 @@ BlazeComponent.extendComponent({
 Template.listMorePopup.events({
  'click .js-delete': Popup.afterConfirm('listDelete', function() {
    Popup.back();
-    // TODO how can we avoid the fetch call?
-    const allCards = this.allCards().fetch();
+    const allCards = this.allCards();
    const allCardIds = _.pluck(allCards, '_id');
    // it's okay if the linked cards are on the same list
    if (
-      Cards.find({
+      ReactiveCache.getCards({
        $and: [
          { listId: { $ne: this._id } },
          { linkedId: { $in: allCardIds } },
        ],
-      }).count() === 0
+      }).length === 0
    ) {
      allCardIds.map(_id => Cards.remove(_id));
      Lists.remove(this._id);
@@ -279,7 +297,7 @@ Template.listMorePopup.events({

 Template.listHeader.helpers({
  isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
  },
 });

@@ -319,3 +337,63 @@ BlazeComponent.extendComponent({
    ];
  },
 }).register('setListColorPopup');
+
+BlazeComponent.extendComponent({
+  applyListWidth() {
+    const list = Template.currentData();
+    const board = list.boardId;
+    const width = parseInt(
+      Template.instance()
+        .$('.list-width-value')
+        .val(),
+      10,
+    );
+    const constraint = parseInt(
+      Template.instance()
+        .$('.list-constraint-value')
+        .val(),
+      10,
+    );
+
+    // FIXME(mark-i-m): where do we put constants?
+    if (width < 100 || !width || constraint < 100 || !constraint) {
+      Template.instance()
+        .$('.list-width-error')
+        .click();
+    } else {
+      Meteor.call('applyListWidth', board, list._id, width, constraint);
+      Popup.back();
+    }
+  },
+
+  listWidthValue() {
+    const list = Template.currentData();
+    const board = list.boardId;
+    return ReactiveCache.getCurrentUser().getListWidth(board, list._id);
+  },
+
+  listConstraintValue() {
+    const list = Template.currentData();
+    const board = list.boardId;
+    return ReactiveCache.getCurrentUser().getListConstraint(board, list._id);
+  },
+
+  isAutoWidth() {
+    const boardId = Utils.getCurrentBoardId();
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isAutoWidth(boardId);
+  },
+
+  events() {
+    return [
+      {
+        'click .js-auto-width-board'() {
+          dragscroll.reset();
+          ReactiveCache.getCurrentUser().toggleAutoWidth(Utils.getCurrentBoardId());
+        },
+        'click .list-width-apply': this.applyListWidth,
+        'click .list-width-error': Popup.open('listWidthError'),
+      },
+    ];
+  },
+}).register('setListWidthPopup');