v8.09

Thanks to xet7 !

Fixes #5962,
fixes #5952

.devcontainer/Dockerfile

@@ -1,20 +1,24 @@
-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.4 \
-    METEOR_RELEASE=METEOR@2.13 \
+    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=./ \
@@ -28,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="" \
@@ -48,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="" \
@@ -70,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 \
@@ -87,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="" \
@@ -143,69 +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}
-
-# OLD:
-#  && 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" \
-
-# Install NodeJS
-RUN set -o xtrace \
-  && cd /tmp \
-  && curl -fsSLO --compressed "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.xz" \
-  && curl -fsSLO --compressed "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt" \
-  && grep " node-$NODE_VERSION-$ARCHITECTURE.tar.xz\$" SHASUMS256.txt | 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 \
-  && 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 \
@@ -230,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
 
 #---------------------------------------------------------------------
@@ -277,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"]

.future-snap/broken-snapcraft.yaml

@@ -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

.future-snap/old-rebuild-wekan.sh

@@ -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

.future-snap/old-snapcraft.yaml

@@ -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

.future-snap/snapcraft.yaml

@@ -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

.github/FUNDING.yml

@@ -1,3 +1,3 @@
 # These are supported funding model platforms
 
-custom: ['https://wekan.team/commercial-support/']
+custom: ['https://wekan.fi/commercial-support/']

.github/ISSUE_TEMPLATE.md

@@ -1,18 +1,27 @@
 ## Issue
-<!--
-Please report these elsewhere:
+
+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
 
-**[PLEASE UPGRADE](https://github.com/wekan/wekan/wiki/Backup)** to the newest WeKan ® before reporting an issue.
+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
--->
+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 @@ Email settings, only SMTP MAIL_URL and MAIL_FROM are in use: https://github.com/
 * 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
+

.github/workflows/depsreview.yaml

@@ -9,6 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v3
+        uses: actions/dependency-review-action@v4

.github/workflows/docker-publish.yml

@@ -32,13 +32,13 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        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@343f7c4344506bcbf9b4de18042ae17996df046d
+        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@96383f45573cb7f253c731d3b3ab81c87ef81934
+        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@4a13e500e55cf31b7a5d59a38ab2040ab0f42f56
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}

.github/workflows/dockerimage.yml

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

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        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.6.0
+        uses: helm/chart-releaser-action@v1.7.0
         env:
           CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/test_suite.yml

@@ -18,7 +18,7 @@ jobs:
 #    runs-on: ubuntu-latest
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v4
+#      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@v4
+#      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@v4
+#      uses: actions/checkout@v5
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -90,12 +90,12 @@ jobs:
 
       # CHECKOUTS
       - name: Checkout
-        uses: actions/checkout@v4
+        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@v4
+        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.2.0
+        uses: VeryGoodOpenSource/very_good_coverage@v3.0.0
         with:
           path: ".coverage/lcov.info"
           min_coverage: 1 # TODO add tests and increase to 95!

.meteor/packages

@@ -6,7 +6,7 @@
 meteor-base@1.5.1
 
 # Build system
-ecmascript@0.16.8-beta2140.4
+ecmascript@0.16.8
 standard-minifier-js@2.8.1
 mquandalle:jade
 coffeescript@2.4.1!
@@ -20,11 +20,11 @@ cottz:publish-relations
 dburles:collection-helpers
 idmontie:migrations
 easy:search
-mongo@1.16.8-beta2140.4
+mongo@1.16.8
 mquandalle:collection-mutations
 
 # Account system
-accounts-password@2.4.0-beta2140.4
+accounts-password@2.4.0
 useraccounts:core
 useraccounts:flow-routing
 useraccounts:unstyled
@@ -42,7 +42,7 @@ jquery@3.0.0!
 random@1.2.1
 reactive-dict@1.3.1
 session@1.2.1
-tracker@1.3.2
+tracker@1.3.3
 underscore@1.0.13
 arillo:flow-router-helpers
 audit-argument-checks@1.0.7
@@ -52,8 +52,8 @@ ongoworks:speakingurl
 raix:handlebar-helpers
 http@2.0.0! # force new http package
 
-# Datepicker
-wekan-bootstrap-datepicker
+# Datepicker (disabled - using native HTML inputs)
+# wekan-bootstrap-datepicker
 
 # UI components
 ostrio:i18n
@@ -83,14 +83,14 @@ matb33:collection-hooks
 simple:json-routes
 kadira:flow-router
 spacebars
-service-configuration@1.3.2-beta2140.4
+service-configuration@1.3.2
 communitypackages:picker
 minifier-css@1.6.4
 blaze
 kadira:blaze-layout
 peerlibrary:blaze-components
 ejson@1.1.3
-logging@1.3.3-beta2140.4
+logging@1.3.3
 wekan-fullcalendar
 momentjs:moment@2.29.3
-wekan-fontawesome
+# wekan-fontawesome

.meteor/release

@@ -1 +1 @@
-METEOR@2.14-beta.4
+METEOR@2.14

.meteor/versions

@@ -1,6 +1,6 @@
-accounts-base@2.2.9-beta2140.4
-accounts-oauth@1.4.3-beta2140.4
-accounts-password@2.4.0-beta2140.4
+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,13 +10,13 @@ allow-deny@1.1.1
 arillo:flow-router-helpers@0.5.2
 audit-argument-checks@1.0.7
 autoupdate@1.8.0
-babel-compiler@7.10.5-beta2140.4
+babel-compiler@7.10.5
 babel-runtime@1.5.1
 base64@1.0.12
 binary-heap@1.0.11
 blaze@2.7.1
 blaze-tools@1.1.3
-boilerplate-generator@1.7.2-beta2140.4
+boilerplate-generator@1.7.2
 caching-compiler@1.2.2
 caching-html-compiler@1.2.1
 callback-hook@1.5.1
@@ -29,22 +29,22 @@ dburles:collection-helpers@1.1.0
 ddp@1.4.1
 ddp-client@2.6.1
 ddp-common@1.4.0
-ddp-rate-limiter@1.2.1-beta2140.4
-ddp-server@2.7.0-beta2140.4
+ddp-rate-limiter@1.2.1
+ddp-server@2.7.0
 deps@1.0.12
 diff-sequence@1.1.2
 dynamic-import@0.7.3
 easy:search@2.2.1
 easysearch:components@2.2.2
 easysearch:core@2.2.2
-ecmascript@0.16.8-beta2140.4
+ecmascript@0.16.8
 ecmascript-runtime@0.8.1
 ecmascript-runtime-client@0.12.1
 ecmascript-runtime-server@0.11.0
 ejson@1.1.3
 email@2.2.5
 es5-shim@4.8.0
-fetch@0.1.4-beta2140.4
+fetch@0.1.4
 geojson-utils@1.0.11
 hot-code-push@1.0.4
 html-tools@1.1.3
@@ -60,10 +60,10 @@ kadira:flow-router@2.12.1
 konecty:mongo-counter@0.0.5_3
 lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.3.3-beta2140.4
+logging@1.3.3
 matb33:collection-hooks@1.3.0
 mdg:validation-error@0.5.1
-meteor@1.11.4-beta2140.4
+meteor@1.11.5
 meteor-autosize@5.0.1
 meteor-base@1.5.1
 meteorhacks:aggregate@1.3.0
@@ -77,11 +77,11 @@ minifier-css@1.6.4
 minifier-js@2.7.5
 minifiers@1.1.8-faster-rebuild.0
 minimongo@1.9.3
-modern-browsers@0.1.10-beta2140.4
-modules@0.20.0-beta2140.4
+modern-browsers@0.1.10
+modules@0.20.0
 modules-runtime@0.13.1
 momentjs:moment@2.29.3
-mongo@1.16.8-beta2140.4
+mongo@1.16.8
 mongo-decimal@0.1.3
 mongo-dev-server@1.1.0
 mongo-id@1.0.8
@@ -94,8 +94,8 @@ mquandalle:jade-compiler@0.4.5
 mquandalle:jquery-textcomplete@0.8.0_1
 mquandalle:mousetrap-bindglobal@0.0.1
 msavin:usercache@1.8.0
-npm-mongo@4.17.0-beta2140.4
-oauth@2.2.1-beta2140.4
+npm-mongo@4.17.2
+oauth@2.2.1
 oauth2@1.3.2
 observe-sequence@1.0.21
 ongoworks:speakingurl@1.1.0
@@ -111,19 +111,19 @@ 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
 random@1.2.1
 rate-limit@1.1.1
-react-fast-refresh@0.2.8-beta2140.4
+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
-service-configuration@1.3.2-beta2140.4
+service-configuration@1.3.3
 session@1.2.1
 sha@1.0.9
 shell-server@0.5.0
@@ -132,7 +132,7 @@ simple:json-routes@2.3.1
 simple:rest-accounts-password@1.2.2
 simple:rest-bearer-token-parser@1.1.1
 simple:rest-json-error-handler@1.1.1
-socket-stream-client@0.5.2-beta2140.4
+socket-stream-client@0.5.2
 spacebars@1.4.1
 spacebars-compiler@1.3.1
 standard-minifier-js@2.8.1
@@ -141,22 +141,20 @@ templating@1.4.1
 templating-compiler@1.4.1
 templating-runtime@1.5.0
 templating-tools@1.2.2
-tracker@1.3.2
-typescript@4.9.5-beta2140.4
+tracker@1.3.3
+typescript@4.9.5
 ui@1.0.13
 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.5
+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-bootstrap-datepicker@1.10.0
-wekan-fontawesome@6.4.2
 wekan-fullcalendar@3.10.5
 wekan-ldap@0.0.2
 wekan-markdown@1.0.9

.tx/config

@@ -1,6 +1,6 @@
 [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, zh_CN.GB2312: zh-GB
+lang_map = te_IN: te-IN, es_AR: es-AR, es_419: es-LA, es_TX: es-TX, he_IL: he-IL, zh_CN: zh-CN, ar_EG: ar-EG, cs_CZ: cs-CZ, fa_IR: fa-IR, ms_MY: ms-MY, nl_NL: nl-NL, de_CH: de-CH, en_IT: en-IT, uz_UZ: uz-UZ, fr_CH: fr-CH, hi_IN: hi-IN, et_EE: et-EE, es_PE: es-PE, es_MX: es-MX, gl_ES: gl-ES, mn_MN: mn, 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

.vscode/launch.json

@@ -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"]
+    }
   ]
 }

.vscode/settings.json

@@ -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"]
+}

CODE_OF_CONDUCT.md

@@ -11,7 +11,7 @@ For all code at WeKan GitHub Organization https://github.com/wekan
 
 ## Private reports
 
-- Email support (at) wekan.team using [this PGP public key](support-at-wekan.team_pgp-publickey.asc) if possible
+- Email support@wekan.fi
 - Security issues: [SECURITY.md](SECURITY.md)
 - License violations
 - Anything private, sensitive or negative

CONTRIBUTING.md

@@ -11,7 +11,7 @@ Not paid:
 
 Paid by customers of WeKan Team:
 
-- Commercial Support at https://wekan.team/commercial-support/
+- Commercial Support at https://wekan.fi/commercial-support/
   - Support
   - Private Chat
   - Features
@@ -27,13 +27,9 @@ 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
 

Dockerfile

@@ -1,13 +1,8 @@
-FROM --platform=linux/amd64 ubuntu:23.10 as wekan
-LABEL maintainer="wekan" \
-      org.opencontainers.image.ref.name="ubuntu" \
-      org.opencontainers.image.version="23.10" \
-      org.opencontainers.image.source="https://github.com/wekan/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
+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,
@@ -16,19 +11,17 @@ 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.4 \
-    METEOR_RELEASE=METEOR@2.13.3 \
+    METEOR_RELEASE=METEOR@2.14 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \
-    NPM_VERSION=9.8.1 \
+    NPM_VERSION=6.14.17 \
     FIBERS_VERSION=4.0.1 \
     ARCHITECTURE=linux-x64 \
     SRC_PATH=./ \
@@ -69,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="" \
@@ -97,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="" \
@@ -162,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 ====
@@ -173,101 +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://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 && \
-    #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-${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt | shasum -a 256 -c - && \
-    rm -f SHASUMS256.txt && \
-    #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 meteor 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 meteor 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.09/wekan-8.09-amd64.zip"
+unzip wekan-8.09-amd64.zip
+rm wekan-8.09-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
@@ -278,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"]

Dockerfile.arm64v8

@@ -53,7 +53,12 @@ ENV QEMU_ARCHITECTURE=aarch64 \
     WITH_API=true \
     PORT=8080 \
     ROOT_URL=http://localhost \
-    MONGO_URL=mongodb://127.0.0.1:27017/wekan
+    MONGO_URL=mongodb://127.0.0.1:27017/wekan \
+    LDAP_AUTHENTIFICATION_PASSWORD_FILE="" \
+    OAUTH2_SECRET_FILE="" \
+    MAIL_SERVICE_PASSWORD_FILE="" \
+    MONGO_PASSWORD_FILE="" \
+    S3_SECRET_FILE=""
 
 # Copy qemu-static to image
 COPY --from=builder qemu-${QEMU_ARCHITECTURE}-static /usr/bin
@@ -88,5 +93,6 @@ RUN \
 EXPOSE $PORT
 USER wekan
 
+# CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 --max-old-space-size=8192 /home/wekan/bundle/main.js"]
 CMD ["bash", "-c", "ulimit -s 65500; exec node /home/wekan/bundle/main.js"]
 

Dockerfile.s390x

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

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2023 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

README.md

@@ -1,10 +1,8 @@
-[Gitpod Ready-to-Code](https://gitpod.io/#https://github.com/wekan/wekan)
-
 # WeKan ® - Open Source kanban
 
 ## Downloads
 
-https://wekan.github.io / Install WeKan ® Server
+https://wekan.fi/install/
 
 ## Docker Containers
 
@@ -12,11 +10,11 @@ https://wekan.github.io / Install WeKan ® Server
 - [Quay](https://quay.io/repository/wekan/wekan)
 - [Docker Hub](https://hub.docker.com/r/wekanteam/wekan)
 
-docker-compose.yml at https://github.com/wekan/wekan
+docker-compose.yml at https://github.com/wekan/wekan/blob/main/docker-compose.yml
 
 ## Standards
 
-- [WeKan and Standard for Public Code](https://wekan.github.io/standard-for-public-code/) assessment was made at 2023-11.
+- [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.
 
@@ -27,21 +25,19 @@ docker-compose.yml at https://github.com/wekan/wekan
 - [Open Hub](https://www.openhub.net/p/wekan)
 - [OSS Insight](https://ossinsight.io/analyze/wekan/wekan)
 
-## [Translate WeKan ® at Transifex](https://app.transifex.com/wekan/)
+## Translate WeKan ® at Transifex
 
-Translations to non-English languages are accepted only at [Transifex](https://app.transifex.com/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
 
@@ -51,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 ®
 
@@ -72,14 +68,11 @@ that by providing one-click installation on various platforms.
 - 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/main/docker-compose.yml): 3 frontend servers,
   each having 2 CPU and 2 wekan-app containers. One backend wekan-db server with many CPUs.
@@ -89,7 +82,7 @@ that by providing one-click installation on various platforms.
   WeKan ® on Sandstorm is not usually affected by any Standalone WeKan ® (Snap/Docker/Source) security issues.
 - [Reporting all new bugs immediately](https://github.com/wekan/wekan/issues).
   New features and fixes are added to WeKan ® [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
-- [Backups](https://github.com/wekan/wekan/wiki/Backup) of WeKan ® database once a day miminum.
+- [Backups](https://github.com/wekan/wekan/blob/main/docs/Backup/Backup.md) of WeKan ® database once a day 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.
 
@@ -102,14 +95,22 @@ that by providing one-click installation on various platforms.
 - 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/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]
 
@@ -118,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-dark-mode.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://app.transifex.com/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

READMELoginSignUp.md

@@ -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)
+
+---
+
+
+
+---

SECURITY.md

@@ -1,12 +1,12 @@
 About money, see [CONTRIBUTING.md](CONTRIBUTING.md)
 
 Security is very important to us. If you discover any issue regarding security, please disclose
-the information responsibly by sending an email 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.
+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.github.io/hall-of-fame
+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?
 
@@ -60,7 +60,7 @@ and by by companies that have 30k users.
 ## SSL/TLS
 
 - SSL/TLS encrypts traffic between webbrowser and webserver.
-- If you are thinking about TLS MITM, look at Caddy 2 webserver MITM detections.
+- 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:
@@ -218,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
 

Stackerfile.yml

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

api.py

@@ -37,9 +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
+    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
@@ -179,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':
@@ -237,7 +304,53 @@ if arguments == 6:
         print(data2)
         # ------- EDIT CUSTOMFIELD END -----------
 
-if arguments == 4:
+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':
 
@@ -251,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 -----------
@@ -293,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 -----------
@@ -364,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':
@@ -397,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 -----------

client/00-startup.js

@@ -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';

client/components/activities/activities.css

@@ -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;

client/components/activities/activities.jade

@@ -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 }}

client/components/activities/activities.js

@@ -1,5 +1,6 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import DOMPurify from 'dompurify';
+import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
 import { TAPi18n } from '/imports/i18n';
 
 const activitiesPerPage = 500;
@@ -13,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 = ReactiveCache.getCurrentUser();
-      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() {
@@ -54,14 +57,26 @@ 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() {
@@ -202,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;
@@ -234,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)
     );
   },
 
@@ -247,37 +258,11 @@ 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);
   },
 });
 
@@ -348,7 +333,7 @@ function createCardLink(card, board) {
           href: card.originRelativeUrl(),
           class: 'action-card',
         },
-        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        sanitizeHTML(text),
       ),
     )
   );
@@ -365,7 +350,7 @@ function createBoardLink(board, list) {
           href: board.originRelativeUrl(),
           class: 'action-board',
         },
-        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        sanitizeHTML(text),
       ),
     )
   );

client/components/activities/comments.css

@@ -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;
+}

client/components/activities/comments.jade

@@ -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}
+

client/components/activities/comments.js

@@ -55,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

client/components/boardConversionProgress.css

@@ -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;
+  }
+}

client/components/boardConversionProgress.jade

@@ -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'}}

client/components/boardConversionProgress.js

@@ -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();
+  });
+});

client/components/boards/boardBody.css

@@ -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 {
@@ -222,3 +497,10 @@
   font-size: 25px;
   cursor: pointer;
 }
+
+/* Global file drag over state for board canvas */
+.board-canvas.file-drag-over {
+  background-color: rgba(0, 123, 255, 0.05) !important;
+  border: 2px dashed #007bff !important;
+  transition: all 0.2s ease;
+}

client/components/boards/boardBody.jade

@@ -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

client/components/boards/boardBody.js

@@ -1,5 +1,11 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import dragscroll from '@wekanteam/dragscroll';
+import { boardConverter } from '/client/lib/boardConverter';
+import { migrationManager } from '/client/lib/migrationManager';
+import { attachmentMigrationManager } from '/client/lib/attachmentMigrationManager';
+import Swimlanes from '/models/swimlanes';
+import Lists from '/models/lists';
 
 const subManager = new SubsManager();
 const { calculateIndex } = Utils;
@@ -8,6 +14,9 @@ const swimlaneWhileSortingHeight = 150;
 BlazeComponent.extendComponent({
   onCreated() {
     this.isBoardReady = new ReactiveVar(false);
+    this.isConverting = new ReactiveVar(false);
+    this.isMigrating = new ReactiveVar(false);
+    this._swimlaneCreated = new Set(); // Track boards where we've created swimlanes
 
     // The pattern we use to manually handle data loading is described here:
     // https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager
@@ -16,22 +25,338 @@ BlazeComponent.extendComponent({
     this.autorun(() => {
       const currentBoardId = Session.get('currentBoard');
       if (!currentBoardId) return;
+      
       const handle = subManager.subscribe('board', currentBoardId, false);
+      
       Tracker.nonreactive(() => {
         Tracker.autorun(() => {
-          this.isBoardReady.set(handle.ready());
+          if (handle.ready()) {
+            // Ensure default swimlane exists (only once per board)
+            this.ensureDefaultSwimlane(currentBoardId);
+            // Check if board needs conversion
+            this.checkAndConvertBoard(currentBoardId);
+          } else {
+            this.isBoardReady.set(false);
+          }
         });
       });
     });
   },
 
+  ensureDefaultSwimlane(boardId) {
+    // Only create swimlane once per board
+    if (this._swimlaneCreated.has(boardId)) {
+      return;
+    }
+
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) return;
+
+      const swimlanes = board.swimlanes();
+      
+      if (swimlanes.length === 0) {
+        const swimlaneId = Swimlanes.insert({
+          title: 'Default',
+          boardId: boardId,
+        });
+        this._swimlaneCreated.add(boardId);
+      } else {
+        this._swimlaneCreated.add(boardId);
+      }
+    } catch (error) {
+      console.error('Error creating default swimlane:', error);
+    }
+  },
+
+  async checkAndConvertBoard(boardId) {
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) {
+        this.isBoardReady.set(true);
+        return;
+      }
+
+      // Check if board needs migration based on migration version
+      const needsMigration = !board.migrationVersion || board.migrationVersion < 1;
+      
+      if (needsMigration) {
+        // Start background migration for old boards
+        this.isMigrating.set(true);
+        await this.startBackgroundMigration(boardId);
+        this.isMigrating.set(false);
+      }
+
+      // Check if board needs conversion (for old structure)
+      if (boardConverter.isBoardConverted(boardId)) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has already been converted, skipping conversion`);
+        }
+        this.isBoardReady.set(true);
+      } else {
+        const needsConversion = boardConverter.needsConversion(boardId);
+        
+        if (needsConversion) {
+          this.isConverting.set(true);
+          const success = await boardConverter.convertBoard(boardId);
+          this.isConverting.set(false);
+          
+          if (success) {
+            this.isBoardReady.set(true);
+          } else {
+            console.error('Board conversion failed, setting ready to true anyway');
+            this.isBoardReady.set(true); // Still show board even if conversion failed
+          }
+        } else {
+          this.isBoardReady.set(true);
+        }
+      }
+
+      // Convert shared lists to per-swimlane lists if needed
+      await this.convertSharedListsToPerSwimlane(boardId);
+
+      // Fix missing lists migration (for cards with wrong listId references)
+      await this.fixMissingLists(boardId);
+
+      // Start attachment migration in background if needed
+      this.startAttachmentMigrationIfNeeded(boardId);
+    } catch (error) {
+      console.error('Error during board conversion check:', error);
+      this.isConverting.set(false);
+      this.isMigrating.set(false);
+      this.isBoardReady.set(true); // Show board even if conversion check failed
+    }
+  },
+
+  async startBackgroundMigration(boardId) {
+    try {
+      // Start background migration using the cron system
+      Meteor.call('boardMigration.startBoardMigration', boardId, (error, result) => {
+        if (error) {
+          console.error('Failed to start background migration:', error);
+        } else {
+          if (process.env.DEBUG === 'true') {
+            console.log('Background migration started for board:', boardId);
+          }
+        }
+      });
+    } catch (error) {
+      console.error('Error starting background migration:', error);
+    }
+  },
+
+  async convertSharedListsToPerSwimlane(boardId) {
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) return;
+
+      // Check if board has already been processed for shared lists conversion
+      if (board.hasSharedListsConverted) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has already been processed for shared lists conversion`);
+        }
+        return;
+      }
+
+      // Get all lists for this board
+      const allLists = board.lists();
+      const swimlanes = board.swimlanes();
+      
+      if (swimlanes.length === 0) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has no swimlanes, skipping shared lists conversion`);
+        }
+        return;
+      }
+
+      // Find shared lists (lists with empty swimlaneId or null swimlaneId)
+      const sharedLists = allLists.filter(list => !list.swimlaneId || list.swimlaneId === '');
+      
+      if (sharedLists.length === 0) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has no shared lists to convert`);
+        }
+        // Mark as processed even if no shared lists
+        Meteor.call('boards.update', boardId, { $set: { hasSharedListsConverted: true } });
+        return;
+      }
+
+      if (process.env.DEBUG === 'true') {
+        console.log(`Converting ${sharedLists.length} shared lists to per-swimlane lists for board ${boardId}`);
+      }
+
+      // Convert each shared list to per-swimlane lists
+      for (const sharedList of sharedLists) {
+        // Create a copy of the list for each swimlane
+        for (const swimlane of swimlanes) {
+          // Check if this list already exists in this swimlane
+          const existingList = Lists.findOne({
+            boardId: boardId,
+            swimlaneId: swimlane._id,
+            title: sharedList.title
+          });
+
+          if (!existingList) {
+            // Create a new list in this swimlane
+            const newListData = {
+              title: sharedList.title,
+              boardId: boardId,
+              swimlaneId: swimlane._id,
+              sort: sharedList.sort || 0,
+              archived: sharedList.archived || false, // Preserve archived state from original list
+              createdAt: new Date(),
+              modifiedAt: new Date()
+            };
+
+            // Copy other properties if they exist
+            if (sharedList.color) newListData.color = sharedList.color;
+            if (sharedList.wipLimit) newListData.wipLimit = sharedList.wipLimit;
+            if (sharedList.wipLimitEnabled) newListData.wipLimitEnabled = sharedList.wipLimitEnabled;
+            if (sharedList.wipLimitSoft) newListData.wipLimitSoft = sharedList.wipLimitSoft;
+
+            Lists.insert(newListData);
+            
+            if (process.env.DEBUG === 'true') {
+              const archivedStatus = sharedList.archived ? ' (archived)' : ' (active)';
+              console.log(`Created list "${sharedList.title}"${archivedStatus} for swimlane ${swimlane.title || swimlane._id}`);
+            }
+          } else {
+            if (process.env.DEBUG === 'true') {
+              console.log(`List "${sharedList.title}" already exists in swimlane ${swimlane.title || swimlane._id}, skipping`);
+            }
+          }
+        }
+
+        // Remove the original shared list completely
+        Lists.remove(sharedList._id);
+        
+        if (process.env.DEBUG === 'true') {
+          console.log(`Removed shared list "${sharedList.title}"`);
+        }
+      }
+
+      // Mark board as processed
+      Meteor.call('boards.update', boardId, { $set: { hasSharedListsConverted: true } });
+
+      if (process.env.DEBUG === 'true') {
+        console.log(`Successfully converted ${sharedLists.length} shared lists to per-swimlane lists for board ${boardId}`);
+      }
+
+    } catch (error) {
+      console.error('Error converting shared lists to per-swimlane:', error);
+    }
+  },
+
+  async fixMissingLists(boardId) {
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) return;
+
+      // Check if board has already been processed for missing lists fix
+      if (board.fixMissingListsCompleted) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has already been processed for missing lists fix`);
+        }
+        return;
+      }
+
+      // Check if migration is needed
+      const needsMigration = await new Promise((resolve, reject) => {
+        Meteor.call('fixMissingListsMigration.needsMigration', boardId, (error, result) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(result);
+          }
+        });
+      });
+
+      if (!needsMigration) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} does not need missing lists fix`);
+        }
+        return;
+      }
+
+      if (process.env.DEBUG === 'true') {
+        console.log(`Starting fix missing lists migration for board ${boardId}`);
+      }
+
+      // Execute the migration
+      const result = await new Promise((resolve, reject) => {
+        Meteor.call('fixMissingListsMigration.execute', boardId, (error, result) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(result);
+          }
+        });
+      });
+
+      if (result && result.success) {
+        console.log(`Successfully fixed missing lists for board ${boardId}: created ${result.createdLists} lists, updated ${result.updatedCards} cards`);
+      }
+
+    } catch (error) {
+      console.error('Error fixing missing lists:', error);
+    }
+  },
+
+  async startAttachmentMigrationIfNeeded(boardId) {
+    try {
+      // Check if board has already been migrated
+      if (attachmentMigrationManager.isBoardMigrated(boardId)) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has already been migrated, skipping`);
+        }
+        return;
+      }
+
+      // Check if there are unconverted attachments
+      const unconvertedAttachments = attachmentMigrationManager.getUnconvertedAttachments(boardId);
+      
+      if (unconvertedAttachments.length > 0) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Starting attachment migration for ${unconvertedAttachments.length} attachments in board ${boardId}`);
+        }
+        await attachmentMigrationManager.startAttachmentMigration(boardId);
+      } else {
+        // No attachments to migrate, mark board as migrated
+        // This will be handled by the migration manager itself
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has no attachments to migrate`);
+        }
+      }
+    } catch (error) {
+      console.error('Error starting attachment migration:', error);
+    }
+  },
+
   onlyShowCurrentCard() {
-    return Utils.isMiniScreen() && Utils.getCurrentCardId(true);
+    const isMiniScreen = Utils.isMiniScreen();
+    const currentCardId = Utils.getCurrentCardId(true);
+    return isMiniScreen && currentCardId;
   },
 
   goHome() {
     FlowRouter.go('home');
   },
+
+  isConverting() {
+    return this.isConverting.get();
+  },
+
+  isMigrating() {
+    return this.isMigrating.get();
+  },
+
+  isBoardReady() {
+    return this.isBoardReady.get();
+  },
+
+  currentBoard() {
+    return Utils.getCurrentBoard();
+  },
 }).register('board');
 
 BlazeComponent.extendComponent({
@@ -45,36 +370,227 @@ BlazeComponent.extendComponent({
 
     // fix swimlanes sort field if there are null values
     const currentBoardData = Utils.getCurrentBoard();
-    const nullSortSwimlanes = currentBoardData.nullSortSwimlanes();
-    if (nullSortSwimlanes.length > 0) {
-      const swimlanes = currentBoardData.swimlanes();
-      let count = 0;
-      swimlanes.forEach(s => {
-        Swimlanes.update(s._id, {
-          $set: {
-            sort: count,
-          },
+    if (currentBoardData && Swimlanes) {
+      const nullSortSwimlanes = currentBoardData.nullSortSwimlanes();
+      if (nullSortSwimlanes.length > 0) {
+        const swimlanes = currentBoardData.swimlanes();
+        let count = 0;
+        swimlanes.forEach(s => {
+          Swimlanes.update(s._id, {
+            $set: {
+              sort: count,
+            },
+          });
+          count += 1;
         });
-        count += 1;
-      });
+      }
     }
 
     // fix lists sort field if there are null values
-    const nullSortLists = currentBoardData.nullSortLists();
-    if (nullSortLists.length > 0) {
-      const lists = currentBoardData.lists();
-      let count = 0;
-      lists.forEach(l => {
-        Lists.update(l._id, {
-          $set: {
-            sort: count,
-          },
+    if (currentBoardData && Lists) {
+      const nullSortLists = currentBoardData.nullSortLists();
+      if (nullSortLists.length > 0) {
+        const lists = currentBoardData.lists();
+        let count = 0;
+        lists.forEach(l => {
+          Lists.update(l._id, {
+            $set: {
+              sort: count,
+            },
+          });
+          count += 1;
         });
-        count += 1;
-      });
+      }
     }
   },
   onRendered() {
+    // Initialize user settings (zoom and mobile mode)
+    Utils.initializeUserSettings();
+
+    // Detect iPhone devices and add class for better CSS targeting
+    const isIPhone = /iPhone|iPod/.test(navigator.userAgent);
+    if (isIPhone) {
+      document.body.classList.add('iphone-device');
+    }
+
+    // Accessibility: Focus management for popups and menus
+    function focusFirstInteractive(container) {
+      if (!container) return;
+      // Find first focusable element
+      const focusable = container.querySelectorAll('button, [role="button"], a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      for (let i = 0; i < focusable.length; i++) {
+        if (!focusable[i].disabled && focusable[i].offsetParent !== null) {
+          focusable[i].focus();
+          break;
+        }
+      }
+    }
+
+    // Observe for new popups/menus and set focus (but exclude swimlane content)
+    const popupObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        mutation.addedNodes.forEach(function(node) {
+          if (node.nodeType === 1 && 
+              (node.classList.contains('popup') || node.classList.contains('modal') || node.classList.contains('menu')) &&
+              !node.closest('.js-swimlanes') && 
+              !node.closest('.swimlane') &&
+              !node.closest('.list') &&
+              !node.closest('.minicard')) {
+            setTimeout(function() { focusFirstInteractive(node); }, 10);
+          }
+        });
+      });
+    });
+    popupObserver.observe(document.body, { childList: true, subtree: true });
+
+    // Remove tabindex from non-interactive elements (e.g., user abbreviations, labels)
+    document.querySelectorAll('.user-abbreviation, .user-label, .card-header-label, .edit-label, .private-label').forEach(function(el) {
+      if (el.hasAttribute('tabindex')) {
+        el.removeAttribute('tabindex');
+      }
+    });
+    /*
+    // Add a toggle button for keyboard shortcuts accessibility
+    if (!document.getElementById('wekan-shortcuts-toggle')) {
+      const toggleContainer = document.createElement('div');
+      toggleContainer.id = 'wekan-shortcuts-toggle';
+      toggleContainer.style.position = 'fixed';
+      toggleContainer.style.top = '10px';
+      toggleContainer.style.right = '10px';
+      toggleContainer.style.zIndex = '1000';
+      toggleContainer.style.background = '#fff';
+      toggleContainer.style.border = '2px solid #005fcc';
+      toggleContainer.style.borderRadius = '6px';
+      toggleContainer.style.padding = '8px 12px';
+      toggleContainer.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+      toggleContainer.style.fontSize = '16px';
+      toggleContainer.style.color = '#005fcc';
+      toggleContainer.setAttribute('role', 'region');
+      toggleContainer.setAttribute('aria-label', 'Keyboard Shortcuts Settings');
+      toggleContainer.innerHTML = `
+        <label for="shortcuts-toggle-checkbox" style="cursor:pointer;">
+          <input type="checkbox" id="shortcuts-toggle-checkbox" ${window.wekanShortcutsEnabled ? 'checked' : ''} style="margin-right:8px;" />
+          Enable keyboard shortcuts
+        </label>
+      `;
+      document.body.appendChild(toggleContainer);
+      const checkbox = document.getElementById('shortcuts-toggle-checkbox');
+      checkbox.addEventListener('change', function(e) {
+        window.toggleWekanShortcuts(e.target.checked);
+      });
+    }
+    */
+    // Ensure toggle-buttons, color choices, reactions, renaming, and calendar controls are focusable and have ARIA roles
+    document.querySelectorAll('.js-toggle').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      // Short, descriptive label for favorite/star toggle
+      if (el.classList.contains('js-favorite-toggle')) {
+        el.setAttribute('aria-label', TAPi18n.__('favorite-toggle-label'));
+      } else {
+        el.setAttribute('aria-label', 'Toggle');
+      }
+    });
+    document.querySelectorAll('.js-color-choice').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Choose color');
+    });
+    document.querySelectorAll('.js-reaction').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'React');
+    });
+    document.querySelectorAll('.js-rename-swimlane').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Rename swimlane');
+    });
+    document.querySelectorAll('.js-rename-list').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Rename list');
+    });
+    document.querySelectorAll('.fc-button').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+    });
+    // Set the language attribute on the <html> element for accessibility
+    document.documentElement.lang = TAPi18n.getLanguage();
+
+    // Ensure the accessible name for the board view switcher matches the visible label "Swimlanes"
+    // This fixes WCAG 2.5.3: Label in Name
+    const swimlanesSwitcher = this.$('.js-board-view-swimlanes');
+    if (swimlanesSwitcher.length) {
+      swimlanesSwitcher.attr('aria-label', swimlanesSwitcher.text().trim() || 'Swimlanes');
+    }
+
+    // Add a highly visible focus indicator and improve contrast for interactive elements
+    if (!document.getElementById('wekan-accessible-focus-style')) {
+      const style = document.createElement('style');
+      style.id = 'wekan-accessible-focus-style';
+      style.innerHTML = `
+        /* Focus indicator */
+        button:focus, [role="button"]:focus, a:focus, input:focus, select:focus, textarea:focus, .dropdown-menu:focus, .js-board-view-swimlanes:focus, .js-add-card:focus {
+          outline: 3px solid #005fcc !important;
+          outline-offset: 2px !important;
+        }
+        /* Input borders */
+        input, textarea, select {
+          border: 2px solid #222 !important;
+        }
+        /* Plus icon for adding a new card */
+        .js-add-card {
+          color: #005fcc !important; /* dark blue for contrast */
+          cursor: pointer;
+          outline: none;
+        }
+        .js-add-card[tabindex] {
+          outline: none;
+        }
+        /* Hamburger menu */
+        .fa-bars, .icon-hamburger {
+          color: #222 !important;
+        }
+        /* Grey icons in card detail header */
+        .card-detail-header .fa, .card-detail-header .icon {
+          color: #444 !important;
+        }
+        /* Grey operating elements in card detail */
+        .card-detail .fa, .card-detail .icon {
+          color: #444 !important;
+        }
+        /* Blue bar in checklists */
+        .checklist-progress-bar {
+          background-color: #005fcc !important;
+        }
+        /* Green checkmark in checklists */
+        .checklist .fa-check {
+          color: #007a33 !important;
+        }
+        /* X-Button and arrow button in menus */
+        .close, .fa-arrow-left, .icon-arrow-left {
+          color: #005fcc !important;
+        }
+        /* Cross icon to move boards */
+        .js-move-board {
+          color: #005fcc !important;
+        }
+        /* Current date background */
+        .current-date {
+          background-color: #005fcc !important;
+          color: #fff !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    // Ensure plus/add elements are focusable and have ARIA roles
+    document.querySelectorAll('.js-add-card').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Add new card');
+    });
+
     const boardComponent = this;
     const $swimlanesDom = boardComponent.$('.js-swimlanes');
 
@@ -194,22 +710,23 @@ BlazeComponent.extendComponent({
     });
 
     this.autorun(() => {
-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $swimlanesDom.sortable({
-          handle: '.js-swimlane-header-handle',
-        });
-      } else {
-        $swimlanesDom.sortable({
-          handle: '.swimlane-header',
-        });
-      }
+      // Always reset dragscroll on view switch
+      dragscroll.reset();
 
-      // Disable drag-dropping if the current user is not a board member
-      $swimlanesDom.sortable(
-        'option',
-        'disabled',
-        !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
-      );
+      if ($swimlanesDom.data('uiSortable') || $swimlanesDom.data('sortable')) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+          $swimlanesDom.sortable('option', 'handle', '.js-swimlane-header-handle');
+        } else {
+          $swimlanesDom.sortable('option', 'handle', '.swimlane-header');
+        }
+
+        // Disable drag-dropping if the current user is not a board member
+        $swimlanesDom.sortable(
+          'option',
+          'disabled',
+          !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
+        );
+      }
     });
 
     // If there is no data in the board (ie, no lists) we autofocus the list
@@ -219,48 +736,129 @@ BlazeComponent.extendComponent({
       boardComponent.openNewListForm();
     }
 
+    dragscroll.reset();
     Utils.setBackgroundImage();
   },
 
   notDisplayThisBoard() {
     let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');
     let currentBoard = Utils.getCurrentBoard();
-    if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue && currentBoard.permission == 'public') {
-      return true;
-    }
-
-    return false;
+    return allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue && currentBoard && currentBoard.permission == 'public';
   },
 
   isViewSwimlanes() {
     const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+    
     if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-swimlanes';
+      boardView = (currentUser.profile || {}).boardView;
     } else {
-      return (
-        window.localStorage.getItem('boardView') === 'board-view-swimlanes'
-      );
+      boardView = window.localStorage.getItem('boardView');
     }
+    
+    // If no board view is set, default to swimlanes
+    if (!boardView) {
+      boardView = 'board-view-swimlanes';
+    }
+    
+    return boardView === 'board-view-swimlanes';
   },
 
   isViewLists() {
     const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+    
     if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-lists';
+      boardView = (currentUser.profile || {}).boardView;
     } else {
-      return window.localStorage.getItem('boardView') === 'board-view-lists';
+      boardView = window.localStorage.getItem('boardView');
     }
+    
+    return boardView === 'board-view-lists';
   },
 
   isViewCalendar() {
     const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+    
     if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-cal';
+      boardView = (currentUser.profile || {}).boardView;
     } else {
-      return window.localStorage.getItem('boardView') === 'board-view-cal';
+      boardView = window.localStorage.getItem('boardView');
+    }
+    
+    return boardView === 'board-view-cal';
+  },
+
+  hasSwimlanes() {
+    const currentBoard = Utils.getCurrentBoard();
+    if (!currentBoard) {
+      if (process.env.DEBUG === 'true') {
+        console.log('hasSwimlanes: No current board');
+      }
+      return false;
+    }
+    
+    try {
+      const swimlanes = currentBoard.swimlanes();
+      const hasSwimlanes = swimlanes && swimlanes.length > 0;
+      if (process.env.DEBUG === 'true') {
+        console.log('hasSwimlanes: Board has', swimlanes ? swimlanes.length : 0, 'swimlanes');
+      }
+      return hasSwimlanes;
+    } catch (error) {
+      console.error('hasSwimlanes: Error getting swimlanes:', error);
+      return false;
     }
   },
 
+
+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
+
+  boardView() {
+    return Utils.boardView();
+  },
+
+  debugBoardState() {
+    // Enable debug mode by setting ?debug=1 in URL
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get('debug') === '1';
+  },
+
+  debugBoardStateData() {
+    const currentBoard = Utils.getCurrentBoard();
+    const currentBoardId = Session.get('currentBoard');
+    const isBoardReady = this.isBoardReady.get();
+    const isConverting = this.isConverting.get();
+    const isMigrating = this.isMigrating.get();
+    const boardView = Utils.boardView();
+    
+    if (process.env.DEBUG === 'true') {
+      console.log('=== BOARD DEBUG STATE ===');
+      console.log('currentBoardId:', currentBoardId);
+      console.log('currentBoard:', !!currentBoard, currentBoard ? currentBoard.title : 'none');
+      console.log('isBoardReady:', isBoardReady);
+      console.log('isConverting:', isConverting);
+      console.log('isMigrating:', isMigrating);
+      console.log('boardView:', boardView);
+      console.log('========================');
+    }
+    
+    return {
+      currentBoardId,
+      hasCurrentBoard: !!currentBoard,
+      currentBoardTitle: currentBoard ? currentBoard.title : 'none',
+      isBoardReady,
+      isConverting,
+      isMigrating,
+      boardView
+    };
+  },
+
+
   openNewListForm() {
     if (this.isViewSwimlanes()) {
       // The form had been removed in 416b17062e57f215206e93a85b02ef9eb1ab4902
@@ -283,6 +881,32 @@ BlazeComponent.extendComponent({
             this._isDragging = false;
           }
         },
+        'click .js-empty-board-add-swimlane': Popup.open('swimlaneAdd'),
+        // Global drag and drop file upload handlers for better visual feedback
+        'dragover .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            // Add visual indicator that files can be dropped
+            $('.board-canvas').addClass('file-drag-over');
+          }
+        },
+        'dragleave .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            // Only remove class if we're leaving the board canvas entirely
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              $('.board-canvas').removeClass('file-drag-over');
+            }
+          }
+        },
+        'drop .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            $('.board-canvas').removeClass('file-drag-over');
+          }
+        },
       },
     ];
   },
@@ -311,8 +935,109 @@ BlazeComponent.extendComponent({
   },
 }).register('boardBody');
 
+// Accessibility: Allow users to enable/disable keyboard shortcuts
+window.wekanShortcutsEnabled = true;
+window.toggleWekanShortcuts = function(enabled) {
+  window.wekanShortcutsEnabled = !!enabled;
+};
+
+// Example: Wrap your character key shortcut handler like this
+document.addEventListener('keydown', function(e) {
+  // Example: "W" key shortcut (replace with your actual shortcut logic)
+  if (!window.wekanShortcutsEnabled) return;
+  if (e.key === 'w' || e.key === 'W') {
+    // ...existing shortcut logic...
+    // e.g. open swimlanes view, etc.
+  }
+});
+
+// Keyboard accessibility for card actions (favorite, archive, duplicate, etc.)
+document.addEventListener('keydown', function(e) {
+  if (!window.wekanShortcutsEnabled) return;
+  // Only proceed if focus is on a card action element
+  const active = document.activeElement;
+  if (active && active.classList.contains('js-card-action')) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      active.click();
+    }
+    // Move card up/down with arrow keys
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (active.dataset.cardId) {
+        Meteor.call('moveCardUp', active.dataset.cardId);
+      }
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (active.dataset.cardId) {
+        Meteor.call('moveCardDown', active.dataset.cardId);
+      }
+    }
+  }
+  // Make plus/add elements keyboard accessible
+  if (active && active.classList.contains('js-add-card')) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      active.click();
+    }
+  }
+  // Keyboard move for cards (alternative to drag & drop)
+  if (active && active.classList.contains('js-move-card')) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (active.dataset.cardId) {
+        Meteor.call('moveCardUp', active.dataset.cardId);
+      }
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (active.dataset.cardId) {
+        Meteor.call('moveCardDown', active.dataset.cardId);
+      }
+    }
+  }
+    // Ensure move card buttons are focusable and have ARIA roles
+    document.querySelectorAll('.js-move-card').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Move card');
+    });
+  // Make toggle-buttons, color choices, reactions, and X-buttons keyboard accessible
+  if (active && (active.classList.contains('js-toggle') || active.classList.contains('js-color-choice') || active.classList.contains('js-reaction') || active.classList.contains('close'))) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      active.click();
+    }
+  }
+  // Prevent scripts from removing focus when received
+  if (active) {
+    active.addEventListener('focus', function(e) {
+      // Do not remove focus
+      // No-op: This prevents F55 failure
+    }, { once: true });
+  }
+  // Make swimlane/list renaming keyboard accessible
+  if (active && (active.classList.contains('js-rename-swimlane') || active.classList.contains('js-rename-list'))) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      active.click();
+    }
+  }
+  // Calendar navigation buttons
+  if (active && active.classList.contains('fc-button')) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      active.click();
+    }
+  }
+});
+
 BlazeComponent.extendComponent({
   onRendered() {
+    // Set the language attribute on the <html> element for accessibility
+    document.documentElement.lang = TAPi18n.getLanguage();
+
     this.autorun(function () {
       $('#calendar-view').fullCalendar('refetchEvents');
     });
@@ -326,11 +1051,19 @@ BlazeComponent.extendComponent({
       timezone: 'local',
       weekNumbers: true,
       header: {
-        left: 'title   today prev,next',
+          left: 'title   today prev,next',
         center:
           'agendaDay,listDay,timelineDay agendaWeek,listWeek,timelineWeek month,listMonth',
         right: '',
       },
+        buttonText: {
+          prev: TAPi18n.__('calendar-previous-month-label'), // e.g. "Previous month"
+          next: TAPi18n.__('calendar-next-month-label'), // e.g. "Next month"
+        },
+        ariaLabel: {
+          prev: TAPi18n.__('calendar-previous-month-label'),
+          next: TAPi18n.__('calendar-next-month-label'),
+        },
       // height: 'parent', nope, doesn't work as the parent might be small
       height: 'auto',
       /* TODO: lists as resources: https://fullcalendar.io/docs/vertical-resource-view */
@@ -461,6 +1194,9 @@ BlazeComponent.extendComponent({
         document.body.appendChild(modalElement);
         const openModal = function() {
           modalElement.style.display = 'flex';
+          // Set focus to the input field for better keyboard accessibility
+          const input = modalElement.querySelector('#card-title-input');
+          if (input) input.focus();
         };
         const closeModal = function() {
           modalElement.style.display = 'none';

client/components/boards/boardHeader.css

@@ -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;
 }

client/components/boards/boardHeader.jade

@@ -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
+                | ❌
 
         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
+                | ❌
 
         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'}}
 

client/components/boards/boardHeader.js

@@ -1,42 +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 = Utils.getCurrentBoard();
-    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 = Utils.getCurrentBoard();
-    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) {
@@ -63,6 +33,8 @@ BlazeComponent.extendComponent({
     return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
   },
 
+
+
   isStarred() {
     const boardId = Session.get('currentBoard');
     const user = ReactiveCache.getCurrentUser();
@@ -110,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'),
         /*
@@ -130,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();
@@ -156,6 +155,7 @@ BlazeComponent.extendComponent({
       },
     ];
   },
+
 }).register('boardHeaderBar');
 
 Template.boardHeaderBar.helpers({
@@ -165,6 +165,23 @@ Template.boardHeaderBar.helpers({
   isSortActive() {
     return Session.get('sortBy') ? true : false;
   },
+  sortCardsIcon() {
+    const sortBy = Session.get('sortBy');
+    if (!sortBy) {
+      return '🃏'; // Card icon when nothing is selected
+    }
+    
+    // Determine which sort option is active based on sortBy object
+    if (sortBy.dueAt) {
+      return '📅'; // Due date icon
+    } else if (sortBy.title) {
+      return '🔤'; // Alphabet icon
+    } else if (sortBy.createdAt) {
+      return sortBy.createdAt === 1 ? '⬆️' : '⬇️'; // Up/down arrow based on direction
+    }
+    
+    return '🃏'; // Default card icon
+  },
 });
 
 Template.boardChangeViewPopup.events({
@@ -231,6 +248,7 @@ const CreateBoard = BlazeComponent.extendComponent({
             title: title,
             permission: 'private',
             type: 'template-container',
+            migrationVersion: 1, // Latest version - no migration needed
           }),
        );
 
@@ -274,6 +292,7 @@ const CreateBoard = BlazeComponent.extendComponent({
         Boards.insert({
           title,
           permission: visibility,
+          migrationVersion: 1, // Latest version - no migration needed
         }),
       );
 

client/components/boards/boardsList.css

@@ -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;
+  }
+}
+

client/components/boards/boardsList.jade

@@ -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 }}

client/components/boards/boardsList.js

@@ -22,6 +22,9 @@ Template.boardListHeaderBar.events({
   },
 });
 
+Template.boardList.events({
+});
+
 Template.boardListHeaderBar.helpers({
   title() {
     //if (FlowRouter.getRouteName() === 'template-container') {
@@ -151,8 +154,8 @@ BlazeComponent.extendComponent({
       }
       const currUser = ReactiveCache.getCurrentUser();
 
-      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]});
@@ -162,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]});
@@ -199,15 +202,12 @@ BlazeComponent.extendComponent({
   },
 
   boardMembers(boardId) {
-    let boardMembers = [];
     /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
     const lists = ReactiveCache.getBoard(boardId)
-    let members = lists.members
-    members.forEach(member => {
-      boardMembers.push(member.userId);
-    });
-    */
+    const boardMembers = lists?.members.map(member => member.userId);
     return boardMembers;
+    */
+    return [];
   },
 
   isStarred() {
@@ -242,34 +242,40 @@ BlazeComponent.extendComponent({
           evt.preventDefault();
         },
         'click .js-clone-board'(evt) {
-          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();
+          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;

client/components/boards/originalPositionsView.css

@@ -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;
+  }
+}

client/components/boards/originalPositionsView.html

@@ -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>

client/components/boards/originalPositionsView.js

@@ -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;

client/components/cards/attachments.css

@@ -106,6 +106,142 @@
   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;
@@ -200,3 +336,36 @@
     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;
+}

client/components/cards/attachments.jade

@@ -34,10 +34,10 @@ template(name="attachmentViewer")
   #viewer-overlay.hidden
     #viewer-top-bar
       span#attachment-name
-      a#viewer-close.fa.fa-times-thin
+      a#viewer-close ❌
 
     #viewer-container
-      i.fa.fa-chevron-left.attachment-arrow#prev-attachment
+      | ◀️
       #viewer-content
         img#image-viewer.hidden
         video#video-viewer.hidden(controls="true")
@@ -45,18 +45,19 @@ template(name="attachmentViewer")
         object#pdf-viewer.hidden(type="application/pdf")
           span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
         object#txt-viewer.hidden(type="text/plain")
-      i.fa.fa-chevron-right.attachment-arrow#next-attachment
+      | ▶️
 
 template(name="attachmentGallery")
 
   .attachment-gallery
 
-    a.attachment-item.add-attachment.js-add-attachment
-      i.fa.fa-plus.icon
+    if canModifyCard
+      a.attachment-item.add-attachment.js-add-attachment
+        | ➕
 
     each attachments
 
-      .attachment-item
+      .attachment-item(class="{{#if isAttachmentMigrating _id}}migrating{{/if}}")
         .attachment-thumbnail-container.open-preview(data-attachment-id="{{_id}}" data-card-id="{{ meta.cardId }}")
           if link
             if(isImage)
@@ -85,25 +86,32 @@ template(name="attachmentGallery")
                 = name
               span.file-size ({{fileSize size}})
             .attachment-actions
-              a.js-download(href="{{link}}?download=true", download="{{name}}")
-                i.fa.fa-download.icon(title="{{_ 'download'}}")
+              a.js-download(href="{{link}}?download=true", download="{{name}}", title="{{_ 'download'}}")
+                | ⬇️
               if currentUser.isBoardMember
                 unless currentUser.isCommentOnly
                   unless currentUser.isWorker
-                    a.js-rename
-                      i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}")
-                    a.js-confirm-delete
-                      i.fa.fa-trash.icon(title="{{_ 'delete'}}")
-                    a.fa.fa-navicon.icon.js-open-attachment-menu(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")
+                    a.js-rename(title="{{_ 'rename'}}")
+                      | ✏️
+                    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-book
-          i.fa.fa-picture-o
+          | 📖
+          | 🖼️
           if isCover
             | {{_ 'remove-cover'}}
           else
@@ -111,29 +119,27 @@ template(name="attachmentActionsPopup")
       if currentUser.isBoardAdmin
         if isImage
           a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
-            i.fa.fa-picture-o
+            | 🖼️
             if isBackgroundImage
               | {{_ 'remove-background-image'}}
             else
               | {{_ 'add-background-image'}}
-        p.attachment-storage
-          | {{versions.original.storage}}
 
         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")

client/components/cards/attachments.js

@@ -1,6 +1,9 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { ObjectID } from 'bson';
 import DOMPurify from 'dompurify';
+import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
+import uploadProgressManager from '../../lib/uploadProgressManager';
+import { attachmentMigrationManager } from '/client/lib/attachmentMigrationManager';
 
 const filesize = require('filesize');
 const prettyMilliseconds = require('pretty-ms');
@@ -39,7 +42,7 @@ Template.attachmentGallery.events({
   'click .js-rename': Popup.open('attachmentRename'),
   'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
       Attachments.remove(this._id);
-      Popup.back(2);
+      Popup.back();
   }),
 });
 
@@ -268,7 +271,7 @@ Template.attachmentGallery.helpers({
     return ret;
   },
   sanitize(value) {
-    return DOMPurify.sanitize(value);
+    return sanitizeHTML(value);
   },
 });
 
@@ -296,44 +299,13 @@ Template.cardAttachmentsPopup.events({
     const files = event.currentTarget.files;
     if (files) {
       let uploads = [];
-      for (const file of files) {
-        const fileId = new ObjectID().toString();
-        let fileName = DOMPurify.sanitize(file.name);
+      const uploaders = handleFileUpload(card, files);
 
-        // If sanitized filename is not same as original filename,
-        // it could be XSS that is already fixed with sanitize,
-        // or just normal mistake, so it is not a problem.
-        // That is why here is no warning.
-        if (fileName !== file.name) {
-          // If filename is empty, only in that case add some filename
-          if (fileName.length === 0) {
-            fileName = 'Empty-filename-after-sanitize.txt';
-          }
-        }
-
-        const config = {
-          file: file,
-          fileId: fileId,
-          fileName: fileName,
-          meta: Utils.getCommonAttachmentMetaFrom(card),
-          chunkSize: 'dynamic',
-        };
-        config.meta.fileId = fileId;
-        const uploader = Attachments.insert(
-          config,
-          false,
-        );
+      uploaders.forEach(uploader => {
         uploader.on('start', function() {
           uploads.push(this);
           templateInstance.uploads.set(uploads);
         });
-        uploader.on('uploaded', (error, fileRef) => {
-          if (!error) {
-            if (fileRef.isImage) {
-              card.setCover(fileRef._id);
-            }
-          }
-        });
         uploader.on('end', (error, fileRef) => {
           uploads = uploads.filter(_upload => _upload.config.fileId != fileRef._id);
           templateInstance.uploads.set(uploads);
@@ -341,8 +313,7 @@ Template.cardAttachmentsPopup.events({
             Popup.back();
           }
         });
-        uploader.start();
-      }
+      });
     }
   },
   'click .js-computer-upload'(event, templateInstance) {
@@ -356,6 +327,105 @@ const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
 const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
 let pastedResults = null;
 
+// Shared upload logic for drag-and-drop functionality
+export function handleFileUpload(card, files) {
+  if (!files || files.length === 0) {
+    return [];
+  }
+
+  // Check if board allows attachments
+  const board = card.board();
+  if (!board || !board.allowsAttachments) {
+    if (process.env.DEBUG === 'true') {
+      console.warn('Attachments not allowed on this board');
+    }
+    return [];
+  }
+
+  // Check if user can modify the card
+  if (!Utils.canModifyCard()) {
+    if (process.env.DEBUG === 'true') {
+      console.warn('User does not have permission to modify this card');
+    }
+    return [];
+  }
+
+  const uploads = [];
+
+  for (const file of files) {
+    // Basic file validation
+    if (!file || !file.name) {
+      if (process.env.DEBUG === 'true') {
+        console.warn('Invalid file object');
+      }
+      continue;
+    }
+
+    const fileId = new ObjectID().toString();
+    let fileName = sanitizeText(file.name);
+
+    // If sanitized filename is not same as original filename,
+    // it could be XSS that is already fixed with sanitize,
+    // or just normal mistake, so it is not a problem.
+    // That is why here is no warning.
+    if (fileName !== file.name) {
+      // If filename is empty, only in that case add some filename
+      if (fileName.length === 0) {
+        fileName = 'Empty-filename-after-sanitize.txt';
+      }
+    }
+
+    const config = {
+      file: file,
+      fileId: fileId,
+      fileName: fileName,
+      meta: Utils.getCommonAttachmentMetaFrom(card),
+      chunkSize: 'dynamic',
+    };
+    config.meta.fileId = fileId;
+
+    try {
+      const uploader = Attachments.insert(
+        config,
+        false,
+      );
+
+      // Add to progress manager for tracking
+      const uploadId = uploadProgressManager.addUpload(card._id, uploader, file);
+
+      uploader.on('uploaded', (error, fileRef) => {
+        if (!error) {
+          if (fileRef.isImage) {
+            card.setCover(fileRef._id);
+            if (process.env.DEBUG === 'true') {
+              console.log(`Set cover image for card ${card._id}: ${fileRef.name}`);
+            }
+          }
+        } else {
+          if (process.env.DEBUG === 'true') {
+            console.error('Upload error:', error);
+          }
+        }
+      });
+
+      uploader.on('error', (error) => {
+        if (process.env.DEBUG === 'true') {
+          console.error('Upload error:', error);
+        }
+      });
+
+      uploads.push(uploader);
+      uploader.start();
+    } catch (error) {
+      if (process.env.DEBUG === 'true') {
+        console.error('Failed to create uploader:', error);
+      }
+    }
+  }
+
+  return uploads;
+}
+
 Template.previewClipboardImagePopup.onRendered(() => {
   // we can paste image from clipboard
   const handle = results => {
@@ -498,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();
+});

client/components/cards/cardCustomFields.jade

@@ -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

client/components/cards/cardCustomFields.js

@@ -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'
 
@@ -134,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() {
@@ -163,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';
     }
@@ -172,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() {
@@ -191,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) {

client/components/cards/cardDate.css

@@ -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;

client/components/cards/cardDate.jade

@@ -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'}}

client/components/cards/cardDate.js

@@ -1,17 +1,38 @@
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
+import { 
+  formatDateTime, 
+  formatDate, 
+  formatDateByUserPreference,
+  formatTime, 
+  getISOWeek, 
+  isValidDate, 
+  isBefore, 
+  isAfter, 
+  isSame, 
+  add, 
+  subtract, 
+  startOf, 
+  endOf, 
+  format, 
+  parseDate, 
+  now, 
+  createDate, 
+  fromNow, 
+  calendar,
+  diff
+} from '/imports/lib/dateUtils';
 
 // editCardReceivedDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
+    super.onCreated(formatDateTime(now()));
     this.data().getReceived() &&
-      this.date.set(moment(this.data().getReceived()));
+      this.date.set(new Date(this.data().getReceived()));
   }
 
   _storeDate(date) {
-    this.card.setReceived(date);
+    this.card.setReceived(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -22,22 +43,17 @@ import { DatePicker } from '/client/lib/datepicker';
 // editCardStartDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getStart() && this.date.set(moment(this.data().getStart()));
+    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() {
@@ -49,18 +65,16 @@ import { DatePicker } from '/client/lib/datepicker';
 (class extends DatePicker {
   onCreated() {
     super.onCreated('1970-01-01 17:00:00');
-    this.data().getDue() && this.date.set(moment(this.data().getDue()));
+    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() {
@@ -71,19 +85,17 @@ import { DatePicker } from '/client/lib/datepicker';
 // editCardEndDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getEnd() && this.date.set(moment(this.data().getEnd()));
+    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() {
@@ -100,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() {
@@ -129,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()));
     });
   }
 
@@ -141,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';
@@ -151,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() {
@@ -169,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()));
     });
   }
 
@@ -180,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() {
@@ -204,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()));
     });
   }
 
@@ -214,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() {
@@ -240,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()));
     });
   }
 
@@ -249,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() {
@@ -275,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() {
@@ -293,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() {
@@ -307,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'));
 
@@ -341,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() {
@@ -349,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() {
@@ -368,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() {
@@ -376,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() {

client/components/cards/cardDetails.css

@@ -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;
+  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;
@@ -272,7 +300,7 @@
     box-sizing: border-box;
     top: 97px;
     left: 0px;
-    height: calc(100% - 20px);
+    height: calc(100% - 100px);
     width: calc(100% - 20px);
     float: left;
   }
@@ -596,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;
+}

client/components/cards/cardDetails.jade

@@ -5,21 +5,26 @@ template(name="cardDetails")
 
   +attachmentViewer
 
-  section.card-details.js-card-details(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}'): .card-details-canvas
+  section.card-details.js-card-details.nodragscroll(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}' class='{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}'): .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'}}"
@@ -28,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'}}"
@@ -46,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
             |   >  
@@ -64,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
@@ -80,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
@@ -96,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
@@ -109,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
@@ -122,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
@@ -135,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
@@ -143,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)
@@ -153,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)
@@ -161,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
@@ -204,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
@@ -227,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")
@@ -240,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
@@ -266,7 +304,7 @@ 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
 
@@ -277,14 +315,14 @@ template(name="cardDetails")
               else
                 input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton")
               label.toggle-label(for="toggleCustomFieldsGridButton")
-          a.fa.fa-plus.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
+          a.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
 
       if getVoteQuestion
         hr
         .vote-title
           div.flex
             h3
-              i.fa.fa-thumbs-up
+              | 👍
               | {{_ 'vote-question'}}
             if getVoteEnd
               +voteEndDate
@@ -302,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
@@ -314,7 +352,7 @@ template(name="cardDetails")
         .poker-title
           div.flex
             h3
-              i.fa.fa-thumbs-up
+              | 👍
               | {{_ 'poker-question'}}
             if getPokerEnd
               +pokerEndDate
@@ -329,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'}}
@@ -504,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")
 
@@ -514,21 +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.right(title="{{_ 'edit'}}" value=title)
-                  i.fa.fa-pencil-square-o
-                if getDescription
-                  +viewer
-                    = getDescription
+                a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
+                  | ✏️
+                a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
+                  if getDescription
+                    +viewer
+                      = getDescription
                 if (hasUnsavedValue 'cardDescription' _id)
                   p.quiet
                     | {{_ 'unsaved-description'}}
@@ -547,14 +586,14 @@ template(name="cardDetails")
         .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'}}
           if Meteor.settings.public.attachmentsUploadMaxSize
             | {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}}
@@ -567,25 +606,34 @@ template(name="cardDetails")
             +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
 
       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
@@ -596,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
@@ -641,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'}}
@@ -658,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")
@@ -773,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'}}")
@@ -787,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}}")
@@ -797,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
@@ -821,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'}}
@@ -863,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'}}
 
@@ -897,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
 
@@ -943,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
 

client/components/cards/cardDetails.js

@@ -1,7 +1,26 @@
 import { ReactiveCache } from '/imports/reactiveCache';
-import moment from 'moment/min/moment-with-locales';
 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';
@@ -12,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;
@@ -63,10 +84,6 @@ BlazeComponent.extendComponent({
     return card.findWatcher(Meteor.userId());
   },
 
-  hiddenSystemMessages() {
-    return ReactiveCache.getCurrentUser().hasHiddenSystemMessages();
-  },
-
   customFieldsGrid() {
     return ReactiveCache.getCurrentUser().hasCustomFieldsGrid();
   },
@@ -118,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 ?
@@ -284,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();
@@ -377,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');
@@ -449,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);
           }
         },
@@ -477,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);
+            }
+          }
+        },
       },
     ];
   },
@@ -486,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(() => {
@@ -588,6 +688,10 @@ Template.cardDetailsActionsPopup.helpers({
   isBoardAdmin() {
     return ReactiveCache.getCurrentUser().isBoardAdmin();
   },
+
+  showListOnMinicard() {
+    return this.showListOnMinicard;
+  },
 });
 
 Template.cardDetailsActionsPopup.events({
@@ -633,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({
@@ -846,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();
         },
       },
     ];
@@ -1025,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 [
@@ -1037,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()) {
@@ -1056,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());
@@ -1256,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()));
   }
 
   /*
@@ -1276,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() {
@@ -1288,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}`;
 
@@ -1299,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
@@ -1312,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());

client/components/cards/cardTime.jade

@@ -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}}

client/components/cards/checklists.css

@@ -8,20 +8,6 @@ textarea.js-edit-checklist-item {
   resize: none;
   height: 34px;
 }
-.card-details .text-show-at-minicard {
-  width: 350px;
-  text-align: left;
-}
-.minicard .text-show-at-minicard {
-  display: none;
-}
-.text-some-space {
-  width: 20px;
-}
-.text-hide-checked-items {
-  width: 400px;
-  text-align: left;
-}
 .delete-text,
 .js-delete-checklist-item,
 .js-convert-checklist-item-to-card {
@@ -40,8 +26,6 @@ textarea.js-edit-checklist-item {
   display: flex;
   justify-content: space-between;
 }
-
-
 .checklist-progress-bar-container {
   display: flex;
   flex-direction: row;
@@ -61,6 +45,9 @@ textarea.js-edit-checklist-item {
   border-radius: 16px;
   height: 100%;
 }
+.checklist-title {
+  padding: 10px;
+}
 .checklist-title .checkbox {
   float: left;
   width: 30px;

client/components/cards/checklists.jade

@@ -1,35 +1,44 @@
 template(name="checklists")
   .checklists-title
     h3.card-details-item-title
-      i.fa.fa-check
+      | ✅
       | {{_ 'checklists'}}
       if canModifyCard
         +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
           +addChecklistItemForm
         else
           a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
-            i.fa.fa-plus
+            | ➕
+    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
@@ -47,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'
@@ -75,43 +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)
+        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true position="top")
       else
         a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
-          i.fa.fa-plus
+          | ➕
   .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
@@ -122,38 +136,35 @@ template(name='checklistItemDetail')
           = item.title
 
 template(name="checklistActionsPopup")
-  if currentUser.isBoardMember
-    span.text-show-at-minicard
-      | {{_ 'show-at-minicard'}}
-    .material-toggle-switch(title="{{_ 'show-checklist-at-minicard'}}")
-      if showAtMinicard
-        input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicardButton" checked="checked")
-      else
-        input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicardButton")
-      label.toggle-label(for="toggleShowChecklistAtMinicardButton")
-    hr
-    span.text-hide-checked-items
-      | {{_ 'hide-checked-items'}}
-    .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
-      //span.toggle-switch-title
-      //.check-square-icon.i.fa.fa-check-square-o
-      if hideCheckedItems
-        input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
-      else
-        input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
-      label.toggle-label(for="toggleHideCheckedItemsButton")
-    hr
   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

client/components/cards/checklists.js

@@ -119,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;
 
@@ -127,22 +128,28 @@ BlazeComponent.extendComponent({
       if (newlineBecomesNewChecklistItem.checked) {
         checklistItems = title.split('\n').map(_value => _value.trim());
         if (this.currentData().position === 'top') {
-          checklistItems = checklistItems.reverse();
+          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) {
-        let sortIndex;
-        if (this.currentData().position === 'top') {
-          sortIndex = Utils.calculateIndexData(null, checklist.firstItem()).base;
-        } else {
-          sortIndex = Utils.calculateIndexData(checklist.lastItem(), null).base;
-        }
         ChecklistItems.insert({
           title: checklistItem,
           checklistId: checklist._id,
           cardId: checklist.cardId,
           sort: sortIndex,
         });
+        sortIndex += addIndex;
       }
     }
     // We keep the form opened, empty it.
@@ -201,12 +208,8 @@ BlazeComponent.extendComponent({
   },
 
   events() {
-    const events = {
-    };
-
     return [
       {
-        ...events,
         'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
         'submit .js-add-checklist': this.addChecklist,
         'submit .js-edit-checklist-title': this.editChecklist,
@@ -217,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,
       },
     ];
@@ -271,16 +278,6 @@ Template.checklists.helpers({
     const ret = card.checklists();
     return ret;
   },
-  showAtMinicard() {
-    const card = ReactiveCache.getCard(this.cardId);
-    const ret = card.checklists({'showAtMinicard':1});
-    return ret;
-  },
-  hideCheckedItems() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    if (currentUser) return currentUser.hasHideCheckedItems();
-    return false;
-  },
 });
 
 BlazeComponent.extendComponent({
@@ -303,26 +300,9 @@ BlazeComponent.extendComponent({
 }).register('addChecklistItemForm');
 
 BlazeComponent.extendComponent({
-  toggleItem() {
-    const checklist = this.currentData().checklist;
-    const item = this.currentData().item;
-    if (checklist && item && item._id) {
-      item.toggleItem();
-    }
-  },
   events() {
     return [
       {
-        'click .js-checklist-item .check-box-container': this.toggleItem,
-        'click #toggleShowChecklistAtMinicardButton'() {
-          const checklist = this.checklist;
-          if (checklist && checklist._id) {
-            Meteor.call('toggleShowChecklistAtMinicard', checklist._id);
-          }
-        },
-        'click #toggleHideCheckedItemsButton'() {
-          Meteor.call('toggleHideCheckedItems');
-        },
         'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
           Popup.back(2);
           const checklist = this.checklist;
@@ -332,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();
+        },
       }
     ]
   }
@@ -357,11 +347,6 @@ BlazeComponent.extendComponent({
 }).register('editChecklistItemForm');
 
 Template.checklistItemDetail.helpers({
-  hideCheckedItems() {
-    const user = ReactiveCache.getCurrentUser();
-    if (user) return user.hasHideCheckedItems();
-    return false;
-  },
 });
 
 BlazeComponent.extendComponent({

client/components/cards/labels.css

@@ -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;

client/components/cards/labels.jade

@@ -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'}}

client/components/cards/labels.js

@@ -125,8 +125,19 @@ Template.createLabelPopup.events({
       .$('#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();
   },
 });
@@ -144,8 +155,19 @@ Template.editLabelPopup.events({
       .$('#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();
   },
 });

client/components/cards/minicard.css

@@ -1,22 +1,13 @@
-.minicard .checklists-title,
-.minicard .add-checklist,
-.minicard .add-checklist-item,
-.minicard .checklist-details-menu {
-  display: none;
-}
-.minicard .checklist-progress-bar-container {
-  width: 190px; /* TODO: Add adjustable width https://github.com/wekan/wekan/pull/4964 */
-}
 .minicard-wrapper {
   cursor: pointer;
   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;
@@ -25,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;
@@ -54,12 +45,14 @@
 }
 .minicard-details-menu-with-handle {
   float: right;
-  font-size: 18px;
-  padding-right: 30px;
+  font-size: clamp(14px, 3vw, 18px);
+  padding-right: 4vw;
+  padding-left: 0.7vw;
 }
 .minicard-details-menu {
   float: right;
-  font-size: 18px;
+  font-size: clamp(14px, 3vw, 18px);
+  padding-left: 0.7vw;
 }
 @media print {
   .minicard-details-menu,
@@ -70,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;
 }
@@ -79,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,
@@ -97,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;
@@ -126,30 +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: 4px;
+  margin-right: 0.5vw;
 }
-/*
-.minicard .checklists-title,
-.minicard .add-checklist,
-.minicard .add-checklist-item,
-.minicard .checklist-details-menu {
-  display: none;
-}
-*/
 .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 {
@@ -158,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 {
@@ -173,7 +158,6 @@
   .minicard .minicard-title .viewer {
     display: block;
     word-wrap: break-word;
-    max-width: 230px;
   }
 }
 .minicard .dates {
@@ -182,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 {
@@ -194,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 {
@@ -217,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;
@@ -264,13 +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;
@@ -278,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 {
@@ -289,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 {
@@ -596,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;
+}

client/components/cards/minicard.jade

@@ -1,21 +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'}}")
+        | ↕️
     .dates
       if getReceived
-        unless getStart
-          unless getDue
-            unless getEnd
-              .date
-                +minicardReceivedDate
+        .date
+          +minicardReceivedDate
       if getStart
         .date
           +minicardStartDate
@@ -30,6 +25,27 @@ template(name="minicard")
     if cover
       if currentBoard.allowsCoverAttachmentOnMinicard
         .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")
+
+    // Upload progress indicator for drag-and-drop uploads
+    if hasActiveUploads
+      .minicard-upload-progress
+        .upload-progress-header
+          | 📤
+          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
@@ -39,23 +55,17 @@ template(name="minicard")
           | {{ parentCardName }}
       if isLinkedBoard
         a.js-linked-link
-          span.linked-icon.fa.fa-folder
+          span.linked-icon | 📁
       else if isLinkedCard
         a.js-linked-link
-          span.linked-icon.fa.fa-id-card
+          span.linked-icon | 🃏
       if getArchived
-        span.linked-icon.linked-archived.fa.fa-archive
+        span.linked-icon.linked-archived | 📦
       +viewer
         if currentBoard.allowsCardNumber
           span.card-number
             | ##{getCardNumber}
         = getTitle
-      if $eq 'subtext-with-full-path' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentString ' > ' }}
-      if $eq 'subtext-with-parent' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentCardName }}
     if labels
       .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
         each labels
@@ -111,12 +121,6 @@ template(name="minicard")
                     +viewer
                       = trueValue
 
-    .card-checklist-attachmentGalleries
-      .card-checklist-attachmentGallery.card-checklists
-        if currentBoard.allowsChecklists
-          //hr
-          //+checklists(cardId=_id showAtMinicard=true)
-
     if showAssignee
       if getAssignees
         .minicard-assignees.js-minicard-assignees
@@ -134,10 +138,10 @@ template(name="minicard")
         +userAvatar(userId=this.userId noRemove=true)
 
     .badges
-      unless currentUser.isNoComments
+      if canModifyCard
         if comments.length
           .badge(title="{{_ 'card-comments-title' comments.length }}")
-            span.badge-icon.fa.fa-comment-o.badge-comment.badge-text
+            span.badge-icon.badge-comment.badge-text | 💬
               = ' '
               = comments.length
             //span.badge-comment.badge-text
@@ -145,42 +149,52 @@ template(name="minicard")
       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
         if currentBoard.allowsBadgeAttachmentOnMinicard
           .badge
-            span.badge-icon.fa.fa-paperclip
+            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
         if currentBoard.allowsCardSortingByNumberOnMinicard
           .badge
-            span.badge-icon.fa.fa-sort
+            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")
@@ -189,45 +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
-          i.fa.fa-arrow-right
-          i.fa.fa-archive
+          | ➡️
+          | 📦
           | {{_ 'archive-card'}}
       hr
       li
         a.js-move-card-to-top
-          i.fa.fa-arrow-up
+          | ⬆️
           | {{_ 'moveCardToTop-title'}}
       li
         a.js-move-card-to-bottom
-          i.fa.fa-arrow-down
+          | ⬇️
           | {{_ 'moveCardToBottom-title'}}
       hr
       li
         a.js-add-labels
-          i.fa.fa-tags
+          | 🏷️
           | {{_ 'card-edit-labels'}}
       li
         a.js-due-date
-          i.fa.fa-sign-in
+          | 📥
           | {{_ 'editCardDueDatePopup-title'}}
       li
         a.js-set-card-color
-          i.fa.fa-paint-brush
+          | 🎨
           | {{_ 'setCardColorPopup-title'}}
       li
         a.js-link
-          i.fa.fa-link
+          | 🔗
           | {{_ 'link-card'}}
+      li
+      a.js-toggle-watch-card
+        if isWatching
+          | 👁️
+          |  {{_ 'unwatch'}}
+        else
+          | 👁️-slash
+          |  {{_ 'watch'}}
+

client/components/cards/minicard.js

@@ -1,6 +1,8 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
-import { CustomFieldStringTemplate } from '/client/lib/customFields'
+import { CustomFieldStringTemplate } from '/client/lib/customFields';
+import { handleFileUpload } from './attachments';
+import uploadProgressManager from '../../lib/uploadProgressManager';
 
 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
@@ -42,14 +44,14 @@ BlazeComponent.extendComponent({
     const board = this.data().board();
     let ret = false;
     if (board) {
-      ret =
-        board.allowsCreatorOnMinicard === null ||
-        board.allowsCreatorOnMinicard === undefined ||
-        board.allowsCreatorOnMinicard
-      ;
+      ret = board.allowsCreatorOnMinicard ?? false;
     }
     return ret;
   },
+  isWatching() {
+    const card = this.currentData();
+    return card.findWatcher(Meteor.userId());
+  },
 
   showMembers() {
     // cache "board" to reduce the mini-mongodb access
@@ -92,11 +94,6 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
-        'click .minicard-checklists'() {
-          // Prevents clicking checklist at minicard from opening card details,
-          // while still allowing checking checlist items.
-          event.preventDefault();
-        },
         'click .js-linked-link'() {
           if (this.data().isLinkedCard()) Utils.goCardId(this.data().linkedId);
           else if (this.data().isLinkedBoard())
@@ -112,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);
+            }
+          }
+        },
       }
     ];
   },
@@ -134,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({
@@ -187,4 +266,11 @@ Template.minicardDetailsActionsPopup.events({
     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();
+    });
+  },
 });

client/components/cards/resultCard.jade

@@ -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
+          | 📦

client/components/cards/subtasks.jade

@@ -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,7 +26,7 @@ template(name="subtaskDetail")
       .subtask-title
         span
         if canModifyCard
-          a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
+          a.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
         if canModifyCard
           h2.title.js-open-inlined-form.is-editable
             +viewer
@@ -40,7 +40,7 @@ template(name="addSubtaskItemForm")
   textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editSubtaskItemForm")
   textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
@@ -50,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
@@ -68,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')
@@ -92,10 +92,10 @@ template(name="subtaskActionsPopup")
   ul.pop-over-list
     li
       a.js-view-subtask(title="{{ subtask.title }}")
-        i.fa.fa-eye
+        | 👁️
         | {{_ "view-it"}}
       if currentUser.isBoardAdmin
         a.js-delete-subtask.delete-subtask
-          i.fa.fa-trash
+          | 🗑️
           | {{_ "delete"}} ...
 

client/components/common/originalPosition.css

@@ -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;
+  }
+}

client/components/common/originalPosition.html

@@ -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>

client/components/common/originalPosition.js

@@ -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;

client/components/forms/datepicker.jade

@@ -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'}}

client/components/forms/forms.css

@@ -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;

client/components/import/import.css

@@ -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;

client/components/lists/list.css

@@ -7,18 +7,238 @@
   border-left: 1px solid #ccc;
   padding: 0;
   float: left;
-  min-width: 100px; /* TODO(mark-i-m): hardcoded? */
-  /*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 {
-  min-width: 20px;
-  margin-left: 5px;
   border-left: none;
+  flex: none;
 }
 .card-details + .list {
   border-left: none;
@@ -35,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;
@@ -44,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 {
@@ -72,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;
@@ -99,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;
 }
@@ -182,19 +640,147 @@
 #js-list-width-edit .list-width-error {
   display: none;
 }
-@media screen and (max-width: 800px) {
+/* 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;
@@ -203,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 {
@@ -213,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;
@@ -235,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;
@@ -263,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;
@@ -281,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;
@@ -297,7 +1032,6 @@
 }
 .list-header-white {
   border-bottom: 6px solid #fff;
-  border: 1px solid #eee;
 }
 .list-header-green {
   border-bottom: 6px solid #3cb500;
@@ -330,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;

client/components/lists/list.jade

@@ -1,9 +1,11 @@
 template(name='list')
   .list.js-list(id="js-list-{{_id}}"
-                style="width:{{listWidth}}px;")
+                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

client/components/lists/list.js

@@ -24,6 +24,9 @@ BlazeComponent.extendComponent({
   onRendered() {
     const boardComponent = this.parentComponent().parentComponent();
 
+    // Initialize list resize functionality immediately
+    this.initializeListResize();
+
     const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
     const $cards = this.$('.js-minicards');
 
@@ -147,17 +150,13 @@ BlazeComponent.extendComponent({
     });
 
     this.autorun(() => {
-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $cards.sortable({
-          handle: '.handle',
-        });
-      } else {
-        $cards.sortable({
-          handle: '.minicard',
-        });
-      }
-
       if ($cards.data('uiSortable') || $cards.data('sortable')) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+          $cards.sortable('option', 'handle', '.handle');
+        } else {
+          $cards.sortable('option', 'handle', '.minicard');
+        }
+
         $cards.sortable(
           'option',
           'disabled',
@@ -196,9 +195,260 @@ BlazeComponent.extendComponent({
   },
 
   listWidth() {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
     const list = Template.currentData();
-    return user.getListWidth(list.boardId, list._id);
+    if (!list) return 270; // Return default width if list is not available
+    
+    if (user) {
+      // For logged-in users, get from user profile
+      return user.getListWidthFromStorage(list.boardId, list._id);
+    } else {
+      // For non-logged-in users, get from localStorage
+      try {
+        const stored = localStorage.getItem('wekan-list-widths');
+        if (stored) {
+          const widths = JSON.parse(stored);
+          if (widths[list.boardId] && widths[list.boardId][list._id]) {
+            return widths[list.boardId][list._id];
+          }
+        }
+      } catch (e) {
+        console.warn('Error reading list width from localStorage:', e);
+      }
+      return 270; // Return default width if not found
+    }
+  },
+
+  listConstraint() {
+    const user = ReactiveCache.getCurrentUser();
+    const list = Template.currentData();
+    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');
 

client/components/lists/listBody.jade

@@ -1,37 +1,38 @@
 template(name="listBody")
-  .list-body
-    .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
-              = 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,7 @@ 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

client/components/lists/listBody.js

@@ -231,6 +231,11 @@ BlazeComponent.extendComponent({
     );
   },
 
+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
+
   cardDetailsPopup(event) {
     if (!Popup.isOpen()) {
       Popup.open("cardDetails")(event);
@@ -309,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)';
@@ -408,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;
         },
+        */
       },
     );
   },
@@ -463,6 +472,14 @@ BlazeComponent.extendComponent({
     if (!this.selectedBoardId.get()) {
       return [];
     }
+    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
+    if (!board) {
+      return [];
+    }
+    
+    // Ensure default swimlane exists
+    board.getDefaultSwimline();
+    
     const swimlanes = ReactiveCache.getSwimlanes(
     {
       boardId: this.selectedBoardId.get()

client/components/lists/listHeader.jade

@@ -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,107 +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
-         | (
-         span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.length}}
-         |/#{wipLimit.value})
-
-      if showCardsCountForList cards.length
-        span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}}
-
+          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
+           | (
+           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
+             | (
+             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
-        i.fa.fa-arrows-h
+        | ↔️
         |  {{_ '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.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")
@@ -124,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' }}
@@ -144,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")
@@ -166,8 +194,14 @@ template(name="setListWidthPopup")
     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
@@ -180,6 +214,6 @@ template(name="setListColorPopup")
       // 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'}}

client/components/lists/listHeader.js

@@ -1,5 +1,6 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import dragscroll from '@wekanteam/dragscroll';
 
 let listsColors;
 Meteor.startup(() => {
@@ -31,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]
@@ -104,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(
@@ -140,7 +156,7 @@ Template.listActionPopup.helpers({
 
   isWatching() {
     return this.findWatcher(Meteor.userId());
-  },
+  }
 });
 
 Template.listActionPopup.events({
@@ -332,14 +348,20 @@ BlazeComponent.extendComponent({
         .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) {
+    if (width < 100 || !width || constraint < 100 || !constraint) {
       Template.instance()
         .$('.list-width-error')
         .click();
     } else {
-      Meteor.call('applyListWidth', board, list._id, width);
+      Meteor.call('applyListWidth', board, list._id, width, constraint);
       Popup.back();
     }
   },
@@ -347,12 +369,28 @@ BlazeComponent.extendComponent({
   listWidthValue() {
     const list = Template.currentData();
     const board = list.boardId;
-    return Meteor.user().getListWidth(board, list._id);
+    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'),
       },

client/components/main/accessibility.css

@@ -0,0 +1,99 @@
+.my-cards-board-wrapper {
+  border-radius: 0 0 0.5vw 0.5vw;
+  min-width: min(400px, 52vw);
+  margin-bottom: 2.5vh;
+  margin-right: auto;
+  margin-left: auto;
+  border-width: 0.3vw;
+  border-style: solid;
+  border-color: #a2a2a2;
+}
+.my-cards-board-title {
+  font-size: clamp(1.2rem, 3vw, 1.6rem);
+  font-weight: bold;
+  padding: 0.7vh 0.7vw;
+  background-color: #808080;
+  color: #fff;
+}
+.my-cards-swimlane-title {
+  font-size: clamp(1rem, 2.5vw, 1.3rem);
+  font-weight: bold;
+  padding: 0.7vh 0.7vw;
+  padding-bottom: 0.5vh;
+  margin-top: 0;
+  margin-bottom: 0.7vh;
+  text-align: center;
+}
+.swimlane-default-color {
+  background-color: #d3d3d3;
+}
+.my-cards-list-title {
+  font-weight: bold;
+  font-size: clamp(1rem, 2.5vw, 1.3rem);
+  text-align: center;
+  margin-bottom: 0.9vh;
+}
+.my-cards-list-wrapper {
+  margin: 1.3vh 1.3vw;
+  border-radius: 0.7vw;
+  display: inline-grid;
+  min-width: min(250px, 32vw);
+  max-width: min(350px, 45vw);
+}
+.my-cards-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 1.3vh;
+}
+.my-cards-dueat-list-wrapper {
+  max-width: min(500px, 65vw);
+  margin-right: auto;
+  margin-left: auto;
+}
+.my-cards-board-table thead {
+  border-bottom: 3px solid #4d4d4d;
+  background-color: transparent;
+}
+.my-cards-board-table th,
+.my-cards-board-table td {
+  border: 0;
+}
+.my-cards-board-table tr {
+  border-bottom: 2px solid #a2a2a2;
+}
+.my-cards-card-title-table {
+  font-weight: bold;
+  padding-left: 2px;
+  max-width: 243px;
+}
+.my-cards-board-badge {
+  width: 36px;
+  height: 24px;
+  float: left;
+  border-radius: 5px;
+  margin-right: 5px;
+}
+
+/* Accessibility page styles */
+.accessibility-page {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.accessibility-page h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #4d4d4d;
+}
+
+.accessibility-page-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+}
+
+.accessibility-page-content p {
+  margin-bottom: 16px;
+  line-height: 1.6;
+}

client/components/main/accessibility.jade

@@ -0,0 +1,18 @@
+template(name="accessibilityHeaderBar")
+  if currentUser
+    h1
+      if isAccessibilityEnabled
+        = accessibilityTitle
+      else
+        | {{_ 'accessibility'}}
+
+template(name="accessibility")
+  if currentUser
+    .accessibility-page
+      if isAccessibilityEnabled
+        .accessibility-page-content
+          +viewer
+            | {{accessibilityContent}}
+      else
+        .accessibility-page-content
+          | {{_ 'accessibility-info-not-added-yet'}}

client/components/main/accessibility.js

@@ -0,0 +1,38 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { TAPi18n } from '/imports/i18n';
+
+// Shared helpers for both accessibility templates
+const accessibilityHelpers = {
+  accessibilityTitle() {
+    const setting = AccessibilitySettings.findOne({});
+    return setting && setting.title ? setting.title : TAPi18n.__('accessibility-title');
+  },
+  accessibilityContent() {
+    const setting = AccessibilitySettings.findOne({});
+    return setting && setting.body ? setting.body : TAPi18n.__('accessibility-content');
+  },
+  isAccessibilityEnabled() {
+    const setting = AccessibilitySettings.findOne({});
+    return setting && setting.enabled;
+  }
+};
+
+// Main accessibility page component
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.loading = new ReactiveVar(false);
+
+    Meteor.subscribe('setting');
+    Meteor.subscribe('accessibilitySettings');
+  },
+  ...accessibilityHelpers
+}).register('accessibility');
+
+// Header bar component
+BlazeComponent.extendComponent({
+  onCreated() {
+    Meteor.subscribe('accessibilitySettings');
+  },
+  ...accessibilityHelpers
+}).register('accessibilityHeaderBar');

client/components/main/bookmarks.jade

@@ -0,0 +1,29 @@
+template(name="bookmarks")
+  .panel
+    h2 {{_ 'bookmarks'}}
+    if currentUser
+      if hasStarredBoards
+        ul
+          each starredBoards
+            li
+              a(href="{{pathFor 'board' id=_id slug=slug}}")= title
+              a.js-toggle-star(title="{{_ 'star-board-short-unstar'}}")
+                | ⭐
+      else
+        p {{_ 'no-starred-boards'}}
+    else
+      p {{_ 'please-sign-in'}}
+
+// Desktop popup
+template(name="bookmarksPopup")
+  ul.pop-over-list
+    if hasStarredBoards
+      each starredBoards
+        li
+          a(href="{{pathFor 'board' id=_id slug=slug}}")
+            | ⭐
+            |  #{title}
+          a.js-toggle-star.right(title="{{_ 'star-board-short-unstar'}}")
+            | ⭐
+    else
+      li {{_ 'no-starred-boards'}}

client/components/main/bookmarks.js

@@ -0,0 +1,55 @@
+Template.bookmarks.helpers({
+  hasStarredBoards() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) return false;
+    const { starredBoards = [] } = user.profile || {};
+    return Array.isArray(starredBoards) && starredBoards.length > 0;
+  },
+  starredBoards() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) return [];
+    const { starredBoards = [] } = user.profile || {};
+    if (!Array.isArray(starredBoards) || starredBoards.length === 0) return [];
+    return Boards.find({ _id: { $in: starredBoards } }, { sort: { sort: 1 } });
+  },
+});
+
+Template.bookmarks.events({
+  'click .js-toggle-star'(e) {
+    e.preventDefault();
+    const boardId = this._id;
+    const user = ReactiveCache.getCurrentUser();
+    if (user && boardId) {
+      user.toggleBoardStar(boardId);
+    }
+  },
+});
+
+Template.bookmarksPopup.helpers({
+  hasStarredBoards() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) return false;
+    const { starredBoards = [] } = user.profile || {};
+    return Array.isArray(starredBoards) && starredBoards.length > 0;
+  },
+  starredBoards() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) return [];
+    const { starredBoards = [] } = user.profile || {};
+    if (!Array.isArray(starredBoards) || starredBoards.length === 0) return [];
+    return Boards.find({ _id: { $in: starredBoards } }, { sort: { sort: 1 } });
+  },
+});
+
+Template.bookmarksPopup.events({
+  'click .js-toggle-star'(e) {
+    e.preventDefault();
+    const boardId = this._id;
+    const user = ReactiveCache.getCurrentUser();
+    if (user && boardId) {
+      user.toggleBoardStar(boardId);
+    }
+  },
+});
+
+

client/components/main/brokenCards.css

@@ -1,15 +1,15 @@
 .broken-cards-card-wrapper {
   margin-top: 0;
-  margin-bottom: 10px;
-  border-width: 3px !important;
+  margin-bottom: 1.3vh;
+  border-width: 0.4vw !important;
   border-color: #808080 !important;
   border-style: solid;
-  border-radius: 5px;
-  padding: 1.5rem;
+  border-radius: 0.7vw;
+  padding: 2vh 2vw;
   background-color: #fff;
 }
 .broken-cards-wrapper {
-  max-width: 500px;
+  max-width: min(500px, 65vw);
   margin-right: auto;
   margin-left: auto;
 }

client/components/main/dueCards.css

@@ -1,5 +1,5 @@
 .due-cards-dueat-list-wrapper {
-  max-width: 500px;
+  max-width: min(500px, 65vw);
   margin-right: auto;
   margin-left: auto;
 }

client/components/main/dueCards.jade

@@ -1,23 +1,23 @@
 template(name="dueCardsHeaderBar")
   if currentUser
     h1
-      i.fa.fa-calendar
+      | 📅
       | {{_ 'dueCards-title'}}
 
     .board-header-btns.left
       a.board-header-btn.js-due-cards-view-change(title="{{_ 'dueCardsViewChange-title'}}")
-        i.fa.fa-caret-down
+        | ▼
         if $eq dueCardsView 'me'
-          i.fa.fa-user
+          | 👤
           | {{_ 'dueCardsViewChange-choice-me'}}
         if $eq dueCardsView 'all'
-          i.fa.fa-users
+          | 👥
           | {{_ 'dueCardsViewChange-choice-all'}}
 
 template(name="dueCardsModalTitle")
   if currentUser
     h2
-      i.fa.fa-keyboard-o
+      | ⌨️
       | {{_ 'dueCards-title'}}
 
 template(name="dueCards")
@@ -40,18 +40,18 @@ template(name="dueCardsViewChangePopup")
       li
         with "dueCardsViewChange-choice-me"
           a.js-due-cards-view-me
-            i.fa.fa-user.colorful
+            | 👤
             | {{_ 'dueCardsViewChange-choice-me'}}
             if $eq Utils.dueCardsView "me"
-              i.fa.fa-check
+              | ✅
       hr
       li
         with "dueCardsViewChange-choice-all"
           a.js-due-cards-view-all
-            i.fa.fa-users.colorful
+            | 👥
             | {{_ 'dueCardsViewChange-choice-all'}}
             span.sub-name
               +viewer
                 | {{_ 'dueCardsViewChange-choice-all-description' }}
             if $eq Utils.dueCardsView "all"
-              i.fa.fa-check
+              | ✅

client/components/main/dueCards.js

@@ -15,7 +15,7 @@ BlazeComponent.extendComponent({
   dueCardsView() {
     // eslint-disable-next-line no-console
     // console.log('sort:', Utils.dueCardsView());
-    return Utils.dueCardsView();
+    return Utils && Utils.dueCardsView ? Utils.dueCardsView() : 'me';
   },
 
   events() {
@@ -38,12 +38,16 @@ BlazeComponent.extendComponent({
     return [
       {
         'click .js-due-cards-view-me'() {
-          Utils.setDueCardsView('me');
+          if (Utils && Utils.setDueCardsView) {
+            Utils.setDueCardsView('me');
+          }
           Popup.back();
         },
 
         'click .js-due-cards-view-all'() {
-          Utils.setDueCardsView('all');
+          if (Utils && Utils.setDueCardsView) {
+            Utils.setDueCardsView('all');
+          }
           Popup.back();
         },
       },
@@ -54,7 +58,38 @@ BlazeComponent.extendComponent({
 class DueCardsComponent extends CardSearchPagedComponent {
   onCreated() {
     super.onCreated();
-
+    
+    // Add a small delay to ensure ReactiveCache is ready
+    this.searchRetryCount = 0;
+    this.maxRetries = 3;
+    
+    // Use a timeout to ensure the search runs after the component is fully initialized
+    Meteor.setTimeout(() => {
+      this.performSearch();
+    }, 100);
+  }
+  
+  performSearch() {
+    if (process.env.DEBUG === 'true') {
+      console.log('Performing due cards search, attempt:', this.searchRetryCount + 1);
+    }
+    
+    // Check if user is authenticated
+    const currentUser = ReactiveCache.getCurrentUser();
+    if (!currentUser) {
+      if (process.env.DEBUG === 'true') {
+        console.log('User not authenticated, waiting...');
+      }
+      Meteor.setTimeout(() => {
+        this.performSearch();
+      }, 1000);
+      return;
+    }
+    
+    if (process.env.DEBUG === 'true') {
+      console.log('User authenticated:', currentUser.username);
+    }
+    
     const queryParams = new QueryParams();
     queryParams.addPredicate(OPERATOR_HAS, {
       field: PREDICATE_DUE_AT,
@@ -66,17 +101,31 @@ class DueCardsComponent extends CardSearchPagedComponent {
       order: ORDER_ASCENDING,
     });
 
-    if (Utils.dueCardsView() !== 'all') {
-      queryParams.addPredicate(OPERATOR_USER, ReactiveCache.getCurrentUser().username);
-    }
+    // Note: User filtering is handled server-side based on board membership
+    // The OPERATOR_USER filter is too restrictive as it only shows cards where
+    // the user is assigned or a member of the card, not the board
+    // if (Utils && Utils.dueCardsView && Utils.dueCardsView() !== 'all') {
+    //   const currentUser = ReactiveCache.getCurrentUser();
+    //   if (currentUser && currentUser.username) {
+    //     queryParams.addPredicate(OPERATOR_USER, currentUser.username);
+    //   }
+    // }
 
+    // Debug: Log the query parameters
+    if (process.env.DEBUG === 'true') {
+      console.log('Due cards query params:', queryParams.params);
+      console.log('Due cards query text:', queryParams.text);
+      console.log('Due cards has predicates:', queryParams.getPredicates('has'));
+      console.log('Due cards sort predicates:', queryParams.getPredicates('sort'));
+    }
+    
     this.runGlobalSearch(queryParams);
   }
 
   dueCardsView() {
     // eslint-disable-next-line no-console
     //console.log('sort:', Utils.dueCardsView());
-    return Utils.dueCardsView();
+    return Utils && Utils.dueCardsView ? Utils.dueCardsView() : 'me';
   }
 
   sortByBoard() {

client/components/main/editor.css

@@ -2,15 +2,15 @@
 .inlined-form a.fa.fa-brands.fa-markdown {
   float: right;
   position: absolute;
-  top: -20px;
+  top: -10px;
   right: 60px;
 }
 .new-comment a.fa.fa-copy,
 .inlined-form a.fa.fa-copy {
   float: right;
-  position: absolute;
-  top: -20px;
-  right: 6px;
+  position: relative;
+  top: -10px;
+  right: 5px;
 }
 .js-inlined-form.viewer.btn-sm {
   position: absolute;

client/components/main/editor.jade

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