v8.71

Thanks to xet7 !

.devcontainer/Dockerfile

@@ -251,7 +251,7 @@ gosu wekan:wekan /home/wekan/.meteor/meteor -- help
 # Build app (Development)
 cd /home/wekan/app
 gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js
-gosu wekan:wekan /home/wekan/.meteor/meteor npm install
+gosu wekan:wekan /home/wekan/.meteor/meteor npm install --no-audit
 
 # Put back the original tar
 mv $(which tar)~ $(which tar)

.eslintrc.json

@@ -93,30 +93,24 @@
     "Template": false,
     "$": false,
     "_": false,
-    "autosize": false,
     "Avatar": true,
     "Avatars": true,
-    "BlazeComponent": false,
-    "BlazeLayout": false,
+
     "CollectionHooks": false,
-    "DocHead": false,
     "ESSearchResults": false,
     "FastRender": false,
     "FlowRouter": false,
     "FS": false,
     "getSlug": false,
     "Migrations": false,
-    "moment": false,
     "Mousetrap": false,
     "Picker": false,
     "Presence": true,
     "presences": true,
     "Ps": true,
-    "ReactiveTabs": false,
     "Restivus": false,
     "SimpleSchema": false,
-    "SubsManager": false,
-    "T9n": false,
+"T9n": false,
     "TAPi18n": false,
     "AccountsTemplates": true,
     "Activities": true,
@@ -133,13 +127,11 @@
     "CSSEvents": true,
     "EscapeActions": true,
     "Filter": true,
-    "Mixins": true,
     "Modal": true,
     "MultiSelection": true,
     "Popup": true,
     "Sidebar": true,
     "Utils": true,
-    "InlinedForm": true,
     "UnsavedEdits": true,
     "Notifications": true,
     "allowIsBoardAdmin": true,
@@ -152,7 +144,6 @@
     "Checklists": true,
     "Settings": true,
     "InvitationCodes": true,
-    "JsonRoutes": true,
     "Authentication": true,
     "Integrations": true,
     "HTTP": true,

.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,4 @@
 # These are supported funding model platforms
 
-custom: ['https://wekan.team/commercial-support/']
+github: wekan
+custom: ['https://wekan.fi/commercial-support/']

.github/ISSUE_TEMPLATE.md

@@ -1,55 +0,0 @@
-## Issue
-
-Please report these issues elsewhere:
-
-- SECURITY ISSUES, PGP EMAIL: https://github.com/wekan/wekan/blob/main/SECURITY.md
-- UCS: https://github.com/wekan/univention/issues
-
-If WeKan Snap is slow, try this: https://github.com/wekan/wekan/wiki/Cron
-
-**[PLEASE UPGRADE](https://github.com/wekan/wekan/wiki/Backup)** to the newest
-WeKan ® before reporting an issue, if possible.
-
-Please search existing Open and Closed issues, most questions have already been answered.
-
-If you can not login for any reason: https://github.com/wekan/wekan/wiki/Forgot-Password
-Email settings, only SMTP MAIL_URL and MAIL_FROM are in use:
-https://github.com/wekan/wekan/wiki/Troubleshooting-Mail
-
-### Server Setup Information
-
-Please anonymize info, and do not any of your Wekan board URLs, passwords,
-API tokens etc to this public issue.
-
-* Did you test in newest Wekan?:
-* Did you configure root-url correctly so Wekan cards open correctly (see https://github.com/wekan/wekan/wiki/Settings)?
-* Operating System:
-* Deployment Method (Snap/Docker/Sandstorm/bundle/source):
-* Http frontend if any (Caddy, Nginx, Apache, see config examples from Wekan GitHub wiki first):
-* Node.js Version:
-* MongoDB Version:
-* What webbrowser version are you using (Wekan should work on all modern browsers that support Javascript)?
-
-### Problem description
-
-Add a recorded animated gif (e.g. with https://github.com/phw/peek) about
-how it works currently, and screenshot mockups how it should work.
-
-
-#### Reproduction Steps
-
-
-
-#### Logs
-
-Check Right Click / Inspect / Console in you browser - generally Chromium
-based browsers show more detailed info than Firefox based browsers.
-
-Please anonymize logs.
-
-Snap: sudo snap logs wekan.wekan
-
-Docker: sudo docker logs wekan-app
-
-If logs are very long, attach them in .zip file
-

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,42 @@
+name: 🐛 Bug Report
+description: Report a bug to help improve WeKan
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for reporting a bug! Please ensure you are using the [latest version of WeKan](https://wekan.fi/install) and [Upgrade](https://wekan.fi/upgrade) before submitting.
+  - type: textarea
+    id: description
+    attributes:
+      label: Bug Description
+      description: A clear and concise description of what the bug is. Mention versions of WeKan, Node.js, database name and version, frontend webserver version like Caddy etc.
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Steps to Reproduce
+      description: How can we recreate this issue?
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant Logs
+      description: | 
+        - Please paste any relevant anonymized server logs or browser console errors here.
+        - Snap: sudo snap logs wekan.wekan
+        - Docker: sudo docker logs wekan-app
+        - If logs are very long, attach them in .zip file
+      render: shell
+  - type: textarea
+    id: context
+    attributes: 
+      label: Additional Context
+      description: Add any other context, anonymized screenshots or GIF video about the bug, and screenshot mockups about how it should work.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,31 @@
+name: ✨ Feature Request
+description: Suggest a new feature for WeKan
+labels: ["Feature:Request"]
+body:
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Problem Statement
+      description: Is your feature request related to a problem? Please describe.
+      placeholder: I'm always frustrated when [...]
+    validations:
+      required: true
+  - type: textarea
+    id: solution
+    attributes:
+      label: Proposed Solution
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives Considered
+      description: Any alternative solutions or features you've considered.
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional Context
+      description: Add any other context, like anonymized screenshot mockups about how it should work.
+    
+    

.github/ISSUE_TEMPLATE/security-report.yml

@@ -0,0 +1,14 @@
+name: 🛡️ Security Issue
+description: Report a security vulnerability
+labels: ["security", "critical"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## ⚠️ IMPORTANT: Please do not report security vulnerabilities via public issues.
+        
+        To protect the WeKan community, we ask that you report security bugs privately. This allows us to fix the issue before it can be exploited by malicious actors.
+        
+        ### How to report:
+        Please read our **[Security Policy (SECURITY.md)](https://github.com/wekan/wekan/blob/main/SECURITY.md)** for the official reporting process and contact information.
+

.github/ISSUE_TEMPLATE/ucs-issue.yml

@@ -0,0 +1,23 @@
+name: 🗳️ Univention (UCS) Issue
+description: Problems specifically related to the WeKan app on Univention Corporate Server
+labels: ["UCS"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## 🛑 Is this a UCS-specific issue?
+        
+        If your issue is related to the **Univention Corporate Server (UCS) integration**, packaging, or installation via the Univention App Center, it should be reported in the dedicated Univention repository.
+        
+        ### ➡️ [Report UCS Issues Here](https://github.com/wekan/univention/issues)
+        
+        ---
+        **Why?**
+        Reporting there ensures that the maintainers specifically focused on the UCS environment see your request. 
+        
+        If you are certain this is a **core WeKan bug** that affects all platforms (Docker, Snap, etc.), please go back and use the standard [Bug Report](https://github.com/wekan/wekan/issues/new?template=bug-report.yml) template.
+  - type: textarea
+    id: ucs-details
+    attributes:
+      label: Brief Description (Optional)
+      description: If you still wish to post here, please provide a brief summary of why this is a core Wekan issue and not a UCS-specific integration bug.

.github/workflows/depsreview.yaml

@@ -9,6 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: 'Dependency Review'
         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@v6
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567
+        uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2
         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@369eb591f429131d6889c46b94e711f089e6ca96
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf
         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@48aba3b46d1b1fec4febb7c5d0c644b249a11355
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294
         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@v6
     - name: Build the Docker image
       run: docker build . --file Dockerfile --tag wekan:$(date +%s)

.github/workflows/release-all.yml

@@ -0,0 +1,480 @@
+name: Release All Platforms
+
+# Triggered when maintainer pushes a version tag, e.g.: git tag v8.43 && git push --tags
+# Does not work:
+#   Required GitHub Secrets:
+#   QUAY_USERNAME        - Quay.io username
+#   QUAY_PASSWORD        - Quay.io password or token
+#   DOCKERHUB_USERNAME   - Docker Hub username
+#   DOCKERHUB_TOKEN      - Docker Hub access token
+#   SNAP_STORE_LOGIN     - Snapcraft store credentials: run 'snapcraft export-login --snaps wekan --channels stable -' and base64-encode the output
+
+on:
+  push:
+    tags:
+      - 'v*.*'
+
+permissions:
+  contents: write
+  packages: write
+
+jobs:
+  # ─── 1. Extract version and release notes ───────────────────────────────────
+  prepare:
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+      changelog: ${{ steps.changelog.outputs.content }}
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Extract version from tag
+        id: version
+        run: echo "version=${GITHUB_REF_NAME#v}" >> $GITHUB_OUTPUT
+
+      - name: Extract release notes from CHANGELOG.md
+        id: changelog
+        run: |
+          VERSION="${{ steps.version.outputs.version }}"
+          # Try to find the version-specific section first, then fall back to Upcoming
+          NOTES=$(python3 - <<PYEOF
+          import re, sys
+          version = "$VERSION"
+          with open("CHANGELOG.md", encoding="utf-8") as f:
+              content = f.read()
+          # Pattern: section heading through (but not including) the next heading
+          patterns = [
+              rf"(# v{re.escape(version)} .*?)(?=\n# v[0-9]|\Z)",
+              r"(# Upcoming WeKan.*?)(?=\n# v[0-9]|\Z)",
+          ]
+          for pat in patterns:
+              m = re.search(pat, content, re.DOTALL)
+              if m:
+                  print(m.group(1).strip())
+                  sys.exit(0)
+          print(f"WeKan v{version}")
+          PYEOF
+          )
+          echo "content<<GHEOF" >> $GITHUB_OUTPUT
+          echo "$NOTES" >> $GITHUB_OUTPUT
+          echo "GHEOF" >> $GITHUB_OUTPUT
+
+  # ─── 2. Build amd64 bundle (full Meteor 3 build) ────────────────────────────
+  # Meteor 3.4 installer supports only: Linux x86_64, Linux aarch64, macOS, Windows.
+  # It explicitly rejects armhf, s390x, and ppc64le at install time.
+  # Therefore the full Meteor build always runs here on x86_64.
+  # All other Linux architectures then rebuild only the native npm modules
+  # from this bundle (much faster than a full Meteor build).
+  # Node.js version must match what Meteor 3.4 bundles: 22.22.2 (ABI 127).
+  build-amd64:
+    needs: prepare
+    runs-on: ubuntu-24.04
+    timeout-minutes: 180
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Cache Meteor installation
+        uses: actions/cache@v4
+        with:
+          path: ~/.meteor
+          key: meteor-${{ hashFiles('.meteor/release') }}-${{ hashFiles('.meteor/packages') }}
+          restore-keys: meteor-
+
+      - name: Cache npm packages
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y build-essential g++ make python3 curl wget zip unzip
+
+      # Pin to Node 22.22.2 — the exact version bundled by Meteor 3.4.
+      # Using the same version for build and npm rebuild ensures consistent native module ABI.
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '22.22.2'
+
+      - name: Install Meteor
+        run: |
+          if [ ! -f ~/.meteor/meteor ]; then
+            curl https://install.meteor.com/ | sh
+          fi
+          echo "$HOME/.meteor" >> $GITHUB_PATH
+
+      - name: Build WeKan bundle
+        run: |
+          rm -rf .build node_modules .meteor/local
+          meteor npm install
+          meteor build .build --directory --platforms=web.browser
+
+      - name: Install dependencies in bundle
+        run: |
+          cd .build/bundle/programs/server
+          npm install
+
+      - name: Create amd64 zip
+        run: |
+          cd .build
+          zip -r wekan-${VERSION}-amd64.zip bundle
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: bundle-amd64
+          path: .build/wekan-${{ needs.prepare.outputs.version }}-amd64.zip
+          retention-days: 1
+
+  # ─── 3. Build arm64 bundle (rebuild native modules natively) ─────────────────
+  # Meteor 3.4 does support Linux aarch64, but running a full Meteor build a
+  # second time would double the build time for the same result. npm rebuild on
+  # the native arm64 GitHub Actions runner is much faster and produces the same
+  # platform-specific native modules.
+  build-arm64:
+    needs: [prepare, build-amd64]
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 60
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y build-essential g++ make python3 curl unzip zip
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '22.22.2'
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v4
+        with:
+          name: bundle-amd64
+
+      - name: Rebuild native modules for arm64
+        run: |
+          unzip wekan-${VERSION}-amd64.zip
+          cd bundle/programs/server
+          rm -rf node_modules
+          npm install
+          cd ../..
+
+      - name: Clean up and create arm64 zip
+        run: |
+          zip -r wekan-${VERSION}-arm64.zip bundle
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: bundle-arm64
+          path: wekan-${{ needs.prepare.outputs.version }}-arm64.zip
+          retention-days: 1
+
+  # ─── 4. Build s390x bundle (rebuild native modules via QEMU container) ───────
+  # Meteor 3.4 does NOT support s390x (installer exits with error on that arch).
+  # GitHub Actions has no native s390x runners.
+  # Solution: QEMU emulation + node:22.22.2-slim (s390x variant) for npm rebuild.
+  # node:22.22.2-slim is pinned to match Meteor 3.4's bundled Node.js version exactly.
+  build-s390x:
+    needs: [prepare, build-amd64]
+    runs-on: ubuntu-latest
+    timeout-minutes: 90
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - name: Set up QEMU for s390x
+        uses: docker/setup-qemu-action@v4
+        with:
+          platforms: s390x
+
+      - name: Install unzip/zip
+        run: sudo apt-get update && sudo apt-get install -y unzip zip
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v4
+        with:
+          name: bundle-amd64
+
+      - name: Rebuild native modules for s390x in container
+        run: |
+          unzip wekan-${VERSION}-amd64.zip
+          rm -rf bundle/programs/server/node_modules
+          # node:22.22.2-slim s390x — same Node.js version as Meteor 3.4 bundled
+          docker run --rm --platform linux/s390x \
+            -v "$(pwd)/bundle:/bundle" \
+            -w /bundle/programs/server \
+            node:22.22.2-slim \
+            sh -c "apt-get update -qq && apt-get install -y -q build-essential python3 && npm install"
+
+      - name: Clean up and create s390x zip
+        run: |
+          zip -r wekan-${VERSION}-s390x.zip bundle
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: bundle-s390x
+          path: wekan-${{ needs.prepare.outputs.version }}-s390x.zip
+          retention-days: 1
+
+  # ─── 4b. Build ppc64le bundle (rebuild native modules via QEMU container) ────
+  # Meteor 3.4 does NOT support ppc64le (installer exits with error on that arch).
+  # GitHub Actions has no native ppc64le runners.
+  # Solution: QEMU emulation + node:22.22.2-slim (ppc64le variant) for npm rebuild.
+  build-ppc64le:
+    needs: [prepare, build-amd64]
+    runs-on: ubuntu-latest
+    timeout-minutes: 90
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - name: Set up QEMU for ppc64le
+        uses: docker/setup-qemu-action@v4
+        with:
+          platforms: ppc64le
+
+      - name: Install unzip/zip
+        run: sudo apt-get update && sudo apt-get install -y unzip zip
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v4
+        with:
+          name: bundle-amd64
+
+      - name: Rebuild native modules for ppc64le in container
+        run: |
+          unzip wekan-${VERSION}-amd64.zip
+          rm -rf bundle/programs/server/node_modules
+          # node:22.22.2-slim ppc64le — same Node.js version as Meteor 3.4 bundled
+          docker run --rm --platform linux/ppc64le \
+            -v "$(pwd)/bundle:/bundle" \
+            -w /bundle/programs/server \
+            node:22.22.2-slim \
+            sh -c "apt-get update -qq && apt-get install -y -q build-essential python3 && npm install"
+
+      - name: Clean up and create ppc64le zip
+        run: |
+          zip -r wekan-${VERSION}-ppc64le.zip bundle
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: bundle-ppc64le
+          path: wekan-${{ needs.prepare.outputs.version }}-ppc64le.zip
+          retention-days: 1
+
+  # ─── 4c. Build armhf bundle (rebuild native modules via QEMU container) ──────
+  # Meteor 3.4 does NOT support arm/v7 (armhf). Installer explicitly rejects it.
+  # GitHub Actions has no native arm/v7 runners.
+  # Solution: QEMU emulation + node:22.22.2-slim (arm/v7 variant) for npm rebuild.
+  # arm/v7 under QEMU is slowest — timeout set to 120 min.
+  build-armhf:
+    needs: [prepare, build-amd64]
+    runs-on: ubuntu-latest
+    timeout-minutes: 120
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - name: Set up QEMU for arm/v7
+        uses: docker/setup-qemu-action@v4
+        with:
+          platforms: arm
+
+      - name: Install unzip/zip
+        run: sudo apt-get update && sudo apt-get install -y unzip zip
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v4
+        with:
+          name: bundle-amd64
+
+      - name: Rebuild native modules for armhf in container
+        run: |
+          unzip wekan-${VERSION}-amd64.zip
+          rm -rf bundle/programs/server/node_modules
+          # node:22.22.2-slim arm/v7 — same Node.js version as Meteor 3.4 bundled
+          docker run --rm --platform linux/arm/v7 \
+            -v "$(pwd)/bundle:/bundle" \
+            -w /bundle/programs/server \
+            node:22.22.2-slim \
+            sh -c "apt-get update -qq && apt-get install -y -q build-essential python3 && npm install"
+
+      - name: Clean up and create armhf zip
+        run: |
+          zip -r wekan-${VERSION}-armhf.zip bundle
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: bundle-armhf
+          path: wekan-${{ needs.prepare.outputs.version }}-armhf.zip
+          retention-days: 1
+
+  # ─── 5. Build win64 bundle (rebuild native modules on Windows) ───────────────
+  build-win64:
+    needs: [prepare, build-amd64]
+    runs-on: windows-latest
+    timeout-minutes: 60
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '22.22.2'
+
+      - name: Install node-gyp and build tools
+        run: |
+          npm install -g windows-build-tools --vs2019 2>$null; exit 0
+
+      - name: Install 7-zip
+        run: choco install -y 7zip
+
+      - name: Download amd64 bundle
+        uses: actions/download-artifact@v4
+        with:
+          name: bundle-amd64
+
+      - name: Rebuild native modules for Windows
+        shell: cmd
+        run: |
+          7z x wekan-%VERSION%-amd64.zip
+          cd bundle\programs\server
+          rmdir /s /q node_modules
+          npm install
+          cd ..\..\..
+
+      - name: Create win64 zip
+        shell: cmd
+        run: 7z a wekan-%VERSION%-win64.zip bundle
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: bundle-win64
+          path: wekan-${{ needs.prepare.outputs.version }}-win64.zip
+          retention-days: 1
+
+  # ─── 6. Create GitHub Release and upload all bundles ────────────────────────
+  release:
+    needs: [prepare, build-amd64, build-arm64, build-s390x, build-ppc64le, build-armhf, build-win64]
+    runs-on: ubuntu-latest
+    env:
+      VERSION: ${{ needs.prepare.outputs.version }}
+    steps:
+      - name: Download all bundles
+        uses: actions/download-artifact@v4
+        with:
+          pattern: bundle-*
+          merge-multiple: true
+
+      - name: Create GitHub Release with all bundles
+        uses: softprops/action-gh-release@v2
+        with:
+          name: v${{ needs.prepare.outputs.version }}
+          body: ${{ needs.prepare.outputs.changelog }}
+          files: |
+            wekan-${{ needs.prepare.outputs.version }}-amd64.zip
+            wekan-${{ needs.prepare.outputs.version }}-arm64.zip
+            wekan-${{ needs.prepare.outputs.version }}-s390x.zip
+            wekan-${{ needs.prepare.outputs.version }}-ppc64le.zip
+            wekan-${{ needs.prepare.outputs.version }}-armhf.zip
+            wekan-${{ needs.prepare.outputs.version }}-win64.zip
+
+  # ─── 7. Build and push multi-platform Docker image ──────────────────────────
+  #docker:
+  #  needs: [prepare, release]
+  #  runs-on: ubuntu-latest
+  #  env:
+  #    VERSION: ${{ needs.prepare.outputs.version }}
+  #  steps:
+  #    - uses: actions/checkout@v6
+  #
+  #    - name: Set up QEMU
+  #      uses: docker/setup-qemu-action@v4
+  #
+  #    - name: Set up Docker Buildx
+  #      uses: docker/setup-buildx-action@v3
+  #
+  #    - name: Log in to Docker Hub
+  #      uses: docker/login-action@v4
+  #      with:
+  #        username: ${{ secrets.DOCKERHUB_USERNAME }}
+  #        password: ${{ secrets.DOCKERHUB_TOKEN }}
+  #
+  #    - name: Log in to Quay.io
+  #      uses: docker/login-action@v4
+  #      with:
+  #        registry: quay.io
+  #        username: ${{ secrets.QUAY_USERNAME }}
+  #        password: ${{ secrets.QUAY_PASSWORD }}
+  #
+  #    - name: Log in to GitHub Container Registry
+  #      uses: docker/login-action@v4
+  #      with:
+  #        registry: ghcr.io
+  #        username: ${{ github.actor }}
+  #        password: ${{ secrets.GITHUB_TOKEN }}
+  #
+  #    - name: Build and push Docker image to all registries
+  #      uses: docker/build-push-action@v7
+  #      with:
+  #        context: .
+  #        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/ppc64le,linux/s390x
+  #        push: true
+  #        build-args: VERSION=${{ needs.prepare.outputs.version }}
+  #        tags: |
+  #          #wekanteam/wekan:v${{ needs.prepare.outputs.version }}
+  #          #wekanteam/wekan:latest
+  #          quay.io/wekan/wekan:v${{ needs.prepare.outputs.version }}
+  #          quay.io/wekan/wekan:latest
+  #          ghcr.io/wekan/wekan:v${{ needs.prepare.outputs.version }}
+  #          ghcr.io/wekan/wekan:latest
+  #        cache-from: type=gha
+  #        cache-to: type=gha,mode=max
+
+  # ─── 8. Build and publish snap packages (all architectures via Launchpad) ────
+  # Uses snapcraft remote-build on Launchpad's native builders (more reliable
+  # than QEMU for snap builds). Each architecture bundles its own database:
+  #   amd64, arm64         — MongoDB 7.x prebuilt native binary
+  #   armhf, s390x, ppc64el — MongoDB 7.x amd64 binary run via qemu-x86_64-static
+  #                           (no prebuilt MongoDB binaries exist for these arches)
+  #snap:
+  #  needs: [prepare, release]
+  #  runs-on: ubuntu-latest
+  #  env:
+  #    VERSION: ${{ needs.prepare.outputs.version }}
+  #  steps:
+  #    - uses: actions/checkout@v6
+  #
+  #    - name: Install snapcraft
+  #      run: sudo snap install snapcraft --classic
+  #
+  #    - name: Remote-build snap for all architectures via Launchpad
+  #      env:
+  #        SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAP_STORE_LOGIN }}
+  #      run: |
+  #        snapcraft remote-build \
+  #          --build-for=amd64,arm64,armhf,s390x,ppc64el \
+  #          --launchpad-accept-public-upload
+  #
+  #    - name: Upload all snap files as artifacts
+  #      uses: actions/upload-artifact@v4
+  #      with:
+  #        name: snaps-all-arches
+  #        path: "*.snap"
+  #        retention-days: 30
+  #
+  #    # Publish to edge — NOT stable.
+  #    # Stable channel holds the old WeKan version until database migrations are ready.
+  #    # Promote to stable manually via the Snap Store dashboard when migrations exist.
+  #    - name: Publish all snaps to Snap Store (candidate, beta, edge)
+  #      env:
+  #        SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAP_STORE_LOGIN }}
+  #      run: |
+  #        for snap_file in *.snap; do
+  #          echo "Publishing $snap_file ..."
+  #          snapcraft upload --release=edge "$snap_file"
+  #        done
+  #
+  #    - name: Upload all snaps to GitHub Release
+  #      uses: softprops/action-gh-release@v2
+  #      with:
+  #        files: "*.snap"

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         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@v6
 #
 #    - 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@v6
 #
 #    - 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@v6
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -90,12 +90,12 @@ jobs:
 
       # CHECKOUTS
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       # CACHING
       - name: Install Meteor
         id: cache-meteor-install
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: ~/.meteor
           key: v1-meteor-${{ hashFiles('.meteor/versions') }}
@@ -104,7 +104,7 @@ jobs:
 
       - name: Cache NPM dependencies
         id: cache-meteor-npm
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: ~/.npm
           key: v1-npm-${{ hashFiles('package-lock.json') }}
@@ -113,7 +113,7 @@ jobs:
 
       - name: Cache Meteor build
         id: cache-meteor-build
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: |
             .meteor/local/resolver-result-cache.json
@@ -124,19 +124,24 @@ jobs:
           restore-keys: |
             v1-meteor_build_cache-
 
-      - name: Setup meteor
-        uses: meteorengineer/setup-meteor@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
         with:
-          meteor-release: '2.2'
+          node-version: '22.22.2'
+
+      - name: Setup meteor
+        uses: meteorengineer/setup-meteor@v3
+        with:
+          meteor-release: '3.4'
 
       - name: Install NPM Dependencies
-        run: meteor npm ci
+        run: meteor npm install
 
       - name: Run Tests
         run: sh ./test-wekan.sh -cv
 
       - name: Upload coverage
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: coverage-folder
           path: .coverage/
@@ -147,10 +152,10 @@ jobs:
     needs: [tests]
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Download coverage
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: coverage-folder
           path: .coverage/

.gitignore

@@ -35,7 +35,21 @@ ehthumbs.db
 .devcontainer/volumes*/
 .coverage
 
+# Rspack build artifacts
+_build/
+public/build-assets/
+public/build-chunks/
+private/build-assets/
+private/build-chunks/
+public/client-rspack.js.map
+
 # Helm chart
 # Chart dependencies
 /helm/wekan/**/*.tgz
 /helm/wekan/charts
+
+# Meteor Modern-Tools build context directories
+_build
+*/build-assets
+*/build-chunks
+.rsdoctor

.meteor/packages

@@ -3,32 +3,36 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base@1.5.1
+meteor-base
 
 # Build system
-ecmascript@0.16.8
-standard-minifier-js@2.8.1
-mquandalle:jade
-coffeescript@2.4.1!
+ecmascript
+standard-minifier-js
+rspack
 
-# Polyfills
-es5-shim@4.8.0
+blaze@3.0.2
 
 # Collections
 aldeed:collection2
-cottz:publish-relations
-dburles:collection-helpers
-idmontie:migrations
-easy:search
-mongo@1.16.8
-mquandalle:collection-mutations
+aldeed:schema-index@4.0.0-beta.5
+reywood:publish-composite
+mongo
+
+# The holy trifecta - this is a replacement for subs-manager
+# for IndexedDB persistence and auto-sync
+jam:offline 
+# for optimistic methods with offline queuing
+jam:method 
+# global subscription caching
+jam:pub-sub
 
 # Account system
-accounts-password@2.4.0
-useraccounts:core
-useraccounts:flow-routing
-useraccounts:unstyled
-simple:rest-accounts-password
+accounts-password
+communitypackages:core
+communitypackages:unstyled
+communitypackages:flow-routing
+# Routing
+ostrio:flow-router-extra
 wekan-ldap
 wekan-accounts-cas
 wekan-accounts-sandstorm
@@ -37,60 +41,29 @@ wekan-oidc
 wekan-accounts-oidc
 
 # Utilities
-check@1.3.2
-jquery@3.0.0!
-random@1.2.1
-reactive-dict@1.3.1
-session@1.2.1
-tracker@1.3.3
-underscore@1.0.13
-arillo:flow-router-helpers
-audit-argument-checks@1.0.7
-kadira:dochead
-mquandalle:autofocus
-ongoworks:speakingurl
-raix:handlebar-helpers
-http@2.0.0! # force new http package
-
-# Datepicker
-wekan-bootstrap-datepicker
+check
+random
+reactive-dict
+session
+tracker
+audit-argument-checks
 
 # UI components
 ostrio:i18n
-reactive-var@1.0.12
-mousetrap:mousetrap
-mquandalle:jquery-textcomplete
-mquandalle:mousetrap-bindglobal
-templates:tabs
-meteor-autosize
-shell-server@0.5.0
-email@2.2.5
-dynamic-import@0.7.3
-msavin:usercache
-# Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
-meteorhacks:subs-manager
-meteorhacks:aggregate@1.3.0
+reactive-var
+shell-server
+email
+dynamic-import
 wekan-markdown
-konecty:mongo-counter
-percolate:synced-cron
+quave:synced-cron
 ostrio:cookies
-ostrio:files@2.3.0
-pascoual:pdfkit
-lmieulet:meteor-coverage
-meteortesting:mocha@2.0.3
-aldeed:simple-schema
+ostrio:files
+# lmieulet:meteor-coverage
+meteortesting:mocha
 matb33:collection-hooks
-simple:json-routes
-kadira:flow-router
-spacebars
-service-configuration@1.3.2
-communitypackages:picker
-minifier-css@1.6.4
-blaze
-kadira:blaze-layout
-peerlibrary:blaze-components
-ejson@1.1.3
-logging@1.3.3
+service-configuration
+minifier-css
+ejson
+logging
 wekan-fullcalendar
-momentjs:moment@2.29.3
 wekan-fontawesome

.meteor/release

@@ -1 +1 @@
-METEOR@2.14
+METEOR@3.4

.meteor/versions

@@ -1,166 +1,121 @@
-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
-aldeed:schema-index@1.1.1
-aldeed:simple-schema@1.5.4
-allow-deny@1.1.1
-arillo:flow-router-helpers@0.5.2
-audit-argument-checks@1.0.7
-autoupdate@1.8.0
-babel-compiler@7.10.5
-babel-runtime@1.5.1
-base64@1.0.12
-binary-heap@1.0.11
-blaze@2.7.1
-blaze-tools@1.1.3
-boilerplate-generator@1.7.2
-caching-compiler@1.2.2
-caching-html-compiler@1.2.1
-callback-hook@1.5.1
-check@1.3.2
-coffeescript@2.7.0
-coffeescript-compiler@2.4.1
-communitypackages:picker@1.1.1
-cottz:publish-relations@2.0.8
-dburles:collection-helpers@1.1.0
-ddp@1.4.1
-ddp-client@2.6.1
-ddp-common@1.4.0
-ddp-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
-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
-geojson-utils@1.0.11
-hot-code-push@1.0.4
-html-tools@1.1.3
-htmljs@1.1.1
-http@2.0.0
-id-map@1.1.1
-idmontie:migrations@1.0.3
-inter-process-messaging@0.1.1
-jquery@3.0.0
-kadira:blaze-layout@2.3.0
-kadira:dochead@1.5.0
-kadira:flow-router@2.12.1
-konecty:mongo-counter@0.0.5_3
-lmieulet:meteor-coverage@1.1.4
-localstorage@1.2.0
-logging@1.3.3
-matb33:collection-hooks@1.3.0
-mdg:validation-error@0.5.1
-meteor@1.11.5
-meteor-autosize@5.0.1
-meteor-base@1.5.1
-meteorhacks:aggregate@1.3.0
-meteorhacks:collection-utils@1.2.0
-meteorhacks:picker@1.0.3
-meteorhacks:subs-manager@1.6.4
+accounts-base@3.2.0
+accounts-oauth@1.4.6
+accounts-password@3.2.2
+aldeed:collection2@4.1.5
+aldeed:schema-index@4.0.0
+aldeed:simple-schema@1.13.1
+allow-deny@2.1.0
+audit-argument-checks@1.0.8
+autoupdate@2.0.1
+babel-compiler@7.13.0
+babel-runtime@1.5.2
+base64@1.0.13
+binary-heap@1.0.12
+blaze@3.0.2
+blaze-tools@2.0.0
+boilerplate-generator@2.1.0
+caching-compiler@2.0.1
+caching-html-compiler@2.0.0
+callback-hook@1.6.1
+check@1.5.0
+communitypackages:core@2.0.3
+communitypackages:flow-routing@2.1.0
+communitypackages:unstyled@2.0.1
+core-runtime@1.0.0
+ddp@1.4.2
+ddp-client@3.1.1
+ddp-common@1.4.4
+ddp-rate-limiter@1.2.2
+ddp-server@3.1.2
+diff-sequence@1.1.3
+dynamic-import@0.7.4
+ecmascript@0.17.0
+ecmascript-runtime@0.8.3
+ecmascript-runtime-client@0.12.3
+ecmascript-runtime-server@0.11.1
+ejson@1.1.5
+email@3.1.2
+es5-shim@4.8.1
+facts-base@1.0.2
+fetch@0.1.6
+geojson-utils@1.0.12
+hot-code-push@1.0.5
+html-tools@2.0.0
+htmljs@2.0.1
+http@1.4.4
+id-map@1.2.0
+inter-process-messaging@0.1.2
+jam:method@1.9.1
+jam:offline@0.4.1
+jam:pub-sub@0.5.1
+jquery@3.0.2
+lai:collection-extensions@1.0.0
+localstorage@1.2.1
+logging@1.3.6
+matb33:collection-hooks@2.1.0
+meteor@2.2.0
+meteor-base@1.5.2
 meteortesting:browser-tests@1.4.2
 meteortesting:mocha@2.1.0
 meteortesting:mocha-core@8.0.1
-minifier-css@1.6.4
-minifier-js@2.7.5
-minifiers@1.1.8-faster-rebuild.0
-minimongo@1.9.3
-modern-browsers@0.1.10
-modules@0.20.0
-modules-runtime@0.13.1
-momentjs:moment@2.29.3
-mongo@1.16.8
-mongo-decimal@0.1.3
-mongo-dev-server@1.1.0
-mongo-id@1.0.8
-mongo-livedata@1.0.12
-mousetrap:mousetrap@1.4.6_1
-mquandalle:autofocus@1.0.0
-mquandalle:collection-mutations@0.1.0
-mquandalle:jade@0.4.9
-mquandalle:jade-compiler@0.4.5
-mquandalle:jquery-textcomplete@0.8.0_1
-mquandalle:mousetrap-bindglobal@0.0.1
-msavin:usercache@1.8.0
-npm-mongo@4.17.2
-oauth@2.2.1
-oauth2@1.3.2
-observe-sequence@1.0.21
-ongoworks:speakingurl@1.1.0
-ordered-dict@1.1.0
-ostrio:cookies@2.7.2
+minifier-css@2.0.1
+minifier-js@3.1.0
+minimongo@2.0.5
+modern-browsers@0.2.3
+modules@0.20.3
+modules-runtime@0.13.2
+mongo@2.2.0
+mongo-decimal@0.2.0
+mongo-dev-server@1.1.1
+mongo-id@1.0.9
+npm-mongo@6.16.1
+oauth@3.0.2
+oauth2@1.3.3
+observe-sequence@2.0.0
+ordered-dict@1.2.0
+ostrio:cookies@2.9.1
 ostrio:cstorage@4.0.1
-ostrio:files@2.3.3
+ostrio:files@3.0.1
+ostrio:flow-router-extra@3.12.1
 ostrio:i18n@3.2.1
-pascoual:pdfkit@1.0.7
-peerlibrary:assert@0.3.0
-peerlibrary:base-component@0.17.1
-peerlibrary:blaze-components@0.23.0
-peerlibrary:computed-field@0.10.0
-peerlibrary:data-lookup@0.3.0
-peerlibrary:reactive-field@0.6.0
-percolate:synced-cron@1.5.2
-promise@0.12.2
-raix:eventemitter@0.1.3
-raix:handlebar-helpers@0.2.5
-random@1.2.1
-rate-limit@1.1.1
-react-fast-refresh@0.2.8
-reactive-dict@1.3.1
-reactive-var@1.0.12
-reload@1.3.1
-retry@1.1.0
-routepolicy@1.1.1
-service-configuration@1.3.3
-session@1.2.1
-sha@1.0.9
-shell-server@0.5.0
-simple:authenticate-user-by-token@1.2.1
-simple:json-routes@2.3.1
-simple:rest-accounts-password@1.2.2
-simple:rest-bearer-token-parser@1.1.1
-simple:rest-json-error-handler@1.1.1
-socket-stream-client@0.5.2
-spacebars@1.4.1
-spacebars-compiler@1.3.1
-standard-minifier-js@2.8.1
-templates:tabs@2.3.0
-templating@1.4.1
-templating-compiler@1.4.1
-templating-runtime@1.5.0
-templating-tools@1.2.2
-tracker@1.3.3
-typescript@4.9.5
-ui@1.0.13
-underscore@1.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.6
-webapp-hashing@1.1.1
-wekan-accounts-cas@0.1.0
-wekan-accounts-lockout@1.0.0
+promise@1.0.0
+quave:synced-cron@2.4.0
+raix:eventemitter@1.0.0
+random@1.2.2
+rate-limit@1.1.2
+react-fast-refresh@0.3.0
+reactive-dict@1.3.2
+reactive-var@1.0.13
+reload@1.3.2
+retry@1.1.1
+reywood:publish-composite@1.9.0
+routepolicy@1.1.2
+rspack@1.0.0
+service-configuration@1.3.5
+session@1.2.2
+sha@1.0.10
+shell-server@0.7.0
+socket-stream-client@0.6.1
+spacebars@2.0.0
+spacebars-compiler@2.0.0
+standard-minifier-js@3.2.0
+templating@1.4.4
+templating-compiler@2.0.0
+templating-runtime@2.0.1
+templating-tools@2.0.0
+tools-core@1.0.0
+tracker@1.3.4
+typescript@5.9.3
+url@1.3.5
+webapp@2.1.0
+webapp-hashing@1.1.2
+wekan-accounts-cas@0.2.0
+wekan-accounts-lockout@1.1.0
 wekan-accounts-oidc@1.0.10
-wekan-accounts-sandstorm@0.8.0
-wekan-bootstrap-datepicker@1.10.0
+wekan-accounts-sandstorm@0.9.0
 wekan-fontawesome@6.4.2
-wekan-fullcalendar@3.10.5
-wekan-ldap@0.0.2
+wekan-fullcalendar@5.11.5
+wekan-ldap@0.1.0
 wekan-markdown@1.0.9
-wekan-oidc@1.0.12
-yasaricli:slugify@0.0.7
-zimme:active-route@2.3.2
-zodern:types@1.0.10
+wekan-oidc@1.1.0
+zodern:types@1.0.13

.meteorignore

@@ -0,0 +1 @@
+npm-packages/

.tx/config

@@ -1,6 +1,6 @@
 [main]
 host     = https://www.transifex.com
-lang_map = te_IN: te-IN, es_AR: es-AR, es_419: es-LA, es_TX: es-TX, he_IL: he-IL, zh_CN: zh-CN, ar_EG: ar-EG, cs_CZ: cs-CZ, fa_IR: fa-IR, ms_MY: ms-MY, nl_NL: nl-NL, de_CH: de-CH, en_IT: en-IT, uz_UZ: uz-UZ, fr_CH: fr-CH, hi_IN: hi-IN, et_EE: et-EE, es_PE: es-PE, es_MX: es-MX, gl_ES: gl-ES, mn_MN: mn, sl_SI: sl, zh_TW: zh-TW, ast_ES: ast-ES, es_CL: es-CL, ja_JP: ja, lv_LV: lv, ro_RO: ro-RO, az_AZ: az-AZ, cy_GB: cy-GB, gu_IN: gu-IN, pl_PL: pl-PL, vep: ve-PP, en_BR: en-BR, en@ysv: en-YS, hu_HU: hu, ko_KR: ko-KR, pt_BR: pt-BR, zh_HK: zh-HK, zu_ZA: zu-ZA, en_MY: en-MY, ja-Hira: ja-HI, fi_FI: fi, vec: ve-CC, vi_VN: vi-VN, fr_FR: fr-FR, id_ID: id, zh_Hans: zh-Hans, en_DE: en-DE, en_GB: en-GB, el_GR: el-GR, uk_UA: uk-UA, az@latin: az-LA, de_AT: de-AT, uz@Latn: uz-LA, vls: vl-SS, ar_DZ: ar-DZ, bg_BG: bg, es_PY: es-PY, fy_NL: fy-NL, uz@Arab: uz-AR, ru_UA: ru-UA, war: wa-RR, zh_CN.GB2312: zh-GB
+lang_map = te_IN: te-IN, es_AR: es-AR, es_419: es-LA, es_TX: es-TX, he_IL: he-IL, zh_CN: zh-CN, ar_EG: ar-EG, cs_CZ: cs-CZ, fa_IR: fa-IR, ms_MY: ms-MY, nl_NL: nl-NL, de_CH: de-CH, en_IT: en-IT, uz_UZ: uz-UZ, fr_CH: fr-CH, hi_IN: hi-IN, et_EE: et-EE, es_PE: es-PE, es_MX: es-MX, gl_ES: gl-ES, mn_MN: mn, zh_TW: zh-TW, ast_ES: ast-ES, es_CL: es-CL, ja_JP: ja, lv_LV: lv, ro_RO: ro-RO, az_AZ: az-AZ, cy_GB: cy-GB, gu_IN: gu-IN, pl_PL: pl-PL, vep: ve-PP, en_BR: en-BR, en@ysv: en-YS, hu_HU: hu, ko_KR: ko-KR, pt_BR: pt-BR, zh_HK: zh-HK, zu_ZA: zu-ZA, en_MY: en-MY, ja-Hira: ja-HI, fi_FI: fi, vec: ve-CC, vi_VN: vi-VN, fr_FR: fr-FR, id_ID: id, zh_Hans: zh-Hans, en_DE: en-DE, en_GB: en-GB, el_GR: el-GR, uk_UA: uk-UA, az@latin: az-LA, de_AT: de-AT, uz@Latn: uz-LA, vls: vl-SS, ar_DZ: ar-DZ, bg_BG: bg, es_PY: es-PY, fy_NL: fy-NL, uz@Arab: uz-AR, ru_UA: ru-UA, war: wa-RR, zh_CN.GB2312: zh-GB
 
 [o:wekan:p:wekan:r:application]
 file_filter = imports/i18n/data/<lang>.i18n.json

.vscode/settings.json

@@ -1,12 +1,16 @@
 {
-  "editor.tabSize": 2,
-  "editor.rulers": [80],
-  "files.trimTrailingWhitespace": true,
-  "files.insertFinalNewline": true,
-  "files.exclude": {
-    "**/.git": true,
-    "**/.DS_Store": true,
-    "node_modules": true,
-    ".meteor/local": true
-  }
-}
+  "terminal.integrated.env.linux": {
+    "TERM": "xterm-256color"
+  },
+  "terminal.integrated.env.osx": {
+    "TERM": "xterm-256color"
+  },
+  "terminal.integrated.env.windows": {
+    "TERM": "xterm-256color"
+  },
+  "terminal.integrated.shell.linux": "/bin/bash",
+  "terminal.integrated.shellArgs.linux": [
+    "-l"
+  ],
+  "files.simpleDialog.enable": true
+}

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

@@ -6,24 +6,25 @@ Not paid:
   - Security reports, see [SECURITY.md](SECURITY.md)
   - Pull requests
   - xet7 checking pull requests
-- Public Community Support
+  - This is because full-featured WeKan FLOSS kanban with MIT license is free to use
+    also for Commercial Use without any payment, with full source code at
+    https://github.com/wekan/wekan for all platforms at https://wekan.fi/install/ .
+    There is nothing proprietary. WeKan is NOT Big Tech.
+    WeKan is maintained by https://github.com/xet7 at Finland https://wekan.fi .     
+- Public FLOSS Developer Community Support:
   - https://github.com/wekan/wekan/issues
 
-Paid by customers of WeKan Team:
+Paid by customers of WeKan to WeKan:
 
-- Commercial Support at https://wekan.team/commercial-support/
-  - Support
-  - Private Chat
-  - Features
-  - Fixes
-  - Hosting
+- Optional Private Paid Commercial Support at https://wekan.fi/commercial-support/
+  - Optional Paid Support/Features/Fixes/PrivateChat . All Paid Features and Fixes are added directly to FLOSS WeKan https://github.com/wekan/wekan
+  - Optional Paid Official SaaS Hosting https://wekan.fi/saas/ , if you need full-featured hosting, that is more than free app https://wekan.fi/app/
 
 ## Contributing Security related
 
-For responsible security disclosure, please follow this process:
-https://github.com/wekan/wekan/blob/main/SECURITY.md
+For responsible security disclosure, please follow this process: [SECURITY.md](SECURITY.md)
 
-CVE Hall of Fame is at https://wekan.github.io/hall-of-fame/
+CVE Hall of Fame is at https://wekan.fi/hall-of-fame/
 
 ## Contributing to Documentation Wiki
 
@@ -33,7 +34,7 @@ and click send PR.
 
 ## Contributing code
 
-[Building WeKan and sending PR](https://github.com/wekan/wekan/wiki/Emoji).
+[Building WeKan and sending PR](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md).
 
 WeKan code contributors Hall of Fame is at ChangeLog, where
 GitHub usernames are mentioned with changes added:
@@ -44,9 +45,9 @@ Changes can be like typo fixes, bugfixes, features, or anything else
 like for example at open GitHub issues https://github.com/wekan/wekan/issues .
 Closed issues are already fixed or implemented.
 
-Also see other docs at wiki, for example:
+Also see other docs:
 
-https://github.com/wekan/wekan/wiki/Developer-Documentation
+https://github.com/wekan/wekan/tree/main/docs/DeveloperDocs
 
 Do not use code formatting or linting like eslist or prettier.
 
@@ -64,7 +65,7 @@ so that WeKan code will still work OK.
 ## Contributing translations
 
 Non-English translations are contributed only at
-https://transifex.com/wekan/wekan
+https://app.transifex.com/wekan/wekan
 
 When adding new features, in your PR to
 https://github.com/wekan/wekan/pulls

Dockerfile

@@ -1,76 +1,27 @@
-FROM scratch AS downloads
-
-# Download NodeJS bundle
-ADD https://static.meteor.com/dev-bundle-node-os/v14.21.4/node-v14.21.4-linux-x64.tar.gz node.tar.gz
-
-# Download Meteor bundle
-ADD https://static.meteor.com/packages-bootstrap/2.16/meteor-bootstrap-os.linux.x86_64.tar.gz meteor.tar.gz
-
-FROM ubuntu:24.04 AS build
-
-# Install node from official archive
-RUN --mount=type=bind,from=downloads,source=node.tar.gz,target=node.tar.gz \
-    tar xzf node.tar.gz --strip-components=1 --keep-old-files --no-same-owner
-
-# Install meteor from official archive
-RUN --mount=type=bind,from=downloads,source=meteor.tar.gz,target=meteor.tar.gz \
-    tar xzf meteor.tar.gz -C $HOME --no-same-owner
-
-# Update the npm version
-RUN npm install -g npm@6.14.17
-
-# Install several build dependencies
-RUN apt update && \
-    apt install --yes --no-install-suggests --no-install-recommends ssh git g++ curl ca-certificates && \
-    rm -r /var/lib/apt/lists
-
-# Change to temporary working directory
-WORKDIR /workdir
-
-# Copy package.json and package-lock.json to install application dependencies
-COPY package.json .
-COPY package-lock.json .
-
-# Install build dependencies
-RUN $HOME/.meteor/meteor npm install --production
-
-# Copy meteor application configurations
-COPY .meteor .meteor
-
-# Copy application sources
-COPY packages packages
-COPY imports imports
-COPY config config
-COPY models models
-COPY public public
-COPY server server
-COPY client client
-
-# Build the application
-RUN $HOME/.meteor/meteor build --directory /build --allow-superuser
-
-# Enter server bundle directory
-WORKDIR /build/bundle/programs/server
-
-# Install server dependencies
-RUN $HOME/.meteor/meteor npm install --production
-
-# Enter installation directory of fibers
-WORKDIR /build/bundle/programs/server/node_modules/fibers
-
-# Build fibers integrations
-RUN node build.js
-
-FROM ubuntu:24.04 AS wekan
-
-# Add metadata to image
+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"
 
-# Set default environment variables
-ENV WITH_API=true \
+# TARGETARCH and TARGETVARIANT are automatically provided by Docker Buildx
+ARG TARGETARCH
+ARG TARGETVARIANT
+ARG VERSION=8.71
+ARG DEBIAN_FRONTEND=noninteractive
+
+ENV BUILD_DEPS="apt-utils gnupg wget bzip2 g++ curl libarchive-tools build-essential git ca-certificates python3 unzip"
+
+ENV \
+    DEBUG=false \
+    NODE_VERSION=v22.22.2 \
+    METEOR_RELEASE=METEOR@3.4 \
+    USE_EDGE=false \
+    METEOR_EDGE=1.5-beta.17 \
+    NPM_VERSION=10.9.2 \
+    SRC_PATH=./ \
+    WITH_API=true \
+    MONGO_OPLOG_URL="" \
     RESULTS_PER_PAGE="" \
     DEFAULT_BOARD_ID="" \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
@@ -111,6 +62,7 @@ ENV WITH_API=true \
     OAUTH2_LOGIN_STYLE=redirect \
     OAUTH2_CLIENT_ID="" \
     OAUTH2_SECRET="" \
+    OAUTH2_SECRET_FILE="" \
     OAUTH2_SERVER_URL="" \
     OAUTH2_AUTH_ENDPOINT="" \
     OAUTH2_USERINFO_ENDPOINT="" \
@@ -136,6 +88,7 @@ ENV WITH_API=true \
     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="" \
@@ -201,38 +154,78 @@ ENV WITH_API=true \
     ORACLE_OIM_ENABLED=false \
     WAIT_SPINNER="" \
     WRITABLE_PATH=/data \
-    S3=""
+    S3="" \
+    MAIL_SERVICE_PASSWORD_FILE="" \
+    MONGO_PASSWORD_FILE="" \
+    S3_SECRET_FILE=""
 
-# Install node and application sources from build stage
-RUN --mount=type=bind,from=downloads,source=node.tar.gz,target=node.tar.gz \
-    --mount=type=bind,from=build,source=/build,target=/build \
-    # Install NodeJS
-    tar xzf node.tar.gz --strip-components=1 --keep-old-files --no-same-owner && \
-    # Add the wekan user
-    useradd --uid 999 --user-group --system wekan && \
-    # Copy wekan bundle
-    cp -r /build/bundle /wekan && \
-    # Remove the web.browser.legacy platform
-    rm -r /wekan/programs/web.browser.legacy && \
-    # Change ownership of wekan directory
-    chown wekan:wekan -R /wekan && \
-    # Create the data directory
-    mkdir /data && \
-    # Change ownership of data directory
-    chown wekan:root -R /data
+RUN <<EOR
+set -o xtrace
+
+# Create Wekan user
+useradd --user-group --system --home-dir /home/wekan wekan
+
+# OS Updates
+apt-get update --assume-yes
+apt-get upgrade --assume-yes
+apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}
+
+# Multi-arch mapping: Docker TARGETARCH -> Node.js arch name + WeKan bundle name
+# arm/v7 uses TARGETARCH=arm; armhf has no MongoDB Community -> uses FerretDB
+case "${TARGETARCH}" in
+    "amd64")   NODE_ARCH="x64"     WEKAN_ARCH="amd64"   ;;
+    "arm64")   NODE_ARCH="arm64"   WEKAN_ARCH="arm64"   ;;
+    "arm")     NODE_ARCH="armv7l"  WEKAN_ARCH="armhf"   ;;
+    "ppc64le") NODE_ARCH="ppc64le" WEKAN_ARCH="ppc64le" ;;
+    "s390x")   NODE_ARCH="s390x"   WEKAN_ARCH="s390x"   ;;
+    *) echo "Unsupported architecture: ${TARGETARCH}"; exit 1 ;;
+esac
+
+# Node.js Installation (official nodejs.org builds for Node 22)
+cd /tmp
+wget "https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz"
+wget "https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc"
+grep "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt.asc | shasum -a 256 -c -
+tar xzf "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" -C /usr/local --strip-components=1 --no-same-owner
+rm -f "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt.asc
+ln -s "/usr/local/bin/node" "/usr/local/bin/nodejs"
+
+# NPM configuration
+npm install -g npm@${NPM_VERSION} --production
+chown --recursive wekan:wekan /home/wekan/
+
+# Temporary Tar swap for Meteor bundle
+cp $(which tar) $(which tar)~
+ln -sf $(which bsdtar) $(which tar)
+
+# WeKan Bundle Installation
+mkdir -p /home/wekan/app
+cd /home/wekan/app
+wget "https://github.com/wekan/wekan/releases/download/v${VERSION}/wekan-${VERSION}-${WEKAN_ARCH}.zip"
+unzip "wekan-${VERSION}-${WEKAN_ARCH}.zip"
+rm "wekan-${VERSION}-${WEKAN_ARCH}.zip"
+npm install --production --no-audit --prefix ./bundle/programs/server
+mv /home/wekan/app/bundle /build
+
+# Restore original tar
+mv $(which tar)~ $(which tar)
+
+# Cleanup
+apt-get remove --purge --assume-yes ${BUILD_DEPS}
+apt-get autoremove --assume-yes
+apt-get clean --assume-yes
+rm -Rf /tmp/*
+rm -Rf /var/lib/apt/lists/*
+rm -Rf /home/wekan/app
+
+mkdir -p /data
+chown wekan:wekan --recursive /data
+EOR
 
-# Change to the wekan user
 USER wekan
-
-# Set the port to listen on
 ENV PORT=8080
-EXPOSE ${PORT}
+EXPOSE $PORT
+STOPSIGNAL SIGKILL
+WORKDIR /build
 
-# Define the stop signal for node
-STOPSIGNAL SIGINT
-
-# Declare a volume on /data
-VOLUME /data
-
-# Set startup command
-CMD ["node", "/wekan/main.js"]
+CMD ["bash", "-c", "ulimit -s 65500; exec node main.js"]

Dockerfile.arm64v8

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

Dockerfile.s390x

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

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2024 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
 
@@ -16,7 +14,7 @@ docker-compose.yml at https://github.com/wekan/wekan/blob/main/docker-compose.ym
 
 ## 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/blob/main/docker-compose.ym
 - [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/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,11 +1,36 @@
-About money, see [CONTRIBUTING.md](CONTRIBUTING.md)
+## About money
 
-Security is very important to us. If you discover any issue regarding security, please disclose
-the information responsibly by sending an email to security@wekan.team and not by
-creating a GitHub issue. We will respond swiftly to fix verifiable security issues.
+See [CONTRIBUTING](CONTRIBUTING.md)
 
-We thank you with a place at our hall of fame page, that is
-at https://wekan.github.io/hall-of-fame
+## Responsible Security Disclosure
+
+1. To send email, if possible, use PGP key [security-at-wekan.fi.asc](security-at-wekan.fi.asc)
+2. Send info about security issue ONLY to security@wekan.fi . NOT TO ANYWHERE ELSE. NO CC, NO BCC.
+3. Wait for new WeKan release that fixes security issue to appear to top of
+   https://github.com/wekan/wekan/blob/main/CHANGELOG.md
+4. We will thank you by adding you to Hall of Fame: https://wekan.fi/hall-of-fame/
+5. All vulnerability details will be private to security@wekan.fi ,
+   unless you help all WeKan platforms to have a way to upgrade, like sending
+   database migrations code to security@wekan.fi or PRs to https://github.com/wekan/wekan/pulls .
+   There is no benefit to Wordwide Security Community to have more details about vulnerabilities,
+   if Worldwide Security Community does not help to make upgrades possible.
+6. If there some day becomes available a way to upgrade all WeKan platforms,
+   this page will be updated to add permission for security researchers
+   to request new GHSA or CVE ID and publish your vulnerability details at your blog, talks, etc,
+   and send that info also to security@wekan.fi to be added to
+   Hall of Fame: https://wekan.fi/hall-of-fame/ to get Upgrade Bonus Point Stars.
+   In that case, it will become possible for security@wekan.fi to publish all
+   remaining private security details, and publicly thank Worldwide Security Community.
+
+## Bonus Points
+
+- If you include code for fixing security issue
+
+## Losing Points
+
+- If you ask about [bounty](CONTRIBUTING.md). There is no bounty. WeKan is NOT Big Tech. WeKan is FLOSS.
+- If you forget to include vulnerability details.
+- If you send info about security issue to somewhere else than security@wekan.fi
 
 ## How should reports be formatted?
 
@@ -25,7 +50,7 @@ CWSS (optional): %cwss
 
 Anyone who reports a unique security issue in scope and does not disclose it to
 a third party before we have patched and updated may be upon their approval
-added to the Wekan Hall of Fame.
+added to the WeKan Hall of Fame https://wekan.fi/hall-of-fame/
 
 ## Which domains are in scope?
 
@@ -62,11 +87,6 @@ and by by companies that have 30k users.
 - If you are thinking about TLS MITM, look at https://github.com/caddyserver/caddy/issues/2530
 - Let's Encrypt TLS requires publicly accessible webserver, that Let's Encrypt TLS validation servers check.
 - If firewall limits to only allowed IP addresses, you may need non-Let's Encrypt TLS cert.
-- For On Premise:
-  - https://caddyserver.com/docs/automatic-https#local-https
-  - https://github.com/wekan/wekan/wiki/Caddy-Webserver-Config
-  - https://github.com/wekan/wekan/wiki/Azure
-  - https://github.com/wekan/wekan/wiki/Traefik-and-self-signed-SSL-certs
 
 ## XSS
 
@@ -171,6 +191,57 @@ Meteor.startup(() => {
 - https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
 - https://wekan.github.io/hall-of-fame/filebleed/
 
+### Attachments: Forced download to prevent stored XSS
+
+- To prevent browser-side execution of uploaded content under the app origin, all attachment downloads are served with safe headers:
+  - `Content-Type: application/octet-stream`
+  - `Content-Disposition: attachment`
+  - `X-Content-Type-Options: nosniff`
+  - A restrictive `Content-Security-Policy` with `sandbox`
+- This means attachments are downloaded instead of rendered inline by default. This mitigates HTML/JS/SVG based stored XSS vectors.
+- Avatars and inline images remain supported but SVG uploads are blocked and never rendered inline.
+
+## Users: Client update restrictions
+
+- Client-side updates to user documents are limited to safe fields only:
+  - `username`
+  - `profile.*`
+- Sensitive fields are blocked from any client updates and can only be modified by server methods with authorization:
+  - `orgs`, `teams`, `roles`, `isAdmin`, `createdThroughApi`, `loginDisabled`, `authenticationMethod`, `services.*`, `emails.*`, `sessionData.*`
+- Attempts to update forbidden fields from the client are denied.
+- Admin operations like managing org/team membership or toggling flags must use server methods that check permissions.
+
+## Voting: integrity and authorization
+
+- Client updates to card `vote` fields are blocked to prevent forged votes and inconsistent policy enforcement.
+- Voting is performed via a server method that enforces:
+  - Authentication and board membership, or an explicit per-card flag allowing non-members to vote.
+  - Only the caller's own userId is added/removed from `vote.positive`/`vote.negative`.
+- This prevents members from fabricating other users' votes and ensures non-members cannot vote unless explicitly allowed.
+
+## Planning Poker: integrity and authorization
+
+- Client updates to card `poker` fields are blocked. All poker actions go through server methods that enforce:
+  - Authentication and board membership for configuration and results.
+  - For casting a poker vote, either board membership or an explicit per-card flag allowing non-members to participate.
+  - Only the caller's own userId is added/removed from the selected estimation bucket (e.g., one, two, five, etc.).
+- Methods cover setting/unsetting poker question/end, casting votes, replaying, and setting final estimation.
+
+## Attachment API: authentication and DoS prevention
+
+- The attachment API (`/api/attachment/*`) requires proper authentication using `X-User-Id` and `X-Auth-Token` headers.
+- Authentication validates tokens by hashing with `Accounts._hashLoginToken` and matching against stored login tokens, preventing identity spoofing.
+- Request handlers implement:
+  - 30-second timeout to prevent hanging connections.
+  - Request body size limits (50MB for uploads, 10MB for metadata operations).
+  - Proper error handling and guaranteed response completion.
+  - Request error event handlers to clean up failed connections.
+- This prevents:
+  - DoS attacks via concurrent unauthenticated or malformed requests.
+  - Identity spoofing by using arbitrary bearer tokens or user IDs.
+  - Resource exhaustion from hanging connections or excessive payloads.
+- Access control: all attachment operations verify board membership before allowing access.
+
 ## Brute force login protection
 
 - https://github.com/wekan/wekan/commit/23e5e1e3bd081699ce39ce5887db7e612616014d
@@ -217,9 +288,4 @@ Typical already known or "no impact" bugs such as:
 - Email spoofing, SPF, DMARC & DKIM. Wekan does not include email server.
 
 Wekan is Open Source with MIT license, and free to use also for commercial use.
-We welcome all fixes to improve security by email to security@wekan.team
-
-## Bonus Points
-
-If your Responsible Security Disclosure includes code for fixing security issue,
-you get bonus points, as seen on [Hall of Fame](https://wekan.github.io/hall-of-fame).
+We welcome all fixes to improve security by email to security@wekan.fi

Stackerfile.yml

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

api.py

@@ -39,6 +39,12 @@ If *nix:  chmod +x api.py => ./api.py users
     python3 api.py addcustomfieldtoboard AUTHORID BOARDID NAME TYPE SETTINGS SHOWONCARD AUTOMATICALLYONCARD SHOWLABELONMINICARD SHOWSUMATTOPOFLIST # Add Custom Field to Board
     python3 api.py editcustomfield BOARDID LISTID CARDID CUSTOMFIELDID NEWCUSTOMFIELDVALUE # Edit Custom Field
     python3 api.py listattachments BOARDID # List attachments
+    python3 api.py uploadattachment BOARDID SWIMLANEID LISTID CARDID FILEPATH [STORAGE_BACKEND] # Upload attachment to card
+    python3 api.py downloadattachment ATTACHMENTID OUTPUTPATH # Download attachment to local file
+    python3 api.py attachmentinfo ATTACHMENTID # Get attachment information
+    python3 api.py listcardattachments BOARDID SWIMLANEID LISTID CARDID # List attachments for specific card
+    python3 api.py copymoveattachment ATTACHMENTID TARGETBOARDID TARGETSWIMLANEID TARGETLISTID TARGETCARDID [copy|move] # Copy or move attachment
+    python3 api.py deleteattachment ATTACHMENTID # Delete attachment
     python3 api.py cardsbyswimlane SWIMLANEID LISTID # Retrieve cards list on a swimlane
     python3 api.py getcard BOARDID LISTID CARDID # Get card info
     python3 api.py addlabel BOARDID LISTID CARDID LABELID # Add label to a card
@@ -750,3 +756,273 @@ if arguments == 1:
         data2 = body.text.replace('}',"}\n")
         print(data2)
         # ------- LIST OF PUBLIC BOARDS END -----------
+
+# ------- NEW ATTACHMENT API ENDPOINTS START -----------
+
+    if sys.argv[1] == 'uploadattachment':
+        # ------- UPLOAD ATTACHMENT START -----------
+        if arguments < 5:
+            print("Usage: python3 api.py uploadattachment BOARDID SWIMLANEID LISTID CARDID FILEPATH [STORAGE_BACKEND]")
+            print("Storage backends: fs, gridfs, s3")
+            exit(1)
+        
+        boardid = sys.argv[2]
+        swimlaneid = sys.argv[3]
+        listid = sys.argv[4]
+        cardid = sys.argv[5]
+        filepath = sys.argv[6]
+        storage_backend = sys.argv[7] if arguments > 6 else None
+        
+        # Read file and convert to base64
+        try:
+            with open(filepath, 'rb') as f:
+                file_data = f.read()
+                import base64
+                base64_data = base64.b64encode(file_data).decode('utf-8')
+        except FileNotFoundError:
+            print(f"Error: File '{filepath}' not found")
+            exit(1)
+        except Exception as e:
+            print(f"Error reading file: {e}")
+            exit(1)
+        
+        # Get file info
+        import os
+        filename = os.path.basename(filepath)
+        import mimetypes
+        file_type = mimetypes.guess_type(filepath)[0] or 'application/octet-stream'
+        
+        # Prepare request data
+        upload_data = {
+            'boardId': boardid,
+            'swimlaneId': swimlaneid,
+            'listId': listid,
+            'cardId': cardid,
+            'fileData': base64_data,
+            'fileName': filename,
+            'fileType': file_type
+        }
+        
+        if storage_backend:
+            upload_data['storageBackend'] = storage_backend
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey), 'Content-Type': 'application/json'}
+        upload_url = wekanurl + 'api/attachment/upload'
+        
+        try:
+            response = requests.post(upload_url, headers=headers, json=upload_data)
+            response.raise_for_status()
+            result = response.json()
+            print(f"Upload successful!")
+            print(f"Attachment ID: {result.get('attachmentId')}")
+            print(f"File: {result.get('fileName')}")
+            print(f"Size: {result.get('fileSize')} bytes")
+            print(f"Storage: {result.get('storageBackend')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Upload failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- UPLOAD ATTACHMENT END -----------
+
+    if sys.argv[1] == 'downloadattachment':
+        # ------- DOWNLOAD ATTACHMENT START -----------
+        if arguments < 3:
+            print("Usage: python3 api.py downloadattachment ATTACHMENTID OUTPUTPATH")
+            exit(1)
+        
+        attachmentid = sys.argv[2]
+        outputpath = sys.argv[3]
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        download_url = wekanurl + f'api/attachment/download/{attachmentid}'
+        
+        try:
+            response = requests.get(download_url, headers=headers)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                # Decode base64 data and save to file
+                import base64
+                file_data = base64.b64decode(result.get('base64Data'))
+                
+                with open(outputpath, 'wb') as f:
+                    f.write(file_data)
+                
+                print(f"Download successful!")
+                print(f"File saved to: {outputpath}")
+                print(f"Original filename: {result.get('fileName')}")
+                print(f"Size: {result.get('fileSize')} bytes")
+                print(f"Storage: {result.get('storageBackend')}")
+            else:
+                print(f"Download failed: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Download failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- DOWNLOAD ATTACHMENT END -----------
+
+    if sys.argv[1] == 'attachmentinfo':
+        # ------- ATTACHMENT INFO START -----------
+        if arguments < 2:
+            print("Usage: python3 api.py attachmentinfo ATTACHMENTID")
+            exit(1)
+        
+        attachmentid = sys.argv[2]
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        info_url = wekanurl + f'api/attachment/info/{attachmentid}'
+        
+        try:
+            response = requests.get(info_url, headers=headers)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                print("=== ATTACHMENT INFO ===")
+                print(f"Attachment ID: {result.get('attachmentId')}")
+                print(f"File Name: {result.get('fileName')}")
+                print(f"File Size: {result.get('fileSize')} bytes")
+                print(f"File Type: {result.get('fileType')}")
+                print(f"Storage Backend: {result.get('storageBackend')}")
+                print(f"Board ID: {result.get('boardId')}")
+                print(f"Swimlane ID: {result.get('swimlaneId')}")
+                print(f"List ID: {result.get('listId')}")
+                print(f"Card ID: {result.get('cardId')}")
+                print(f"Created At: {result.get('createdAt')}")
+                print(f"Is Image: {result.get('isImage')}")
+                print(f"Versions: {len(result.get('versions', []))}")
+            else:
+                print(f"Failed to get attachment info: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Request failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- ATTACHMENT INFO END -----------
+
+    if sys.argv[1] == 'listcardattachments':
+        # ------- LIST CARD ATTACHMENTS START -----------
+        if arguments < 5:
+            print("Usage: python3 api.py listcardattachments BOARDID SWIMLANEID LISTID CARDID")
+            exit(1)
+        
+        boardid = sys.argv[2]
+        swimlaneid = sys.argv[3]
+        listid = sys.argv[4]
+        cardid = sys.argv[5]
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        list_url = wekanurl + f'api/attachment/list/{boardid}/{swimlaneid}/{listid}/{cardid}'
+        
+        try:
+            response = requests.get(list_url, headers=headers)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                attachments = result.get('attachments', [])
+                print(f"=== CARD ATTACHMENTS ({len(attachments)}) ===")
+                for attachment in attachments:
+                    print(f"ID: {attachment.get('attachmentId')}")
+                    print(f"Name: {attachment.get('fileName')}")
+                    print(f"Size: {attachment.get('fileSize')} bytes")
+                    print(f"Type: {attachment.get('fileType')}")
+                    print(f"Storage: {attachment.get('storageBackend')}")
+                    print(f"Created: {attachment.get('createdAt')}")
+                    print("---")
+            else:
+                print(f"Failed to list attachments: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Request failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- LIST CARD ATTACHMENTS END -----------
+
+    if sys.argv[1] == 'copymoveattachment':
+        # ------- COPY/MOVE ATTACHMENT START -----------
+        if arguments < 6:
+            print("Usage: python3 api.py copymoveattachment ATTACHMENTID TARGETBOARDID TARGETSWIMLANEID TARGETLISTID TARGETCARDID [copy|move]")
+            exit(1)
+        
+        attachmentid = sys.argv[2]
+        targetboardid = sys.argv[3]
+        targetswimlaneid = sys.argv[4]
+        targetlistid = sys.argv[5]
+        targetcardid = sys.argv[6]
+        operation = sys.argv[7] if arguments > 6 else 'copy'
+        
+        if operation not in ['copy', 'move']:
+            print("Operation must be 'copy' or 'move'")
+            exit(1)
+        
+        # Prepare request data
+        request_data = {
+            'attachmentId': attachmentid,
+            'targetBoardId': targetboardid,
+            'targetSwimlaneId': targetswimlaneid,
+            'targetListId': targetlistid,
+            'targetCardId': targetcardid
+        }
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey), 'Content-Type': 'application/json'}
+        api_url = wekanurl + f'api/attachment/{operation}'
+        
+        try:
+            response = requests.post(api_url, headers=headers, json=request_data)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                print(f"{operation.capitalize()} successful!")
+                if operation == 'copy':
+                    print(f"Source Attachment ID: {result.get('sourceAttachmentId')}")
+                    print(f"New Attachment ID: {result.get('newAttachmentId')}")
+                else:
+                    print(f"Attachment ID: {result.get('attachmentId')}")
+                    print(f"Source Board: {result.get('sourceBoardId')}")
+                    print(f"Target Board: {result.get('targetBoardId')}")
+                print(f"File: {result.get('fileName')}")
+                print(f"Size: {result.get('fileSize')} bytes")
+            else:
+                print(f"{operation.capitalize()} failed: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"{operation.capitalize()} failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- COPY/MOVE ATTACHMENT END -----------
+
+    if sys.argv[1] == 'deleteattachment':
+        # ------- DELETE ATTACHMENT START -----------
+        if arguments < 2:
+            print("Usage: python3 api.py deleteattachment ATTACHMENTID")
+            exit(1)
+        
+        attachmentid = sys.argv[2]
+        
+        # Make API call
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        delete_url = wekanurl + f'api/attachment/delete/{attachmentid}'
+        
+        try:
+            response = requests.delete(delete_url, headers=headers)
+            response.raise_for_status()
+            result = response.json()
+            
+            if result.get('success'):
+                print("Delete successful!")
+                print(f"Attachment ID: {result.get('attachmentId')}")
+                print(f"File: {result.get('fileName')}")
+            else:
+                print(f"Delete failed: {result.get('message', 'Unknown error')}")
+        except requests.exceptions.RequestException as e:
+            print(f"Delete failed: {e}")
+            if hasattr(e, 'response') and e.response is not None:
+                print(f"Response: {e.response.text}")
+        # ------- DELETE ATTACHMENT END -----------
+
+# ------- NEW ATTACHMENT API ENDPOINTS END -----------

client/00-startup.js

@@ -4,3 +4,85 @@ if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/pwa-service-worker.js');
   });
 }
+
+// Import Blaze helpers (replaces removed raix:handlebar-helpers package)
+import '/client/config/blazeHelpers';
+
+// Import board converter for on-demand conversion
+import '/client/lib/boardConverter';
+import '/client/features/boardConversion';
+import { Utils } from '/client/lib/utils';
+
+// Import migration manager and progress UI - COMMENTED OUT
+// import '/client/lib/attachmentMigrationManager';
+// import '/client/components/settings/migrationProgress';
+
+// Import cron settings - COMMENTED OUT
+// import '/client/components/settings/cronSettings';
+// Custom head tags
+
+// Mirror Meteor login token into a cookie for server-side file route auth
+// This enables cookie-based auth for /cdn/storage/* without leaking ROOT_URL
+// Token already lives in localStorage; cookie adds same-origin send-on-request semantics
+Meteor.startup(() => {
+  const COOKIE_NAME = 'meteor_login_token';
+  const cookieAttrs = () => {
+    const attrs = ['Path=/', 'SameSite=Lax'];
+    try {
+      if (window.location && window.location.protocol === 'https:') {
+        attrs.push('Secure');
+      }
+    } catch (_) {}
+    return attrs.join('; ');
+  };
+
+  const setCookie = (name, value) => {
+    if (!value) return;
+    document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; ${cookieAttrs()}`;
+  };
+  const clearCookie = (name) => {
+    document.cookie = `${encodeURIComponent(name)}=; Expires=Thu, 01 Jan 1970 00:00:00 GMT; ${cookieAttrs()}`;
+  };
+
+  const syncCookie = () => {
+    try {
+      const token = Accounts && typeof Accounts._storedLoginToken === 'function' ? Accounts._storedLoginToken() : null;
+      if (token) setCookie(COOKIE_NAME, token); else clearCookie(COOKIE_NAME);
+    } catch (e) {
+      // ignore
+    }
+  };
+
+  // Initial sync on startup
+  syncCookie();
+
+  // Keep cookie in sync on login/logout
+  if (Accounts && typeof Accounts.onLogin === 'function') Accounts.onLogin(syncCookie);
+  if (Accounts && typeof Accounts.onLogout === 'function') Accounts.onLogout(syncCookie);
+
+  // Sync across tabs/windows when localStorage changes
+  window.addEventListener('storage', (ev) => {
+    if (ev && typeof ev.key === 'string' && ev.key.indexOf('Meteor.loginToken') !== -1) {
+      syncCookie();
+    }
+  });
+
+});
+
+// Subscribe to per-user small publications
+Meteor.startup(() => {
+  Tracker.autorun(() => {
+    if (Meteor.userId()) {
+      Meteor.subscribe('userGreyIcons');
+      Meteor.subscribe('userDesktopDragHandles');
+    }
+  });
+
+  // Initialize mobile mode on startup for iOS devices
+  // This ensures mobile mode is applied correctly on page load
+  Tracker.afterFlush(() => {
+    if (typeof Utils !== 'undefined' && Utils.initializeUserSettings) {
+      Utils.initializeUserSettings();
+    }
+  });
+});

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,18 +36,18 @@
   flex: 1;
   align-self: center;
   margin: 0;
-  margin-left: 3px;
+  margin-left: 0.4vw;
   overflow: hidden;
   word-break: break-word;
 }
 .activities .activity .activity-desc .activity-comment {
   display: block;
-  border-radius: 3px;
+  border-radius: 0.4vw;
   background: #fff;
   text-decoration: none;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;
+  box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
+  margin-top: 0.7vh;
+  padding: 0.7vh 0.7vw;
 }
 .activities .activity .activity-desc .activity-checklist {
   display: block;

client/components/activities/activities.jade

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

client/components/activities/activities.js

@@ -1,167 +1,167 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Template } from 'meteor/templating';
 import DOMPurify from 'dompurify';
+import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
 import { TAPi18n } from '/imports/i18n';
+import { Utils } from '/client/lib/utils';
+import { getSidebarInstance } from '/client/features/sidebar/service';
 
 const activitiesPerPage = 500;
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    // XXX Should we use ReactiveNumber?
-    this.page = new ReactiveVar(1);
-    this.loadNextPageLocked = false;
-    // TODO is sidebar always available? E.g. on small screens/mobile devices
-    const sidebar = Sidebar;
-    sidebar && sidebar.callFirstWith(null, 'resetNextPeak');
-    this.autorun(() => {
-      let mode = this.data()?.mode;
-      if (mode) {
-        const capitalizedMode = Utils.capitalize(mode);
-        let searchId;
-        const showActivities = this.showActivities();
-        if (mode === 'linkedcard' || mode === 'linkedboard') {
-          const currentCard = Utils.getCurrentCard();
-          searchId = currentCard.linkedId;
-          mode = mode.replace('linked', '');
-        } else if (mode === 'card') {
-          searchId = Utils.getCurrentCardId();
-        } else {
-          searchId = Session.get(`current${capitalizedMode}`);
-        }
-        const limit = this.page.get() * activitiesPerPage;
-        if (searchId === null) return;
+Template.activities.onCreated(function () {
+  // Register with sidebar so it can call loadNextPage on us
+  const Sidebar = getSidebarInstance();
+  if (Sidebar) {
+    Sidebar.activitiesInstance = this;
+  }
 
-        this.subscribe('activities', mode, searchId, limit, showActivities, () => {
-          this.loadNextPageLocked = false;
-
-          // TODO the guard can be removed as soon as the TODO above is resolved
-          if (!sidebar) return;
-          // If the sibear peak hasn't increased, that mean that there are no more
-          // activities, and we can stop calling new subscriptions.
-          // XXX This is hacky! We need to know excatly and reactively how many
-          // activities there are, we probably want to denormalize this number
-          // dirrectly into card and board documents.
-          const nextPeakBefore = sidebar.callFirstWith(null, 'getNextPeak');
-          sidebar.calculateNextPeak();
-          const nextPeakAfter = sidebar.callFirstWith(null, 'getNextPeak');
-          if (nextPeakBefore === nextPeakAfter) {
-            sidebar.callFirstWith(null, 'resetNextPeak');
-          }
-        });
-      }
-    });
-  },
-  loadNextPage() {
+  // XXX Should we use ReactiveNumber?
+  this.page = new ReactiveVar(1);
+  this.loadNextPageLocked = false;
+  this.loadNextPage = () => {
     if (this.loadNextPageLocked === false) {
       this.page.set(this.page.get() + 1);
       this.loadNextPageLocked = true;
     }
-  },
-  showActivities() {
-    let ret = false;
-    let mode = this.data()?.mode;
+  };
+
+  // TODO is sidebar always available? E.g. on small screens/mobile devices
+  const sidebar = getSidebarInstance();
+  if (sidebar && sidebar.infiniteScrolling) {
+    sidebar.infiniteScrolling.resetNextPeak();
+  }
+  this.autorun(() => {
+    const data = Template.currentData();
+    let mode = data?.mode;
     if (mode) {
+      const capitalizedMode = Utils.capitalize(mode);
+      let searchId;
+      const showActivities = _showActivities(data);
       if (mode === 'linkedcard' || mode === 'linkedboard') {
         const currentCard = Utils.getCurrentCard();
-        ret = currentCard.showActivities ?? false;
+        searchId = currentCard.linkedId;
+        mode = mode.replace('linked', '');
       } else if (mode === 'card') {
-        ret = this.data()?.card?.showActivities ?? false;
+        searchId = Utils.getCurrentCardId();
       } else {
-        ret = Utils.getCurrentBoard().showActivities ?? false;
+        searchId = Session.get(`current${capitalizedMode}`);
       }
-    }
-    return ret;
-  },
-  activities() {
-    const ret = this.data().card.activities();
-    return ret;
-  },
-}).register('activities');
+      const limit = this.page.get() * activitiesPerPage;
+      if (searchId === null) return;
 
-BlazeComponent.extendComponent({
+      this.subscribe('activities', mode, searchId, limit, showActivities, () => {
+        this.loadNextPageLocked = false;
+
+        // TODO the guard can be removed as soon as the TODO above is resolved
+        if (!sidebar || !sidebar.infiniteScrolling) return;
+        // If the sidebar peak hasn't increased, that means that there are no more
+        // activities, and we can stop calling new subscriptions.
+        const nextPeakBefore = sidebar.infiniteScrolling.getNextPeak();
+        sidebar.calculateNextPeak();
+        const nextPeakAfter = sidebar.infiniteScrolling.getNextPeak();
+        if (nextPeakBefore === nextPeakAfter) {
+          sidebar.infiniteScrolling.resetNextPeak();
+        }
+      });
+    }
+  });
+});
+
+function _showActivities(data) {
+  let ret = false;
+  let mode = data?.mode;
+  if (mode) {
+    if (mode === 'linkedcard' || mode === 'linkedboard') {
+      const currentCard = Utils.getCurrentCard();
+      ret = currentCard.showActivities ?? false;
+    } else if (mode === 'card') {
+      ret = data?.card?.showActivities ?? false;
+    } else {
+      ret = Utils.getCurrentBoard().showActivities ?? false;
+    }
+  }
+  return ret;
+}
+
+Template.activities.helpers({
+  activities() {
+    return this.card.activities();
+  },
+});
+
+Template.activity.helpers({
   checkItem() {
-    const checkItemId = this.currentData().activity.checklistItemId;
+    const checkItemId = this.activity.checklistItemId;
     const checkItem = ReactiveCache.getChecklistItem(checkItemId);
     return checkItem && checkItem.title;
   },
 
   boardLabelLink() {
-    const data = this.currentData();
     const currentBoardId = Session.get('currentBoard');
-    if (data.mode !== 'board') {
-      // data.mode: card, linkedcard, linkedboard
-      return createBoardLink(data.activity.board(), data.activity.listName ? data.activity.listName : null);
+    if (this.mode !== 'board') {
+      return createBoardLink(this.activity.board(), this.activity.listName ? this.activity.listName : null);
     }
-    else if (currentBoardId != data.activity.boardId) {
-      // data.mode: board
-      // current activitie is linked
-      return createBoardLink(data.activity.board(), data.activity.listName ? data.activity.listName : null);
+    else if (currentBoardId != this.activity.boardId) {
+      return createBoardLink(this.activity.board(), this.activity.listName ? this.activity.listName : null);
     }
     return TAPi18n.__('this-board');
   },
 
   cardLabelLink() {
-    const data = this.currentData();
     const currentBoardId = Session.get('currentBoard');
-    if (data.mode == 'card') {
-      // data.mode: card
+    if (this.mode == 'card') {
       return TAPi18n.__('this-card');
     }
-    else if (data.mode !== 'board') {
-      // data.mode: linkedcard, linkedboard
-      return createCardLink(data.activity.card(), null);
+    else if (this.mode !== 'board') {
+      return createCardLink(this.activity.card(), null);
     }
-    else if (currentBoardId != data.activity.boardId) {
-      // data.mode: board
-      // current activitie is linked
-      return createCardLink(data.activity.card(), data.activity.board().title);
+    else if (currentBoardId != this.activity.boardId) {
+      return createCardLink(this.activity.card(), this.activity.board().title);
     }
-    return createCardLink(this.currentData().activity.card(), null);
+    return createCardLink(this.activity.card(), null);
   },
 
   cardLink() {
-    const data = this.currentData();
     const currentBoardId = Session.get('currentBoard');
-    if (data.mode !== 'board') {
-      // data.mode: card, linkedcard, linkedboard
-      return createCardLink(data.activity.card(), null);
+    if (this.mode !== 'board') {
+      return createCardLink(this.activity.card(), null);
     }
-    else if (currentBoardId != data.activity.boardId) {
-      // data.mode: board
-      // current activitie is linked
-      return createCardLink(data.activity.card(), data.activity.board().title);
+    else if (currentBoardId != this.activity.boardId) {
+      return createCardLink(this.activity.card(), this.activity.board().title);
     }
-    return createCardLink(this.currentData().activity.card(), null);
+    return createCardLink(this.activity.card(), null);
   },
 
   receivedDate() {
-    const receivedDate = this.currentData().activity.card();
-    if (!receivedDate) return null;
-    return receivedDate.receivedAt;
+    const card = this.activity.card();
+    if (!card) return null;
+    return card.receivedAt;
   },
 
   startDate() {
-    const startDate = this.currentData().activity.card();
-    if (!startDate) return null;
-    return startDate.startAt;
+    const card = this.activity.card();
+    if (!card) return null;
+    return card.startAt;
   },
 
   dueDate() {
-    const dueDate = this.currentData().activity.card();
-    if (!dueDate) return null;
-    return dueDate.dueAt;
+    const card = this.activity.card();
+    if (!card) return null;
+    return card.dueAt;
   },
 
   endDate() {
-    const endDate = this.currentData().activity.card();
-    if (!endDate) return null;
-    return endDate.endAt;
+    const card = this.activity.card();
+    if (!card) return null;
+    return card.endAt;
   },
 
   lastLabel() {
-    const lastLabelId = this.currentData().activity.labelId;
+    const lastLabelId = this.activity.labelId;
     if (!lastLabelId) return null;
     const lastLabel = ReactiveCache.getBoard(
-      this.currentData().activity.boardId,
+      this.activity.boardId,
     ).getLabelById(lastLabelId);
     if (lastLabel && (lastLabel.name === undefined || lastLabel.name === '')) {
       return lastLabel.color;
@@ -174,7 +174,7 @@ BlazeComponent.extendComponent({
 
   lastCustomField() {
     const lastCustomField = ReactiveCache.getCustomField(
-      this.currentData().activity.customFieldId,
+      this.activity.customFieldId,
     );
     if (!lastCustomField) return null;
     return lastCustomField.name;
@@ -182,16 +182,15 @@ BlazeComponent.extendComponent({
 
   lastCustomFieldValue() {
     const lastCustomField = ReactiveCache.getCustomField(
-      this.currentData().activity.customFieldId,
+      this.activity.customFieldId,
     );
     if (!lastCustomField) return null;
-    const value = this.currentData().activity.value;
+    const value = this.activity.value;
     if (
       lastCustomField.settings.dropdownItems &&
       lastCustomField.settings.dropdownItems.length > 0
     ) {
-      const dropDownValue = _.find(
-        lastCustomField.settings.dropdownItems,
+      const dropDownValue = lastCustomField.settings.dropdownItems.find(
         item => {
           return item._id === value;
         },
@@ -202,13 +201,13 @@ BlazeComponent.extendComponent({
   },
 
   listLabel() {
-    const activity = this.currentData().activity;
+    const activity = this.activity;
     const list = activity.list();
     return (list && list.title) || activity.title;
   },
 
   sourceLink() {
-    const source = this.currentData().activity.source;
+    const source = this.activity.source;
     if (source) {
       if (source.url) {
         return Blaze.toHTML(
@@ -216,15 +215,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;
@@ -232,12 +227,12 @@ BlazeComponent.extendComponent({
 
   memberLink() {
     return Blaze.toHTMLWithData(Template.memberName, {
-      user: this.currentData().activity.member(),
+      user: this.activity.member(),
     });
   },
 
   attachmentLink() {
-    const attachment = this.currentData().activity.attachment();
+    const attachment = this.activity.attachment();
     // trying to display url before file is stored generates js errors
     return (
       (attachment &&
@@ -248,24 +243,23 @@ BlazeComponent.extendComponent({
               href: `${attachment.link()}?download=true`,
               target: '_blank',
             },
-            DOMPurify.sanitize(attachment.name),
+            sanitizeText(attachment.name),
           ),
         )) ||
-      DOMPurify.sanitize(this.currentData().activity.attachmentName)
+      sanitizeText(this.activity.attachmentName)
     );
   },
 
   customField() {
-    const customField = this.currentData().activity.customField();
+    const customField = this.activity.customField();
     if (!customField) return null;
     return customField.name;
   },
-
-}).register('activity');
+});
 
 Template.activity.helpers({
   sanitize(value) {
-    return DOMPurify.sanitize(value, { ALLOW_UNKNOWN_PROTOCOLS: true });
+    return sanitizeHTML(value);
   },
 });
 
@@ -336,7 +330,7 @@ function createCardLink(card, board) {
           href: card.originRelativeUrl(),
           class: 'action-card',
         },
-        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        sanitizeHTML(text),
       ),
     )
   );
@@ -353,7 +347,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

@@ -108,15 +108,12 @@
   text-decoration: none;
   height: 24px;
 }
-.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
-  font-size: 17px;
+.comments .comment .comment-desc .reactions .open-comment-reaction-popup span {
+  display: inline-block;
+  font-size: clamp(14px, 2vw, 18px);
   font-weight: 500;
-  margin-left: 2px;
-}
-.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
-  font-size: 8px;
-  margin-top: -7px;
-  margin-left: 1px;
+  line-height: 1;
+  margin-left: 4px;
 }
 .comments .comment .comment-desc .reactions .reaction {
   cursor: pointer;

client/components/activities/comments.jade

@@ -25,13 +25,14 @@ template(name="comment")
           = text
         .edit-controls
           button.primary(type="submit") {{_ 'edit'}}
-          .fa.fa-times-thin.js-close-inlined-form
+          a.js-close-inlined-form(title="{{_ 'close' }}")
+            i.fa.fa-times-thin
       else
         .comment-text
           +viewer
             = text
         +commentReactions(reactions=reactions commentId=_id)
-        span(title=createdAt).comment-meta {{ moment createdAt }}
+        span(title=createdAt).comment-meta {{ displayDate createdAt }}
           if($eq currentUser._id userId)
             +editOrDeleteComment
           else if currentUser.isBoardAdmin
@@ -54,9 +55,11 @@ template(name="commentReactions")
         span.reaction-codepoint !{reaction.reactionCodepoint}
         span.reaction-count #{reaction.userIds.length}
     if (currentUser.isBoardMember)
-      a.open-comment-reaction-popup(title="{{_ 'addReactionPopup-title'}}")
-        i.fa.fa-smile-o
-        i.fa.fa-plus
+      unless currentUser.isReadOnly
+        unless currentUser.isReadAssignedOnly
+          a.open-comment-reaction-popup(title="{{_ 'addReactionPopup-title'}}")
+            span(title="{{_ 'reaction' }}") 😀
+            span(title="{{_ 'add' }}") ➕
 
 template(name="addReactionPopup")
   .reactions-popup

client/components/activities/comments.js

@@ -1,94 +1,85 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import CardComments from '/models/cardComments';
+import { UnsavedEdits } from '/client/lib/unsavedEdits';
+import { EscapeActions } from '/client/lib/escapeActions';
+import { Utils } from '/client/lib/utils';
+import autosize from 'autosize';
 
 const commentFormIsOpen = new ReactiveVar(false);
 
-BlazeComponent.extendComponent({
-  onDestroyed() {
-    commentFormIsOpen.set(false);
-    $('.note-popover').hide();
-  },
+Template.commentForm.onDestroyed(function () {
+  commentFormIsOpen.set(false);
+  $('.note-popover').hide();
+});
 
+Template.commentForm.helpers({
   commentFormIsOpen() {
     return commentFormIsOpen.get();
   },
+});
 
-  getInput() {
-    return this.$('.js-new-comment-input');
+Template.commentForm.events({
+  'submit .js-new-comment-form'(evt, tpl) {
+    const input = tpl.$('.js-new-comment-input');
+    const text = input.val().trim();
+    const card = Template.currentData();
+    let boardId = card.boardId;
+    let cardId = card._id;
+    if (card.isLinkedCard()) {
+      boardId = ReactiveCache.getCard(card.linkedId).boardId;
+      cardId = card.linkedId;
+    } else if (card.isLinkedBoard()) {
+      boardId = card.linkedId;
+    }
+    if (text) {
+      CardComments.insert({
+        text,
+        boardId,
+        cardId,
+      });
+      resetCommentInput(input);
+      Tracker.flush();
+      autosize.update(input);
+      input.trigger('submitted');
+    }
+    evt.preventDefault();
   },
-
-  events() {
-    return [
-      {
-        'submit .js-new-comment-form'(evt) {
-          const input = this.getInput();
-          const text = input.val().trim();
-          const card = this.currentData();
-          let boardId = card.boardId;
-          let cardId = card._id;
-          if (card.isLinkedCard()) {
-            boardId = ReactiveCache.getCard(card.linkedId).boardId;
-            cardId = card.linkedId;
-          } else if (card.isLinkedBoard()) {
-            boardId = card.linkedId;
-          }
-          if (text) {
-            CardComments.insert({
-              text,
-              boardId,
-              cardId,
-            });
-            resetCommentInput(input);
-            Tracker.flush();
-            autosize.update(input);
-            input.trigger('submitted');
-          }
-          evt.preventDefault();
-        },
-        // Pressing Ctrl+Enter should submit the form
-        'keydown form textarea'(evt) {
-          if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
-            this.find('button[type=submit]').click();
-          }
-        },
-      },
-    ];
+  // Pressing Ctrl+Enter should submit the form
+  'keydown form textarea'(evt, tpl) {
+    if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+      tpl.find('button[type=submit]').click();
+    }
   },
-}).register('commentForm');
+});
 
-BlazeComponent.extendComponent({
+Template.comments.helpers({
   getComments() {
-    const ret = this.data().comments();
-    return ret;
+    const data = Template.currentData();
+    if (!data || typeof data.comments !== 'function') return [];
+    return data.comments();
   },
-}).register("comments");
+});
 
-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'click .js-delete-comment': Popup.afterConfirm('deleteComment', () => {
-          const commentId = this.data()._id;
-          CardComments.remove(commentId);
-          Popup.back();
-        }),
-        'submit .js-edit-comment'(evt) {
-          evt.preventDefault();
-          const commentText = this.currentComponent()
-            .getValue()
-            .trim();
-          const commentId = this.data()._id;
-          if (commentText) {
-            CardComments.update(commentId, {
-              $set: {
-                text: commentText,
-              },
-            });
-          }
+Template.comment.events({
+  'click .js-delete-comment': Popup.afterConfirm('deleteComment', function () {
+    const commentId = this._id;
+    CardComments.remove(commentId);
+    Popup.back();
+  }),
+  'submit .js-edit-comment'(evt, tpl) {
+    evt.preventDefault();
+    const textarea = tpl.find('.js-edit-comment textarea,input[type=text]');
+    const commentText = textarea && textarea.value ? textarea.value.trim() : '';
+    const commentId = this._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) {

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
+          i.fa.fa-cog
+          | {{_ 'converting-board'}}
+        p {{_ 'converting-board-description'}}
+
+      .board-conversion-content
+        .conversion-progress
+          .progress-bar
+            .progress-fill(style="width: {{conversionProgress}}%")
+          .progress-text {{conversionProgress}}%
+
+        .conversion-status
+          i.fa.fa-cog
+          | {{conversionStatus}}
+
+        .conversion-time(style="{{#unless conversionEstimatedTime}}display: none;{{/unless}}")
+          i.fa.fa-clock-o
+          | {{_ 'estimated-time-remaining'}}: {{conversionEstimatedTime}}
+
+      .board-conversion-footer
+        .conversion-info
+          i.fa.fa-info-circle
+          | {{_ 'conversion-info-text'}}

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/boardArchive.jade

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

client/components/boards/boardArchive.js

@@ -1,10 +1,13 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+import Boards from '/models/boards';
+import { Utils } from '/client/lib/utils';
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.subscribe('archivedBoards');
-  },
+Template.archivedBoards.onCreated(function () {
+  this.subscribe('archivedBoards');
+});
 
+Template.archivedBoards.helpers({
   isBoardAdmin() {
     return ReactiveCache.getCurrentUser().isBoardAdmin();
   },
@@ -18,38 +21,34 @@ BlazeComponent.extendComponent({
     );
     return ret;
   },
+});
 
-  events() {
-    return [
-      {
-        'click .js-restore-board'() {
-          // TODO : Make isSandstorm variable global
-          const isSandstorm =
-            Meteor.settings &&
-            Meteor.settings.public &&
-            Meteor.settings.public.sandstorm;
-          if (isSandstorm && Utils.getCurrentBoardId()) {
-            const currentBoard = Utils.getCurrentBoard();
-            currentBoard.archive();
-          }
-          const board = this.currentData();
-          board.restore();
-          Utils.goBoardId(board._id);
-        },
-        'click .js-delete-board': Popup.afterConfirm('boardDelete', function() {
-          Popup.back();
-          const isSandstorm =
-            Meteor.settings &&
-            Meteor.settings.public &&
-            Meteor.settings.public.sandstorm;
-          if (isSandstorm && Utils.getCurrentBoardId()) {
-            const currentBoard = Utils.getCurrentBoard();
-            Boards.remove(currentBoard._id);
-          }
-          Boards.remove(this._id);
-          FlowRouter.go('home');
-        }),
-      },
-    ];
+Template.archivedBoards.events({
+  async 'click .js-restore-board'() {
+    // TODO : Make isSandstorm variable global
+    const isSandstorm =
+      Meteor.settings &&
+      Meteor.settings.public &&
+      Meteor.settings.public.sandstorm;
+    if (isSandstorm && Utils.getCurrentBoardId()) {
+      const currentBoard = Utils.getCurrentBoard();
+      await currentBoard.archive();
+    }
+    const board = this;
+    await board.restore();
+    Utils.goBoardId(board._id);
   },
-}).register('archivedBoards');
+  'click .js-delete-board': Popup.afterConfirm('boardDelete', async function() {
+    Popup.back();
+    const isSandstorm =
+      Meteor.settings &&
+      Meteor.settings.public &&
+      Meteor.settings.public.sandstorm;
+    if (isSandstorm && Utils.getCurrentBoardId()) {
+      const currentBoard = Utils.getCurrentBoard();
+      await Boards.removeAsync(currentBoard._id);
+    }
+    await Boards.removeAsync(this._id);
+    FlowRouter.go('home');
+  }),
+});

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,6 +36,243 @@
   bottom: 0;
   transition: margin 0.1s;
   overflow-y: auto;
+  width: 100%;
+  min-width: 100%;
+}
+
+/* Ensure horizontal scrollbar is visible for high zoom levels */
+.board-wrapper .board-canvas[style*="overflow-x: auto"] {
+  overflow-x: auto !important;
+  overflow-y: auto !important;
+}
+
+/* Style the scrollbar for better visibility */
+.board-wrapper .board-canvas::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+
+.board-wrapper .board-canvas::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+
+.board-wrapper .board-canvas::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 6px;
+}
+
+.board-wrapper .board-canvas::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Ensure content area can scroll horizontally for high zoom levels */
+#content[style*="overflow-x: auto"] {
+  overflow-x: auto !important;
+  overflow-y: auto !important;
+}
+
+/* Style content area scrollbar */
+#content::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+
+#content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+
+#content::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 6px;
+}
+
+#content::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Ensure scrollbars are always visible for high zoom levels */
+#content[style*="overflow-x: auto"] {
+  position: relative;
+}
+
+#content[style*="overflow-x: auto"]::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+
+    /* Force vertical scrollbar to always be visible */
+    #content[style*="overflow-y: auto"] {
+      overflow-y: scroll !important;
+    }
+
+    /* Mobile - make all text 2x bigger inside #content by default (icons stay same size) */
+    @media screen and (max-width: 800px),
+           screen and (max-device-width: 800px),
+           screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
+           screen and (max-width: 800px) and (orientation: portrait),
+           screen and (max-width: 800px) and (orientation: landscape) {
+      #content {
+        font-size: 2em !important; /* 2x bigger base font size for content area */
+      }
+
+      /* Make all text elements 2x bigger */
+      #content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
+      #content p, #content span, #content div, #content a, #content button,
+      #content .minicard, #content .list-header-name, #content .board-header-btn,
+      #content .card-title, #content .card-details, #content .card-description,
+      #content .swimlane-header, #content .list-title, #content .card-text,
+      #content .member, #content .member-name, #content .member-initials,
+      #content .checklist-item, #content .checklist-title, #content .comment,
+      #content .activity, #content .activity-text, #content .activity-time,
+      #content .board-title, #content .board-description, #content .list-name,
+      #content .card-text, #content .card-title, #content .card-description,
+      #content .swimlane-title, #content .swimlane-description,
+      #content .board-header-title, #content .board-header-description,
+      #content .card-detail-title, #content .card-detail-description,
+      #content .list-header-title, #content .list-header-description,
+      #content .swimlane-header-title, #content .swimlane-header-description,
+      #content .minicard-title, #content .minicard-description,
+      #content .card-comment, #content .card-comment-text,
+      #content .checklist-item-text, #content .checklist-item-title,
+      #content .activity-item, #content .activity-item-text,
+      #content .board-member, #content .board-member-name,
+      #content .team-member, #content .team-member-name,
+      #content .org-member, #content .org-member-name,
+      #content .template-member, #content .template-member-name,
+      #content .user-name, #content .user-email, #content .user-role,
+      #content .setting-title, #content .setting-description,
+      #content .popup-title, #content .popup-description,
+      #content .modal-title, #content .modal-description,
+      #content .notification-title, #content .notification-text,
+      #content .announcement-title, #content .announcement-text,
+      #content .offline-warning-title, #content .offline-warning-text,
+      #content .error-title, #content .error-text,
+      #content .success-title, #content .success-text,
+      #content .info-title, #content .info-text,
+      #content .warning-title, #content .warning-text {
+        font-size: 1em !important; /* Use inherited 2x scaling */
+      }
+
+      /* Keep icons the same size (don't scale them) */
+      #content .fa, #content .icon, #content i {
+        font-size: 1em !important; /* Keep original icon size */
+      }
+
+      /* Reset specific icon sizes to prevent double scaling */
+      #content .fa-home, #content .fa-bars, #content .fa-search,
+      #content .fa-bell, #content .fa-user, #content .fa-cog,
+      #content .fa-plus, #content .fa-minus, #content .fa-edit,
+      #content .fa-trash, #content .fa-save, #content .fa-cancel,
+      #content .fa-arrow-left, #content .fa-arrow-right,
+      #content .fa-arrow-up, #content .fa-arrow-down,
+      #content .fa-check, #content .fa-times, #content .fa-close,
+      #content .fa-star, #content .fa-heart, #content .fa-thumbs-up,
+      #content .fa-thumbs-down, #content .fa-comment, #content .fa-reply,
+      #content .fa-share, #content .fa-download, #content .fa-upload,
+      #content .fa-copy, #content .fa-paste, #content .fa-cut,
+      #content .fa-undo, #content .fa-redo, #content .fa-refresh,
+      #content .fa-sync, #content .fa-spinner, #content .fa-loading,
+      #content .fa-info, #content .fa-question, #content .fa-exclamation,
+      #content .fa-warning, #content .fa-error, #content .fa-success,
+      #content .fa-check-circle, #content .fa-times-circle,
+      #content .fa-exclamation-circle, #content .fa-question-circle,
+      #content .fa-info-circle, #content .fa-warning-circle,
+      #content .fa-error-circle, #content .fa-success-circle {
+        font-size: 1em !important; /* Keep original icon size */
+      }
+    }
+
+    /* Fallback for iPhone devices using JavaScript detection */
+    .iphone-device #content {
+      font-size: 2em !important; /* 2x bigger base font size for content area */
+    }
+
+    .iphone-device #content h1, .iphone-device #content h2, .iphone-device #content h3, .iphone-device #content h4, .iphone-device #content h5, .iphone-device #content h6,
+    .iphone-device #content p, .iphone-device #content span, .iphone-device #content div, .iphone-device #content a, .iphone-device #content button,
+    .iphone-device #content .minicard, .iphone-device #content .list-header-name, .iphone-device #content .board-header-btn,
+    .iphone-device #content .card-title, .iphone-device #content .card-details, .iphone-device #content .card-description,
+    .iphone-device #content .swimlane-header, .iphone-device #content .list-title, .iphone-device #content .card-text,
+    .iphone-device #content .member, .iphone-device #content .member-name, .iphone-device #content .member-initials,
+    .iphone-device #content .checklist-item, .iphone-device #content .checklist-title, .iphone-device #content .comment,
+    .iphone-device #content .activity, .iphone-device #content .activity-text, .iphone-device #content .activity-time,
+    .iphone-device #content .board-title, .iphone-device #content .board-description, .iphone-device #content .list-name,
+    .iphone-device #content .card-text, .iphone-device #content .card-title, .iphone-device #content .card-description,
+    .iphone-device #content .swimlane-title, .iphone-device #content .swimlane-description,
+    .iphone-device #content .board-header-title, .iphone-device #content .board-header-description,
+    .iphone-device #content .card-detail-title, .iphone-device #content .card-detail-description,
+    .iphone-device #content .list-header-title, .iphone-device #content .list-header-description,
+    .iphone-device #content .swimlane-header-title, .iphone-device #content .swimlane-header-description,
+    .iphone-device #content .minicard-title, .iphone-device #content .minicard-description,
+    .iphone-device #content .card-comment, .iphone-device #content .card-comment-text,
+    .iphone-device #content .checklist-item-text, .iphone-device #content .checklist-item-title,
+    .iphone-device #content .activity-item, .iphone-device #content .activity-item-text,
+    .iphone-device #content .board-member, .iphone-device #content .board-member-name,
+    .iphone-device #content .team-member, .iphone-device #content .team-member-name,
+    .iphone-device #content .org-member, .iphone-device #content .org-member-name,
+    .iphone-device #content .template-member, .iphone-device #content .template-member-name,
+    .iphone-device #content .user-name, .iphone-device #content .user-email, .iphone-device #content .user-role,
+    .iphone-device #content .setting-title, .iphone-device #content .setting-description,
+    .iphone-device #content .popup-title, .iphone-device #content .popup-description,
+    .iphone-device #content .modal-title, .iphone-device #content .modal-description,
+    .iphone-device #content .notification-title, .iphone-device #content .notification-text,
+    .iphone-device #content .announcement-title, .iphone-device #content .announcement-text,
+    .iphone-device #content .offline-warning-title, .iphone-device #content .offline-warning-text,
+    .iphone-device #content .error-title, .iphone-device #content .error-text,
+    .iphone-device #content .success-title, .iphone-device #content .success-text,
+    .iphone-device #content .info-title, .iphone-device #content .info-text,
+    .iphone-device #content .warning-title, .iphone-device #content .warning-text {
+      font-size: 1em !important; /* Use inherited 2x scaling */
+    }
+
+    /* Keep icons the same size for iPhone devices */
+    .iphone-device #content .fa, .iphone-device #content .icon, .iphone-device #content i {
+      font-size: 1em !important; /* Keep original icon size */
+    }
+
+/* Mobile iPhone: scale card details text and icons to 2x */
+body.mobile-mode.iphone-device .card-details {
+  font-size: 2em !important;
+}
+body.mobile-mode.iphone-device .card-details .fa,
+body.mobile-mode.iphone-device .card-details .icon,
+body.mobile-mode.iphone-device .card-details i,
+body.mobile-mode.iphone-device .card-details .emoji-icon,
+body.mobile-mode.iphone-device .card-details a,
+body.mobile-mode.iphone-device .card-details p,
+body.mobile-mode.iphone-device .card-details span,
+body.mobile-mode.iphone-device .card-details div,
+body.mobile-mode.iphone-device .card-details button,
+body.mobile-mode.iphone-device .card-details input,
+body.mobile-mode.iphone-device .card-details select,
+body.mobile-mode.iphone-device .card-details textarea {
+  font-size: inherit !important;
+}
+/* Section titles slightly larger than content but not as big as card title */
+body.mobile-mode.iphone-device .card-details .card-details-item-title {
+  font-size: 1.1em !important;
+  font-weight: bold;
+}
+
+/* Ensure scrollbars are positioned correctly */
+#content[style*="overflow-x: auto"]::-webkit-scrollbar:vertical {
+  width: 12px;
+}
+
+#content[style*="overflow-x: auto"]::-webkit-scrollbar:horizontal {
+  height: 12px;
+}
+
+/* Force both scrollbars to always be visible for high zoom levels */
+#content[style*="overflow-x: auto"][style*="overflow-y: auto"] {
+  overflow-x: scroll !important;
+  overflow-y: scroll !important;
+}
+
+/* Ensure the right scrollbar is always visible on the inner right edge */
+#content[style*="overflow-y: auto"] {
+  scrollbar-gutter: stable;
 }
 .board-wrapper .board-canvas .board-overlay {
   position: fixed;
@@ -29,19 +287,106 @@
   animation: fadeIn 0.2s;
   z-index: 16;
 }
+
+/* Fix for mobile Safari: ensure overlay stays behind card details */
+@media screen and (max-width: 800px) {
+  .board-wrapper .board-canvas .board-overlay {
+    z-index: 17 !important;
+  }
+
+  /* In desktop mode on small screens, still keep overlay behind card */
+  body.desktop-mode .board-wrapper .board-canvas .board-overlay {
+    z-index: 17 !important;
+  }
+}
+
+/* In mobile mode, lower the overlay z-index to stay behind card details */
+body.mobile-mode .board-wrapper .board-canvas .board-overlay {
+  z-index: 17 !important;
+}
+
+/* iPhone in desktop mode: remove overlay to avoid blocking card */
+body.desktop-mode.iphone-device .board-wrapper .board-canvas .board-overlay {
+  display: none !important;
+  pointer-events: none !important;
+}
+
+/* Desktop mode: hide overlay to allow multiple cards and board interaction */
+body.desktop-mode .board-wrapper .board-canvas .board-overlay {
+  display: none !important;
+  pointer-events: none !important;
+}
 .board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
 .board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
   display: none;
 }
-@media screen and (max-width: 800px) {
+/* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
+.board-wrapper.mobile-view {
+  width: 100vw !important;
+  max-width: 100vw !important;
+  min-width: 100vw !important;
+  left: 0 !important;
+  right: 0 !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+.board-wrapper.mobile-view .board-canvas {
+  width: 100vw !important;
+  max-width: 100vw !important;
+  min-width: 100vw !important;
+  left: 0 !important;
+  right: 0 !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+.board-wrapper.mobile-view .board-canvas.mobile-view .swimlane {
+  border-bottom: 1px solid #ccc;
+  display: block !important;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden !important;
+  overflow-y: auto;
+  width: 100vw !important;
+  max-width: 100vw !important;
+  min-width: 100vw !important;
+}
+
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
+  .board-wrapper {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    left: 0 !important;
+    right: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+  }
+
+  .board-wrapper .board-canvas {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    left: 0 !important;
+    right: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+  }
+
   .board-wrapper .board-canvas .swimlane {
     border-bottom: 1px solid #ccc;
-    display: flex;
+    display: block !important;
     flex-direction: column;
     margin: 0;
-    padding: 0 0px 0px 0;
-    overflow-x: hidden;
+    padding: 0;
+    overflow-x: hidden !important;
     overflow-y: auto;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
   }
 }
 .calendar-event-green {
@@ -219,3 +564,10 @@
   font-size: 25px;
   cursor: pointer;
 }
+
+/* Global file drag over state for board canvas */
+.board-canvas.file-drag-over {
+  background-color: rgba(0, 123, 255, 0.05) !important;
+  border: 2px dashed #007bff !important;
+  transition: all 0.2s ease;
+}

client/components/boards/boardBody.jade

@@ -1,5 +1,8 @@
 template(name="board")
-  if isBoardReady.get
+
+  if isConverting
+    +boardConversionProgress
+  else if isBoardReady
     if currentBoard
       if onlyShowCurrentCard
         +cardDetails(currentCard)
@@ -16,14 +19,19 @@ template(name="boardBody")
   if notDisplayThisBoard
    | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
   else
-    .board-wrapper(class=currentBoard.colorClass)
+    // Debug information (remove in production)
+    if debugBoardState
+      .debug-info(style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); color: white; padding: 10px; z-index: 9999; font-size: 12px;")
+        | {{_ 'board'}}: {{currentBoard.title}} | {{_ 'view'}}: {{boardView}} | {{_ 'has-swimlanes'}}: {{hasSwimlanes}} | {{_ 'swimlanes'}}: {{currentBoard.swimlanes.length}}
+    .board-wrapper(class=currentBoard.colorClass class="{{#if isMiniScreen}}mobile-view{{/if}}")
       .board-canvas.js-swimlanes(
         class="{{#if hasSwimlanes}}dragscroll{{/if}}"
         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="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}")
-        if showOverlay.get
+        class="{{#if draggingActive}}is-dragging-active{{/if}}"
+        class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}"
+        class="{{#if isMiniScreen}}mobile-view{{/if}}")
+        if showOverlay
           .board-overlay
         if currentBoard.isTemplatesBoard
           each currentBoard.swimlanes
@@ -33,15 +41,25 @@ template(name="boardBody")
             each currentBoard.swimlanes
               +swimlane(this)
           else
-            a.js-empty-board-add-swimlane(title="{{_ 'add-swimlane'}}")
-              h1.big-message.quiet
-                | {{_ 'add-swimlane'}} +
+            // Fallback: If no swimlanes exist, show lists instead of empty message
+            +listsGroup(currentBoard)
         else if isViewLists
           +listsGroup(currentBoard)
         else if isViewCalendar
           +calendarView
+        else if isViewGantt
+          +ganttView
         else
-          +listsGroup(currentBoard)
+          // Default view - show swimlanes if they exist, otherwise show lists
+          if hasSwimlanes
+            each currentBoard.swimlanes
+              +swimlane(this)
+          else
+            +listsGroup(currentBoard)
+      //- Render multiple open cards in desktop mode
+      unless isMiniScreen
+        each openCards
+          +cardDetails(this cardIndex=@index)
       +sidebar
 
 template(name="calendarView")
@@ -49,4 +67,4 @@ template(name="calendarView")
     .calendar-view.swimlane
       if currentCard
         +cardDetails(currentCard)
-      +fullcalendar(calendarOptions)
+      +fullcalendar(calendarOptions)

client/components/boards/boardColors.css

@@ -1,4 +1,4 @@
-/* =============== 
+/* ===============
 THEME - NEPHRITIS
 =================*/
 
@@ -49,6 +49,12 @@ THEME - NEPHRITIS
   border-bottom: 2px solid #27ae60;
   border-right: 2px solid #27ae60;
 }
+.board-color-nephritis .checklist-progress-bar {
+  background-color: #d4f1dd !important;
+}
+.board-color-nephritis .checklist-progress-bar .checklist-progress {
+  background-color: #27ae60 !important;
+}
 .board-color-nephritis .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e7faef;
 }
@@ -99,7 +105,7 @@ THEME - NEPHRITIS
 
 /* === END NEPHRITIS THEME === */
 
-/* =============== 
+/* ===============
 THEME - Pomegranate
 =================*/
 
@@ -150,6 +156,12 @@ THEME - Pomegranate
   border-bottom: 2px solid #c0392b;
   border-right: 2px solid #c0392b;
 }
+.board-color-pomegranate .checklist-progress-bar {
+  background-color: #f5d5d2 !important;
+}
+.board-color-pomegranate .checklist-progress-bar .checklist-progress {
+  background-color: #c0392b !important;
+}
 .board-color-pomegranate .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #faeae9;
 }
@@ -200,7 +212,7 @@ THEME - Pomegranate
 
 /* === END Pomegranate THEME === */
 
-/* =============== 
+/* ===============
 THEME - Belize
 =================*/
 
@@ -251,6 +263,12 @@ THEME - Belize
   border-bottom: 2px solid #2980b9;
   border-right: 2px solid #2980b9;
 }
+.board-color-belize .checklist-progress-bar {
+  background-color: #d1e7f5 !important;
+}
+.board-color-belize .checklist-progress-bar .checklist-progress {
+  background-color: #2980b9 !important;
+}
 .board-color-belize .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e8f3fa;
 }
@@ -301,7 +319,7 @@ THEME - Belize
 
 /* === END Belize THEME === */
 
-/* =============== 
+/* ===============
 THEME - Wisteria
 =================*/
 
@@ -352,6 +370,12 @@ THEME - Wisteria
   border-bottom: 2px solid #8e44ad;
   border-right: 2px solid #8e44ad;
 }
+.board-color-wisteria .checklist-progress-bar {
+  background-color: #e8d9f0 !important;
+}
+.board-color-wisteria .checklist-progress-bar .checklist-progress {
+  background-color: #8e44ad !important;
+}
 .board-color-wisteria .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #f4ecf7;
 }
@@ -402,7 +426,7 @@ THEME - Wisteria
 
 /* === END Wisteria THEME === */
 
-/* =============== 
+/* ===============
 THEME - Midnight
 =================*/
 
@@ -453,6 +477,12 @@ THEME - Midnight
   border-bottom: 2px solid #2c3e50;
   border-right: 2px solid #2c3e50;
 }
+.board-color-midnight .checklist-progress-bar {
+  background-color: #d2dae2 !important;
+}
+.board-color-midnight .checklist-progress-bar .checklist-progress {
+  background-color: #2c3e50 !important;
+}
 .board-color-midnight .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e6ecf1;
 }
@@ -503,7 +533,7 @@ THEME - Midnight
 
 /* === END Midnight THEME === */
 
-/* =============== 
+/* ===============
 THEME - Pumpkin
 =================*/
 
@@ -554,6 +584,12 @@ THEME - Pumpkin
   border-bottom: 2px solid #e67e22;
   border-right: 2px solid #e67e22;
 }
+.board-color-pumpkin .checklist-progress-bar {
+  background-color: #f9e5d1 !important;
+}
+.board-color-pumpkin .checklist-progress-bar .checklist-progress {
+  background-color: #e67e22 !important;
+}
 .board-color-pumpkin .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #fdf2e9;
 }
@@ -604,7 +640,7 @@ THEME - Pumpkin
 
 /* === END Pumpkin THEME === */
 
-/* =============== 
+/* ===============
 THEME - Moderate Pink
 =================*/
 
@@ -655,6 +691,12 @@ THEME - Moderate Pink
   border-bottom: 2px solid #cd5a91;
   border-right: 2px solid #cd5a91;
 }
+.board-color-moderatepink .checklist-progress-bar {
+  background-color: #f4dde8 !important;
+}
+.board-color-moderatepink .checklist-progress-bar .checklist-progress {
+  background-color: #cd5a91 !important;
+}
 .board-color-moderatepink .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #faeef4;
 }
@@ -705,7 +747,7 @@ THEME - Moderate Pink
 
 /* === END Moderatepink THEME === */
 
-/* =============== 
+/* ===============
 THEME - Strong Cyan
 =================*/
 
@@ -756,6 +798,12 @@ THEME - Strong Cyan
   border-bottom: 2px solid #00aecc;
   border-right: 2px solid #00aecc;
 }
+.board-color-strongcyan .checklist-progress-bar {
+  background-color: #ccf2f9 !important;
+}
+.board-color-strongcyan .checklist-progress-bar .checklist-progress {
+  background-color: #00aecc !important;
+}
 .board-color-strongcyan .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e0fbff;
 }
@@ -806,7 +854,7 @@ THEME - Strong Cyan
 
 /* === END Strongcyan THEME === */
 
-/* =============== 
+/* ===============
 THEME - Lime Green
 =================*/
 
@@ -857,6 +905,12 @@ THEME - Lime Green
   border-bottom: 2px solid #4bbf6b;
   border-right: 2px solid #4bbf6b;
 }
+.board-color-limegreen .checklist-progress-bar {
+  background-color: #daf4de !important;
+}
+.board-color-limegreen .checklist-progress-bar .checklist-progress {
+  background-color: #4bbf6b !important;
+}
 .board-color-limegreen .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #edf9f0;
 }
@@ -907,7 +961,7 @@ THEME - Lime Green
 
 /* === END Limegreen THEME === */
 
-/* =============== 
+/* ===============
 THEME - Dark
 =================*/
 
@@ -959,6 +1013,12 @@ THEME - Dark
   border-bottom: 2px solid #2c3e51;
   border-right: 2px solid #2c3e51;
 }
+.board-color-dark .checklist-progress-bar {
+  background-color: #d2dae2 !important;
+}
+.board-color-dark .checklist-progress-bar .checklist-progress {
+  background-color: #2c3e51 !important;
+}
 .board-color-dark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e6ecf1;
 }
@@ -1111,7 +1171,7 @@ THEME - Dark
 
 /* === END Dark THEME === */
 
-/* =============== 
+/* ===============
 THEME - Relax
 =================*/
 
@@ -1162,6 +1222,12 @@ THEME - Relax
   border-bottom: 2px solid #27ae61;
   border-right: 2px solid #27ae61;
 }
+.board-color-relax .checklist-progress-bar {
+  background-color: #d4f1dd !important;
+}
+.board-color-relax .checklist-progress-bar .checklist-progress {
+  background-color: #27ae61 !important;
+}
 .board-color-relax .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e7faef;
 }
@@ -1241,7 +1307,7 @@ THEME - Relax
 
 /* === END Relax THEME === */
 
-/* =============== 
+/* ===============
 THEME - Corteza
 =================*/
 
@@ -1292,6 +1358,12 @@ THEME - Corteza
   border-bottom: 2px solid #568ba2;
   border-right: 2px solid #568ba2;
 }
+.board-color-corteza .checklist-progress-bar {
+  background-color: #dce6ec !important;
+}
+.board-color-corteza .checklist-progress-bar .checklist-progress {
+  background-color: #568ba2 !important;
+}
 .board-color-corteza .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #eef3f6;
 }
@@ -1342,7 +1414,7 @@ THEME - Corteza
 
 /* === END Corteza THEME === */
 
-/* =============== 
+/* ===============
 THEME - Clear Blue
 =================*/
 
@@ -1397,6 +1469,12 @@ THEME - Clear Blue
   border-bottom: 2px solid #499bea;
   border-right: 2px solid #499bea;
 }
+.board-color-clearblue .checklist-progress-bar {
+  background-color: #daeefb !important;
+}
+.board-color-clearblue .checklist-progress-bar .checklist-progress {
+  background-color: #499bea !important;
+}
 .board-color-clearblue .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e0fbff;
 }
@@ -1425,7 +1503,7 @@ THEME - Clear Blue
 }
 .board-color-clearblue .list {
   background: rgba(255,255,255,0.35);
-  margin: 10px;
+  margin: 10px 0;
   border: 0;
   border-radius: 14px;
 }
@@ -1609,7 +1687,7 @@ THEME - Clear Blue
 
 /* === END Clearblue THEME === */
 
-/* =============== 
+/* ===============
 THEME - Natural
 =================*/
 
@@ -1660,6 +1738,12 @@ THEME - Natural
   border-bottom: 2px solid #596557;
   border-right: 2px solid #596557;
 }
+.board-color-natural .checklist-progress-bar {
+  background-color: #dee0dd !important;
+}
+.board-color-natural .checklist-progress-bar .checklist-progress {
+  background-color: #596557 !important;
+}
 .board-color-natural .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #eef0ee;
 }
@@ -1719,7 +1803,7 @@ THEME - Natural
 
 /* === END Natural THEME === */
 
-/* =============== 
+/* ===============
 THEME - Modern
 =================*/
 
@@ -1770,6 +1854,12 @@ THEME - Modern
   border-bottom: 2px solid #2a80b8;
   border-right: 2px solid #2a80b8;
 }
+.board-color-modern .checklist-progress-bar {
+  background-color: #d1e7f5 !important;
+}
+.board-color-modern .checklist-progress-bar .checklist-progress {
+  background-color: #2a80b8 !important;
+}
 .board-color-modern .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e8f3fa;
 }
@@ -2006,7 +2096,7 @@ THEME - Modern
 
 /* === END Modern THEME === */
 
-/* =============== 
+/* ===============
 THEME - Modern Dark
 =================*/
 
@@ -2062,6 +2152,12 @@ THEME - Modern Dark
   border-bottom: 2px solid #2a2a2a;
   border-right: 2px solid #2a2a2a;
 }
+.board-color-moderndark .checklist-progress-bar {
+  background-color: #d1d1d1 !important;
+}
+.board-color-moderndark .checklist-progress-bar .checklist-progress {
+  background-color: #2a2a2a !important;
+}
 .board-color-moderndark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #eaeaea;
 }
@@ -2496,7 +2592,7 @@ THEME - Modern Dark
 /* === END ModernDark THEME === */
 
 
-/* =============== 
+/* ===============
 THEME - Exodark
 =================*/
 
@@ -2544,8 +2640,14 @@ THEME - Exodark
   background: #1b1b1b;
 }
 .board-color-exodark .materialCheckBox.is-checked {
-  border-bottom: 2px solid #222;
-  border-right: 2px solid #222;
+  border-bottom: 2px solid #dbdbdb!important;/*Fix contrast of checkbox*/
+  border-right: 2px solid #dbdbdb!important;
+}
+.board-color-exodark .checklist-progress-bar {
+  background-color: #cccccc !important;
+}
+.board-color-exodark .checklist-progress-bar .checklist-progress {
+  background-color: #222 !important;
 }
 .board-color-exodark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
   background: #e9e9e9;
@@ -2588,7 +2690,7 @@ THEME - Exodark
   background: #222;
 }
 .board-color-exodark .list {
-  margin: 10px;
+  margin: 10px 0;
   color: #fff;
   border-radius: 15px;
   background-color: #1c1c1c;
@@ -2744,7 +2846,7 @@ THEME - Exodark
 
 /* === END Exodark THEME === */
 
-/* =============== 
+/* ===============
 THEME - Clean Dark
 =================*/
 
@@ -2811,6 +2913,7 @@ THEME - Clean Dark
 
 .board-color-cleandark .card-details {
   background: #23232B;
+  scrollbar-color: #ffffff #2e2e39;
   border-radius: 20px;
   box-shadow: none;
 }
@@ -3139,6 +3242,12 @@ THEME - Clean Dark
   margin-left: 3px;
   margin-top: 3px;
 }
+.board-color-cleandark .checklist-progress-bar {
+  background-color: #6b6b78 !important;
+}
+.board-color-cleandark .checklist-progress-bar .checklist-progress {
+  background-color: #23232B !important;
+}
 
 .board-color-cleandark .allBoards {
   white-space: nowrap;
@@ -3179,10 +3288,17 @@ THEME - Clean Dark
  margin-top: 8px;
 }
 
-/* =============== 
+.board-color-cleandark.background-box {
+  background-color:#23232B;
+} /*Fixes contrast issues with background box in theme selection list*/
+/* ===============
 THEME - Clean Light
 =================*/
 /* Please note Clean Light theme elements also contain references to some cleandark theme elements so if unable to find code you're looking for under CleanDark it might be here. This should probably be cleaned up*/
+.board-color-cleanlight.background-box {
+  background-color:#e0e0e0;
+  color:#010101!important;
+} /*Fixes issues with text colour/background box being similar no contrast */
 
 .board-color-cleanlight {
   background: #E0E0E0;
@@ -3314,7 +3430,13 @@ THEME - Clean Light
 
 .board-color-cleanlight .list .list-header .list-header-menu .js-collapse,
 .board-color-cleandark .list .list-header .list-header-menu .js-collapse {
-  display: none;
+  /* Make collapse button visible in Clean Light / Clean Dark themes.
+     Previously this was hidden which caused the missing Collapse button
+     when using these themes. Use inline-block so it lines up with other
+     header controls. */
+  display: inline-block;
+  vertical-align: middle;
+  color: inherit;
 }
 
 .board-color-cleanlight .list-header-add,
@@ -3485,7 +3607,7 @@ THEME - Clean Light
 
 .board-color-cleandark .card-details-header {
   background: #2E2E39 !important;
-  color: rgba(255, 255, 255, 1);
+  color: #FFF !important;
 }
 
 .board-color-cleanlight .card-details-header .card-details-title,
@@ -3878,6 +4000,13 @@ THEME - Clean Light
   margin-left: 3px;
   margin-top: 3px;
 }
+.board-color-cleanlight .checklist-progress-bar {
+  background-color: #f5f5f5 !important;
+}
+.board-color-cleanlight .checklist-progress-bar .checklist-progress {
+  background-color: #c0c0c0 !important;
+  color: #010101 !important;
+}
 
 .board-color-cleanlight .allBoards {
   white-space: nowrap;

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: 100vw !important;
+  max-width: 100vw !important;
+  min-width: 100vw !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+  .mobile-mode .swimlane {
+    display: block !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    margin: 0 0 2rem 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    clear: both !important;
+  }
+
+  .mobile-mode .swimlane .swimlane-header {
+    display: block !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    margin: 0 0 1rem 0 !important;
+    padding: 1rem !important;
+    font-size: clamp(18px, 2.5vw, 32px) !important;
+    font-weight: bold !important;
+    border-bottom: 2px solid #ccc !important;
+  }
+
+  .mobile-mode .swimlane .lists {
+    display: block !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    justify-content: flex-start !important;
+  }
+
+  .mobile-mode .list {
+    display: block !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    margin: 0 0 2rem 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    clear: both !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-top: none !important;
+    border-bottom: 2px solid #ccc !important;
+    flex: none !important;
+    flex-basis: auto !important;
+    flex-grow: 0 !important;
+    flex-shrink: 0 !important;
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    transform: none !important;
+  }
+
+.mobile-mode .list:first-child {
+  margin-left: 0 !important;
+  margin-top: 0 !important;
+}
+
+.mobile-mode .list:last-child {
+  margin-right: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.mobile-mode .list.ui-sortable-helper {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  height: auto !important;
+  min-height: 60px !important;
+  margin: 0 0 2rem 0 !important;
+  padding: 0 !important;
+  float: none !important;
+  clear: both !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: 2px solid #ccc !important;
+  flex: none !important;
+}
+
+.mobile-mode .list.placeholder {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  height: auto !important;
+  min-height: 60px !important;
+  margin: 0 0 2rem 0 !important;
+  padding: 0 !important;
+  float: none !important;
+  clear: both !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: 2px solid #ccc !important;
+  flex: none !important;
+}
+
+/* Override any existing responsive CSS that might interfere with mobile mode */
+.mobile-mode .board-canvas .swimlane .lists {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  flex-direction: column !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: flex-start !important;
+  overflow: visible !important;
+}
+
+.mobile-mode .board-canvas .swimlane .lists .list {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  margin: 0 0 2rem 0 !important;
+  padding: 0 !important;
+  float: none !important;
+  clear: both !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: 2px solid #ccc !important;
+  flex: none !important;
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  position: static !important;
+  left: auto !important;
+  right: auto !important;
+  top: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+}
+
+/* Force mobile mode to override any media query styles */
+@media screen and (min-width: 801px) {
+  .mobile-mode .board-canvas {
+    display: block !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    justify-content: flex-start !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+  }
+
+  .mobile-mode .swimlane {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    margin: 0 0 2rem 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    clear: both !important;
+  }
+
+  .mobile-mode .swimlane .lists {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    justify-content: flex-start !important;
+  }
+
+  .mobile-mode .list {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    margin: 0 0 2rem 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    clear: both !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-top: none !important;
+    border-bottom: 2px solid #ccc !important;
+    flex: none !important;
+    flex-basis: auto !important;
+    flex-grow: 0 !important;
+    flex-shrink: 0 !important;
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    transform: none !important;
+  }
+}
+
+/* Hide desktop-only elements in mobile mode (like mobile media queries do) */
+.mobile-mode .board-header-btn i.fa + span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btn span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btn .fa + span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btn .fa + .board-header-btn-text {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btn .fa + .board-header-btn-label {
+  display: none !important;
+}
+
+/* Show only icons in mobile mode */
+.mobile-mode .board-header-btn {
+  width: auto !important;
+  min-width: auto !important;
+  padding: 8px !important;
+  text-align: center !important;
+}
+
+.mobile-mode .board-header-btn i {
+  display: inline-block !important;
+  margin: 0 !important;
+}
+
+/* Hide desktop-specific elements that shouldn't show in mobile mode */
+.mobile-mode .desktop-only,
+.mobile-mode .board-header .desktop-only {
+  display: none !important;
+}
+
+.mobile-mode .board-header .board-header-btn.desktop-only {
+  display: none !important;
+}
+
+/* Hide desktop-specific board header buttons in mobile mode */
+.mobile-mode .board-header-btns.left {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btns.center {
+  display: none !important;
+}
+
+/* Show only the right section buttons in mobile mode, but hide text labels */
+.mobile-mode .board-header-btns.right {
+  display: block !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn .fa + span {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn .fa + .board-header-btn-text {
+  display: none !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn .fa + .board-header-btn-label {
+  display: none !important;
+}
+
+/* Hide specific desktop-only buttons that shouldn't show in mobile mode */
+.mobile-mode .board-header-btn.js-star-board span,
+.mobile-mode .board-header-btn.js-change-visibility span,
+.mobile-mode .board-header-btn.js-watch-board span,
+.mobile-mode .board-header-btn.js-sort-cards span {
+  display: none !important;
+}
+
+/* Show only icons for mobile mode buttons */
+.mobile-mode .board-header-btns.right .board-header-btn {
+  width: auto !important;
+  min-width: auto !important;
+  padding: 8px !important;
+  text-align: center !important;
+  margin: 0 2px !important;
+}
+
+.mobile-mode .board-header-btns.right .board-header-btn i {
+  display: inline-block !important;
+  margin: 0 !important;
+}
+
+/* Ensure mobile mode looks like small screen mobile view */
+.mobile-mode .board-header {
+  height: 40px !important;
+}
+
+.mobile-mode .board-header .board-header-btns {
+  margin-top: 0px !important;
+}
+
+.mobile-mode .board-header .board-header-btn {
+  height: 32px !important;
+  line-height: 32px !important;
+  font-size: 15px !important;
+}
+
+.mobile-mode .board-header .board-header-btn i.fa {
+  line-height: 32px !important;
+}
+
+/* Copy mobile media query styles to mobile mode for consistent appearance */
+.mobile-mode .board-header {
+  height: 40px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.mobile-mode .board-header .board-header-btns {
+  margin-top: 0px !important;
+  height: 40px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+}
+
+.mobile-mode .board-header .board-header-btn {
+  height: 32px !important;
+  line-height: 32px !important;
+  font-size: 15px !important;
+  margin: 0 2px !important;
+  padding: 4px 8px !important;
+  border-radius: 4px !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  color: #fff !important;
+  text-decoration: none !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-width: 32px !important;
+  width: auto !important;
+}
+
+.mobile-mode .board-header .board-header-btn:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.mobile-mode .board-header .board-header-btn i.fa {
+  line-height: 32px !important;
+  font-size: 15px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.mobile-mode .board-header .board-header-btn i.fa + span {
+  display: none !important;
+}
+
+.mobile-mode .board-header .board-header-btn span {
+  display: none !important;
+}
+
+/* Hide the board title in mobile mode to match mobile view */
+.mobile-mode .header-board-menu {
+  display: none !important;
+}
+
+/* Ensure the board header takes full width in mobile mode */
+.mobile-mode .board-header {
+  width: 100% !important;
+  max-width: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 0 10px !important;
+}
+
+/* Additional Desktop Mode Styles for Other Elements */
+.desktop-mode .swimlane-header .swimlane-title {
+  font-size: clamp(14px, 3vw, 18px) !important;
+}
+
+.desktop-mode .swimlane-header .swimlane-description {
+  font-size: 12px !important;
+}
+
+.desktop-mode .board-header {
+  font-size: clamp(14px, 3vw, 18px) !important;
+  padding: 2.5vh 1.5vw 0.5vh !important;
+}
+
+.desktop-mode .board-header .board-header-title {
+  font-size: clamp(14px, 3vw, 18px) !important;
+}
+
+.desktop-mode .board-header .board-header-description {
+  font-size: 12px !important;
+}
+
+.desktop-mode .board-header .board-header-btn {
+  font-size: clamp(12px, 2.5vw, 16px) !important;
+  padding: 0.5vh 0.8vw !important;
+}
+
+.desktop-mode .board-header .board-header-btn i {
+  font-size: clamp(12px, 2.5vw, 16px) !important;
 }

client/components/boards/boardHeader.jade

@@ -16,31 +16,29 @@ template(name="boardHeaderBar")
               a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
                 i.fa.fa-pencil-square-o
 
-          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-            title="{{#if isStarred}}{{_ '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(
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              title="{{_ currentBoard.permission}}")
+              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+              span {{_ currentBoard.permission}}
 
-          a.board-header-btn(
-            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-            title="{{_ currentBoard.permission}}")
-            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-            span {{_ currentBoard.permission}}
-
-          a.board-header-btn.js-watch-board(
-            title="{{_ watchLevel }}")
-            if $eq watchLevel "watching"
-              i.fa.fa-eye
-            if $eq watchLevel "tracking"
-              i.fa.fa-bell
-            if $eq watchLevel "muted"
-              i.fa.fa-bell-slash
-            span {{_ watchLevel}}
-          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-            i.fa.fa-sort
-            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+            a.board-header-btn.js-watch-board(
+              title="{{_ watchLevel }}")
+              if $eq watchLevel "watching"
+                i.fa.fa-eye
+              if $eq watchLevel "tracking"
+                i.fa.fa-bell
+              if $eq watchLevel "muted"
+                i.fa.fa-bell-slash
+              span {{_ watchLevel}}
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+              if showStarCounter
+                span.board-star-counter {{currentBoard.stars}}
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+              i.fa.fa-sort
+              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
             if isSortActive
               a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                 i.fa.fa-times-thin
@@ -51,6 +49,8 @@ template(name="boardHeaderBar")
             i.fa.fa-sign-in
             span {{_ 'log-in'}}
 
+  .board-header-btns.center
+
   .board-header-btns.right
     if currentBoard
       if isMiniScreen
@@ -59,31 +59,25 @@ template(name="boardHeaderBar")
             a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
               i.fa.fa-pencil-square-o
 
-          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-            title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
-            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
-            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}}")
 
-          a.board-header-btn(
-            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-            title="{{_ currentBoard.permission}}")
-            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-            span {{_ currentBoard.permission}}
-
-          a.board-header-btn.js-watch-board(
-            title="{{_ watchLevel }}")
-            if $eq watchLevel "watching"
-              i.fa.fa-eye
-            if $eq watchLevel "tracking"
-              i.fa.fa-bell
-            if $eq watchLevel "muted"
-              i.fa.fa-bell-slash
-            span {{_ watchLevel}}
-          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-            i.fa.fa-sort
-            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+            a.board-header-btn.js-watch-board(
+              title="{{_ watchLevel }}")
+              if $eq watchLevel "watching"
+                i.fa.fa-eye
+              if $eq watchLevel "tracking"
+                i.fa.fa-bell
+              if $eq watchLevel "muted"
+                i.fa.fa-bell-slash
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+              i.fa.fa-sort
+              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
             if isSortActive
               a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                 i.fa.fa-times-thin
@@ -92,24 +86,25 @@ template(name="boardHeaderBar")
           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'}}")
-      //    i.fa(class="{{directionClass}}")
-      //    span {{_ 'sort'}}{{_ listSortShortDesc}}
+      //
+        a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
+      //
+          i.fa(class="{{directionClass}}")
+      //
+          span {{_ 'sort'}}{{_ listSortShortDesc}}
 
       a.board-header-btn.js-open-filter-view(
           title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
-          class="{{#if Filter.isActive}}emphasis{{/if}}")
+          class="{{#if Filter.isActive}}js-filter-active{{/if}}")
         i.fa.fa-filter
-        span {{#if Filter.isActive}}{{_ 'filter-on'}}{{else}}{{_ 'filter'}}{{/if}}
+        span {{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}
         if Filter.isActive
           a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
             i.fa.fa-times-thin
@@ -119,8 +114,7 @@ template(name="boardHeaderBar")
         span {{_ 'search'}}
 
       unless currentBoard.isTemplatesBoard
-        a.board-header-btn.js-toggle-board-view(
-          title="{{_ 'board-view'}}")
+        a.board-header-btn.js-toggle-board-view
           i.fa.fa-caret-down
           if $eq boardView 'board-view-swimlanes'
             i.fa.fa-th-large
@@ -128,8 +122,17 @@ template(name="boardHeaderBar")
             i.fa.fa-trello
           if $eq boardView 'board-view-cal'
             i.fa.fa-calendar
-          span {{#if boardView}}{{_ boardView}}{{else}}{{_ 'board-view-swimlanes'}}{{/if}}
-
+          if $eq boardView 'board-view-gantt'
+            i.fa.fa-bar-chart
+          span
+            if $eq boardView 'board-view-swimlanes'
+              | {{_ 'swimlanes'}}
+            if $eq boardView 'board-view-lists'
+              | {{_ 'lists'}}
+            if $eq boardView 'board-view-cal'
+              | {{_ 'calendar'}}
+            if $eq boardView 'board-view-gantt'
+              | {{_ 'gantt'}}
       if canModifyBoard
         a.board-header-btn.js-multiselection-activate(
             title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
@@ -142,14 +145,14 @@ template(name="boardHeaderBar")
 
       .separator
       a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
-        i.fa.fa-navicon
+        i.fa.fa-bars
 
 template(name="boardVisibilityList")
   ul.pop-over-list
     li
       with "private"
         a.js-select-visibility
-          i.fa.fa-lock.colorful
+          i.fa.fa-lock
           | {{_ 'private'}}
           if visibilityCheck
             i.fa.fa-check
@@ -158,7 +161,7 @@ template(name="boardVisibilityList")
       li
         with "public"
           a.js-select-visibility
-            i.fa.fa-globe.colorful
+            i.fa.fa-globe
             | {{_ 'public'}}
             if visibilityCheck
               i.fa.fa-check
@@ -172,7 +175,7 @@ template(name="boardChangeWatchPopup")
     li
       with "watching"
         a.js-select-watch
-          i.fa.fa-eye.colorful
+          i.fa.fa-eye
           | {{_ 'watching'}}
           if watchCheck
             i.fa.fa-check
@@ -180,7 +183,7 @@ template(name="boardChangeWatchPopup")
     li
       with "tracking"
         a.js-select-watch
-          i.fa.fa-bell.colorful
+          i.fa.fa-bell
           | {{_ 'tracking'}}
           if watchCheck
             i.fa.fa-check
@@ -188,7 +191,7 @@ template(name="boardChangeWatchPopup")
     li
       with "muted"
         a.js-select-watch
-          i.fa.fa-bell-slash.colorful
+          i.fa.fa-bell-slash
           | {{_ 'muted'}}
           if watchCheck
             i.fa.fa-check
@@ -199,35 +202,130 @@ template(name="boardChangeViewPopup")
     li
       with "board-view-swimlanes"
         a.js-open-swimlanes-view
-          i.fa.fa-th-large.colorful
-          | {{_ 'board-view-swimlanes'}}
+          i.fa.fa-th-large
+          | {{_ 'swimlanes'}}
           if $eq Utils.boardView "board-view-swimlanes"
             i.fa.fa-check
     li
       with "board-view-lists"
         a.js-open-lists-view
-          i.fa.fa-trello.colorful
+          i.fa.fa-trello
           | {{_ 'board-view-lists'}}
           if $eq Utils.boardView "board-view-lists"
             i.fa.fa-check
     li
       with "board-view-cal"
         a.js-open-cal-view
-          i.fa.fa-calendar.colorful
+          i.fa.fa-calendar
           | {{_ 'board-view-cal'}}
           if $eq Utils.boardView "board-view-cal"
             i.fa.fa-check
+    li
+      with "board-view-gantt"
+        a.js-open-gantt-view
+          i.fa.fa-bar-chart
+          | {{_ 'board-view-gantt'}}
+          if $eq Utils.boardView "board-view-gantt"
+            i.fa.fa-check
 
 template(name="createBoard")
   form
     label
       | {{_ 'title'}}
       input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen.get
+    if visibilityMenuIsOpen
       +boardVisibilityList
     else
       p.quiet
-        if $eq visibility.get 'public'
+        if $eq visibility 'public'
+          span.fa.fa-globe.colorful
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    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
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility 'public'
+          span.fa.fa-globe.colorful
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    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="headerBarCreateBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility 'public'
+          span.fa.fa-globe.colorful
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import'}}
+    span.quiet
+      | /
+      a.js-board-template {{_ 'template'}}
+
+// New popup for Template Container creation; shares the same form content
+template(name="createTemplateContainerPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility 'public'
           span.fa.fa-globe.colorful
           = " "
           | {{{_ 'board-public-info'}}}
@@ -248,19 +346,30 @@ template(name="createBoard")
       a.js-board-template {{_ 'template'}}
 
 //template(name="listsortPopup")
-//  h2
-//   | {{_ 'list-sort-by'}}
-//  hr
-//  ul.pop-over-list
-//    each value in allowedSortValues
-//     li
-//      a.js-sort-by(name="{{value.name}}")
-//        if $eq sortby value.name
-//           i(class="fa {{Direction}}")
-//        | {{_ value.label }}{{_ value.shortLabel}}
-//        if $eq sortby value.name
-//           i(class="fa fa-check")
-
+//
+  h2
+//
+   | {{_ 'list-sort-by'}}
+//
+  hr
+//
+  ul.pop-over-list
+//
+    each value in allowedSortValues
+//
+     li
+//
+      a.js-sort-by(name="{{value.name}}")
+//
+        if $eq sortby value.name
+//
+           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
+//
+        | {{_ value.label }}{{_ value.shortLabel}}
+//
+        if $eq sortby value.name
+//
+           i.fa.fa-check
 template(name="boardChangeTitlePopup")
   form
     label
@@ -279,14 +388,22 @@ template(name="boardCreateRulePopup")
 template(name="cardsSortPopup")
   ul.pop-over-list
     li
-      a.js-sort-due {{_ 'due-date'}}
+      a.js-sort-due
+        i.fa.fa-calendar
+        | {{_ 'due-date'}}
       hr
     li
-      a.js-sort-title {{_ 'title-alphabetically'}}
+      a.js-sort-title
+        i.fa.fa-sort-alpha-asc
+        | {{_ 'title-alphabetically'}}
       hr
     li
-      a.js-sort-created-desc {{_ 'created-at-newest-first'}}
+      a.js-sort-created-desc
+        i.fa.fa-arrow-down
+        | {{_ 'created-at-newest-first'}}
       hr
     li
-      a.js-sort-created-asc {{_ 'created-at-oldest-first'}}
+      a.js-sort-created-asc
+        i.fa.fa-arrow-up
+        | {{_ 'created-at-oldest-first'}}
 

client/components/boards/boardHeader.js

@@ -1,6 +1,15 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import dragscroll from '@wekanteam/dragscroll';
+import getSlug from 'limax';
+import Boards from '/models/boards';
+import Swimlanes from '/models/swimlanes';
+import TableVisibilityModeSettings from '/models/tableVisibilityModeSettings';
+import { Filter } from '/client/lib/filter';
+import { MultiSelection } from '/client/lib/multiSelection';
+import { getSidebarInstance } from '/client/features/sidebar/service';
+import { Utils } from '/client/lib/utils';
 
 /*
 const DOWNCLS = 'fa-sort-down';
@@ -9,7 +18,8 @@ const UPCLS = 'fa-sort-up';
 const sortCardsBy = new ReactiveVar('');
 
 Template.boardChangeTitlePopup.events({
-  submit(event, templateInstance) {
+  async submit(event, templateInstance) {
+    event.preventDefault();
     const newTitle = templateInstance
       .$('.js-board-name')
       .val()
@@ -19,15 +29,17 @@ Template.boardChangeTitlePopup.events({
       .val()
       .trim();
     if (newTitle) {
-      this.rename(newTitle);
-      this.setDescription(newDesc);
+      const board = Utils.getCurrentBoard();
+      if (board) {
+        await board.rename(newTitle);
+        await board.setDescription(newDesc);
+      }
       Popup.back();
     }
-    event.preventDefault();
   },
 });
 
-BlazeComponent.extendComponent({
+Template.boardHeaderBar.helpers({
   watchLevel() {
     const currentBoard = Utils.getCurrentBoard();
     return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
@@ -44,97 +56,130 @@ BlazeComponent.extendComponent({
     const currentBoard = Utils.getCurrentBoard();
     return currentBoard && currentBoard.stars >= 2;
   },
-  /*
-  showSort() {
-    return ReactiveCache.getCurrentUser().hasSortBy();
-  },
-  directionClass() {
-    return this.currentDirection() === -1 ? DOWNCLS : UPCLS;
-  },
-  changeDirection() {
-    const direction = 0 - this.currentDirection() === -1 ? '-' : '';
-    Meteor.call('setListSortBy', direction + this.currentListSortBy());
-  },
-  currentDirection() {
-    return ReactiveCache.getCurrentUser().getListSortByDirection();
-  },
-  currentListSortBy() {
-    return ReactiveCache.getCurrentUser().getListSortBy();
-  },
-  listSortShortDesc() {
-    return `list-label-short-${this.currentListSortBy()}`;
-  },
-  */
-  events() {
-    return [
-      {
-        'click .js-edit-board-title': Popup.open('boardChangeTitle'),
-        'click .js-star-board'() {
-          ReactiveCache.getCurrentUser().toggleBoardStar(Session.get('currentBoard'));
-        },
-        'click .js-open-board-menu': Popup.open('boardMenu'),
-        'click .js-change-visibility': Popup.open('boardChangeVisibility'),
-        'click .js-watch-board': Popup.open('boardChangeWatch'),
-        'click .js-open-archived-board'() {
-          Modal.open('archivedBoards');
-        },
-        'click .js-toggle-board-view': Popup.open('boardChangeView'),
-        'click .js-toggle-sidebar'() {
-          Sidebar.toggle();
-        },
-        'click .js-open-filter-view'() {
-          Sidebar.setView('filter');
-        },
-        'click .js-sort-cards': Popup.open('cardsSort'),
-        /*
-        'click .js-open-sort-view'(evt) {
-          const target = evt.target;
-          if (target.tagName === 'I') {
-            // click on the text, popup choices
-            this.changeDirection();
-          } else {
-            // change the sort order
-            Popup.open('listsort')(evt);
-          }
-        },
-        */
-        'click .js-filter-reset'(event) {
-          event.stopPropagation();
-          Sidebar.setView();
-          Filter.reset();
-        },
-        'click .js-sort-reset'() {
-          Session.set('sortBy', '');
-        },
-        'click .js-open-search-view'() {
-          Sidebar.setView('search');
-        },
-        'click .js-multiselection-activate'() {
-          const currentCard = Utils.getCurrentCardId();
-          MultiSelection.activate();
-          if (currentCard) {
-            MultiSelection.add(currentCard);
-          }
-        },
-        'click .js-multiselection-reset'(event) {
-          event.stopPropagation();
-          MultiSelection.disable();
-        },
-        'click .js-log-in'() {
-          FlowRouter.go('atSignIn');
-        },
-      },
-    ];
-  },
-}).register('boardHeaderBar');
 
-Template.boardHeaderBar.helpers({
   boardView() {
     return Utils.boardView();
   },
   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.boardHeaderBar.events({
+  'click .js-edit-board-title': Popup.open('boardChangeTitle'),
+  'click .js-star-board'() {
+    const boardId = Session.get('currentBoard');
+    if (boardId) {
+      Meteor.call('toggleBoardStar', boardId);
+    }
+  },
+  'click .js-open-board-menu': Popup.open('boardMenu'),
+  'click .js-change-visibility': Popup.open('boardChangeVisibility'),
+  'click .js-watch-board': Popup.open('boardChangeWatch'),
+  'click .js-open-archived-board'() {
+    Modal.open('archivedBoards');
+  },
+  'click .js-toggle-board-view': Popup.open('boardChangeView'),
+  'click .js-toggle-sidebar'() {
+    if (process.env.DEBUG === 'true') {
+      console.log('Hamburger menu clicked');
+    }
+    // Use the same approach as keyboard shortcuts
+    const sidebar = getSidebarInstance();
+    if (sidebar && typeof sidebar.toggle === 'function') {
+      if (process.env.DEBUG === 'true') {
+        console.log('Using Sidebar.toggle()');
+      }
+      sidebar.toggle();
+    } else {
+      if (process.env.DEBUG === 'true') {
+        console.warn('Sidebar not available, trying alternative approach');
+      }
+      // Try to trigger the sidebar through the global Blaze helper
+      if (typeof Blaze !== 'undefined' && Blaze._globalHelpers && Blaze._globalHelpers.Sidebar) {
+        const blazeSidebar = Blaze._globalHelpers.Sidebar();
+        if (blazeSidebar && typeof blazeSidebar.toggle === 'function') {
+          if (process.env.DEBUG === 'true') {
+            console.log('Using Blaze helper Sidebar.toggle()');
+          }
+          blazeSidebar.toggle();
+        }
+      }
+    }
+  },
+  'click .js-open-filter-view'() {
+    const sidebar = getSidebarInstance();
+    if (sidebar) {
+      sidebar.setView('filter');
+    } else {
+      console.warn('Sidebar not available for setView');
+    }
+  },
+  'click .js-sort-cards': Popup.open('cardsSort'),
+  /*
+  'click .js-open-sort-view'(evt) {
+    const target = evt.target;
+    if (target.tagName === 'I') {
+      // click on the text, popup choices
+      this.changeDirection();
+    } else {
+      // change the sort order
+      Popup.open('listsort')(evt);
+    }
+  },
+  */
+  'click .js-filter-reset'(event) {
+    event.stopPropagation();
+    const sidebar = getSidebarInstance();
+    if (sidebar) {
+      sidebar.setView();
+    } else {
+      console.warn('Sidebar not available for setView');
+    }
+    Filter.reset();
+  },
+  'click .js-sort-reset'() {
+    Session.set('sortBy', '');
+  },
+  'click .js-open-search-view'() {
+    const sidebar = getSidebarInstance();
+    if (sidebar) {
+      sidebar.setView('search');
+    } else {
+      console.warn('Sidebar not available for setView');
+    }
+  },
+  'click .js-multiselection-activate'() {
+    const currentCard = Utils.getCurrentCardId();
+    MultiSelection.activate();
+    if (currentCard) {
+      MultiSelection.add(currentCard);
+    }
+  },
+  'click .js-multiselection-reset'(event) {
+    event.stopPropagation();
+    MultiSelection.disable();
+  },
+  'click .js-log-in'() {
+    FlowRouter.go('atSignIn');
+  },
 });
 
 Template.boardChangeViewPopup.events({
@@ -150,194 +195,235 @@ Template.boardChangeViewPopup.events({
     Utils.setBoardView('board-view-cal');
     Popup.back();
   },
-});
-
-const CreateBoard = BlazeComponent.extendComponent({
-  template() {
-    return 'createBoard';
-  },
-
-  onCreated() {
-    this.visibilityMenuIsOpen = new ReactiveVar(false);
-    this.visibility = new ReactiveVar('private');
-    this.boardId = new ReactiveVar('');
-    Meteor.subscribe('tableVisibilityModeSettings');
-  },
-
-  notAllowPrivateVisibilityOnly(){
-    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
-  },
-
-  visibilityCheck() {
-    return this.currentData() === this.visibility.get();
-  },
-
-  setVisibility(visibility) {
-    this.visibility.set(visibility);
-    this.visibilityMenuIsOpen.set(false);
-  },
-
-  toggleVisibilityMenu() {
-    this.visibilityMenuIsOpen.set(!this.visibilityMenuIsOpen.get());
-  },
-
-  toggleAddTemplateContainer() {
-    $('#add-template-container').toggleClass('is-checked');
-  },
-
-  onSubmit(event) {
-    event.preventDefault();
-    const title = this.find('.js-new-board-title').value;
-
-    const addTemplateContainer = $('#add-template-container.is-checked').length > 0;
-    if (addTemplateContainer) {
-      //const templateContainerId = Meteor.call('setCreateTemplateContainer');
-      //Utils.goBoardId(templateContainerId);
-      //alert('niinku template ' + Meteor.call('setCreateTemplateContainer'));
-
-      this.boardId.set(
-        Boards.insert({
-            // title: TAPi18n.__('templates'),
-            title: title,
-            permission: 'private',
-            type: 'template-container',
-          }),
-       );
-
-      // Insert the card templates swimlane
-      Swimlanes.insert({
-          // title: TAPi18n.__('card-templates-swimlane'),
-          title: 'Card Templates',
-          boardId: this.boardId.get(),
-          sort: 1,
-          type: 'template-container',
-        }),
-
-      // Insert the list templates swimlane
-      Swimlanes.insert(
-        {
-          // title: TAPi18n.__('list-templates-swimlane'),
-          title: 'List Templates',
-          boardId: this.boardId.get(),
-          sort: 2,
-          type: 'template-container',
-        },
-      );
-
-      // Insert the board templates swimlane
-      Swimlanes.insert(
-        {
-          //title: TAPi18n.__('board-templates-swimlane'),
-          title: 'Board Templates',
-          boardId: this.boardId.get(),
-          sort: 3,
-          type: 'template-container',
-        },
-      );
-
-      Utils.goBoardId(this.boardId.get());
-
-    } else {
-      const visibility = this.visibility.get();
-
-      this.boardId.set(
-        Boards.insert({
-          title,
-          permission: visibility,
-        }),
-      );
-
-      Swimlanes.insert({
-        title: 'Default',
-        boardId: this.boardId.get(),
-      });
-
-      Utils.goBoardId(this.boardId.get());
-    }
-  },
-
-  events() {
-    return [
-      {
-        'click .js-select-visibility'() {
-          this.setVisibility(this.currentData());
-        },
-        'click .js-change-visibility': this.toggleVisibilityMenu,
-        'click .js-import': Popup.open('boardImportBoard'),
-        submit: this.onSubmit,
-        'click .js-import-board': Popup.open('chooseBoardSource'),
-        'click .js-board-template': Popup.open('searchElement'),
-        'click .js-toggle-add-template-container': this.toggleAddTemplateContainer,
-      },
-    ];
-  },
-}).register('createBoardPopup');
-
-(class HeaderBarCreateBoard extends CreateBoard {
-  onSubmit(event) {
-    super.onSubmit(event);
-    // Immediately star boards crated with the headerbar popup.
-    ReactiveCache.getCurrentUser().toggleBoardStar(this.boardId.get());
-  }
-}.register('headerBarCreateBoardPopup'));
-
-BlazeComponent.extendComponent({
-  notAllowPrivateVisibilityOnly(){
-    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
-  },
-  visibilityCheck() {
-    const currentBoard = Utils.getCurrentBoard();
-    return this.currentData() === currentBoard.permission;
-  },
-
-  selectBoardVisibility() {
-    const currentBoard = Utils.getCurrentBoard();
-    const visibility = this.currentData();
-    currentBoard.setVisibility(visibility);
+  'click .js-open-gantt-view'() {
+    Utils.setBoardView('board-view-gantt');
     Popup.back();
   },
+});
 
-  events() {
-    return [
-      {
-        'click .js-select-visibility': this.selectBoardVisibility,
-      },
-    ];
+// Shared setup for all create board popups
+function setupCreateBoardState(tpl) {
+  tpl.visibilityMenuIsOpen = new ReactiveVar(false);
+  tpl.visibility = new ReactiveVar('private');
+  tpl.boardId = new ReactiveVar('');
+  Meteor.subscribe('tableVisibilityModeSettings');
+}
+
+function createBoardHelpers() {
+  return {
+    visibilityMenuIsOpen() {
+      return Template.instance().visibilityMenuIsOpen.get();
+    },
+    visibility() {
+      return Template.instance().visibility.get();
+    },
+    notAllowPrivateVisibilityOnly() {
+      return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
+    },
+    visibilityCheck() {
+      return Template.currentData() === Template.instance().visibility.get();
+    },
+  };
+}
+
+async function createBoardSubmit(tpl, event) {
+  event.preventDefault();
+  const title = tpl.find('.js-new-board-title').value;
+  const slug = getSlug(title) || 'board';
+
+  const addTemplateContainer = $('#add-template-container.is-checked').length > 0;
+  if (addTemplateContainer) {
+    tpl.boardId.set(
+      await Meteor.callAsync('createBoardWithInitialSwimlanes', {
+        title,
+        slug,
+        permission: 'private',
+        type: 'template-container',
+        migrationVersion: 1,
+        swimlanes: [
+          { title: 'Card Templates', sort: 1, type: 'template-container' },
+          { title: 'List Templates', sort: 2, type: 'template-container' },
+          { title: 'Board Templates', sort: 3, type: 'template-container' },
+        ],
+      }),
+    );
+
+    // Assign to space if one was selected
+    const spaceId = Session.get('createBoardInWorkspace');
+    if (spaceId) {
+      Meteor.call('assignBoardToWorkspace', tpl.boardId.get(), spaceId, (err) => {
+        if (err) console.error('Error assigning board to space:', err);
+      });
+      Session.set('createBoardInWorkspace', null); // Clear after use
+    }
+
+    FlowRouter.go('board', { id: tpl.boardId.get(), slug });
+
+  } else {
+    const visibility = tpl.visibility.get();
+
+    tpl.boardId.set(
+      await Meteor.callAsync('createBoardWithInitialSwimlanes', {
+        title,
+        slug,
+        permission: visibility,
+        migrationVersion: 1,
+        swimlanes: [{ title: 'Default' }],
+      }),
+    );
+
+    // Assign to space if one was selected
+    const spaceId = Session.get('createBoardInWorkspace');
+    if (spaceId) {
+      Meteor.call('assignBoardToWorkspace', tpl.boardId.get(), spaceId, (err) => {
+        if (err) console.error('Error assigning board to space:', err);
+      });
+      Session.set('createBoardInWorkspace', null); // Clear after use
+    }
+
+    FlowRouter.go('board', { id: tpl.boardId.get(), slug });
+  }
+}
+
+function createBoardEvents() {
+  return {
+    'click .js-select-visibility'(event, tpl) {
+      tpl.visibility.set(Template.currentData());
+      tpl.visibilityMenuIsOpen.set(false);
+    },
+    'click .js-change-visibility'(event, tpl) {
+      tpl.visibilityMenuIsOpen.set(!tpl.visibilityMenuIsOpen.get());
+    },
+    'click .js-import': Popup.open('boardImportBoard'),
+    async 'submit'(event, tpl) {
+      await createBoardSubmit(tpl, event);
+    },
+    'click .js-import-board': Popup.open('chooseBoardSource'),
+    'click .js-board-template': Popup.open('searchElement'),
+    'click .js-toggle-add-template-container'() {
+      $('#add-template-container').toggleClass('is-checked');
+    },
+  };
+}
+
+// createBoard (non-popup version)
+Template.createBoard.onCreated(function () {
+  setupCreateBoardState(this);
+});
+
+Template.createBoard.helpers(createBoardHelpers());
+
+Template.createBoard.events(createBoardEvents());
+
+// createBoardPopup
+Template.createBoardPopup.onCreated(function () {
+  setupCreateBoardState(this);
+});
+
+Template.createBoardPopup.helpers(createBoardHelpers());
+
+Template.createBoardPopup.events(createBoardEvents());
+
+// createTemplateContainerPopup
+Template.createTemplateContainerPopup.onCreated(function () {
+  setupCreateBoardState(this);
+});
+
+Template.createTemplateContainerPopup.onRendered(function () {
+  // Always pre-check the template container checkbox for this popup
+  $('#add-template-container').addClass('is-checked');
+});
+
+Template.createTemplateContainerPopup.helpers(createBoardHelpers());
+
+Template.createTemplateContainerPopup.events(createBoardEvents());
+
+// headerBarCreateBoardPopup
+Template.headerBarCreateBoardPopup.onCreated(function () {
+  setupCreateBoardState(this);
+});
+
+Template.headerBarCreateBoardPopup.helpers(createBoardHelpers());
+
+Template.headerBarCreateBoardPopup.events({
+  'click .js-select-visibility'(event, tpl) {
+    tpl.visibility.set(Template.currentData());
+    tpl.visibilityMenuIsOpen.set(false);
   },
-}).register('boardChangeVisibilityPopup');
+  'click .js-change-visibility'(event, tpl) {
+    tpl.visibilityMenuIsOpen.set(!tpl.visibilityMenuIsOpen.get());
+  },
+  'click .js-import': Popup.open('boardImportBoard'),
+  async submit(event, tpl) {
+    await createBoardSubmit(tpl, event);
+    // Immediately star boards created with the headerbar popup.
+    await ReactiveCache.getCurrentUser().toggleBoardStar(tpl.boardId.get());
+  },
+  'click .js-import-board': Popup.open('chooseBoardSource'),
+  'click .js-board-template': Popup.open('searchElement'),
+  'click .js-toggle-add-template-container'() {
+    $('#add-template-container').toggleClass('is-checked');
+  },
+});
 
-BlazeComponent.extendComponent({
+Template.boardChangeVisibilityPopup.onCreated(function () {
+  Meteor.subscribe('tableVisibilityModeSettings');
+});
+
+Template.boardChangeVisibilityPopup.helpers({
+  notAllowPrivateVisibilityOnly(){
+    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
+  },
+  visibilityCheck() {
+    const currentBoard = Utils.getCurrentBoard();
+    return this === currentBoard.permission;
+  },
+});
+
+Template.boardChangeVisibilityPopup.events({
+  'click .js-select-visibility'() {
+    const currentBoard = Utils.getCurrentBoard();
+    const visibility = Template.currentData();
+    if (typeof visibility === 'string') {
+      currentBoard.setVisibility(visibility);
+      Popup.back();
+    }
+  },
+});
+
+Template.boardChangeWatchPopup.helpers({
   watchLevel() {
     const currentBoard = Utils.getCurrentBoard();
     return currentBoard.getWatchLevel(Meteor.userId());
   },
 
   watchCheck() {
-    return this.currentData() === this.watchLevel();
+    const currentBoard = Utils.getCurrentBoard();
+    return this === currentBoard.getWatchLevel(Meteor.userId());
   },
+});
 
-  events() {
-    return [
-      {
-        'click .js-select-watch'() {
-          const level = this.currentData();
-          Meteor.call(
-            'watch',
-            'board',
-            Session.get('currentBoard'),
-            level,
-            (err, ret) => {
-              if (!err && ret) Popup.back();
-            },
-          );
+Template.boardChangeWatchPopup.events({
+  'click .js-select-watch'() {
+    const level = Template.currentData();
+    if (typeof level === 'string') {
+      Meteor.call(
+        'watch',
+        'board',
+        Session.get('currentBoard'),
+        level,
+        (err, ret) => {
+          if (!err && ret) Popup.back();
         },
-      },
-    ];
+      );
+    }
   },
-}).register('boardChangeWatchPopup');
+});
 
 /*
-BlazeComponent.extendComponent({
+// BlazeComponent.extendComponent was removed - this code is unused.
+// Original listsortPopup component:
+// {
   onCreated() {
     //this.sortBy = new ReactiveVar();
     ////this.sortDirection = new ReactiveVar();
@@ -405,46 +491,40 @@ BlazeComponent.extendComponent({
       },
     ];
   },
-}).register('listsortPopup');
+// }.register('listsortPopup');
 */
 
-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'click .js-sort-due'() {
-          const sortBy = {
-            dueAt: 1,
-          };
-          Session.set('sortBy', sortBy);
-          sortCardsBy.set(TAPi18n.__('due-date'));
-          Popup.back();
-        },
-        'click .js-sort-title'() {
-          const sortBy = {
-            title: 1,
-          };
-          Session.set('sortBy', sortBy);
-          sortCardsBy.set(TAPi18n.__('title'));
-          Popup.back();
-        },
-        'click .js-sort-created-asc'() {
-          const sortBy = {
-            createdAt: 1,
-          };
-          Session.set('sortBy', sortBy);
-          sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
-          Popup.back();
-        },
-        'click .js-sort-created-desc'() {
-          const sortBy = {
-            createdAt: -1,
-          };
-          Session.set('sortBy', sortBy);
-          sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
-          Popup.back();
-        },
-      },
-    ];
+Template.cardsSortPopup.events({
+  'click .js-sort-due'() {
+    const sortBy = {
+      dueAt: 1,
+    };
+    Session.set('sortBy', sortBy);
+    sortCardsBy.set(TAPi18n.__('due-date'));
+    Popup.back();
   },
-}).register('cardsSortPopup');
+  'click .js-sort-title'() {
+    const sortBy = {
+      title: 1,
+    };
+    Session.set('sortBy', sortBy);
+    sortCardsBy.set(TAPi18n.__('title'));
+    Popup.back();
+  },
+  'click .js-sort-created-asc'() {
+    const sortBy = {
+      createdAt: 1,
+    };
+    Session.set('sortBy', sortBy);
+    sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
+    Popup.back();
+  },
+  'click .js-sort-created-desc'() {
+    const sortBy = {
+      createdAt: -1,
+    };
+    Session.set('sortBy', sortBy);
+    sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
+    Popup.back();
+  },
+});

client/components/boards/boardsList.jade

@@ -1,154 +1,259 @@
 template(name="boardList")
   .wrapper
-    ul.AllBoardTeamsOrgs
-      li.AllBoardTeams
-        if userHasTeams
-          select.js-AllBoardTeams#jsAllBoardTeams("multiple")
-            option(value="-1") {{_ 'teams'}} :
-            each teamsDatas
-              option(value="{{teamId}}") {{_ teamDisplayName}}
+    .board-list-header
 
-      li.AllBoardOrgs
-        if userHasOrgs
-          select.js-AllBoardOrgs#jsAllBoardOrgs("multiple")
-            option(value="-1") {{_ 'organizations'}} :
-            each orgsDatas
-              option(value="{{orgId}}") {{orgDisplayName}}
+    .boards-layout
+      // Left menu
+      .boards-left-menu
+        ul.menu
+          li(class="menu-item {{#if isSelectedMenu 'starred'}}active{{/if}}")
+            a.js-select-menu(data-type="starred")
+              span.menu-label
+                span.emoji-icon
+                  i.fa.fa-star
+                |  {{_ 'allboards.starred'}}
+              span.menu-count {{menuItemCount 'starred'}}
+          li(class="menu-item {{#if isSelectedMenu 'templates'}}active{{/if}}")
+            a.js-select-menu(data-type="templates")
+              span.menu-label
+                span.emoji-icon
+                  i.fa.fa-clipboard
+                |  {{_ 'allboards.templates'}}
+              span.menu-count {{menuItemCount 'templates'}}
+          li(class="menu-item {{#if isSelectedMenu 'remaining'}}active{{/if}}")
+            a.js-select-menu(data-type="remaining")
+              span.menu-label
+                span.emoji-icon
+                  i.fa.fa-folder
+                |  {{_ 'allboards.remaining'}}
+              span.menu-count {{menuItemCount 'remaining'}}
+        .workspaces-header
+          span
+            span.emoji-icon
+              i.fa.fa-folder-open
+            |  {{_ 'allboards.workspaces'}}
+          a.js-add-workspace(title="{{_ 'allboards.add-workspace'}}") +
+        // Workspaces tree
+        +workspaceTree(nodes=workspacesTree selectedWorkspaceId=selectedWorkspaceId)
 
-      //li.AllBoardTemplates
-      //  if userHasTemplates
-      //  select.js-AllBoardTemplates#jsAllBoardTemplates("multiple")
-      //    option(value="-1") {{_ 'templates'}} :
-      //    each templatesDatas
-      //      option(value="{{templateId}}") {{_ templateDisplayName}}
+        // Existing filter by orgs/teams (kept)
+        ul.AllBoardTeamsOrgs
+          li.AllBoardTeams
+            if userHasTeams
+              select.js-AllBoardTeams#jsAllBoardTeams("multiple")
+                option(value="-1") {{_ 'teams'}} :
+                each teamsDatas
+                  option(value="{{teamId}}") {{_ teamDisplayName}}
 
-      li.AllBoardBtns
-        div.AllBoardButtonsContainer
-          if userHasOrgsOrTeams
-            i.fa.fa-filter
-            input#filterBtn(type="button" value="{{_ 'filter'}}")
-            input#resetBtn(type="button" value="{{_ 'filter-clear'}}")
+          li.AllBoardOrgs
+            if userHasOrgs
+              select.js-AllBoardOrgs#jsAllBoardOrgs("multiple")
+                option(value="-1") {{_ 'organizations'}} :
+                each orgsDatas
+                  option(value="{{orgId}}") {{orgDisplayName}}
 
-    ul.board-list.clearfix.js-boards
-      li.js-add-board
-        a.board-list-item.label(title="{{_ 'add-board'}}")
-          | {{_ 'add-board'}}
-      each boards
-        li(class="{{_id}}" class="{{#if isStarred}}starred{{/if}}" class=colorClass).js-board
-          if isInvited
-            .board-list-item
-              span.details
-                span.board-list-item-name= title
-                i.fa.js-star-board(
-                  class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                  title="{{_ 'star-board-title'}}")
-                p.board-list-item-desc {{_ 'just-invited'}}
-                button.js-accept-invite.primary {{_ 'accept'}}
-                button.js-decline-invite {{_ 'decline'}}
-          else
-            if $eq type "template-container"
-              a.js-open-board.template-container.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
-                span.details
-                  span.board-list-item-name(title="{{_ 'template-container'}}")
-                    +viewer
-                      = title
-                  i.fa.js-star-board(
-                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                    title="{{_ 'star-board-title'}}")
-                  p.board-list-item-desc
-                    +viewer
-                      = description
-                  if hasSpentTimeCards
-                    i.fa.js-has-spenttime-cards(
-                      class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
-                      title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isTouchScreenOrShowDesktopDragHandles
-                    i.fa.board-handle(
-                        class="fa-arrows"
-                        title="{{_ 'drag-board'}}")
-                  else
-                    if isSandstorm
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
-                    else if isAdministrable
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
-                    else if currentUser.isAdmin
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
+          li.AllBoardBtns
+            div.AllBoardButtonsContainer
+              if userHasOrgsOrTeams
+                span.emoji-icon
+                  i.fa.fa-search
+                input#filterBtn(type="button" value="{{_ 'filter'}}")
+                button#resetBtn.filter-reset-btn
+                  span.reset-icon
+                    span.emoji-icon
+                      i.fa.fa-times-thin
+                  span {{_ 'filter-clear'}}
+
+      // Right boards grid
+      .boards-right-grid
+        .boards-path-header
+          .path-left
+            span.path-icon.emoji-icon {{currentMenuPath.icon}}
+            span.path-text {{currentMenuPath.text}}
+            if BoardMultiSelection.isActive
+              span.multiselection-hint
+                span.emoji-icon
+                  i.fa.fa-thumb-tack
+                |  {{_ 'multi-selection-active'}}
+          .path-right
+            if canModifyBoards
+              if hasBoardsSelected
+                button.js-archive-selected-boards.board-header-btn
+                  span.emoji-icon
+                    i.fa.fa-archive
+                  span {{_ 'archive-board'}}
+                button.js-duplicate-selected-boards.board-header-btn
+                  span.emoji-icon
+                    i.fa.fa-clipboard
+                  span {{_ 'duplicate-board'}}
+              a.board-header-btn.js-multiselection-activate(
+                title="{{#if BoardMultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
+                class="{{#if BoardMultiSelection.isActive}}emphasis{{/if}}")
+                span.emoji-icon
+                  i.fa.fa-check-square-o
+              if BoardMultiSelection.isActive
+                a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+                  span.emoji-icon
+                    i.fa.fa-times
+        ul.board-list.clearfix.js-boards(class="{{#if isMiniScreen}}mobile-view{{/if}} {{#if BoardMultiSelection.isActive}}is-multiselection-active{{/if}}")
+          li.js-add-board
+            if isSelectedMenu 'templates'
+              a.board-list-item.label(title="{{_ 'add-template-container'}}")
+                span.emoji-icon
+                  i.fa.fa-plus
+                |  {{_ 'add-template-container'}}
             else
-              a.js-open-board.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
-                span.details
-                  span.board-list-item-name(title="{{_ 'board-drag-drop-reorder-or-click-open'}}")
-                    +viewer
-                      = title
-                  unless currentSetting.hideBoardMemberList
-                    if allowsBoardMemberList
-                      .minicard-members
-                        each member in boardMembers _id
-                          a.name
-                            +userAvatar(userId=member noRemove=true)
-                  unless currentSetting.hideCardCounterList
-                    if allowsCardCounterList
-                      .minicard-lists.flex.flex-wrap
-                        each list in boardLists _id
-                          .item
-                            | {{ list }}
-                  i.fa.js-star-board(
-                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                    title="{{_ 'star-board-title'}}")
-                  p.board-list-item-desc
-                    +viewer
-                      = description
-                  if hasSpentTimeCards
-                    i.fa.js-has-spenttime-cards(
-                      class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
-                      title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isTouchScreenOrShowDesktopDragHandles
-                    i.fa.board-handle(
-                        class="fa-arrows"
-                        title="{{_ 'drag-board'}}")
-                  else
-                    if isSandstorm
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
-                    else if isAdministrable
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
-                    else if currentUser.isAdmin
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
+              a.board-list-item.label(title="{{_ 'add-board'}}")
+                span.emoji-icon
+                  i.fa.fa-plus
+                |  {{_ 'add-board'}}
+          each boards
+            li.js-board(class="{{_id}} {{#if isStarred}}starred{{/if}} {{colorClass}} {{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}", draggable="true")
+              if isInvited
+                .board-list-item
+                  if BoardMultiSelection.isActive
+                    .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
+                      class="{{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
+                  span.details
+                    span.board-list-item-name= title
+                    span.js-star-board(
+                      class="{{#if isStarred}}is-star-active{{else}}is-not-star-active{{/if}}"
+                      title="{{_ 'star-board-title'}}")
+                      span.emoji-icon
+                        | {{#if isStarred}}⭐{{else}}☆{{/if}}
+                    p.board-list-item-desc {{_ 'just-invited'}}
+                    button.js-accept-invite.primary {{_ 'accept'}}
+                    button.js-decline-invite {{_ 'decline'}}
+              else
+                if $eq type "template-container"
+                  .template-container.board-list-item
+                    if BoardMultiSelection.isActive
+                      .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
+                        class="{{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
+                    span.board-handle(title="{{_ 'drag-board'}}")
+                      span.emoji-icon
+                        i.fa.fa-arrows
+
+                    a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
+                      span.details
+                        span.board-list-item-name(title="{{_ 'template-container'}}")
+                          +viewer
+                            = title
+                        p.board-list-item-desc
+                          +viewer
+                            = description
+                        if hasSpentTimeCards
+                          span.js-has-spenttime-cards(
+                            class="{{#if hasOvertimeCards}}has-overtime-card-active{{else}}no-overtime-card-active{{/if}}"
+                            title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
+                            span.emoji-icon
+                              i.fa.fa-clock-o
+                    span.js-star-board(
+                      class="{{#if isStarred}}is-star-active{{else}}is-not-star-active{{/if}}"
+                      title="{{_ 'star-board-title'}}")
+                      span.emoji-icon
+                        i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+                else
+                  .board-list-item
+                    if BoardMultiSelection.isActive
+                      .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
+                        class="{{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
+                    span.board-handle(title="{{_ 'drag-board'}}")
+                      span.emoji-icon
+                        i.fa.fa-arrows
+
+                    a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
+                      span.details
+                        span.board-list-item-name(title="{{_ 'board-drag-drop-reorder-or-click-open'}}")
+                          +viewer
+                            = title
+                        unless currentSetting.hideBoardMemberList
+                          if allowsBoardMemberList
+                            .minicard-members
+                              each member in boardMembers _id
+                                a.name
+                                  +userAvatar(userId=member noRemove=true)
+                        unless currentSetting.hideCardCounterList
+                          if allowsCardCounterList
+                            .minicard-lists.flex.flex-wrap
+                              each list in boardLists _id
+                                .item
+                                  | {{ list }}
+                        p.board-list-item-desc
+                          +viewer
+                            = description
+                        if hasSpentTimeCards
+                          span.js-has-spenttime-cards(
+                            class="{{#if hasOvertimeCards}}has-overtime-card-active{{else}}no-overtime-card-active{{/if}}"
+                            title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
+                            span.emoji-icon
+                              i.fa.fa-clock-o
+                    a.js-star-board(
+                      class="{{#if isStarred}}is-star-active{{else}}is-not-star-active{{/if}}"
+                      title="{{_ 'star-board-title'}}")
+                      span.emoji-icon
+                        i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
 
 template(name="boardListHeaderBar")
   h1 {{_ title }}
   //.board-header-btns.right
-  //  a.board-header-btn.js-open-archived-board
-  //    i.fa.fa-archive
-  //    span {{_ 'archives'}}
-  //  a.board-header-btn(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
-  //    i.fa.fa-clone
-  //    span {{_ 'templates'}}
+  //
+    a.board-header-btn.js-open-archived-board
+  //
+      i.fa.fa-archive
+  //
+      span {{_ 'archives'}}
+  //
+    a.board-header-btn(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
+  //
+      i.fa.fa-clone
+  //
+      span {{_ 'templates'}}
+
+// Recursive template for workspaces tree
+template(name="workspaceTree")
+  if nodes
+    ul.workspace-tree.js-workspace-tree
+      each nodes
+        li.workspace-node(class="{{#if $eq id selectedWorkspaceId}}active{{/if}}" data-workspace-id="{{id}}" draggable="true")
+          .workspace-node-content
+            span.workspace-drag-handle
+              span.emoji-icon
+                i.fa.fa-arrows
+
+            a.js-select-workspace.js-select-space(data-id="{{id}}")
+              span.workspace-icon
+                if icon
+                  span.workspace-icon-value(style="{{#if iconColor}}color: {{iconColor}};{{/if}}")
+                    +viewer
+                      = icon
+                else
+                  span.emoji-icon(style="{{#if iconColor}}color: {{iconColor}};{{/if}}")
+                    i.fa.fa-folder
+              span.workspace-name= name
+            a.js-open-workspace-menu(data-id="{{id}}" title="{{_ 'allboards.workspace-menu'}}")
+              span.emoji-icon
+                i.fa.fa-bars
+            span.workspace-count {{workspaceCount id}}
+          if children
+            +workspaceTree(nodes=children selectedWorkspaceId=selectedWorkspaceId)
+
+template(name="workspaceActionsPopup")
+  form.workspace-actions-form.js-workspace-actions-form(data-id="{{id}}")
+    label
+      | {{_ 'allboards.edit-workspace-name'}}
+      input.js-workspace-name(type="text" value="{{workspaceName}}" required)
+    label
+      | {{_ 'allboards.edit-workspace-icon'}}
+      input.js-workspace-icon(type="text" value="{{workspaceIcon}}")
+    input.primary.wide(type="submit" value="{{_ 'save'}}")
+  hr
+  form.workspace-subspace-form.js-workspace-subspace-form(data-id="{{id}}")
+    label
+      | {{_ 'allboards.add-subworkspace-prompt'}}
+      input.js-subworkspace-name(type="text")
+    button.primary.wide(type="submit") {{_ 'allboards.add-subworkspace'}}
+  hr
+  .workspace-delete-block
+    span.js-workspace-delete-error(style="color: #c00; display: block; margin: 4px 0;")
+    button.js-delete-workspace.negate.wide(type="button" data-id="{{id}}") {{_ 'delete'}}

client/components/boards/calendarView.css

@@ -0,0 +1,43 @@
+.calendar-view .fc {
+  --fc-button-text-color: #333;
+  --fc-button-bg-color: #f5f5f5;
+  --fc-button-border-color: rgba(0, 0, 0, 0.2);
+  --fc-button-hover-bg-color: #e6e6e6;
+  --fc-button-hover-border-color: rgba(0, 0, 0, 0.25);
+  --fc-button-active-bg-color: #d9d9d9;
+  --fc-button-active-border-color: rgba(0, 0, 0, 0.3);
+}
+
+.calendar-view .fc .fc-button-primary {
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
+}
+
+.calendar-view .fc .fc-button-primary:focus,
+.calendar-view .fc .fc-button-primary:not(:disabled).fc-button-active,
+.calendar-view .fc .fc-button-primary:not(:disabled):active {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.calendar-create-close {
+  min-height: auto !important;
+  min-width: auto !important;
+  width: 32px;
+  height: 32px;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: #666 !important;
+  opacity: 0.8;
+}
+
+.calendar-create-close:hover,
+.calendar-create-close:focus {
+  background: transparent !important;
+  color: #111 !important;
+  opacity: 1;
+}

client/components/boards/miniboard.jade

@@ -3,6 +3,7 @@ template(name="miniboard")
     class="minicard-{{colorClass}}")
     .minicard-title
       .handle
-        .fa.fa-arrows
+        span.drag-handle(title="{{_ 'dragBoard'}}")
+          i.fa.fa-arrows
       +viewer
         = title

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.jade

@@ -0,0 +1,57 @@
+template(name="originalPositionsView")
+  .original-positions-view
+    .original-positions-header
+      button.btn.btn-sm.btn-outline-secondary.js-toggle-original-positions
+        i.fa.fa-history
+        if isShowingOriginalPositions
+          | Hide Original Positions
+        else
+          | Show Original Positions
+
+      if isShowingOriginalPositions
+        button.btn.btn-sm.btn-outline-primary.js-refresh-history
+          i.fa.fa-refresh
+          |  Refresh
+
+    if isShowingOriginalPositions
+      .original-positions-content
+        if isLoading
+          .original-positions-loading
+            i.fa.fa-spinner.fa-spin
+            |  Loading original positions...
+        else
+          .original-positions-filters
+            .btn-group.btn-group-sm(role="group")
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'all'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="all")
+                | All
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'swimlane'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="swimlane")
+                i.fa.fa-bars
+                |  Swimlanes
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'list'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="list")
+                i.fa.fa-columns
+                |  Lists
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'card'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="card")
+                i.fa.fa-sticky-note
+                |  Cards
+
+          .original-positions-list
+            each getFilteredHistory
+              .original-position-item
+                .original-position-item-header
+                  i.fa(class="{{getEntityTypeIcon entityType}}")
+                  span.entity-type {{getEntityTypeLabel entityType}}
+                  span.entity-name {{getEntityDisplayName this}}
+                  span.entity-id ({{entityId}})
+                .original-position-item-details
+                  .original-position-description
+                    | {{getEntityOriginalPositionDescription this}}
+                  if originalTitle
+                    .original-title
+                      strong Original title:
+                      |  {{originalTitle}}
+                  .original-position-date
+                    small.text-muted Created: {{formatDate createdAt}}
+            else
+              .no-original-positions
+                i.fa.fa-info-circle
+                |  No original position data available for this board.

client/components/boards/originalPositionsView.js

@@ -0,0 +1,134 @@
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Meteor } from 'meteor/meteor';
+
+/**
+ * Component to display original positions for all entities on a board
+ */
+
+Template.originalPositionsView.onCreated(function () {
+  this.showOriginalPositions = new ReactiveVar(false);
+  this.boardHistory = new ReactiveVar([]);
+  this.isLoading = new ReactiveVar(false);
+  this.filterType = new ReactiveVar('all'); // 'all', 'swimlane', 'list', 'card'
+
+  const tpl = this;
+
+  this.loadBoardHistory = function () {
+    const boardId = Session.get('currentBoard');
+    if (!boardId) return;
+
+    tpl.isLoading.set(true);
+
+    Meteor.call('positionHistory.getBoardHistory', boardId, (error, result) => {
+      tpl.isLoading.set(false);
+      if (error) {
+        console.error('Error loading board history:', error);
+        tpl.boardHistory.set([]);
+      } else {
+        tpl.boardHistory.set(result);
+      }
+    });
+  };
+});
+
+Template.originalPositionsView.onRendered(function () {
+  this.loadBoardHistory();
+});
+
+Template.originalPositionsView.helpers({
+  isShowingOriginalPositions() {
+    return Template.instance().showOriginalPositions.get();
+  },
+
+  isLoading() {
+    return Template.instance().isLoading.get();
+  },
+
+  getBoardHistory() {
+    return Template.instance().boardHistory.get();
+  },
+
+  getFilteredHistory() {
+    const tpl = Template.instance();
+    const history = tpl.boardHistory.get();
+    const filterType = tpl.filterType.get();
+
+    if (filterType === 'all') {
+      return history;
+    }
+
+    return history.filter(item => item.entityType === filterType);
+  },
+
+  isFilterType(type) {
+    return Template.instance().filterType.get() === type;
+  },
+
+  getEntityDisplayName(entity) {
+    const position = entity.originalPosition || {};
+    return position.title || `Entity ${entity.entityId}`;
+  },
+
+  getEntityOriginalPositionDescription(entity) {
+    const position = entity.originalPosition || {};
+    let description = `Position: ${position.sort || 0}`;
+
+    if (entity.entityType === 'list' && entity.originalSwimlaneId) {
+      description += ` in swimlane ${entity.originalSwimlaneId}`;
+    } else if (entity.entityType === 'card') {
+      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();
+  },
+});
+
+Template.originalPositionsView.events({
+  'click .js-toggle-original-positions'(evt, tpl) {
+    tpl.showOriginalPositions.set(!tpl.showOriginalPositions.get());
+  },
+
+  'click .js-refresh-history'(evt, tpl) {
+    tpl.loadBoardHistory();
+  },
+
+  'click .js-filter-type'(evt, tpl) {
+    const type = evt.currentTarget.dataset.filterType;
+    tpl.filterType.set(type);
+  },
+});

client/components/cards/attachments.css

@@ -55,6 +55,12 @@
   flex-direction: row;
   align-items: center;
 }
+.attachment-actions a {
+  margin-left: 16px;
+}
+.attachment-actions a:first-child {
+  margin-left: 0;
+}
 .add-attachment {
   display: flex;
   align-items: center;
@@ -106,9 +112,144 @@
   color: white;
   cursor: pointer;
   font-size: 4em;
-  top: 0;
-  right: 8px;
   position: absolute;
+  right: 50px;
+  top: 16px;
+}
+
+/* Upload progress indicators for drag-and-drop uploads */
+.minicard-upload-progress,
+.card-details-upload-progress {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 12px;
+  margin: 8px 0;
+  font-size: 14px;
+}
+
+.upload-progress-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-weight: bold;
+  color: #495057;
+}
+
+.upload-progress-header i {
+  margin-right: 8px;
+  color: #007bff;
+}
+
+.upload-progress-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+  padding: 8px;
+  background: white;
+  border-radius: 3px;
+  border: 1px solid #dee2e6;
+}
+
+.upload-progress-item.upload-error {
+  border-color: #dc3545;
+  background: #f8d7da;
+}
+
+.upload-progress-filename {
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: #495057;
+  word-break: break-all;
+}
+
+.upload-progress-bar {
+  width: 100%;
+  height: 6px;
+  background: #e9ecef;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+
+.upload-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #007bff, #0056b3);
+  transition: width 0.3s ease;
+  border-radius: 3px;
+}
+
+.upload-progress-item.upload-error .upload-progress-fill {
+  background: #dc3545;
+}
+
+.upload-progress-error,
+.upload-progress-success {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.upload-progress-error {
+  color: #dc3545;
+}
+
+.upload-progress-success {
+  color: #28a745;
+}
+
+.upload-progress-error i,
+.upload-progress-success i {
+  margin-right: 4px;
+}
+
+/* Minicard specific styles */
+.minicard-upload-progress {
+  margin: 4px 0;
+  padding: 8px;
+  font-size: 12px;
+}
+
+.minicard-upload-progress .upload-progress-item {
+  padding: 6px;
+  margin-bottom: 6px;
+}
+
+.minicard-upload-progress .upload-progress-filename {
+  font-size: 11px;
+}
+
+/* Card details specific styles */
+.card-details-upload-progress {
+  margin: 12px 0;
+  padding: 16px;
+}
+
+.card-details-upload-progress .upload-progress-header {
+  font-size: 16px;
+  margin-bottom: 12px;
+}
+
+.card-details-upload-progress .upload-progress-item {
+  padding: 12px;
+  margin-bottom: 10px;
+}
+
+.card-details-upload-progress .upload-progress-filename {
+  font-size: 14px;
+}
+
+/* Drag over state for minicards */
+.minicard.is-dragging-over {
+  border: 2px dashed #007bff !important;
+  background: rgba(0, 123, 255, 0.1) !important;
+}
+
+/* Drag over state for card details */
+.js-card-details.is-dragging-over {
+  border: 2px dashed #007bff !important;
+  background: rgba(0, 123, 255, 0.05) !important;
 }
 .attachment-arrow {
   font-size: 4em;
@@ -117,6 +258,20 @@
   align-self: center;
   margin: 0 20px;
 }
+#prev-attachment {
+  font-size: 4em;
+  color: white;
+  cursor: pointer;
+  align-self: center;
+  margin-left: 70px;
+}
+#next-attachment {
+  font-size: 4em;
+  color: white;
+  cursor: pointer;
+  align-self: center;
+  margin-right: 70px;
+}
 #viewer-content {
   display: flex;
   justify-content: center;
@@ -130,6 +285,13 @@
   max-width: 100%;
   max-height: 100%;
 }
+#video-viewer {
+  max-width: 100%;
+  max-height: 100%;
+}
+#audio-viewer {
+  max-width: 100%;
+}
 #pdf-viewer {
   width: 40vw;
   height: 100%;
@@ -164,9 +326,19 @@
   }
   #prev-attachment {
     left: 0;
+    position: absolute;
+    bottom: 2.2em;
+    font-size: 1.6em;
+    padding: 16px;
+    margin-left: 0;
   }
   #next-attachment {
     right: 0;
+    position: absolute;
+    bottom: 2.2em;
+    font-size: 1.6em;
+    padding: 16px;
+    margin-right: 0;
   }
   #pdf-viewer {
     width: 100%;

client/components/cards/attachments.jade

@@ -34,10 +34,11 @@ template(name="attachmentViewer")
   #viewer-overlay.hidden
     #viewer-top-bar
       span#attachment-name
-      a#viewer-close.fa.fa-times-thin
+      a#viewer-close
+        i.fa.fa-times-thin
 
     #viewer-container
-      i.fa.fa-chevron-left.attachment-arrow#prev-attachment
+      i.fa.fa-caret-left#prev-attachment
       #viewer-content
         img#image-viewer.hidden
         video#video-viewer.hidden(controls="true")
@@ -45,7 +46,7 @@ template(name="attachmentViewer")
         object#pdf-viewer.hidden(type="application/pdf")
           span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
         object#txt-viewer.hidden(type="text/plain")
-      i.fa.fa-chevron-right.attachment-arrow#next-attachment
+      i.fa.fa-caret-right#next-attachment
 
 template(name="attachmentGallery")
 
@@ -53,11 +54,11 @@ template(name="attachmentGallery")
 
     if canModifyCard
       a.attachment-item.add-attachment.js-add-attachment
-        i.fa.fa-plus.icon
+        i.fa.fa-plus
 
     each attachments
 
-      .attachment-item
+      .attachment-item(class="{{#if isAttachmentMigrating _id}}migrating{{/if}}")
         .attachment-thumbnail-container.open-preview(data-attachment-id="{{_id}}" data-card-id="{{ meta.cardId }}")
           if link
             if(isImage)
@@ -85,30 +86,36 @@ template(name="attachmentGallery")
               b
                 = name
               span.file-size ({{fileSize size}})
+            if uploaderName
+              div.attachment-uploader {{uploaderName}}
+            if uploadedAt
+              div.attachment-uploaded-at {{uploadedAt}}
             .attachment-actions
-              a.js-download(href="{{link}}?download=true", download="{{name}}")
-                i.fa.fa-download.icon(title="{{_ 'download'}}")
+              a.js-download(href="{{link}}?download=true", download="{{name}}", title="{{_ 'download'}}")
+                i.fa.fa-arrow-down
               if currentUser.isBoardMember
                 unless currentUser.isCommentOnly
                   unless currentUser.isWorker
-                    a.js-rename
-                      i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}")
-                    a.js-confirm-delete
-                      i.fa.fa-trash.icon(title="{{_ 'delete'}}")
-                    a.fa.fa-navicon.icon.js-open-attachment-menu(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")
-
+                    a.js-rename(title="{{_ 'rename'}}")
+                      i.fa.fa-pencil-square-o
+                    a.js-confirm-delete(title="{{_ 'delete'}}")
+                      i.fa.fa-trash
+                    a.js-open-attachment-menu(data-attachment-link="{{link}}", title="{{_ 'attachmentActionsPopup-title'}}")
+                      i.fa.fa-bars
+        // Migration spinner overlay
+        if isAttachmentMigrating _id
+          .attachment-migration-overlay
+            .migration-spinner
+              i.fa.fa-cog.fa-spin
+            .migration-text {{_ 'migrating-attachment'}}
 
 template(name="attachmentActionsPopup")
   ul.pop-over-list
     li
       if isImage
         a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
-          i.fa.fa-book
           i.fa.fa-picture-o
-          if isCover
-            | {{_ 'remove-cover'}}
-          else
-            | {{_ 'add-cover'}}
+          | {{#if isCover}}{{_ 'remove-cover'}}{{else}}{{_ 'add-cover'}}{{/if}}
       if currentUser.isBoardAdmin
         if isImage
           a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")

client/components/cards/attachments.js

@@ -1,9 +1,15 @@
 import { ReactiveCache } from '/imports/reactiveCache';
-import { ObjectID } from 'bson';
+import { ObjectId } from 'bson';
 import DOMPurify from 'dompurify';
+import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
+import uploadProgressManager from '../../lib/uploadProgressManager';
+import { attachmentMigrationManager } from '/client/lib/attachmentMigrationManager';
+import Attachments from '/models/attachments';
+import { Utils } from '/client/lib/utils';
+import { formatDateTime } from '/imports/lib/dateUtils';
 
-const filesize = require('filesize');
-const prettyMilliseconds = require('pretty-ms');
+const { filesize } = require('filesize');
+import prettyMilliseconds from 'pretty-ms';
 
 // We store current card ID and the ID of currently opened attachment in a
 // global var. This is used so that we know what's the next attachment to open
@@ -16,7 +22,7 @@ let touchStartCoords = null;
 let touchEndCoords = null;
 
 // Stores link to the attachment for which attachment actions popup was opened
-attachmentActionsLink = null;
+let attachmentActionsLink = null;
 
 Template.attachmentGallery.events({
   'click .open-preview'(event) {
@@ -37,8 +43,8 @@ Template.attachmentGallery.events({
     attachmentActionsLink = event.currentTarget.getAttribute("data-attachment-link");
   },
   'click .js-rename': Popup.open('attachmentRename'),
-  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
-      Attachments.remove(this._id);
+  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', async function() {
+      await Attachments.removeAsync(this._id);
       Popup.back();
   }),
 });
@@ -193,8 +199,6 @@ function processTouch(){
   xDist = touchEndCoords.x - touchStartCoords.x;
   yDist = touchEndCoords.y - touchStartCoords.y;
 
-  console.log("xDist: " + xDist);
-
   // Left swipe
   if (Math.abs(xDist) > Math.abs(yDist) && xDist < 0) {
     openNextAttachment();
@@ -214,14 +218,12 @@ function processTouch(){
 
 Template.attachmentViewer.events({
   'touchstart #viewer-container'(event) {
-    console.log("touchstart")
     touchStartCoords = {
       x: event.changedTouches[0].screenX,
       y: event.changedTouches[0].screenY
     }
   },
   'touchend #viewer-container'(event) {
-    console.log("touchend")
     touchEndCoords = {
       x: event.changedTouches[0].screenX,
       y: event.changedTouches[0].screenY
@@ -268,7 +270,27 @@ Template.attachmentGallery.helpers({
     return ret;
   },
   sanitize(value) {
-    return DOMPurify.sanitize(value);
+    return sanitizeHTML(value);
+  },
+  uploaderName() {
+    const uploaderId = this.userId;
+    if (!uploaderId) return '';
+    const uploader = ReactiveCache.getUser(uploaderId);
+    if (!uploader) return '';
+    return uploader.profile && uploader.profile.fullname
+      ? uploader.profile.fullname
+      : uploader.username || '';
+  },
+  uploadedAt() {
+    if (this.uploadedAtOstrio) {
+      return formatDateTime(this.uploadedAtOstrio);
+    }
+    // Fall back to ObjectId timestamp (first 4 bytes = Unix seconds)
+    try {
+      const ts = parseInt(this._id.substring(0, 8), 16) * 1000;
+      if (!isNaN(ts)) return formatDateTime(new Date(ts));
+    } catch (_) {}
+    return '';
   },
 });
 
@@ -291,49 +313,18 @@ Template.cardAttachmentsPopup.helpers({
 });
 
 Template.cardAttachmentsPopup.events({
-  'change .js-attach-file'(event, templateInstance) {
+  async 'change .js-attach-file'(event, templateInstance) {
     const card = this;
     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 = await 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 +332,7 @@ Template.cardAttachmentsPopup.events({
             Popup.back();
           }
         });
-        uploader.start();
-      }
+      });
     }
   },
   'click .js-computer-upload'(event, templateInstance) {
@@ -356,6 +346,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 async 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 = await Attachments.insertAsync(
+        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 => {
@@ -390,12 +479,12 @@ Template.previewClipboardImagePopup.onRendered(() => {
 });
 
 Template.previewClipboardImagePopup.events({
-  'click .js-upload-pasted-image'() {
+  async 'click .js-upload-pasted-image'() {
     const card = this;
     if (pastedResults && pastedResults.file) {
       const file = pastedResults.file;
       window.oPasted = pastedResults;
-      const fileId = new ObjectID().toString();
+      const fileId = new ObjectId().toString();
       const config = {
         file,
         fileId: fileId,
@@ -404,7 +493,7 @@ Template.previewClipboardImagePopup.events({
         chunkSize: 'dynamic',
       };
       config.meta.fileId = fileId;
-      const uploader = Attachments.insert(
+      const uploader = await Attachments.insertAsync(
         config,
         false,
       );
@@ -425,9 +514,9 @@ Template.previewClipboardImagePopup.events({
   },
 });
 
-BlazeComponent.extendComponent({
+Template.attachmentActionsPopup.helpers({
   isCover() {
-    const ret = ReactiveCache.getCard(this.data().meta.cardId).coverId == this.data()._id;
+    const ret = ReactiveCache.getCard(this.meta.cardId).coverId == this._id;
     return ret;
   },
   isBackgroundImage() {
@@ -435,75 +524,86 @@ BlazeComponent.extendComponent({
     //return currentBoard.backgroundImageURL === $(".attachment-thumbnail-img").attr("src");
     return false;
   },
-  events() {
-    return [
-      {
-        'click .js-add-cover'() {
-          ReactiveCache.getCard(this.data().meta.cardId).setCover(this.data()._id);
-          Popup.back();
-        },
-        'click .js-remove-cover'() {
-          ReactiveCache.getCard(this.data().meta.cardId).unsetCover();
-          Popup.back();
-        },
-        'click .js-add-background-image'() {
-          const currentBoard = Utils.getCurrentBoard();
-          currentBoard.setBackgroundImageURL(attachmentActionsLink);
-          Utils.setBackgroundImage(attachmentActionsLink);
-          Popup.back();
-          event.preventDefault();
-        },
-        'click .js-remove-background-image'() {
-          const currentBoard = Utils.getCurrentBoard();
-          currentBoard.setBackgroundImageURL("");
-          Utils.setBackgroundImage("");
-          Popup.back();
-          Utils.reload();
-          event.preventDefault();
-        },
-        'click .js-move-storage-fs'() {
-          Meteor.call('moveAttachmentToStorage', this.data()._id, "fs");
-          Popup.back();
-        },
-        'click .js-move-storage-gridfs'() {
-          Meteor.call('moveAttachmentToStorage', this.data()._id, "gridfs");
-          Popup.back();
-        },
-        'click .js-move-storage-s3'() {
-          Meteor.call('moveAttachmentToStorage', this.data()._id, "s3");
-          Popup.back();
-        },
-      }
-    ]
-  }
-}).register('attachmentActionsPopup');
+});
 
-BlazeComponent.extendComponent({
+Template.attachmentActionsPopup.events({
+  'click .js-add-cover'() {
+    ReactiveCache.getCard(this.meta.cardId).setCover(this._id);
+    Popup.back();
+  },
+  'click .js-remove-cover'() {
+    ReactiveCache.getCard(this.meta.cardId).unsetCover();
+    Popup.back();
+  },
+  'click .js-add-background-image'(event) {
+    const currentBoard = Utils.getCurrentBoard();
+    currentBoard.setBackgroundImageURL(attachmentActionsLink);
+    Utils.setBackgroundImage(attachmentActionsLink);
+    Popup.back();
+    event.preventDefault();
+  },
+  'click .js-remove-background-image'(event) {
+    const currentBoard = Utils.getCurrentBoard();
+    currentBoard.setBackgroundImageURL("");
+    Utils.setBackgroundImage("");
+    Popup.back();
+    Utils.reload();
+    event.preventDefault();
+  },
+  'click .js-move-storage-fs'() {
+    Meteor.call('moveAttachmentToStorage', this._id, "fs");
+    Popup.back();
+  },
+  'click .js-move-storage-gridfs'() {
+    Meteor.call('moveAttachmentToStorage', this._id, "gridfs");
+    Popup.back();
+  },
+  'click .js-move-storage-s3'() {
+    Meteor.call('moveAttachmentToStorage', this._id, "s3");
+    Popup.back();
+  },
+});
+
+Template.attachmentRenamePopup.helpers({
   getNameWithoutExtension() {
-    const ret = this.data().name.replace(new RegExp("\." + this.data().extension + "$"), "");
+    const ret = this.name.replace(new RegExp("\." + this.extension + "$"), "");
     return ret;
   },
-  events() {
-    return [
-      {
-        'keydown input.js-edit-attachment-name'(evt) {
-          // enter = save
-          if (evt.keyCode === 13) {
-            this.find('button[type=submit]').click();
-          }
-        },
-        'click button.js-submit-edit-attachment-name'(event) {
-          // save button pressed
-          event.preventDefault();
-          const name = this.$('.js-edit-attachment-name')[0]
-            .value
-            .trim() + this.data().extensionWithDot;
-          if (name === DOMPurify.sanitize(name)) {
-            Meteor.call('renameAttachment', this.data()._id, name);
-          }
-          Popup.back();
-        },
-      }
-    ]
-  }
-}).register('attachmentRenamePopup');
+});
+
+Template.attachmentRenamePopup.events({
+  'keydown input.js-edit-attachment-name'(evt, tpl) {
+    // enter = save
+    if (evt.keyCode === 13) {
+      tpl.find('button[type=submit]').click();
+    }
+  },
+  'click button.js-submit-edit-attachment-name'(event, tpl) {
+    // save button pressed
+    event.preventDefault();
+    const name = tpl.$('.js-edit-attachment-name')[0]
+      .value
+      .trim() + this.extensionWithDot;
+    if (name === sanitizeText(name)) {
+      Meteor.call('renameAttachment', this._id, name);
+    }
+    Popup.back();
+  },
+});
+
+// Template helpers for attachment migration status
+Template.registerHelper('attachmentMigrationStatus', function(attachmentId) {
+  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

@@ -22,7 +22,7 @@ template(name="cardCustomField-text")
                 = value
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -41,7 +41,7 @@ template(name="cardCustomField-number")
             input(type="number" value=data.value)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -55,10 +55,11 @@ template(name="cardCustomField-number")
 template(name="cardCustomField-checkbox")
   .js-checklist-item.checklist-item(class="{{#if data.value }}is-checked{{/if}}")
     if canModifyCard
-      .check-box-container
-        .check-box.materialCheckBox(class="{{#if data.value }}is-checked{{/if}}")
+      span.check-box-unicode
+        i.fa(class="{{#if data.value}}fa-check-square{{else}}fa-square-o{{/if}}")
     else
-      .materialCheckBox(class="{{#if data.value }}is-checked{{/if}}")
+      span.check-box-unicode
+        i.fa(class="{{#if data.value}}fa-check-square{{else}}fa-square-o{{/if}}")
 
 template(name="cardCustomField-currency")
     if canModifyCard
@@ -66,7 +67,7 @@ template(name="cardCustomField-currency")
             input(type="text" value=data.value autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -79,13 +80,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 +95,24 @@ template(name="cardCustomField-date")
         div.card-date
           time(datetime="{{showISODate}}")
             | {{showDate}}
-            b
-              | {{showWeek}}
+            if showWeekOfYear
+                b
+                | {{showWeek}}
+
+template(name="cardCustomField-datePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
 
 template(name="cardCustomField-dropdown")
     if canModifyCard
@@ -111,7 +129,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 +150,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,12 +1,41 @@
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
-import { DatePicker } from '/client/lib/datepicker';
-import Cards from '/models/cards';
+import {
+  setupDatePicker,
+  datePickerRendered,
+  datePickerHelpers,
+  datePickerEvents,
+} 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 { CustomFieldStringTemplate } from '/client/lib/customFields'
+import { getCurrentCardFromContext } from '/client/lib/currentCard';
+import { EscapeActions } from '/client/lib/escapeActions';
+import { getSidebarInstance } from '/client/features/sidebar/service';
 
 Template.cardCustomFieldsPopup.helpers({
   hasCustomField() {
-    const card = Utils.getCurrentCard();
+    const card = getCurrentCardFromContext();
+    if (!card) return false;
     const customFieldId = this._id;
     return card.customFieldIndex(customFieldId) > -1;
   },
@@ -14,311 +43,297 @@ Template.cardCustomFieldsPopup.helpers({
 
 Template.cardCustomFieldsPopup.events({
   'click .js-select-field'(event) {
-    const card = Utils.getCurrentCard();
+    const card = getCurrentCardFromContext();
+    if (!card) return;
     const customFieldId = this._id;
     card.toggleCustomField(customFieldId);
     event.preventDefault();
   },
   'click .js-settings'(event) {
     EscapeActions.executeUpTo('detailsPane');
-    Sidebar.setView('customFields');
+    const sidebar = getSidebarInstance();
+    if (sidebar) {
+      sidebar.setView('customFields');
+    }
     event.preventDefault();
   },
 });
 
 // cardCustomField
-const CardCustomField = BlazeComponent.extendComponent({
+Template.cardCustomField.helpers({
   getTemplate() {
-    return `cardCustomField-${this.data().definition.type}`;
-  },
-
-  onCreated() {
-    const self = this;
-    self.card = Utils.getCurrentCard();
-    self.customFieldId = this.data()._id;
+    return `cardCustomField-${this.definition.type}`;
   },
 });
-CardCustomField.register('cardCustomField');
+
+Template.cardCustomField.onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+});
 
 // cardCustomField-text
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-  }
+Template['cardCustomField-text'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+});
 
-  events() {
-    return [
-      {
-        'submit .js-card-customfield-text'(event) {
-          event.preventDefault();
-          const value = this.currentComponent().getValue();
-          this.card.setCustomField(this.customFieldId, value);
-        },
-      },
-    ];
-  }
-}.register('cardCustomField-text'));
+Template['cardCustomField-text'].events({
+  'submit .js-card-customfield-text'(event, tpl) {
+    event.preventDefault();
+    const value = tpl.currentComponent ? tpl.currentComponent().getValue() : tpl.$('textarea').val();
+    tpl.card.setCustomField(tpl.customFieldId, value);
+  },
+});
 
 // cardCustomField-number
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-  }
+Template['cardCustomField-number'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+});
 
-  events() {
-    return [
-      {
-        'submit .js-card-customfield-number'(event) {
-          event.preventDefault();
-          const value = parseInt(this.find('input').value, 10);
-          this.card.setCustomField(this.customFieldId, value);
-        },
-      },
-    ];
-  }
-}.register('cardCustomField-number'));
+Template['cardCustomField-number'].events({
+  'submit .js-card-customfield-number'(event, tpl) {
+    event.preventDefault();
+    const value = parseInt(tpl.find('input').value, 10);
+    tpl.card.setCustomField(tpl.customFieldId, value);
+  },
+});
 
 // cardCustomField-checkbox
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-  }
+Template['cardCustomField-checkbox'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+});
 
-  toggleItem() {
-    this.card.setCustomField(this.customFieldId, !this.data().value);
-  }
-
-  events() {
-    return [
-      {
-        'click .js-checklist-item .check-box-container': this.toggleItem,
-      },
-    ];
-  }
-}.register('cardCustomField-checkbox'));
+Template['cardCustomField-checkbox'].events({
+  'click .js-checklist-item .check-box-unicode'(event, tpl) {
+    tpl.card.setCustomField(tpl.customFieldId, !Template.currentData().value);
+  },
+  'click .js-checklist-item .check-box-container'(event, tpl) {
+    tpl.card.setCustomField(tpl.customFieldId, !Template.currentData().value);
+  },
+});
 
 // cardCustomField-currency
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-
-    this.currencyCode = this.data().definition.settings.currencyCode;
-  }
+Template['cardCustomField-currency'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+  this.currencyCode = Template.currentData().definition.settings.currencyCode;
+});
 
+Template['cardCustomField-currency'].helpers({
   formattedValue() {
     const locale = TAPi18n.getLanguage();
-
+    const tpl = Template.instance();
     return new Intl.NumberFormat(locale, {
       style: 'currency',
-      currency: this.currencyCode,
-    }).format(this.data().value);
-  }
+      currency: tpl.currencyCode,
+    }).format(this.value);
+  },
+});
 
-  events() {
-    return [
-      {
-        'submit .js-card-customfield-currency'(event) {
-          event.preventDefault();
-          // To allow input separated by comma, the comma is replaced by a period.
-          const value = Number(this.find('input').value.replace(/,/i, '.'), 10);
-          this.card.setCustomField(this.customFieldId, value);
-        },
-      },
-    ];
-  }
-}.register('cardCustomField-currency'));
+Template['cardCustomField-currency'].events({
+  'submit .js-card-customfield-currency'(event, tpl) {
+    event.preventDefault();
+    // To allow input separated by comma, the comma is replaced by a period.
+    const value = Number(tpl.find('input').value.replace(/,/i, '.'), 10);
+    tpl.card.setCustomField(tpl.customFieldId, value);
+  },
+});
 
 // cardCustomField-date
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.date = ReactiveVar();
-    self.now = ReactiveVar(moment());
-    window.setInterval(() => {
-      self.now.set(moment());
-    }, 60000);
+Template['cardCustomField-date'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+  const self = this;
+  self.date = ReactiveVar();
+  self.now = ReactiveVar(now());
+  window.setInterval(() => {
+    self.now.set(now());
+  }, 60000);
 
-    self.autorun(() => {
-      self.date.set(moment(self.data().value));
-    });
-  }
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().value));
+  });
+});
 
+Template['cardCustomField-date'].helpers({
   showWeek() {
-    return this.date.get().week().toString();
-  }
-
+    return getISOWeek(Template.instance().date.get()).toString();
+  },
+  showWeekOfYear() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      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(Template.instance().date.get(), dateFormat, true);
+  },
   showISODate() {
-    return this.date.get().toISOString();
-  }
-
+    return Template.instance().date.get().toISOString();
+  },
   classes() {
+    const tpl = Template.instance();
     if (
-      this.date.get().isBefore(this.now.get(), 'minute') &&
-      this.now.get().isBefore(this.data().value)
+      isBefore(tpl.date.get(), tpl.now.get(), 'minute') &&
+      isBefore(tpl.now.get(), this.value, 'minute')
     ) {
       return 'current';
     }
     return '';
-  }
-
+  },
   showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
-  }
+    return `${TAPi18n.__('card-start-on')} ${Template.instance().date.get().toLocaleString()}`;
+  },
+});
 
-  events() {
-    return [
-      {
-        'click .js-edit-date': Popup.open('cardCustomField-date'),
-      },
-    ];
-  }
-}.register('cardCustomField-date'));
+Template['cardCustomField-date'].events({
+  'click .js-edit-date': Popup.open('cardCustomField-date'),
+});
 
 // cardCustomField-datePopup
-(class extends DatePicker {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.card = Utils.getCurrentCard();
-    self.customFieldId = this.data()._id;
-    this.data().value && this.date.set(moment(this.data().value));
-  }
+Template['cardCustomField-datePopup'].onCreated(function () {
+  const data = Template.currentData();
+  setupDatePicker(this, {
+    initialDate: data.value ? data.value : undefined,
+  });
+  // Override card and store customFieldId for store/delete callbacks
+  this.datePicker.card = getCurrentCardFromContext();
+  this.customFieldId = data._id;
+});
 
-  _storeDate(date) {
-    this.card.setCustomField(this.customFieldId, date);
-  }
+Template['cardCustomField-datePopup'].onRendered(function () {
+  datePickerRendered(this);
+});
 
-  _deleteDate() {
-    this.card.setCustomField(this.customFieldId, '');
-  }
-}.register('cardCustomField-datePopup'));
+Template['cardCustomField-datePopup'].helpers(datePickerHelpers());
+
+Template['cardCustomField-datePopup'].events(datePickerEvents({
+  storeDate(date) {
+    this.datePicker.card.setCustomField(this.customFieldId, date);
+  },
+  deleteDate() {
+    this.datePicker.card.setCustomField(this.customFieldId, '');
+  },
+}));
 
 // cardCustomField-dropdown
-(class extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-    this._items = this.data().definition.settings.dropdownItems;
-    this.items = this._items.slice(0);
-    this.items.unshift({
-      _id: '',
-      name: TAPi18n.__('custom-field-dropdown-none'),
-    });
-  }
+Template['cardCustomField-dropdown'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+  this._items = Template.currentData().definition.settings.dropdownItems;
+  this.items = this._items.slice(0);
+  this.items.unshift({
+    _id: '',
+    name: TAPi18n.__('custom-field-dropdown-none'),
+  });
+});
 
+Template['cardCustomField-dropdown'].helpers({
+  items() {
+    return Template.instance().items;
+  },
   selectedItem() {
-    const selected = this._items.find(item => {
-      return item._id === this.data().value;
+    const tpl = Template.instance();
+    const selected = tpl._items.find(item => {
+      return item._id === this.value;
     });
     return selected
       ? selected.name
       : TAPi18n.__('custom-field-dropdown-unknown');
-  }
+  },
+});
 
-  events() {
-    return [
-      {
-        'submit .js-card-customfield-dropdown'(event) {
-          event.preventDefault();
-          const value = this.find('select').value;
-          this.card.setCustomField(this.customFieldId, value);
-        },
-      },
-    ];
-  }
-}.register('cardCustomField-dropdown'));
+Template['cardCustomField-dropdown'].events({
+  'submit .js-card-customfield-dropdown'(event, tpl) {
+    event.preventDefault();
+    const value = tpl.find('select').value;
+    tpl.card.setCustomField(tpl.customFieldId, value);
+  },
+});
 
 // cardCustomField-stringtemplate
-class CardCustomFieldStringTemplate extends CardCustomField {
-  onCreated() {
-    super.onCreated();
-
-    this.customField = new CustomFieldStringTemplate(this.data().definition);
-
-    this.stringtemplateItems = new ReactiveVar(this.data().value ?? []);
-  }
+Template['cardCustomField-stringtemplate'].onCreated(function () {
+  this.card = getCurrentCardFromContext();
+  this.customFieldId = Template.currentData()._id;
+  this.customField = new CustomFieldStringTemplate(Template.currentData().definition);
+  this.stringtemplateItems = new ReactiveVar(Template.currentData().value ?? []);
+});
 
+Template['cardCustomField-stringtemplate'].helpers({
   formattedValue() {
-    const ret = this.customField.getFormattedValue(this.data().value);
+    const tpl = Template.instance();
+    const ret = tpl.customField.getFormattedValue(this.value);
     return ret;
-  }
+  },
+  stringtemplateItems() {
+    return Template.instance().stringtemplateItems.get();
+  },
+});
 
-  getItems() {
-    return Array.from(this.findAll('input'))
-      .map(input => input.value)
-      .filter(value => !!value.trim());
-  }
+Template['cardCustomField-stringtemplate'].events({
+  'submit .js-card-customfield-stringtemplate'(event, tpl) {
+    event.preventDefault();
+    const items = tpl.stringtemplateItems.get();
+    tpl.card.setCustomField(tpl.customFieldId, items);
+  },
 
-  events() {
-    return [
-      {
-        'submit .js-card-customfield-stringtemplate'(event) {
-          event.preventDefault();
-          const items = this.stringtemplateItems.get();
-          this.card.setCustomField(this.customFieldId, items);
-        },
+  'keydown .js-card-customfield-stringtemplate-item'(event, tpl) {
+    if (event.keyCode === 13) {
+      event.preventDefault();
 
-        'keydown .js-card-customfield-stringtemplate-item'(event) {
-          if (event.keyCode === 13) {
-            event.preventDefault();
+      if (event.target.value.trim() || event.metaKey || event.ctrlKey) {
+        const inputLast = tpl.find('input.last');
 
-            if (event.target.value.trim() || event.metaKey || event.ctrlKey) {
-              const inputLast = this.find('input.last');
+        let items = Array.from(tpl.findAll('input'))
+          .map(input => input.value)
+          .filter(value => !!value.trim());
 
-              let items = this.getItems();
+        if (event.target === inputLast) {
+          inputLast.value = '';
+        } else if (event.target.nextSibling === inputLast) {
+          inputLast.focus();
+        } else {
+          event.target.blur();
 
-              if (event.target === inputLast) {
-                inputLast.value = '';
-              } else if (event.target.nextSibling === inputLast) {
-                inputLast.focus();
-              } else {
-                event.target.blur();
+          const idx = Array.from(tpl.findAll('input')).indexOf(
+            event.target,
+          );
+          items.splice(idx + 1, 0, '');
 
-                const idx = Array.from(this.findAll('input')).indexOf(
-                  event.target,
-                );
-                items.splice(idx + 1, 0, '');
+          Tracker.afterFlush(() => {
+            const element = tpl.findAll('input')[idx + 1];
+            element.focus();
+            element.value = '';
+          });
+        }
 
-                Tracker.afterFlush(() => {
-                  const element = this.findAll('input')[idx + 1];
-                  element.focus();
-                  element.value = '';
-                });
-              }
+        tpl.stringtemplateItems.set(items);
+      }
+      if (event.metaKey || event.ctrlKey) {
+        tpl.find('button[type=submit]').click();
+      }
+    }
+  },
 
-              this.stringtemplateItems.set(items);
-            }
-            if (event.metaKey || event.ctrlKey) {
-              this.find('button[type=submit]').click();
-            }
-          }
-        },
+  'blur .js-card-customfield-stringtemplate-item'(event, tpl) {
+    if (
+      !event.target.value.trim() ||
+      event.target === tpl.find('input.last')
+    ) {
+      const items = Array.from(tpl.findAll('input'))
+        .map(input => input.value)
+        .filter(value => !!value.trim());
+      tpl.stringtemplateItems.set(items);
+      tpl.find('input.last').value = '';
+    }
+  },
 
-        'blur .js-card-customfield-stringtemplate-item'(event) {
-          if (
-            !event.target.value.trim() ||
-            event.target === this.find('input.last')
-          ) {
-            const items = this.getItems();
-            this.stringtemplateItems.set(items);
-            this.find('input.last').value = '';
-          }
-        },
-
-        'click .js-close-inlined-form'(event) {
-          this.stringtemplateItems.set(this.data().value ?? []);
-        },
-      },
-    ];
-  }
-}
-CardCustomFieldStringTemplate.register('cardCustomField-stringtemplate');
+  'click .js-close-inlined-form'(event, tpl) {
+    tpl.stringtemplateItems.set(Template.currentData().value ?? []);
+  },
+});

client/components/cards/cardDate.css

@@ -8,57 +8,134 @@
 .card-date.is-active {
   background-color: #b3b3b3;
 }
-.card-date.current,
-.card-date.almost-due,
-.card-date.due,
-.card-date.long-overdue {
+/* Date status colors - red = overdue, amber = due soon, no shade = not due */
+.card-date.overdue {
+  background-color: #ff4444; /* Red for overdue */
   color: #fff;
 }
+.card-date.overdue:hover,
+.card-date.overdue.is-active {
+  background-color: #cc3333;
+}
+
+.card-date.due-soon {
+  background-color: #ffaa00; /* Amber for due soon */
+  color: #000;
+}
+.card-date.due-soon:hover,
+.card-date.due-soon.is-active {
+  background-color: #e69900;
+}
+
+.card-date.not-due {
+  /* No special background - uses default date type colors */
+}
+
 .card-date.current {
-  background-color: #5ba639;
+  background-color: #5ba639; /* Green for current/active */
+  color: #fff;
 }
 .card-date.current:hover,
 .card-date.current.is-active {
   background-color: #46802c;
 }
-.card-date.almost-due {
-  background-color: #edc909;
+
+.card-date.completed {
+  background-color: #90ee90; /* Light green for completed */
+  color: #000;
 }
-.card-date.almost-due:hover,
-.card-date.almost-due.is-active {
-  background-color: #bc9f07;
+.card-date.completed:hover,
+.card-date.completed.is-active {
+  background-color: #7dd87d;
 }
-.card-date.due {
-  background-color: #fa3f00;
+
+.card-date.completed-early {
+  background-color: #4caf50; /* Green for completed early */
+  color: #fff;
 }
-.card-date.due:hover,
-.card-date.due.is-active {
-  background-color: #c73200;
+.card-date.completed-early:hover,
+.card-date.completed-early.is-active {
+  background-color: #45a049;
 }
-.card-date.long-overdue {
-  background-color: #fd5d47;
+
+.card-date.completed-late {
+  background-color: #ff9800; /* Orange for completed late */
+  color: #fff;
 }
-.card-date.long-overdue:hover,
-.card-date.long-overdue.is-active {
-  background-color: #fd3e24;
+.card-date.completed-late:hover,
+.card-date.completed-late.is-active {
+  background-color: #f57c00;
+}
+
+.card-date.completed-on-time {
+  background-color: #2196f3; /* Blue for completed on time */
+  color: #fff;
+}
+.card-date.completed-on-time:hover,
+.card-date.completed-on-time.is-active {
+  background-color: #1976d2;
+}
+
+/* Date type specific colors */
+.card-date.received-date {
+  background-color: #dbdbdb; /* Light grey for received */
+}
+
+.card-date.received-date:hover,
+.card-date.received-date.is-active {
+  background-color: #b3b3b3;
+}
+
+.card-date.start-date {
+  background-color: #90ee90; /* Light green for start */
+  color: #000; /* Black text for start */
+}
+
+.card-date.start-date:hover,
+.card-date.start-date.is-active {
+  background-color: #7dd87d;
+}
+
+.card-date.due-date {
+  background-color: #ffd700; /* Yellow for due */
+  color: #000; /* Black text for due */
+}
+
+.card-date.due-date:hover,
+.card-date.due-date.is-active {
+  background-color: #e6c200;
+}
+
+.card-date.end-date {
+  background-color: #ffb3b3; /* Light red for end */
+  color: #000; /* Black text for end */
+}
+
+.card-date.end-date:hover,
+.card-date.end-date.is-active {
+  background-color: #ff9999;
 }
 .card-date.end-date time::before {
-  content: "\f253";
+  content: "🏁"; /* Finish flag - represents end/completion */
 }
 .card-date.due-date time::before {
-  content: "\f090";
+  content: "⏰"; /* Alarm clock - represents due/deadline */
 }
 .card-date.start-date time::before {
-  content: "\f251";
+  content: "🚀"; /* Rocket - represents start/launch */
 }
 .card-date.received-date time::before {
-  content: "\f08b";
+  content: "📥"; /* Inbox tray - represents received/incoming */
+}
+
+/* Generic date badge and custom field date */
+.card-date:not(.received-date):not(.start-date):not(.due-date):not(.end-date) time::before {
+  /*content: "📅"; // Calendar - represents generic date */
 }
 .card-date time::before {
-  font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
-  -webkit-font-smoothing: antialiased;
   margin-right: 0.3em;
+  display: inline-block;
 }
 .customfield-date {
   display: block;

client/components/cards/cardDate.jade

@@ -1,20 +1,289 @@
 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="cardReceivedDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardStartDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardDueDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="dateCustomField")
+  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+      if showWeekOfYear
         b
           | {{showWeek}}
 
-template(name="dateCustomField")
-  a(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
+template(name="cardCustomFieldDate")
+  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
     time(datetime="{{showISODate}}")
       | {{showDate}}
-      b
-        | {{showWeek}}
+      if showWeekOfYear
+        b
+          | {{showWeek}}
+
+template(name="voteEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="pokerEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardReceivedDate")
+  if canModifyCard
+    a.js-edit-date.card-date.received-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date.received-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardStartDate")
+  if canModifyCard
+    a.js-edit-date.card-date.start-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date.start-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardDueDate")
+  if canModifyCard
+    a.js-edit-date.card-date.due-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date.due-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date.end-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date.end-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardCustomFieldDate")
+  a(title="{{_ 'date'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+      if showWeekOfYear
+        b
+          | {{showWeek}}
+
+template(name="editCardReceivedDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editCardStartDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editCardDueDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editCardEndDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editVoteEndDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editPokerEndDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}

client/components/cards/cardDate.js

@@ -1,391 +1,644 @@
-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 {
+  setupDatePicker,
+  datePickerRendered,
+  datePickerHelpers,
+  datePickerEvents,
+} 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';
+
+// --- DatePicker popups (edit date forms) ---
 
 // editCardReceivedDatePopup
-(class extends DatePicker {
-  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getReceived() &&
-      this.date.set(moment(this.data().getReceived()));
-  }
-
-  _storeDate(date) {
-    this.card.setReceived(date);
-  }
-
-  _deleteDate() {
-    this.card.unsetReceived();
-  }
-}.register('editCardReceivedDatePopup'));
-
-// editCardStartDatePopup
-(class extends DatePicker {
-  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getStart() && this.date.set(moment(this.data().getStart()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getReceived())) {
-      this.$('.js-datepicker').datepicker(
-        'setStartDate',
-        this.card.getReceived(),
-      );
-    }
-  }
-
-  _storeDate(date) {
-    this.card.setStart(date);
-  }
-
-  _deleteDate() {
-    this.card.unsetStart();
-  }
-}.register('editCardStartDatePopup'));
-
-// editCardDueDatePopup
-(class extends DatePicker {
-  onCreated() {
-    super.onCreated('1970-01-01 17:00:00');
-    this.data().getDue() && this.date.set(moment(this.data().getDue()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
-  }
-
-  _storeDate(date) {
-    this.card.setDue(date);
-  }
-
-  _deleteDate() {
-    this.card.unsetDue();
-  }
-}.register('editCardDueDatePopup'));
-
-// editCardEndDatePopup
-(class extends DatePicker {
-  onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getEnd() && this.date.set(moment(this.data().getEnd()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
-  }
-
-  _storeDate(date) {
-    this.card.setEnd(date);
-  }
-
-  _deleteDate() {
-    this.card.unsetEnd();
-  }
-}.register('editCardEndDatePopup'));
-
-// Display received, start, due & end dates
-const CardDate = BlazeComponent.extendComponent({
-  template() {
-    return 'dateBadge';
-  },
-
-  onCreated() {
-    const self = this;
-    self.date = ReactiveVar();
-    self.now = ReactiveVar(moment());
-    window.setInterval(() => {
-      self.now.set(moment());
-    }, 60000);
-  },
-
-  showWeek() {
-    return this.date.get().week().toString();
-  },
-
-  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',
-    });
-  },
-
-  showISODate() {
-    return this.date.get().toISOString();
-  },
+Template.editCardReceivedDatePopup.onCreated(function () {
+  const card = Template.currentData();
+  setupDatePicker(this, {
+    defaultTime: formatDateTime(now()),
+    initialDate: card.getReceived() ? card.getReceived() : undefined,
+  });
 });
 
-class CardReceivedDate extends CardDate {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.autorun(() => {
-      self.date.set(moment(self.data().getReceived()));
-    });
-  }
+Template.editCardReceivedDatePopup.onRendered(function () {
+  datePickerRendered(this);
+});
 
+Template.editCardReceivedDatePopup.helpers(datePickerHelpers());
+
+Template.editCardReceivedDatePopup.events(datePickerEvents({
+  storeDate(date) {
+    this.datePicker.card.setReceived(formatDateTime(date));
+  },
+  deleteDate() {
+    this.datePicker.card.unsetReceived();
+  },
+}));
+
+// editCardStartDatePopup
+Template.editCardStartDatePopup.onCreated(function () {
+  const card = Template.currentData();
+  setupDatePicker(this, {
+    defaultTime: formatDateTime(now()),
+    initialDate: card.getStart() ? card.getStart() : undefined,
+  });
+});
+
+Template.editCardStartDatePopup.onRendered(function () {
+  datePickerRendered(this);
+});
+
+Template.editCardStartDatePopup.helpers(datePickerHelpers());
+
+Template.editCardStartDatePopup.events(datePickerEvents({
+  storeDate(date) {
+    this.datePicker.card.setStart(formatDateTime(date));
+  },
+  deleteDate() {
+    this.datePicker.card.unsetStart();
+  },
+}));
+
+// editCardDueDatePopup
+Template.editCardDueDatePopup.onCreated(function () {
+  const card = Template.currentData();
+  setupDatePicker(this, {
+    defaultTime: '1970-01-01 17:00:00',
+    initialDate: card.getDue() ? card.getDue() : undefined,
+  });
+});
+
+Template.editCardDueDatePopup.onRendered(function () {
+  datePickerRendered(this);
+});
+
+Template.editCardDueDatePopup.helpers(datePickerHelpers());
+
+Template.editCardDueDatePopup.events(datePickerEvents({
+  storeDate(date) {
+    this.datePicker.card.setDue(formatDateTime(date));
+  },
+  deleteDate() {
+    this.datePicker.card.unsetDue();
+  },
+}));
+
+// editCardEndDatePopup
+Template.editCardEndDatePopup.onCreated(function () {
+  const card = Template.currentData();
+  setupDatePicker(this, {
+    defaultTime: formatDateTime(now()),
+    initialDate: card.getEnd() ? card.getEnd() : undefined,
+  });
+});
+
+Template.editCardEndDatePopup.onRendered(function () {
+  datePickerRendered(this);
+});
+
+Template.editCardEndDatePopup.helpers(datePickerHelpers());
+
+Template.editCardEndDatePopup.events(datePickerEvents({
+  storeDate(date) {
+    this.datePicker.card.setEnd(formatDateTime(date));
+  },
+  deleteDate() {
+    this.datePicker.card.unsetEnd();
+  },
+}));
+
+// --- Card date badge display helpers ---
+
+// Shared onCreated logic for card date badge templates
+function cardDateOnCreated(tpl) {
+  tpl.date = new ReactiveVar();
+  tpl.now = new ReactiveVar(now());
+  window.setInterval(() => {
+    tpl.now.set(now());
+  }, 60000);
+}
+
+// Shared helpers for card date badge templates
+function cardDateHelpers(extraHelpers) {
+  const base = {
+    showWeek() {
+      return getISOWeek(Template.instance().date.get()).toString();
+    },
+    showWeekOfYear() {
+      const user = ReactiveCache.getCurrentUser();
+      if (!user) {
+        return false;
+      }
+      return user.isShowWeekOfYear();
+    },
+    showDate() {
+      const currentUser = ReactiveCache.getCurrentUser();
+      const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+      return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+    },
+    showISODate() {
+      return Template.instance().date.get().toISOString();
+    },
+  };
+  return Object.assign(base, extraHelpers);
+}
+
+// cardReceivedDate
+Template.cardReceivedDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getReceived()));
+  });
+});
+
+Template.cardReceivedDate.helpers(cardDateHelpers({
   classes() {
+    const tpl = Template.instance();
     let classes = 'received-date ';
-    const dueAt = this.data().getDue();
-    const endAt = this.data().getEnd();
-    const startAt = this.data().getStart();
-    const theDate = this.date.get();
-    // if dueAt, endAt and startAt exist & are > receivedAt, receivedAt doesn't need to be flagged
+    const data = Template.currentData();
+    const dueAt = data.getDue();
+    const endAt = data.getEnd();
+    const startAt = data.getStart();
+    const theDate = tpl.date.get();
+
     if (
-      (startAt && theDate.isAfter(startAt)) ||
-      (endAt && theDate.isAfter(endAt)) ||
-      (dueAt && theDate.isAfter(dueAt))
-    )
-      classes += 'long-overdue';
-    else classes += 'current';
+      (startAt && isAfter(theDate, startAt)) ||
+      (endAt && isAfter(theDate, endAt)) ||
+      (dueAt && isAfter(theDate, dueAt))
+    ) {
+      classes += 'overdue';
+    } else {
+      classes += 'not-due';
+    }
     return classes;
-  }
-
+  },
   showTitle() {
-    return `${TAPi18n.__('card-received-on')} ${this.date
-      .get()
-      .format('LLLL')}`;
-  }
+    const tpl = Template.instance();
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-received-on')} ${formattedDate}`;
+  },
+}));
 
-  events() {
-    return super.events().concat({
-      'click .js-edit-date': Popup.open('editCardReceivedDate'),
-    });
-  }
-}
-CardReceivedDate.register('cardReceivedDate');
+Template.cardReceivedDate.events({
+  'click .js-edit-date': Popup.open('editCardReceivedDate'),
+});
 
-class CardStartDate extends CardDate {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.autorun(() => {
-      self.date.set(moment(self.data().getStart()));
-    });
-  }
+// cardStartDate
+Template.cardStartDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getStart()));
+  });
+});
 
+Template.cardStartDate.helpers(cardDateHelpers({
   classes() {
-    let classes = 'start-date' + ' ';
-    const dueAt = this.data().getDue();
-    const endAt = this.data().getEnd();
-    const theDate = this.date.get();
-    const now = this.now.get();
-    // if dueAt or endAt exist & are > startAt, startAt doesn't need to be flagged
-    if ((endAt && theDate.isAfter(endAt)) || (dueAt && theDate.isAfter(dueAt)))
-      classes += 'long-overdue';
-    else if (theDate.isAfter(now)) classes += '';
-    else classes += 'current';
+    const tpl = Template.instance();
+    let classes = 'start-date ';
+    const data = Template.currentData();
+    const dueAt = data.getDue();
+    const endAt = data.getEnd();
+    const theDate = tpl.date.get();
+    const nowVal = tpl.now.get();
+
+    if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt))) {
+      classes += 'overdue';
+    } else if (isAfter(theDate, nowVal)) {
+      classes += 'not-due';
+    } else {
+      classes += 'current';
+    }
     return classes;
-  }
-
+  },
   showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
-  }
+    const tpl = Template.instance();
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-start-on')} ${formattedDate}`;
+  },
+}));
 
-  events() {
-    return super.events().concat({
-      'click .js-edit-date': Popup.open('editCardStartDate'),
-    });
-  }
-}
-CardStartDate.register('cardStartDate');
+Template.cardStartDate.events({
+  'click .js-edit-date': Popup.open('editCardStartDate'),
+});
 
-class CardDueDate extends CardDate {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.autorun(() => {
-      self.date.set(moment(self.data().getDue()));
-    });
-  }
+// cardDueDate
+Template.cardDueDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getDue()));
+  });
+});
 
+Template.cardDueDate.helpers(cardDateHelpers({
   classes() {
-    let classes = 'due-date' + ' ';
-    const endAt = this.data().getEnd();
-    const theDate = this.date.get();
-    const now = this.now.get();
-    // if the due date is after the end date, green - done early
-    if (endAt && theDate.isAfter(endAt)) classes += 'current';
-    // if there is an end date, don't need to flag the due date
-    else if (endAt) classes += '';
-    else if (now.diff(theDate, 'days') >= 2) classes += 'long-overdue';
-    else if (now.diff(theDate, 'minute') >= 0) classes += 'due';
-    else if (now.diff(theDate, 'days') >= -1) classes += 'almost-due';
+    const tpl = Template.instance();
+    let classes = 'due-date ';
+    const data = Template.currentData();
+    const endAt = data.getEnd();
+    const theDate = tpl.date.get();
+    const nowVal = tpl.now.get();
+
+    if (endAt && isBefore(endAt, theDate)) {
+      classes += 'completed-early';
+    } else if (endAt) {
+      classes += 'completed';
+    } else {
+      const daysDiff = diff(theDate, nowVal, 'days');
+
+      if (daysDiff < 0) {
+        classes += 'overdue';
+      } else if (daysDiff <= 1) {
+        classes += 'due-soon';
+      } else {
+        classes += 'not-due';
+      }
+    }
+
     return classes;
-  }
-
+  },
   showTitle() {
-    return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`;
-  }
+    const tpl = Template.instance();
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-due-on')} ${formattedDate}`;
+  },
+}));
 
-  events() {
-    return super.events().concat({
-      'click .js-edit-date': Popup.open('editCardDueDate'),
-    });
-  }
-}
-CardDueDate.register('cardDueDate');
+Template.cardDueDate.events({
+  'click .js-edit-date': Popup.open('editCardDueDate'),
+});
 
-class CardEndDate extends CardDate {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.autorun(() => {
-      self.date.set(moment(self.data().getEnd()));
-    });
-  }
+// cardEndDate
+Template.cardEndDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getEnd()));
+  });
+});
 
+Template.cardEndDate.helpers(cardDateHelpers({
   classes() {
-    let classes = 'end-date' + ' ';
-    const dueAt = this.data().getDue();
-    const theDate = this.date.get();
-    if (!dueAt) classes += '';
-    else if (theDate.isBefore(dueAt)) classes += 'current';
-    else if (theDate.isAfter(dueAt)) classes += 'due';
+    const tpl = Template.instance();
+    let classes = 'end-date ';
+    const data = Template.currentData();
+    const dueAt = data.getDue();
+    const theDate = tpl.date.get();
+
+    if (!dueAt) {
+      classes += 'completed';
+    } else if (isBefore(theDate, dueAt)) {
+      classes += 'completed-early';
+    } else if (isAfter(theDate, dueAt)) {
+      classes += 'completed-late';
+    } else {
+      classes += 'completed-on-time';
+    }
     return classes;
-  }
-
+  },
   showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
-  }
+    const tpl = Template.instance();
+    return `${TAPi18n.__('card-end-on')} ${format(tpl.date.get(), 'LLLL')}`;
+  },
+}));
 
-  events() {
-    return super.events().concat({
-      'click .js-edit-date': Popup.open('editCardEndDate'),
-    });
-  }
-}
-CardEndDate.register('cardEndDate');
+Template.cardEndDate.events({
+  'click .js-edit-date': Popup.open('editCardEndDate'),
+});
 
-class CardCustomFieldDate extends CardDate {
-  template() {
-    return 'dateCustomField';
-  }
-
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.autorun(() => {
-      self.date.set(moment(self.data().value));
-    });
-  }
-
-  showWeek() {
-    return this.date.get().week().toString();
-  }
+// cardCustomFieldDate
+Template.cardCustomFieldDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().value));
+  });
+});
 
+Template.cardCustomFieldDate.helpers(cardDateHelpers({
   showDate() {
+    const tpl = Template.instance();
     // 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, {
+    return tpl.date.get().calendar(null, {
       sameElse: 'llll',
     });
-  }
-
+  },
   showTitle() {
-    return `${this.date.get().format('LLLL')}`;
-  }
-
+    const tpl = Template.instance();
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
+    return `${formattedDate}`;
+  },
   classes() {
     return 'customfield-date';
-  }
+  },
+}));
 
-  events() {
-    return [];
-  }
-}
-CardCustomFieldDate.register('cardCustomFieldDate');
+// --- Minicard date templates ---
 
-(class extends CardReceivedDate {
-  showDate() {
-    return this.date.get().format('L');
-  }
-}.register('minicardReceivedDate'));
+// minicardReceivedDate
+Template.minicardReceivedDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getReceived()));
+  });
+});
 
-(class extends CardStartDate {
-  showDate() {
-    return this.date.get().format('L');
-  }
-}.register('minicardStartDate'));
-
-(class extends CardDueDate {
-  showDate() {
-    return this.date.get().format('L');
-  }
-}.register('minicardDueDate'));
-
-(class extends CardEndDate {
-  showDate() {
-    return this.date.get().format('L');
-  }
-}.register('minicardEndDate'));
-
-(class extends CardCustomFieldDate {
-  showDate() {
-    return this.date.get().format('L');
-  }
-}.register('minicardCustomFieldDate'));
-
-class VoteEndDate extends CardDate {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.autorun(() => {
-      self.date.set(moment(self.data().getVoteEnd()));
-    });
-  }
+Template.minicardReceivedDate.helpers(cardDateHelpers({
   classes() {
-    const classes = 'end-date' + ' ';
+    const tpl = Template.instance();
+    let classes = 'received-date ';
+    const data = Template.currentData();
+    const dueAt = data.getDue();
+    const endAt = data.getEnd();
+    const startAt = data.getStart();
+    const theDate = tpl.date.get();
+
+    if (
+      (startAt && isAfter(theDate, startAt)) ||
+      (endAt && isAfter(theDate, endAt)) ||
+      (dueAt && isAfter(theDate, dueAt))
+    ) {
+      classes += 'overdue';
+    } else {
+      classes += 'not-due';
+    }
     return classes;
-  }
-  showDate() {
-    return this.date.get().format('L LT');
-  }
+  },
   showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
-  }
+    const tpl = Template.instance();
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-received-on')} ${formattedDate}`;
+  },
+  showDate() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+  },
+}));
 
-  events() {
-    return super.events().concat({
-      'click .js-edit-date': Popup.open('editVoteEndDate'),
-    });
-  }
-}
-VoteEndDate.register('voteEndDate');
+Template.minicardReceivedDate.events({
+  'click .js-edit-date': Popup.open('editCardReceivedDate'),
+});
 
-class PokerEndDate extends CardDate {
-  onCreated() {
-    super.onCreated();
-    const self = this;
-    self.autorun(() => {
-      self.date.set(moment(self.data().getPokerEnd()));
-    });
-  }
+// minicardStartDate
+Template.minicardStartDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getStart()));
+  });
+});
+
+Template.minicardStartDate.helpers(cardDateHelpers({
   classes() {
-    const classes = 'end-date' + ' ';
-    return classes;
-  }
-  showDate() {
-    return this.date.get().format('l LT');
-  }
-  showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
-  }
+    const tpl = Template.instance();
+    let classes = 'start-date ';
+    const data = Template.currentData();
+    const dueAt = data.getDue();
+    const endAt = data.getEnd();
+    const theDate = tpl.date.get();
+    const nowVal = tpl.now.get();
 
-  events() {
-    return super.events().concat({
-      'click .js-edit-date': Popup.open('editPokerEndDate'),
-    });
-  }
-}
-PokerEndDate.register('pokerEndDate');
+    if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt))) {
+      classes += 'overdue';
+    } else if (isAfter(theDate, nowVal)) {
+      classes += 'not-due';
+    } else {
+      classes += 'current';
+    }
+    return classes;
+  },
+  showTitle() {
+    const tpl = Template.instance();
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-start-on')} ${formattedDate}`;
+  },
+  showDate() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+  },
+}));
+
+Template.minicardStartDate.events({
+  'click .js-edit-date': Popup.open('editCardStartDate'),
+});
+
+// minicardDueDate
+Template.minicardDueDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getDue()));
+  });
+});
+
+Template.minicardDueDate.helpers(cardDateHelpers({
+  classes() {
+    const tpl = Template.instance();
+    let classes = 'due-date ';
+    const data = Template.currentData();
+    const endAt = data.getEnd();
+    const theDate = tpl.date.get();
+    const nowVal = tpl.now.get();
+
+    if (endAt && isBefore(endAt, theDate)) {
+      classes += 'completed-early';
+    } else if (endAt) {
+      classes += 'completed';
+    } else {
+      const daysDiff = diff(theDate, nowVal, 'days');
+
+      if (daysDiff < 0) {
+        classes += 'overdue';
+      } else if (daysDiff <= 1) {
+        classes += 'due-soon';
+      } else {
+        classes += 'not-due';
+      }
+    }
+
+    return classes;
+  },
+  showTitle() {
+    const tpl = Template.instance();
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-due-on')} ${formattedDate}`;
+  },
+  showDate() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+  },
+}));
+
+Template.minicardDueDate.events({
+  'click .js-edit-date': Popup.open('editCardDueDate'),
+});
+
+// minicardEndDate
+Template.minicardEndDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getEnd()));
+  });
+});
+
+Template.minicardEndDate.helpers(cardDateHelpers({
+  classes() {
+    const tpl = Template.instance();
+    let classes = 'end-date ';
+    const data = Template.currentData();
+    const dueAt = data.getDue();
+    const theDate = tpl.date.get();
+
+    if (!dueAt) {
+      classes += 'completed';
+    } else if (isBefore(theDate, dueAt)) {
+      classes += 'completed-early';
+    } else if (isAfter(theDate, dueAt)) {
+      classes += 'completed-late';
+    } else {
+      classes += 'completed-on-time';
+    }
+    return classes;
+  },
+  showTitle() {
+    const tpl = Template.instance();
+    return `${TAPi18n.__('card-end-on')} ${format(tpl.date.get(), 'LLLL')}`;
+  },
+  showDate() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+  },
+}));
+
+Template.minicardEndDate.events({
+  'click .js-edit-date': Popup.open('editCardEndDate'),
+});
+
+// minicardCustomFieldDate
+Template.minicardCustomFieldDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().value));
+  });
+});
+
+Template.minicardCustomFieldDate.helpers(cardDateHelpers({
+  showDate() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+  },
+  showTitle() {
+    const tpl = Template.instance();
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
+    return `${formattedDate}`;
+  },
+  classes() {
+    return 'customfield-date';
+  },
+}));
+
+// --- Vote and Poker end date badge templates ---
+
+// voteEndDate
+Template.voteEndDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getVoteEnd()));
+  });
+});
+
+Template.voteEndDate.helpers(cardDateHelpers({
+  classes() {
+    return 'end-date ';
+  },
+  showDate() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+  },
+  showTitle() {
+    const tpl = Template.instance();
+    return `${TAPi18n.__('card-end-on')} ${tpl.date.get().toLocaleString()}`;
+  },
+}));
+
+Template.voteEndDate.events({
+  'click .js-edit-date': Popup.open('editVoteEndDate'),
+});
+
+// pokerEndDate
+Template.pokerEndDate.onCreated(function () {
+  cardDateOnCreated(this);
+  const self = this;
+  self.autorun(() => {
+    self.date.set(new Date(Template.currentData().getPokerEnd()));
+  });
+});
+
+Template.pokerEndDate.helpers(cardDateHelpers({
+  classes() {
+    return 'end-date ';
+  },
+  showDate() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
+  },
+  showTitle() {
+    const tpl = Template.instance();
+    return `${TAPi18n.__('card-end-on')} ${format(tpl.date.get(), 'LLLL')}`;
+  },
+}));
+
+Template.pokerEndDate.events({
+  'click .js-edit-date': Popup.open('editPokerEndDate'),
+});

client/components/cards/cardDescription.js

@@ -1,37 +1,29 @@
 const descriptionFormIsOpen = new ReactiveVar(false);
 
-BlazeComponent.extendComponent({
-  onDestroyed() {
-    descriptionFormIsOpen.set(false);
-    $('.note-popover').hide();
-  },
+Template.descriptionForm.onDestroyed(function () {
+  descriptionFormIsOpen.set(false);
+  $('.note-popover').hide();
+});
 
+Template.descriptionForm.helpers({
   descriptionFormIsOpen() {
     return descriptionFormIsOpen.get();
   },
+});
 
-  getInput() {
-    return this.$('.js-new-description-input');
+Template.descriptionForm.events({
+  async 'submit .js-card-description'(event, tpl) {
+    event.preventDefault();
+    const description = tpl.currentComponent ? tpl.currentComponent().getValue() : tpl.$('textarea').val();
+    await this.setDescription(description);
   },
-
-  events() {
-    return [
-      {
-        'submit .js-card-description'(event) {
-          event.preventDefault();
-          const description = this.currentComponent().getValue();
-          this.data().setDescription(description);
-        },
-        // Pressing Ctrl+Enter should submit the form
-        'keydown form textarea'(evt) {
-          if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
-            const submitButton = this.find('button[type=submit]');
-            if (submitButton) {
-              submitButton.click();
-            }
-          }
-        },
-      },
-    ];
+  // Pressing Ctrl+Enter should submit the form
+  'keydown form textarea'(evt, tpl) {
+    if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+      const submitButton = tpl.find('button[type=submit]');
+      if (submitButton) {
+        submitButton.click();
+      }
+    }
   },
-}).register('descriptionForm');
+});

client/components/cards/cardDetails.css

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

client/components/cards/cardDetails.jade

@@ -5,49 +5,73 @@ template(name="cardDetails")
 
   +attachmentViewer
 
-  section.card-details.js-card-details.nodragscroll(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}' class='{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}'): .card-details-canvas
+  section.card-details.js-card-details.nodragscroll(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}' class='{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}' class='{{#if cardCollapsed}}card-details-collapsed{{/if}}'): .card-details-canvas
     .card-details-header(class='{{#if colorClass}}card-details-{{colorClass}}{{/if}}')
       +inlinedForm(classNames="js-card-details-title")
         +editCardTitleForm
       else
         unless isMiniScreen
           unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
-            if canModifyCard
-              if cardMaximized
-                a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+            span.card-collapse-toggle.js-card-collapse-toggle(title="{{_ 'collapse-card'}}")
+              if cardCollapsed
+                i.fa.fa-caret-right
               else
-                a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
-          if canModifyCard
-            a.fa.fa-navicon.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-            a.fa.fa-link.card-copy-button.js-copy-link(
+                i.fa.fa-caret-down
+            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+              i.fa.fa-times-thin
+            if cardMaximized
+              a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+            else
+              a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+            a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+              i.fa.fa-bars
+            a.card-copy-button.js-copy-link(
               id="cardURL_copy"
-              class="fa-link"
               title="{{_ 'copy-card-link-to-clipboard'}}"
               href="{{ originRelativeUrl }}"
             )
+              span.emoji-icon
+                i.fa.fa-link
+            if canModifyCard
+              span.card-drag-handle.js-card-drag-handle(title="Drag card")
+                i.fa.fa-arrows
             span.copied-tooltip {{_ 'copied'}}
         else
-          unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
-          if canModifyCard
-            a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-            a.fa.fa-link.card-copy-mobile-button.js-copy-link(
-              id="cardURL_copy"
-              class="fa-link"
-              title="{{_ 'copy-card-link-to-clipboard'}}"
-              href="{{ originRelativeUrl }}"
-            )
-            span.copied-tooltip {{_ 'copied'}}
+          a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+            i.fa.fa-times-thin
+          a.card-zoom-out.js-card-zoom-out(title="{{_ 'zoom-out'}}")
+            i.fa.fa-search-minus
+          a.card-zoom-in.js-card-zoom-in(title="{{_ 'zoom-in'}}")
+            i.fa.fa-search-plus
+          a.card-mobile-desktop-toggle.js-card-mobile-desktop-toggle(title="{{_ 'mobile-desktop-toggle'}}")
+            if mobileMode
+              i.fa.fa-desktop
+            else
+              i.fa.fa-mobile
+          if cardMaximized
+            a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+          else
+            a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+          a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+            i.fa.fa-bars
+          a.card-copy-mobile-button.js-copy-link(
+            id="cardURL_copy"
+            title="{{_ 'copy-card-link-to-clipboard'}}"
+            href="{{ originRelativeUrl }}"
+          )
+            span.emoji-icon
+              i.fa.fa-link
+          span.copied-tooltip {{_ 'copied'}}
         h2.card-details-title.js-card-title(
-          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
+          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{else}}js-card-title-drag-handle{{/if}}")
             +viewer
               if currentBoard.allowsCardNumber
                 span.card-number
                   | ##{getCardNumber}
               = getTitle
             if isWatching
-              i.card-details-watch.fa.fa-eye
+              i.card-details-watch
+                i.fa.fa-eye
         .card-details-path
           each parentList
             |   >  
@@ -65,6 +89,26 @@ template(name="cardDetails")
       else
         p.warning {{_ 'card-archived'}}
 
+    // Upload progress indicator for drag-and-drop uploads
+    if hasActiveUploads
+      .card-details-upload-progress
+        .upload-progress-header
+          i.fa.fa-upload
+          span {{_ 'uploading-files'}} ({{uploadCount}})
+        each uploads
+          .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}")
+            .upload-progress-filename {{file.name}}
+            .upload-progress-bar
+              .upload-progress-fill(style="width: {{progress}}%")
+            if $eq status 'error'
+              .upload-progress-error
+                i.fa.fa-exclamation-triangle
+                span {{_ 'upload-failed'}}
+            else if $eq status 'completed'
+              .upload-progress-success
+                i.fa.fa-check
+                span {{_ 'upload-completed'}}
+
     .card-details-left
 
       .card-details-items
@@ -86,6 +130,16 @@ template(name="cardDetails")
         if currentBoard.hasAnyAllowsDate
           hr
 
+          .card-details-item.card-details-item-date-format
+            h3.card-details-item-title
+              i.fa.fa-calendar
+              | {{_ 'date-format'}}
+            .card-details-item-content
+              select.js-date-format-selector
+                option(value="YYYY-MM-DD" selected="{{#if isDateFormat 'YYYY-MM-DD'}}selected{{/if}}") {{_ 'date-format-yyyy-mm-dd'}}
+                option(value="DD-MM-YYYY" selected="{{#if isDateFormat 'DD-MM-YYYY'}}selected{{/if}}") {{_ 'date-format-dd-mm-yyyy'}}
+                option(value="MM-DD-YYYY" selected="{{#if isDateFormat 'MM-DD-YYYY'}}selected{{/if}}") {{_ 'date-format-mm-dd-yyyy'}}
+
         if currentBoard.allowsReceivedDate
           .card-details-item.card-details-item-received
             h3.card-details-item-title
@@ -115,7 +169,7 @@ template(name="cardDetails")
         if currentBoard.allowsDueDate
           .card-details-item.card-details-item-due
             h3.card-details-item-title
-              i.fa.fa-sign-in
+              i.fa.fa-clock-o
               | {{_ 'card-due'}}
             if getDue
               +cardDueDate
@@ -228,7 +282,7 @@ template(name="cardDetails")
         if currentBoard.allowsCardSortingByNumber
           .card-details-item.card-details-sort-order
             h3.card-details-item-title
-              i.fa.fa-sort
+              i.fa.fa-sort-numeric-asc
               | {{_ 'sort'}}
             if canModifyCard
               +inlinedForm(classNames="js-card-details-sort")
@@ -267,7 +321,7 @@ template(name="cardDetails")
               hr
             .card-details-item.card-details-item-customfield
               h3.card-details-item-title
-                i.fa.fa-list-alt
+                i.fa.fa-list
                 = definition.name
               +cardCustomField
 
@@ -278,7 +332,7 @@ template(name="cardDetails")
               else
                 input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton")
               label.toggle-label(for="toggleCustomFieldsGridButton")
-          a.fa.fa-plus.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
+          a.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
 
       if getVoteQuestion
         hr
@@ -297,7 +351,8 @@ template(name="cardDetails")
               .card-label.card-label-green {{ voteCountPositive }}
               .card-label.card-label-red {{ voteCountNegative }}
             unless ($and currentBoard.isPublic voteAllowNonBoardMembers )
-              .card-label.card-label-gray  {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+              .card-label.card-label-gray
+                | {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
         +viewer
           = getVoteQuestion
         if showVotingButtons
@@ -307,7 +362,7 @@ template(name="cardDetails")
             | {{_ 'vote-for-it'}}
           button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
             if $eq voteState false
-              i.fa.fa-thumbs-down
+              | 👎
             | {{_ 'vote-against'}}
 
       if getPokerQuestion
@@ -323,7 +378,8 @@ template(name="cardDetails")
             .poker-result
               if expiredPoker
                 unless ($and currentBoard.isPublic pokerAllowNonBoardMembers )
-                  .card-label.card-label-gray  {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+                  .card-label.card-label-gray
+                    | {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
         if showPlanningPokerButtons
           .poker-result
             .poker-deck
@@ -515,14 +571,14 @@ template(name="cardDetails")
           if currentBoard.allowsDescriptionTitle
             hr
             h3.card-details-item-title
-              i.fa.fa-align-left
+              i.fa.fa-file-text-o
               | {{_ 'description'}}
           if currentBoard.allowsDescriptionText
             +inlinedCardDescription(classNames="card-description js-card-description")
               +descriptionForm
               .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
             else
               if currentBoard.allowsDescriptionText
                 a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
@@ -578,13 +634,15 @@ template(name="cardDetails")
         if currentBoard.allowsComments
           if currentUser.isBoardMember
             unless currentUser.isNoComments
-              +commentForm
+              unless currentUser.isReadOnly
+                unless currentUser.isReadAssignedOnly
+                  +commentForm
               +comments
       hr
 
     .card-details-right
 
-      unless currentUser.isNoComments
+      if currentUser.isBoardAdmin
         .activity-title
           h3.card-details-item-title
             i.fa.fa-history
@@ -597,7 +655,7 @@ template(name="cardDetails")
                 input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard")
               label.toggle-label(for="toggleShowActivitiesCard")
 
-      unless currentUser.isNoComments
+      if currentUser.isBoardAdmin
         if isLoaded.get
           if isLinkedCard
             +activities(card=this mode="linkedcard")
@@ -607,31 +665,31 @@ template(name="cardDetails")
             +activities(card=this mode="card")
 
 template(name="editCardTitleForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
   textarea.js-edit-card-title(rows='1' autofocus dir="auto")
     = getTitle
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-title-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardRequesterForm")
   input.js-edit-card-requester(type='text' autofocus value=getRequestedBy dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-requester-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardAssignerForm")
   input.js-edit-card-assigner(type='text' autofocus value=getAssignedBy dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-assigner-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardSortOrderForm")
   input.js-edit-card-sort(type='text' autofocus value=sort dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-sort-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="cardDetailsActionsPopup")
   ul.pop-over-list
@@ -641,7 +699,7 @@ template(name="cardDetailsActionsPopup")
           i.fa.fa-eye
           |  {{_ 'unwatch'}}
         else
-          i.fa.fa-eye-slash
+          i.fa.fa-eye
           |  {{_ 'watch'}}
   hr
   if canModifyCard
@@ -661,7 +719,7 @@ template(name="cardDetailsActionsPopup")
         if currentUser.isBoardAdmin
           li
             a.js-custom-fields
-              i.fa.fa-list-alt
+              i.fa.fa-list
               | {{_ 'card-edit-custom-fields'}}
         //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
         //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
@@ -675,100 +733,269 @@ template(name="cardDetailsActionsPopup")
           a.js-set-card-color
             i.fa.fa-paint-brush
             | {{_ 'setCardColorPopup-title'}}
-  hr
+        li
+          a.js-toggle-show-list-on-minicard
+            if showListOnMinicard
+              i.fa.fa-eye
+              | {{_ 'hide-list-on-minicard'}}
+            else
+              i.fa.fa-eye
+              | {{_ 'show-list-on-minicard'}}
+  if canModifyCard
+    hr
+  else
+    unless currentUser.isReadOnly
+      unless currentUser.isReadAssignedOnly
+        hr
   ul.pop-over-list
     li
       a.js-export-card
-        i.fa.fa-share-alt
+        i.fa.fa-upload
         | {{_ 'export-card'}}
-  hr
-  ul.pop-over-list
-    li
-      a.js-move-card-to-top
-        i.fa.fa-arrow-up
-        | {{_ 'moveCardToTop-title'}}
-    li
-      a.js-move-card-to-bottom
-        i.fa.fa-arrow-down
-        | {{_ 'moveCardToBottom-title'}}
-  hr
-  ul.pop-over-list
-    if currentUser.isBoardAdmin
-      li
-        a.js-move-card
-          i.fa.fa-arrow-right
-          | {{_ 'moveCardPopup-title'}}
-    unless currentUser.isWorker
-      li
-        a.js-copy-card
-          i.fa.fa-copy
-          | {{_ 'copyCardPopup-title'}}
-  unless currentUser.isWorker
-    ul.pop-over-list
-      li
-        a.js-copy-checklist-cards
-          i.fa.fa-copy
-          i.fa.fa-copy
-          | {{_ 'copyManyCardsPopup-title'}}
-    unless archived
-      hr
-      ul.pop-over-list
-        li
-          a.js-archive
-            i.fa.fa-arrow-right
-            i.fa.fa-archive
-            | {{_ 'archive-card'}}
+  unless canModifyCard
+    unless currentUser.isReadOnly
+      unless currentUser.isReadAssignedOnly
+        hr
+        ul.pop-over-list
+          li
+            a.js-move-card-to-top
+              i.fa.fa-arrow-up
+              | {{_ 'moveCardToTop-title'}}
+          li
+            a.js-move-card-to-bottom
+              i.fa.fa-arrow-down
+              | {{_ 'moveCardToBottom-title'}}
+        hr
+        ul.pop-over-list
+          if currentUser.isBoardAdmin
+            li
+              a.js-move-card
+                i.fa.fa-arrow-right
+                | {{_ 'moveCardPopup-title'}}
+          unless currentUser.isWorker
+            li
+              a.js-copy-card
+                i.fa.fa-clipboard
+                | {{_ 'copyCardPopup-title'}}
+        unless currentUser.isWorker
+          ul.pop-over-list
+            li
+              a.js-copy-checklist-cards
+                i.fa.fa-copy
+                | {{_ 'copyManyCardsPopup-title'}}
+          unless archived
+            hr
+            ul.pop-over-list
+              li
+                a.js-archive
+                  i.fa.fa-archive
+                  | {{_ 'archive-card'}}
+          hr
+          ul.pop-over-list
+            li
+              a.js-more
+                span.emoji-icon
+                i.fa.fa-link
+                | {{_ 'cardMorePopup-title'}}
+  if canModifyCard
     hr
     ul.pop-over-list
       li
-        a.js-more
-          i.fa.fa-link
-          | {{_ 'cardMorePopup-title'}}
+        a.js-move-card-to-top
+          i.fa.fa-arrow-up
+          | {{_ 'moveCardToTop-title'}}
+      li
+        a.js-move-card-to-bottom
+          i.fa.fa-arrow-down
+          | {{_ 'moveCardToBottom-title'}}
+    hr
+    ul.pop-over-list
+      if currentUser.isBoardAdmin
+        li
+          a.js-move-card
+            i.fa.fa-arrow-right
+            | {{_ 'moveCardPopup-title'}}
+      unless currentUser.isWorker
+        li
+          a.js-copy-card
+            i.fa.fa-clipboard
+            | {{_ 'copyCardPopup-title'}}
+    unless currentUser.isWorker
+      ul.pop-over-list
+        li
+          a.js-copy-checklist-cards
+            i.fa.fa-copy
+            | {{_ 'copyManyCardsPopup-title'}}
+      unless archived
+        hr
+        ul.pop-over-list
+          li
+            a.js-archive
+              i.fa.fa-archive
+              | {{_ 'archive-card'}}
+      hr
+      ul.pop-over-list
+        li
+          a.js-more
+            span.emoji-icon
+              i.fa.fa-link
+            | {{_ 'cardMorePopup-title'}}
 
 template(name="exportCardPopup")
   ul.pop-over-list
     li
-      a(href="{{exportUrlCardPDF}}",, download="{{exportFilenameCardPDF}}")
-        i.fa.fa-share-alt
+      a(href="{{exportUrlCardPDF}}", download="{{exportFilenameCardPDF}}")
+        i.fa.fa-file-pdf-o
         | {{_ 'export-card-pdf'}}
+  hr
+  p.quiet {{_ 'export-card-excel-fields'}}
+  ul.pop-over-list
+    each excelExportFields
+      li(class="{{#if checked}}active{{/if}}")
+        a.js-excel-field-toggle(data-field="{{field}}" href="#")
+          i.fa.fa-check
+          | {{_ label}}
+  ul.pop-over-list
+    li
+      a(href="{{exportUrlCardExcel}}", download="{{exportFilenameCardExcel}}")
+        i.fa.fa-file-excel-o
+        | {{_ 'download'}}
 
 template(name="moveCardPopup")
-  +copyAndMoveCard
+  label(for='move-card-title') {{_ 'title'}}:
+  input#move-card-title.full-line(type="text" value="{{getTitle}}" autofocus)
+  unless currentUser.isWorker
+    label {{_ 'boards'}}:
+    select.js-select-boards(autofocus)
+      each boards
+        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each lists
+      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}
 
 template(name="copyCardPopup")
   label(for='copy-card-title') {{_ 'title'}}:
   textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
     = getTitle
-  +copyAndMoveCard
+  unless currentUser.isWorker
+    label {{_ 'boards'}}:
+    select.js-select-boards(autofocus)
+      each boards
+        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each lists
+      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}
 
 template(name="copyManyCardsPopup")
   label(for='copy-checklist-cards-title') {{_ 'copyManyCardsPopup-instructions'}}:
   textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
     | {{_ 'copyManyCardsPopup-format'}}
-  +copyAndMoveCard
+  unless currentUser.isWorker
+    label {{_ 'boards'}}:
+    select.js-select-boards(autofocus)
+      each boards
+        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each lists
+      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}
 
 template(name="convertChecklistItemToCardPopup")
   label(for='convert-checklist-item-to-card-title') {{_ 'title'}}:
   textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
     = item.title
-  +copyAndMoveCard
-
-template(name="copyAndMoveCard")
   unless currentUser.isWorker
     label {{_ 'boards'}}:
     select.js-select-boards(autofocus)
       each boards
-        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}
+        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
 
   label {{_ 'swimlanes'}}:
   select.js-select-swimlanes
     each swimlanes
-      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{title}}
+      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{add @index 1}}. {{isTitleDefault title}}
 
   label {{_ 'lists'}}:
   select.js-select-lists
     each lists
-      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{title}}
+      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{add @index 1}}. {{title}}
+
+  div
+    input(type="radio" name="position" value="above" checked id="position-above" style="display: inline")
+    label(for="position-above") {{_ 'above-selected-card'}}
+  div
+    input(type="radio" name="position" value="below" id="position-below" style="display: inline")
+    label(for="position-below") {{_ 'below-selected-card'}}
 
   .edit-controls.clearfix
     button.primary.confirm.js-done {{_ 'done'}}
@@ -779,13 +1006,13 @@ template(name="cardMembersPopup")
     each members
       li.item(class="{{#if isCardMember}}active{{/if}}")
         a.name.js-select-member(href="#")
-          +userAvatar(userId=user._id)
+          +userAvatar(userId=userId)
           span.full-name
-            = user.profile.fullname
-            | (<span class="username">{{ user.username }}</span>)
+            = userData.profile.fullname
+            if userData.username
+              | (#{userData.username})
           if isCardMember
             i.fa.fa-check
-
 template(name="cardAssigneesPopup")
   input.card-assignees-filter(type="text" placeholder="{{_ 'search'}}")
   unless currentUser.isWorker
@@ -793,10 +1020,11 @@ template(name="cardAssigneesPopup")
       each members
         li.item(class="{{#if isCardAssignee}}active{{/if}}")
           a.name.js-select-assignee(href="#")
-            +userAvatar(userId=user._id)
+            +userAvatar(userId=userId)
             span.full-name
-              = user.profile.fullname
-              | (<span class="username">{{ user.username }}</span>)
+              = userData.profile.fullname
+              if userData.username
+                | (#{userData.username})
             if isCardAssignee
               i.fa.fa-check
   if currentUser.isWorker
@@ -806,10 +1034,10 @@ template(name="cardAssigneesPopup")
           +userAvatar(userId=currentUser._id)
           span.full-name
             = currentUser.profile.fullname
-            | (<span class="username">{{ currentUser.username }}</span>)
+            if currentUser.username
+              | (#{currentUser.username})
           if currentUser.isCardAssignee
             i.fa.fa-check
-
 template(name="cardAssigneePopup")
   .board-assignee-menu
     .mini-profile-info
@@ -832,7 +1060,7 @@ template(name="cardMorePopup")
     span.clearfix
       span {{_ 'link-card'}}
       = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
       input.inline-input(type="text" id="cardURL" readonly value="{{ originRelativeUrl }}" autofocus="autofocus")
       button.js-copy-card-link-to-clipboard(class="btn" id="clipboard") {{_ 'copy-card-link-to-clipboard'}}
       .copied-tooltip {{_ 'copied'}}
@@ -864,19 +1092,20 @@ template(name="cardMorePopup")
               option(value="{{_id}}") {{title}}
     br
     | {{_ 'added'}}
-    span.date(title=card.createdAt) {{ moment createdAt 'LLL' }}
+    span.date(title=card.createdAt) {{ displayDate createdAt 'LLL' }}
     if currentUser.isBoardAdmin
       a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}
 
 template(name="setCardColorPopup")
   form.edit-label
-    .palette-colors: each colors
-      unless $eq color 'white'
-        span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
-          if(isSelected color)
-            i.fa.fa-check
-    button.primary.confirm.js-submit {{_ 'save'}}
-    button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
+    .palette-colors
+      each colors
+        unless $eq color 'white'
+          span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
+            if(isSelected color)
+              i.fa.fa-check
+  button.primary.confirm.js-submit {{_ 'save'}}
+  button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
 
 template(name="cardDeletePopup")
   p {{_ "card-delete-pop"}}
@@ -908,7 +1137,7 @@ template(name="cardStartVotingPopup")
           .materialCheckBox#vote-public(name="vote-public" class="{{#if votePublic}}is-checked{{/if}}")
           span {{_ 'vote-public'}}
       .check-div.flex
-        i.fa.fa-hourglass-end
+        i.fa.fa-clock-o
         a.js-end-date
           span
             | {{_ 'card-end'}}
@@ -954,7 +1183,7 @@ template(name="cardStartPlanningPokerPopup")
           .materialCheckBox#poker-allow-non-members(name="poker-allow-non-members" class="{{#if pokerAllowNonBoardMembers}}is-checked{{/if}}")
           span {{_ 'allowNonBoardMembers'}}
       .check-div.flex
-        i.fa.fa-hourglass-end
+        i.fa.fa-clock-o
         a.js-end-date
           span
             | {{_ 'card-end'}}

client/components/cards/cardTime.jade

@@ -1,4 +1,4 @@
-template(name="editCardSpentTime")
+template(name="editCardSpentTimePopup")
   .edit-card-time
     form.edit-time
       .fields
@@ -13,10 +13,10 @@ template(name="editCardSpentTime")
       button.primary.wide.left.js-submit-time(type="submit") {{_ 'save'}}
       button.js-delete-time.negate.wide.right {{_ 'delete'}}
 
-template(name="timeBadge")
+template(name="cardSpentTime")
   if canModifyCard
-    a.js-edit-time.card-time(title="{{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/cardTime.js

@@ -1,85 +1,91 @@
 import { TAPi18n } from '/imports/i18n';
+import Cards from '/models/cards';
+import { getCurrentCardIdFromContext } from '/client/lib/currentCard';
 
-BlazeComponent.extendComponent({
-  template() {
-    return 'editCardSpentTime';
+function getCardId() {
+  return getCurrentCardIdFromContext();
+}
+
+Template.editCardSpentTimePopup.onCreated(function () {
+  this.error = new ReactiveVar('');
+  this.card = Cards.findOne(getCardId());
+});
+
+Template.editCardSpentTimePopup.helpers({
+  error() {
+    return Template.instance().error;
   },
-  onCreated() {
-    this.error = new ReactiveVar('');
-    this.card = this.data();
+  card() {
+    return Cards.findOne(getCardId());
   },
-  toggleOvertime() {
-    this.card.setIsOvertime(!this.card.getIsOvertime());
+  getIsOvertime() {
+    const card = Cards.findOne(getCardId());
+    return card?.getIsOvertime ? card.getIsOvertime() : false;
+  },
+});
+
+Template.editCardSpentTimePopup.events({
+  //TODO : need checking this portion
+  'submit .edit-time'(evt, tpl) {
+    evt.preventDefault();
+    const card = Cards.findOne(getCardId());
+    if (!card) return;
+
+    const spentTime = parseFloat(evt.target.time.value);
+    let isOvertime = false;
+    if ($('#overtime').attr('class').indexOf('is-checked') >= 0) {
+      isOvertime = true;
+    }
+    if (spentTime >= 0) {
+      card.setSpentTime(spentTime);
+      card.setIsOvertime(isOvertime);
+      Popup.back();
+    } else {
+      tpl.error.set('invalid-time');
+      evt.target.time.focus();
+    }
+  },
+  'click .js-delete-time'(evt) {
+    evt.preventDefault();
+    const card = Cards.findOne(getCardId());
+    if (!card) return;
+    card.setSpentTime(null);
+    card.setIsOvertime(false);
+    Popup.back();
+  },
+  'click a.js-toggle-overtime'(evt) {
+    const card = Cards.findOne(getCardId());
+    if (!card) return;
+    card.setIsOvertime(!card.getIsOvertime());
     $('#overtime .materialCheckBox').toggleClass('is-checked');
     $('#overtime').toggleClass('is-checked');
   },
-  storeTime(spentTime, isOvertime) {
-    this.card.setSpentTime(spentTime);
-    this.card.setIsOvertime(isOvertime);
-  },
-  deleteTime() {
-    this.card.setSpentTime(null);
-    this.card.setIsOvertime(false);
-  },
-  events() {
-    return [
-      {
-        //TODO : need checking this portion
-        'submit .edit-time'(evt) {
-          evt.preventDefault();
+});
 
-          const spentTime = parseFloat(evt.target.time.value);
-          //const isOvertime = this.card.getIsOvertime();
-          let isOvertime = false;
-          if ($('#overtime').attr('class').indexOf('is-checked') >= 0) {
-            isOvertime = true;
-          }
-          if (spentTime >= 0) {
-            this.storeTime(spentTime, isOvertime);
-            Popup.back();
-          } else {
-            this.error.set('invalid-time');
-            evt.target.time.focus();
-          }
-        },
-        'click .js-delete-time'(evt) {
-          evt.preventDefault();
-          this.deleteTime();
-          Popup.back();
-        },
-        'click a.js-toggle-overtime': this.toggleOvertime,
-      },
-    ];
-  },
-}).register('editCardSpentTimePopup');
-
-BlazeComponent.extendComponent({
-  template() {
-    return 'timeBadge';
-  },
-  onCreated() {
-    const self = this;
-    self.time = ReactiveVar();
-  },
+Template.cardSpentTime.helpers({
   showTitle() {
-    if (this.data().getIsOvertime()) {
+    const card = Cards.findOne(this._id) || this;
+    if (card.getIsOvertime && card.getIsOvertime()) {
       return `${TAPi18n.__(
         'overtime',
-      )} ${this.data().getSpentTime()} ${TAPi18n.__('hours')}`;
-    } else {
+      )} ${card.getSpentTime()} ${TAPi18n.__('hours')}`;
+    } else if (card.getSpentTime) {
       return `${TAPi18n.__(
         'card-spent',
-      )} ${this.data().getSpentTime()} ${TAPi18n.__('hours')}`;
+      )} ${card.getSpentTime()} ${TAPi18n.__('hours')}`;
     }
+    return '';
   },
   showTime() {
-    return this.data().getSpentTime();
+    const card = Cards.findOne(this._id) || this;
+    return card.getSpentTime ? card.getSpentTime() : '';
   },
-  events() {
-    return [
-      {
-        'click .js-edit-time': Popup.open('editCardSpentTime'),
-      },
-    ];
+  getIsOvertime() {
+    const card = Cards.findOne(this._id) || this;
+    return card.getIsOvertime ? card.getIsOvertime() : false;
   },
-}).register('cardSpentTime');
+});
+
+Template.cardSpentTime.events({
+  'click .js-edit-time': Popup.open('editCardSpentTime'),
+});

client/components/cards/checklists.css

@@ -37,10 +37,12 @@ textarea.js-edit-checklist-item {
 .checklist-progress-bar-container .checklist-progress-bar {
   width: 80%;
   height: 10px;
+  background-color: #e0e0e0;
+  border-radius: 16px;
 }
 .checklist-progress-bar-container .checklist-progress-bar .checklist-progress {
-  color: #fff !important;
-  background-color: #2196f3 !important;
+  color: #fff;
+  background-color: #666;
   padding: 0.01em 16px;
   border-radius: 16px;
   height: 100%;

client/components/cards/checklists.jade

@@ -4,7 +4,8 @@ template(name="checklists")
       i.fa.fa-check
       | {{_ 'checklists'}}
       if canModifyCard
-        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
+        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId
+          position="top")
           +addChecklistItemForm
         else
           a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
@@ -62,6 +63,10 @@ template(name="checklistDeletePopup")
   p {{_ 'confirm-checklist-delete-popup'}}
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
+template(name="checklistItemDeletePopup")
+  p {{_ 'confirm-checklist-item-delete-popup'}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
 template(name="addChecklistItemForm")
   a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
@@ -91,7 +96,7 @@ template(name="editChecklistItemForm")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
     a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
-    span(title=createdAt) {{ moment createdAt }}
+    span(title=createdAt) {{ displayDate createdAt }}
     if canModifyCard
       a.js-delete-checklist-item {{_ "delete"}}...
       a.js-convert-checklist-item-to-card

client/components/cards/checklists.js

@@ -2,10 +2,15 @@ import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
-import { DialogWithBoardSwimlaneListCard } from '/client/lib/dialogWithBoardSwimlaneListCard';
+import ChecklistItems from '/models/checklistItems';
+import Checklists from '/models/checklists';
+import { BoardSwimlaneListCardDialog } from '/client/lib/dialogWithBoardSwimlaneListCard';
+import { EscapeActions } from '/client/lib/escapeActions';
+import { Utils } from '/client/lib/utils';
+import autosize from 'autosize';
 
-const subManager = new SubsManager();
-const { calculateIndexData, capitalize } = Utils;
+// SubsManager removed for Meteor 3 migration
+const { calculateIndexData } = Utils;
 
 function initSorting(items) {
   items.sortable({
@@ -45,55 +50,66 @@ function initSorting(items) {
   });
 }
 
-BlazeComponent.extendComponent({
-  onRendered() {
-    const self = this;
-    self.itemsDom = this.$('.js-checklist-items');
-    initSorting(self.itemsDom);
-    self.itemsDom.mousedown(function (evt) {
-      evt.stopPropagation();
-    });
+Template.checklistDetail.onRendered(function () {
+  const tpl = this;
+  tpl.itemsDom = this.$('.js-checklist-items');
+  initSorting(tpl.itemsDom);
+  tpl.itemsDom.mousedown(function (evt) {
+    evt.stopPropagation();
+  });
 
-    function userIsMember() {
-      return ReactiveCache.getCurrentUser()?.isBoardMember();
-    }
+  function userIsMember() {
+    return ReactiveCache.getCurrentUser()?.isBoardMember();
+  }
 
-    // Disable sorting if the current user is not a board member
-    self.autorun(() => {
-      const $itemsDom = $(self.itemsDom);
-      if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
-        $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
-        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-          $(self.itemsDom).sortable({
-            handle: 'span.fa.checklistitem-handle',
-          });
-        }
+  // Disable sorting if the current user is not a board member
+  tpl.autorun(() => {
+    const $itemsDom = $(tpl.itemsDom);
+    if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
+      $(tpl.itemsDom).sortable('option', 'disabled', !userIsMember());
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+        $(tpl.itemsDom).sortable({
+          handle: 'span.fa.checklistitem-handle',
+        });
       }
-    });
-  },
+    }
+  });
+});
 
+Template.checklistDetail.helpers({
   /** returns the finished percent of the checklist */
   finishedPercent() {
-    const ret = this.data().checklist.finishedPercent();
+    const ret = this.checklist.finishedPercent();
     return ret;
   },
-}).register('checklistDetail');
+});
 
-BlazeComponent.extendComponent({
-  addChecklist(event) {
+Template.checklists.helpers({
+  checklists() {
+    const card = ReactiveCache.getCard(this.cardId);
+    if (!card || typeof card.checklists !== 'function') {
+      return [];
+    }
+    const ret = card.checklists();
+    return ret;
+  },
+});
+
+Template.checklists.events({
+  'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
+  'submit .js-add-checklist'(event, tpl) {
     event.preventDefault();
-    const textarea = this.find('textarea.js-add-checklist-item');
+    const textarea = tpl.find('textarea.js-add-checklist-item');
     const title = textarea.value.trim();
-    let cardId = this.currentData().cardId;
+    let cardId = Template.currentData().cardId;
     const card = ReactiveCache.getCard(cardId);
-    //if (card.isLinked()) cardId = card.linkedId;
     if (card.isLinkedCard()) {
       cardId = card.linkedId;
     }
 
     let sortIndex;
     let checklistItemIndex;
-    if (this.currentData().position === 'top') {
+    if (Template.currentData().position === 'top') {
       sortIndex = Utils.calculateIndexData(null, card.firstChecklist()).base;
       checklistItemIndex = 0;
     } else {
@@ -107,35 +123,60 @@ BlazeComponent.extendComponent({
         title,
         sort: sortIndex,
       });
-      this.closeAllInlinedForms();
+      tpl.$('.js-close-inlined-form').click();
       setTimeout(() => {
-        this.$('.add-checklist-item')
+        tpl.$('.add-checklist-item')
           .eq(checklistItemIndex)
           .click();
       }, 100);
     }
   },
-  addChecklistItem(event) {
+  'submit .js-edit-checklist-title'(event, tpl) {
     event.preventDefault();
-    const textarea = this.find('textarea.js-add-checklist-item');
-    const newlineBecomesNewChecklistItem = this.find('input#toggleNewlineBecomesNewChecklistItem');
-    const newlineBecomesNewChecklistItemOriginOrder = this.find('input#toggleNewlineBecomesNewChecklistItemOriginOrder');
+    const textarea = tpl.find('textarea.js-edit-checklist-item');
     const title = textarea.value.trim();
-    const checklist = this.currentData().checklist;
+    const checklist = Template.currentData().checklist;
+    checklist.setTitle(title);
+  },
+  'submit .js-add-checklist-item'(event, tpl) {
+    event.preventDefault();
+    const textarea = tpl.find('textarea.js-add-checklist-item');
+    if (!textarea) {
+      return;
+    }
+    const newlineBecomesNewChecklistItem = tpl.find('input#toggleNewlineBecomesNewChecklistItem');
+    const newlineBecomesNewChecklistItemOriginOrder = tpl.find('input#toggleNewlineBecomesNewChecklistItemOriginOrder');
+    const title = textarea.value.trim();
+    const currentData = Template.currentData() || {};
+    let resolvedData = currentData;
+    let checklist = currentData.checklist;
+    if (!checklist) {
+      const form = event.currentTarget?.closest
+        ? event.currentTarget.closest('form')
+        : $(event.target).closest('form').get(0);
+      const formData = form ? Blaze.getData(form) : null;
+      if (formData) {
+        resolvedData = formData;
+      }
+      checklist = formData?.checklist;
+    }
+    if (!checklist) {
+      return;
+    }
 
     if (title) {
       let checklistItems = [title];
-      if (newlineBecomesNewChecklistItem.checked) {
+      if (newlineBecomesNewChecklistItem?.checked) {
         checklistItems = title.split('\n').map(_value => _value.trim());
-        if (this.currentData().position === 'top') {
-          if (newlineBecomesNewChecklistItemOriginOrder.checked === false) {
+        if (resolvedData.position === 'top') {
+          if (newlineBecomesNewChecklistItemOriginOrder?.checked === false) {
             checklistItems = checklistItems.reverse();
           }
         }
       }
       let addIndex;
       let sortIndex;
-      if (this.currentData().position === 'top') {
+      if (resolvedData.position === 'top') {
         sortIndex = Utils.calculateIndexData(null, checklist.firstItem()).base;
         addIndex = -1;
       } else {
@@ -156,33 +197,33 @@ BlazeComponent.extendComponent({
     textarea.value = '';
     textarea.focus();
   },
-
-  deleteItem() {
-    const checklist = this.currentData().checklist;
-    const item = this.currentData().item;
-    if (checklist && item && item._id) {
-      ChecklistItems.remove(item._id);
+  'submit .js-edit-checklist-item'(event, tpl) {
+    event.preventDefault();
+    const textarea = tpl.find('textarea.js-edit-checklist-item');
+    const title = textarea.value.trim();
+    const formData = Blaze.getData(event.currentTarget) || Blaze.getData(event.target);
+    const item = formData?.item;
+    if (item) {
+      item.setTitle(title);
     }
   },
-
-  editChecklist(event) {
-    event.preventDefault();
-    const textarea = this.find('textarea.js-edit-checklist-item');
-    const title = textarea.value.trim();
-    const checklist = this.currentData().checklist;
-    checklist.setTitle(title);
+  'click .js-convert-checklist-item-to-card': Popup.open('convertChecklistItemToCard'),
+  'click .js-delete-checklist-item': Popup.afterConfirm('checklistItemDelete', function () {
+    Popup.back();
+    const item = this?.item || this;
+    if (item && item._id) {
+      ChecklistItems.remove(item._id);
+    }
+  }),
+  // add and delete checklist / checklist-item
+  'click .js-open-inlined-form'(event, tpl) {
+    tpl.$('.js-close-inlined-form').click();
   },
-
-  editChecklistItem(event) {
+  'click #toggleHideFinishedChecklist'(event) {
     event.preventDefault();
-
-    const textarea = this.find('textarea.js-edit-checklist-item');
-    const title = textarea.value.trim();
-    const item = this.currentData().item;
-    item.setTitle(title);
+    Template.currentData().card.toggleHideFinishedChecklist();
   },
-
-  pressKey(event) {
+  keydown(event) {
     //If user press enter key inside a form, submit it
     //Unless the user is also holding down the 'shift' key
     if (event.keyCode === 13 && !event.shiftKey) {
@@ -191,201 +232,201 @@ BlazeComponent.extendComponent({
       $form.find('button[type=submit]').click();
     }
   },
+});
 
-  focusChecklistItem(event) {
-    // If a new checklist is created, pre-fill the title and select it.
-    const checklist = this.currentData().checklist;
-    if (!checklist) {
-      const textarea = event.target;
-      textarea.value = capitalize(TAPi18n.__('r-checklist'));
-      textarea.select();
-    }
-  },
+// NOTE: boardsSwimlanesAndLists template was removed from jade but JS was left behind.
+// This is dead code — the template no longer exists in any jade file.
 
-  /** closes all inlined forms (checklist and checklist-item input fields) */
-  closeAllInlinedForms() {
-    this.$('.js-close-inlined-form').click();
-  },
+Template.addChecklistItemForm.onRendered(function () {
+  autosize(this.$('textarea.js-add-checklist-item'));
+});
 
-  events() {
-    return [
-      {
-        'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
-        'submit .js-add-checklist': this.addChecklist,
-        'submit .js-edit-checklist-title': this.editChecklist,
-        'submit .js-add-checklist-item': this.addChecklistItem,
-        'submit .js-edit-checklist-item': this.editChecklistItem,
-        'click .js-convert-checklist-item-to-card': Popup.open('convertChecklistItemToCard'),
-        'click .js-delete-checklist-item': this.deleteItem,
-        'focus .js-add-checklist-item': this.focusChecklistItem,
-        // add and delete checklist / checklist-item
-        'click .js-open-inlined-form': this.closeAllInlinedForms,
-        'click #toggleHideFinishedChecklist'(event) {
-          event.preventDefault();
-          this.data().card.toggleHideFinishedChecklist();
-        },
-        keydown: this.pressKey,
-      },
-    ];
-  },
-}).register('checklists');
+Template.addChecklistItemForm.events({
+  'click a.fa.fa-copy'(event, tpl) {
+    const $editor = tpl.$('textarea');
+    const promise = Utils.copyTextToClipboard($editor[0].value);
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    subManager.subscribe('board', Session.get('currentBoard'), false);
-    this.selectedBoardId = new ReactiveVar(Session.get('currentBoard'));
-  },
-
-  boards() {
-    const ret = ReactiveCache.getBoards(
-      {
-        archived: false,
-        'members.userId': Meteor.userId(),
-        _id: { $ne: ReactiveCache.getCurrentUser().getTemplatesBoardId() },
-      },
-      {
-        sort: { sort: 1 /* boards default sorting */ },
-      },
-    );
-    return ret;
-  },
-
-  swimlanes() {
-    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
-    return board.swimlanes();
-  },
-
-  aBoardLists() {
-    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
-    return board.lists();
-  },
-
-  events() {
-    return [
-      {
-        'change .js-select-boards'(event) {
-          this.selectedBoardId.set($(event.currentTarget).val());
-          subManager.subscribe('board', this.selectedBoardId.get(), false);
-        },
-      },
-    ];
-  },
-}).register('boardsSwimlanesAndLists');
-
-Template.checklists.helpers({
-  checklists() {
-    const card = ReactiveCache.getCard(this.cardId);
-    const ret = card.checklists();
-    return ret;
+    const $tooltip = tpl.$('.copied-tooltip');
+    Utils.showCopied(promise, $tooltip);
   },
 });
 
-BlazeComponent.extendComponent({
-  onRendered() {
-    autosize(this.$('textarea.js-add-checklist-item'));
+Template.checklistActionsPopup.events({
+  'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
+    Popup.back(2);
+    const checklist = this.checklist;
+    if (checklist && checklist._id) {
+      Checklists.remove(checklist._id);
+    }
+  }),
+  'click .js-move-checklist': Popup.open('moveChecklist'),
+  'click .js-copy-checklist': Popup.open('copyChecklist'),
+  'click .js-hide-checked-checklist-items'(event) {
+    event.preventDefault();
+    Template.currentData().checklist.toggleHideCheckedChecklistItems();
+    Popup.back();
   },
-  events() {
-    return [
-      {
-        'click a.fa.fa-copy'(event) {
-          const $editor = this.$('textarea');
-          const promise = Utils.copyTextToClipboard($editor[0].value);
-
-          const $tooltip = this.$('.copied-tooltip');
-          Utils.showCopied(promise, $tooltip);
-        },
-      }
-    ];
-  }
-}).register('addChecklistItemForm');
-
-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
-          Popup.back(2);
-          const checklist = this.checklist;
-          if (checklist && checklist._id) {
-            Checklists.remove(checklist._id);
-          }
-        }),
-        'click .js-move-checklist': Popup.open('moveChecklist'),
-        'click .js-copy-checklist': Popup.open('copyChecklist'),
-        'click .js-hide-checked-checklist-items'(event) {
-          event.preventDefault();
-          this.data().checklist.toggleHideCheckedChecklistItems();
-          Popup.back();
-        },
-        'click .js-hide-all-checklist-items'(event) {
-          event.preventDefault();
-          this.data().checklist.toggleHideAllChecklistItems();
-          Popup.back();
-        },
-      }
-    ]
-  }
-}).register('checklistActionsPopup');
-
-BlazeComponent.extendComponent({
-  onRendered() {
-    autosize(this.$('textarea.js-edit-checklist-item'));
+  'click .js-hide-all-checklist-items'(event) {
+    event.preventDefault();
+    Template.currentData().checklist.toggleHideAllChecklistItems();
+    Popup.back();
   },
-  events() {
-    return [
-      {
-        'click a.fa.fa-copy'(event) {
-          const $editor = this.$('textarea');
-          const promise = Utils.copyTextToClipboard($editor[0].value);
+});
 
-          const $tooltip = this.$('.copied-tooltip');
-          Utils.showCopied(promise, $tooltip);
-        },
-      }
-    ];
-  }
-}).register('editChecklistItemForm');
+Template.editChecklistItemForm.onRendered(function () {
+  autosize(this.$('textarea.js-edit-checklist-item'));
+});
+
+Template.editChecklistItemForm.events({
+  'click a.fa.fa-copy'(event, tpl) {
+    const $editor = tpl.$('textarea');
+    const promise = Utils.copyTextToClipboard($editor[0].value);
+
+    const $tooltip = tpl.$('.copied-tooltip');
+    Utils.showCopied(promise, $tooltip);
+  },
+});
 
 Template.checklistItemDetail.helpers({
 });
 
-BlazeComponent.extendComponent({
-  toggleItem() {
-    const checklist = this.currentData().checklist;
-    const item = this.currentData().item;
+Template.checklistItemDetail.events({
+  'click .js-checklist-item .check-box-container'() {
+    const checklist = Template.currentData().checklist;
+    const item = Template.currentData().item;
     if (checklist && item && item._id) {
       item.toggleItem();
     }
   },
-  events() {
-    return [
-      {
-        'click .js-checklist-item .check-box-container': this.toggleItem,
-      },
-    ];
+});
+
+/**
+ * Helper to find the dialog instance from a parent popup template.
+ * copyAndMoveChecklist is included inside moveChecklistPopup / copyChecklistPopup,
+ * so we traverse up the view hierarchy to find the parent template's dialog.
+ */
+function getParentDialog(tpl) {
+  let view = tpl.view.parentView;
+  while (view) {
+    if (view.templateInstance && view.templateInstance() && view.templateInstance().dialog) {
+      return view.templateInstance().dialog;
+    }
+    view = view.parentView;
+  }
+  return null;
+}
+
+/** Shared helpers for copyAndMoveChecklist sub-template */
+Template.copyAndMoveChecklist.helpers({
+  boards() {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.boards() : [];
   },
-}).register('checklistItemDetail');
+  swimlanes() {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.swimlanes() : [];
+  },
+  lists() {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.lists() : [];
+  },
+  cards() {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.cards() : [];
+  },
+  isDialogOptionBoardId(boardId) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isDialogOptionBoardId(boardId) : false;
+  },
+  isDialogOptionSwimlaneId(swimlaneId) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isDialogOptionSwimlaneId(swimlaneId) : false;
+  },
+  isDialogOptionListId(listId) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isDialogOptionListId(listId) : false;
+  },
+  isDialogOptionCardId(cardId) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isDialogOptionCardId(cardId) : false;
+  },
+  isTitleDefault(title) {
+    const dialog = getParentDialog(Template.instance());
+    return dialog ? dialog.isTitleDefault(title) : title;
+  },
+});
+
+/**
+ * Helper: register standard card dialog events on a checklist popup template.
+ * Events bubble up from the copyAndMoveChecklist sub-template to the parent popup.
+ */
+function registerChecklistDialogEvents(templateName) {
+  Template[templateName].events({
+    async 'click .js-done'(event, tpl) {
+      const dialog = tpl.dialog;
+      const boardSelect = tpl.$('.js-select-boards')[0];
+      const boardId = boardSelect.options[boardSelect.selectedIndex].value;
+
+      const listSelect = tpl.$('.js-select-lists')[0];
+      const listId = listSelect.options[listSelect.selectedIndex].value;
+
+      const swimlaneSelect = tpl.$('.js-select-swimlanes')[0];
+      const swimlaneId = swimlaneSelect.options[swimlaneSelect.selectedIndex].value;
+
+      const cardSelect = tpl.$('.js-select-cards')[0];
+      const cardId = cardSelect.options.length > 0
+        ? cardSelect.options[cardSelect.selectedIndex].value
+        : null;
+
+      const options = { boardId, swimlaneId, listId, cardId };
+      try {
+        await dialog.setDone(cardId, options);
+      } catch (e) {
+        console.error('Error in card dialog operation:', e);
+      }
+      Popup.back(2);
+    },
+    'change .js-select-boards'(event, tpl) {
+      tpl.dialog.getBoardData($(event.currentTarget).val());
+    },
+    'change .js-select-swimlanes'(event, tpl) {
+      tpl.dialog.selectedSwimlaneId.set($(event.currentTarget).val());
+      tpl.dialog.setFirstListId();
+    },
+    'change .js-select-lists'(event, tpl) {
+      tpl.dialog.selectedListId.set($(event.currentTarget).val());
+      tpl.dialog.selectedCardId.set('');
+    },
+    'change .js-select-cards'(event, tpl) {
+      tpl.dialog.selectedCardId.set($(event.currentTarget).val());
+    },
+  });
+}
 
 /** Move Checklist Dialog */
-(class extends DialogWithBoardSwimlaneListCard {
-  getDialogOptions() {
-    const ret = ReactiveCache.getCurrentUser().getMoveChecklistDialogOptions();
-    return ret;
-  }
-  setDone(cardId, options) {
-    ReactiveCache.getCurrentUser().setMoveChecklistDialogOption(this.currentBoardId, options);
-    this.data().checklist.move(cardId);
-  }
-}).register('moveChecklistPopup');
+Template.moveChecklistPopup.onCreated(function () {
+  this.dialog = new BoardSwimlaneListCardDialog(this, {
+    getDialogOptions() {
+      return ReactiveCache.getCurrentUser().getMoveChecklistDialogOptions();
+    },
+    async setDone(cardId, options) {
+      ReactiveCache.getCurrentUser().setMoveChecklistDialogOption(this.currentBoardId, options);
+      await Template.currentData().checklist.move(cardId);
+    },
+  });
+});
+registerChecklistDialogEvents('moveChecklistPopup');
 
 /** Copy Checklist Dialog */
-(class extends DialogWithBoardSwimlaneListCard {
-  getDialogOptions() {
-    const ret = ReactiveCache.getCurrentUser().getCopyChecklistDialogOptions();
-    return ret;
-  }
-  setDone(cardId, options) {
-    ReactiveCache.getCurrentUser().setCopyChecklistDialogOption(this.currentBoardId, options);
-    this.data().checklist.copy(cardId);
-  }
-}).register('copyChecklistPopup');
+Template.copyChecklistPopup.onCreated(function () {
+  this.dialog = new BoardSwimlaneListCardDialog(this, {
+    getDialogOptions() {
+      return ReactiveCache.getCurrentUser().getCopyChecklistDialogOptions();
+    },
+    async setDone(cardId, options) {
+      ReactiveCache.getCurrentUser().setCopyChecklistDialogOption(this.currentBoardId, options);
+      await Template.currentData().checklist.copy(cardId);
+    },
+  });
+});
+registerChecklistDialogEvents('copyChecklistPopup');

client/components/cards/inlinedCardDescription.jade

@@ -0,0 +1,6 @@
+template(name='inlinedCardDescription')
+  if isOpen.get
+    form.inlined-form.js-inlined-form(id=id class=classNames)
+      +Template.contentBlock
+  else
+    +Template.elseBlock

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;
@@ -222,9 +223,13 @@
 .card-label-edit-button:hover {
   background: #dbdbdb;
 }
-ul.edit-labels-pop-over span.fa.label-handle {
+ul.edit-labels-pop-over span.label-handle {
   padding-right: 10px;
+  display: inline-block;
+  width: 1.2em;
+  text-align: center;
+  color: #999;
 }
-ul.edit-labels-pop-over span.fa.label-handle + .card-label {
+ul.edit-labels-pop-over span.label-handle + .card-label {
   max-width: 180px;
 }

client/components/cards/labels.js

@@ -1,119 +1,117 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { LABEL_COLORS } from '/models/metadata/colors';
+import { EscapeActions } from '/client/lib/escapeActions';
+import { Utils } from '/client/lib/utils';
 
 let labelColors;
 Meteor.startup(() => {
-  labelColors = Boards.simpleSchema()._schema['labels.$.color'].allowedValues;
+  labelColors = LABEL_COLORS;
 });
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.currentColor = new ReactiveVar(this.data().color);
-  },
+const getFallbackLabelColor = () => {
+  if (Array.isArray(labelColors) && labelColors.length > 0) {
+    return labelColors[0];
+  }
+  return 'green';
+};
 
+Template.formLabel.onCreated(function () {
+  const initialColor = this.data?.color || getFallbackLabelColor();
+  this.currentColor = new ReactiveVar(initialColor);
+});
+
+Template.formLabel.helpers({
   labels() {
-    return labelColors.map(color => ({ color, name: '' }));
+    const colors = Array.isArray(labelColors) ? labelColors : [getFallbackLabelColor()];
+    return colors.map(color => ({ color, name: '' }));
   },
-
   isSelected(color) {
-    return this.currentColor.get() === color;
+    return Template.instance().currentColor.get() === color;
   },
+});
 
-  events() {
-    return [
-      {
-        'click .js-palette-color'() {
-          this.currentColor.set(this.currentData().color);
-        },
-      },
-    ];
+Template.formLabel.events({
+  'click .js-palette-color'(event, tpl) {
+    const paletteData = Blaze.getData(event.currentTarget);
+    const selectedColor = paletteData?.color || Template.currentData()?.color || getFallbackLabelColor();
+    tpl.currentColor.set(selectedColor);
   },
-}).register('formLabel');
+});
 
 Template.createLabelPopup.helpers({
   // This is the default color for a new label. We search the first color that
   // is not already used in the board (although it's not a problem if two
   // labels have the same color).
   defaultColor() {
-    const labels = Utils.getCurrentBoard().labels;
-    const usedColors = _.pluck(labels, 'color');
-    const availableColors = _.difference(labelColors, usedColors);
-    return availableColors.length > 1 ? availableColors[0] : labelColors[0];
+    const board = Utils.getCurrentBoard();
+    const colors = Array.isArray(labelColors) ? labelColors : [getFallbackLabelColor()];
+    const labels = Array.isArray(board?.labels) ? board.labels : [];
+    const usedColors = labels.map(l => l.color);
+    const availableColors = colors.filter(c => !usedColors.includes(c));
+    return availableColors.length > 0 ? availableColors[0] : colors[0];
   },
 });
 
-BlazeComponent.extendComponent({
-  onRendered() {
-    const itemsSelector = 'li.js-card-label-item:not(.placeholder)';
-    const $labels = this.$('.edit-labels-pop-over');
+Template.cardLabelsPopup.onRendered(function () {
+  const tpl = this;
+  const itemsSelector = 'li.js-card-label-item:not(.placeholder)';
+  const $labels = tpl.$('.edit-labels-pop-over');
 
-    $labels.sortable({
-      connectWith: '.edit-labels-pop-over',
-      tolerance: 'pointer',
-      appendTo: '.edit-labels-pop-over',
-      helper(element, currentItem) {
-        let ret = currentItem.clone();
-        if (currentItem.closest('.popup-container-depth-0').length == 0)
-        { // only set css transform at every sub-popup, not at the main popup
-          const content = currentItem.closest('.content')[0]
-          const offsetLeft = content.offsetLeft;
-          const offsetTop = $('.pop-over > .header').height() * -1;
-          ret.css("transform", `translate(${offsetLeft}px, ${offsetTop}px)`);
-        }
-        return ret;
-      },
-      distance: 7,
-      items: itemsSelector,
-      placeholder: 'card-label-wrapper placeholder',
-      start(evt, ui) {
-        ui.helper.css('z-index', 1000);
-        ui.placeholder.height(ui.helper.height());
-        EscapeActions.clickExecute(evt.target, 'inlinedForm');
-      },
-      stop(evt, ui) {
-        const newLabelOrderOnlyIds = ui.item.parent().children().toArray().map(_element => Blaze.getData(_element)._id)
-        const card = Blaze.getData(this);
-        card.board().setNewLabelOrder(newLabelOrderOnlyIds);
-      },
-    });
-
-    // Disable drag-dropping if the current user is not a board member or is comment only
-    this.autorun(() => {
-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $labels.sortable({
-          handle: '.label-handle',
-        });
+  $labels.sortable({
+    connectWith: '.edit-labels-pop-over',
+    tolerance: 'pointer',
+    appendTo: '.edit-labels-pop-over',
+    helper(element, currentItem) {
+      let ret = currentItem.clone();
+      if (currentItem.closest('.popup-container-depth-0').length == 0)
+      { // only set css transform at every sub-popup, not at the main popup
+        const content = currentItem.closest('.content')[0]
+        const offsetLeft = content.offsetLeft;
+        const offsetTop = $('.pop-over > .header').height() * -1;
+        ret.css("transform", `translate(${offsetLeft}px, ${offsetTop}px)`);
       }
-    });
+      return ret;
+    },
+    distance: 7,
+    items: itemsSelector,
+    placeholder: 'card-label-wrapper placeholder',
+    start(evt, ui) {
+      ui.helper.css('z-index', 1000);
+      ui.placeholder.height(ui.helper.height());
+      EscapeActions.clickExecute(evt.target, 'inlinedForm');
+    },
+    stop(evt, ui) {
+      const newLabelOrderOnlyIds = ui.item.parent().children().toArray().map(_element => Blaze.getData(_element)._id)
+      const card = Blaze.getData(this);
+      card.board().setNewLabelOrder(newLabelOrderOnlyIds);
+    },
+  });
+
+  // Disable drag-dropping if the current user is not a board member or is comment only
+  tpl.autorun(() => {
+    if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+      $labels.sortable({
+        handle: '.label-handle',
+      });
+    }
+  });
+});
+
+Template.cardLabelsPopup.helpers({
+  isLabelSelected(cardId) {
+    return (ReactiveCache.getCard(cardId).labelIds || []).includes(this._id);
   },
-  events() {
-    return [
-      {
-        'click .js-select-label'(event) {
-          const card = this.data();
-          const labelId = this.currentData()._id;
-          card.toggleLabel(labelId);
-          event.preventDefault();
-        },
-        'click .js-edit-label': Popup.open('editLabel'),
-        'click .js-add-label': Popup.open('createLabel'),
-      }
-    ];
-  }
-}).register('cardLabelsPopup');
+});
 
 Template.cardLabelsPopup.events({
-});
-
-Template.formLabel.events({
-  'click .js-palette-color'(event) {
-    const $this = $(event.currentTarget);
-
-    // hide selected ll colors
-    $('.js-palette-select').addClass('hide');
-
-    // show select color
-    $this.find('.js-palette-select').removeClass('hide');
+  'click .js-select-label'(event) {
+    const card = Template.currentData();
+    const labelId = this._id;
+    card.toggleLabel(labelId);
+    event.preventDefault();
   },
+  'click .js-edit-label': Popup.open('editLabel'),
+  'click .js-add-label': Popup.open('createLabel'),
 });
 
 Template.createLabelPopup.events({
@@ -121,11 +119,19 @@ Template.createLabelPopup.events({
   'submit .create-label'(event, templateInstance) {
     event.preventDefault();
     const board = Utils.getCurrentBoard();
+    if (!board) {
+      return;
+    }
     const name = templateInstance
       .$('#labelName')
       .val()
       .trim();
-    const color = Blaze.getData(templateInstance.find('.fa-check')).color;
+    const selectedColorIcon = templateInstance.find('.js-palette-color .fa-check');
+    const selectedPaletteNode = selectedColorIcon?.closest
+      ? selectedColorIcon.closest('.js-palette-color')
+      : null;
+    const selectedColorData = selectedPaletteNode && Blaze.getData(selectedPaletteNode);
+    const color = selectedColorData?.color || getFallbackLabelColor();
     board.addLabel(name, color);
     Popup.back();
   },
@@ -140,18 +146,20 @@ Template.editLabelPopup.events({
   'submit .edit-label'(event, templateInstance) {
     event.preventDefault();
     const board = Utils.getCurrentBoard();
+    if (!board) {
+      return;
+    }
     const name = templateInstance
       .$('#labelName')
       .val()
       .trim();
-    const color = Blaze.getData(templateInstance.find('.fa-check')).color;
+    const selectedColorIcon = templateInstance.find('.js-palette-color .fa-check');
+    const selectedPaletteNode = selectedColorIcon?.closest
+      ? selectedColorIcon.closest('.js-palette-color')
+      : null;
+    const selectedColorData = selectedPaletteNode && Blaze.getData(selectedPaletteNode);
+    const color = selectedColorData?.color || getFallbackLabelColor();
     board.editLabel(this._id, name, color);
     Popup.back();
   },
 });
-
-Template.cardLabelsPopup.helpers({
-  isLabelSelected(cardId) {
-    return _.contains(ReactiveCache.getCard(cardId).labelIds, this._id);
-  },
-});

client/components/cards/minicard.css

@@ -3,11 +3,11 @@
   position: relative;
   display: flex;
   align-items: center;
-  margin-bottom: 9px;
+  margin-bottom: 1.2vh;
 }
 .minicard-wrapper.placeholder {
   background: #ccc;
-  border-radius: 9px;
+  border-radius: 1.2vw;
 }
 .minicard-wrapper.ui-sortable-helper {
   cursor: grabbing;
@@ -16,28 +16,28 @@
 }
 .minicard-wrapper.ui-sortable-helper .and-n-other {
   width: 100%;
-  height: 16px;
-  padding: 4px;
+  height: 2.5vh;
+  padding: 0.5vh;
   background-color: #f2f2f2;
   text-align: center;
-  border-radius: 3px;
+  border-radius: 0.4vw;
 }
 .minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
   display: none;
 }
 .minicard-wrapper .multi-selection-checkbox + .minicard {
-  margin-left: 8px;
+  margin-left: 1vw;
 }
 @media only screen {
   .minicard {
-    padding: 6px 8px 2px;
+    padding: 0.8vh 1vw 0.3vh;
     position: relative;
     flex: 1;
     flex-wrap: wrap;
     background-color: #fff;
-    min-height: 20px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-    border-radius: 2px;
+    min-height: 2.5vh;
+    box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
+    border-radius: 0.3vw;
     color: #4d4d4d;
     overflow: hidden;
     transition: transform 0.2s, border-radius 0.2s;
@@ -45,14 +45,15 @@
 }
 .minicard-details-menu-with-handle {
   float: right;
-  font-size: 18px;
-  padding-right: 30px;
-  padding-left: 5px;
+  padding-left: 0.7vw;
+  font-size: clamp(14px, 3vw, 18px);
+  padding: 0;
+  z-index: 1;
 }
 .minicard-details-menu {
   float: right;
-  font-size: 18px;
-  padding-left: 5px;
+  font-size: clamp(14px, 3vw, 18px);
+  padding-left: 0.7vw;
 }
 @media print {
   .minicard-details-menu,
@@ -63,7 +64,7 @@
 .minicard.linked-board .linked-icon,
 .minicard.linked-card .linked-icon {
   display: inline-block;
-  margin-right: 11px;
+  margin-right: 1.5vw;
   vertical-align: baseline;
   font-size: 0.9em;
 }
@@ -72,11 +73,11 @@
   color: #937760;
 }
 .is-selected .minicard {
-  transform: translateX(11px);
+  transform: translateX(1.5vw);
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   z-index: 25;
-  box-shadow: -2px 1px 2px rgba(0,0,0,0.2);
+  box-shadow: -0.3vw 0.2vh 0.3vh rgba(0,0,0,0.2);
 }
 .minicard:hover:not(.minicard-composer),
 .is-selected .minicard,
@@ -90,20 +91,21 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
-  height: 145px;
+  height: 20vh;
   user-select: none;
-  margin: 6px -8px 6px -8px;
-  border-radius: top 2px;
+  margin: 0.8vh -1vw 0.8vh -1vw;
+  border-radius: top 0.3vw;
 }
 .minicard .minicard-labels {
   float: none;
+  margin-right: 6vw;
 }
 .minicard .minicard-labels .minicard-label {
-  width: 11px;
-  height: 11px;
-  border-radius: 2px;
-  margin-right: 3px;
-  margin-bottom: 3px;
+  width: clamp(12px, 1.5vw, 16px);
+  height: clamp(12px, 1.5vw, 16px);
+  border-radius: 0.3vw;
+  margin-right: 0.4vw;
+  margin-bottom: 0.4vh;
 }
 .minicard .minicard-labels-no-text {
   display: flex;
@@ -111,6 +113,7 @@
 }
 .minicard .minicard-custom-fields {
   display: block;
+  margin-right: 6vw;
 }
 .minicard .minicard-custom-field {
   display: flex;
@@ -119,37 +122,44 @@
   flex-grow: 1;
   display: block;
   word-wrap: break-word;
-  max-width: 100px;
-  margin-right: 4px;
+  max-width: 13vw;
+  margin-right: 0.5vw;
 }
 .minicard .minicard-custom-field-item-fullwidth {
   flex-grow: 1;
   display: block;
   word-wrap: break-word;
   max-width: 100%;
-  margin-right: 4px;
+  margin-right: 0.5vw;
 }
 .minicard .handle {
-  width: 20px;
-  height: 20px;
+  width: clamp(20px, 2.5vw, 28px);
+  height: clamp(20px, 2.5vw, 28px);
   position: absolute;
-  right: 5px;
-  top: 5px;
+  right: 0vw;
+  top: 4vh;
   display: none;
+  z-index: 1;
 }
 @media only screen {
   .minicard .handle {
     display: block;
   }
 }
-.minicard .handle .fa-arrows {
-  font-size: 20px;
+.minicard .handle .drag-handle {
+  font-size: clamp(16px, 3vw, 20px);
   color: #ccc;
+  display: inline-block;
+  width: 1.4em;
+  text-align: center;
+}
+.minicard .minicard-title {
+  margin-right: 1.5vw;
 }
 .minicard .minicard-title .card-number {
   color: #b3b3b3;
   display: inline-block;
-  margin-right: 5px;
+  margin-right: 0.7vw;
 }
 @media only screen {
   .minicard .minicard-title p:last-child {
@@ -164,13 +174,146 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  position: relative;
+  z-index: 5;
+  margin-right: 6vw;
+  clear: both;
 }
 .minicard .date {
-  margin-right: 3px;
+  margin-right: 0.4vw;
 }
+
+/* Unicode icons for minicard dates - matching cardDate.css */
+.minicard .card-date.end-date time::before {
+  content: "🏁"; /* Finish flag - represents end/completion */
+}
+.minicard .card-date.due-date time::before {
+  content: "⏰"; /* Alarm clock - represents due/deadline */
+}
+.minicard .card-date.start-date time::before {
+  content: "🚀"; /* Rocket - represents start/launch */
+}
+.minicard .card-date.received-date time::before {
+  content: "📥"; /* Inbox tray - represents received/incoming */
+}
+
+.minicard .card-date time::before {
+  font-size: inherit;
+  margin-right: 0.3em;
+  display: inline-block;
+}
+
+/* Date type specific colors for minicards - matching cardDate.css */
+.minicard .card-date.received-date {
+  background-color: #dbdbdb; /* Grey for received - same as base card-date */
+}
+
+.minicard .card-date.received-date:hover,
+.minicard .card-date.received-date.is-active {
+  background-color: #b3b3b3;
+}
+
+.minicard .card-date.start-date {
+  background-color: #90ee90; /* Light green for start */
+  color: #000; /* Black text for start */
+}
+
+.minicard .card-date.start-date:hover,
+.minicard .card-date.start-date.is-active {
+  background-color: #7dd87d;
+}
+
+.minicard .card-date.due-date {
+  background-color: #ffd700; /* Yellow for due */
+  color: #000; /* Black text for due */
+}
+
+.minicard .card-date.due-date:hover,
+.minicard .card-date.due-date.is-active {
+  background-color: #e6c200;
+}
+
+.minicard .card-date.end-date {
+  background-color: #ffb3b3; /* Light red for end */
+  color: #000; /* Black text for end */
+}
+
+.minicard .card-date.end-date:hover,
+.minicard .card-date.end-date.is-active {
+  background-color: #ff9999;
+}
+
+/* Date status colors for minicards - matching cardDate.css */
+.minicard .card-date.overdue {
+  background-color: #ff4444 !important; /* Red for overdue */
+  color: #fff !important;
+}
+.minicard .card-date.overdue:hover,
+.minicard .card-date.overdue.is-active {
+  background-color: #cc3333 !important;
+}
+
+.minicard .card-date.due-soon {
+  background-color: #ffaa00 !important; /* Amber for due soon */
+  color: #000 !important;
+}
+.minicard .card-date.due-soon:hover,
+.minicard .card-date.due-soon.is-active {
+  background-color: #e69900 !important;
+}
+
+.minicard .card-date.not-due {
+  /* No special background - uses default date type colors */
+}
+
+.minicard .card-date.current {
+  background-color: #5ba639 !important; /* Green for current/active */
+  color: #fff !important;
+}
+.minicard .card-date.current:hover,
+.minicard .card-date.current.is-active {
+  background-color: #46802c !important;
+}
+
+.minicard .card-date.completed {
+  background-color: #90ee90 !important; /* Light green for completed */
+  color: #000 !important;
+}
+.minicard .card-date.completed:hover,
+.minicard .card-date.completed.is-active {
+  background-color: #7dd87d !important;
+}
+
+.minicard .card-date.completed-early {
+  background-color: #4caf50 !important; /* Green for completed early */
+  color: #fff !important;
+}
+.minicard .card-date.completed-early:hover,
+.minicard .card-date.completed-early.is-active {
+  background-color: #45a049 !important;
+}
+
+.minicard .card-date.completed-late {
+  background-color: #ff9800 !important; /* Orange for completed late */
+  color: #fff !important;
+}
+.minicard .card-date.completed-late:hover,
+.minicard .card-date.completed-late.is-active {
+  background-color: #f57c00 !important;
+}
+
+.minicard .card-date.completed-on-time {
+  background-color: #2196f3 !important; /* Blue for completed on time */
+  color: #fff !important;
+}
+.minicard .card-date.completed-on-time:hover,
+.minicard .card-date.completed-on-time.is-active {
+  background-color: #1976d2 !important;
+}
+
 .minicard .badges {
   float: left;
-  margin-top: 7px;
+  margin-top: 1vh;
   color: #808080;
 }
 .minicard .badges:empty {
@@ -178,14 +321,14 @@
 }
 .minicard .badges .badge {
   float: left;
-  margin-right: 11px;
-  margin-bottom: 3px;
+  margin-right: 1.5vw;
+  margin-bottom: 0.4vh;
   font-size: 0.9em;
 }
 .minicard .badges .badge.is-finished {
   background: #3cb500;
-  padding: 0px 3px;
-  border-radius: 3px;
+  padding: 0 0.4vw;
+  border-radius: 0.4vw;
   color: #fff;
 }
 .minicard .badges .badge:last-of-type {
@@ -201,41 +344,41 @@
 }
 .minicard .badges .badge .badge-text {
   font-size: 0.9em;
-  padding-left: 2px;
-  line-height: 14px;
+  padding-left: 0.3vw;
+  line-height: 1.2;
 }
 .minicard .badges .badge .check-list-text {
   padding-left: 0px;
-  line-height: 12px;
+  line-height: 1.1;
 }
 .minicard .minicard-members,
 .minicard .minicard-assignees,
 .minicard .minicard-creator {
   float: right;
-  margin-left: 5px;
-  margin-bottom: 4px;
+  margin-left: 0.7vw;
+  margin-bottom: 0.5vh;
 }
 .minicard .minicard-members .member,
 .minicard .minicard-assignees .member,
 .minicard .minicard-creator .member {
   float: right;
   border-radius: 50%;
-  height: 28px;
-  width: 28px;
-  margin-bottom: 4px;
+  height: clamp(24px, 3.5vw, 32px);
+  width: clamp(24px, 3.5vw, 32px);
+  margin-bottom: 0.5vh;
 }
 .minicard .minicard-members .assignee,
 .minicard .minicard-assignees .assignee,
 .minicard .minicard-creator .assignee {
   float: right;
   border-radius: 50%;
-  height: 28px;
-  width: 28px;
+  height: clamp(24px, 3.5vw, 32px);
+  width: clamp(24px, 3.5vw, 32px);
 }
 .minicard .minicard-members + .badges,
 .minicard .minicard-assignees + .badges,
 .minicard .minicard-creator + .badges {
-  margin-top: 5px;
+  margin-top: 0.7vh;
 }
 .minicard .minicard-assignees {
   border-bottom: 1px solid #f00;
@@ -248,13 +391,13 @@
   display: none;
 }
 .minicard .minicard-description {
-  padding: 6px 0 0 8px;
+  padding: 0.8vh 0 0 1vw;
   color: #000;
   background-color: #eee;
   width: 100%;
-  margin-bottom: 2px;
-  margin-left: -4px;
-  border-radius: 3px;
+  margin-bottom: 0.3vh;
+  margin-left: -0.5vw;
+  border-radius: 0.4vw;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -262,7 +405,7 @@
   -webkit-box-orient: vertical;
 }
 .minicard.minicard-composer {
-  margin-bottom: 10px;
+  margin-bottom: 1.3vh;
 }
 .minicard.minicard-composer textarea.minicard-composer-textarea,
 .minicard.minicard-composer textarea.minicard-composer-textarea:focus {
@@ -273,9 +416,9 @@
   height: auto;
   margin: 0;
   padding: 0;
-  max-height: 162px;
-  min-height: 36px;
-  margin-bottom: 20px;
+  max-height: 22vh;
+  min-height: 5vh;
+  margin-bottom: 2.5vh;
   overflow-y: auto;
 }
 .parent-prefix {
@@ -580,3 +723,99 @@
 .text-green {
   color: #008000;
 }
+
+/* Drag and drop file upload visual feedback */
+.minicard.is-dragging-over {
+  border: 2px dashed #0079bf;
+  background-color: #e3f2fd !important;
+  transform: scale(1.02);
+  transition: all 0.2s ease;
+}
+
+/* List name display on minicard */
+.minicard-list-name {
+  font-size: 0.75em;
+  color: #8c8c8c;
+  margin-top: 0.2vh;
+  display: flex;
+  align-items: center;
+  gap: 0.3vw;
+}
+
+/* Checklist display on minicard */
+.minicard-checklist {
+  width: 100%;
+  margin-top: 0.5vh;
+  margin-bottom: 0.5vh;
+  padding: 0.3vh 0.5vw;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0.3vw;
+  border: 1px solid #e0e0e0;
+}
+
+.minicard-checklist .checklist-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.3vh;
+}
+
+.minicard-checklist .checklist-title {
+  font-size: 0.8em;
+  font-weight: bold;
+  color: #4d4d4d;
+  flex: 1;
+}
+
+.minicard-checklist .checklist-menu {
+  font-size: 1.2em;
+  color: #666;
+  cursor: pointer;
+  padding: 0 0.3vw;
+  border-radius: 0.2vw;
+  transition: background-color 0.2s;
+}
+
+.minicard-checklist .checklist-menu:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.minicard-checklist .checklist-item {
+  font-size: 0.75em;
+  color: #666;
+  margin-bottom: 0.2vh;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.3vw;
+  line-height: 1.2;
+  cursor: pointer;
+  padding: 0.2vh 0;
+  border-radius: 0.2vw;
+  transition: background-color 0.2s;
+}
+
+.minicard-checklist .checklist-item:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.minicard-checklist .checklist-item.is-checked {
+  text-decoration: line-through;
+  color: #999;
+}
+
+.minicard-checklist .checklist-item .check-box-unicode {
+  flex-shrink: 0;
+  font-size: 0.8em;
+  margin-top: 0.1vh;
+  transition: transform 0.2s;
+}
+
+.minicard-checklist .checklist-item:hover .check-box-unicode {
+  transform: scale(1.1);
+}
+
+.minicard-checklist .checklist-item .item-title {
+  flex: 1;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

client/components/cards/minicard.jade

@@ -3,20 +3,17 @@ template(name="minicard")
     class="{{#if isLinkedCard}}linked-card{{/if}}"
     class="{{#if isLinkedBoard}}linked-board{{/if}}"
     class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
-    if canModifyCard
+    if canMoveCard
       if isTouchScreenOrShowDesktopDragHandles
-        a.fa.fa-navicon.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
         .handle
-          .fa.fa-arrows
-      else
-        a.fa.fa-navicon.minicard-details-menu.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+          i.fa.fa-arrows
+    if canModifyCard
+      a.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+        i.fa.fa-bars
     .dates
       if getReceived
-        unless getStart
-          unless getDue
-            unless getEnd
-              .date
-                +minicardReceivedDate
+        .date
+          +minicardReceivedDate
       if getStart
         .date
           +minicardStartDate
@@ -31,6 +28,27 @@ template(name="minicard")
     if cover
       if currentBoard.allowsCoverAttachmentOnMinicard
         .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")
+
+    // Upload progress indicator for drag-and-drop uploads
+    if hasActiveUploads
+      .minicard-upload-progress
+        .upload-progress-header
+          i.fa.fa-upload
+          span {{_ 'uploading-files'}} ({{uploadCount}})
+        each uploads
+          .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}")
+            .upload-progress-filename {{file.name}}
+            .upload-progress-bar
+              .upload-progress-fill(style="width: {{progress}}%")
+            if $eq status 'error'
+              .upload-progress-error
+                i.fa.fa-warning
+                span {{_ 'upload-failed'}}
+            else if $eq status 'completed'
+              .upload-progress-success
+                i.fa.fa-check
+                span {{_ 'upload-completed'}}
+
     .minicard-title
       if $eq 'prefix-with-full-path' currentBoard.presentParentTask
         .parent-prefix
@@ -40,23 +58,20 @@ template(name="minicard")
           | {{ parentCardName }}
       if isLinkedBoard
         a.js-linked-link
-          span.linked-icon.fa.fa-folder
+          span.linked-icon
+            i.fa.fa-folder
       else if isLinkedCard
         a.js-linked-link
-          span.linked-icon.fa.fa-id-card
+          span.linked-icon
+            i.fa.fa-id-card
       if getArchived
-        span.linked-icon.linked-archived.fa.fa-archive
+        span.linked-icon.linked-archived
+          i.fa.fa-archive
       +viewer
         if currentBoard.allowsCardNumber
           span.card-number
             | ##{getCardNumber}
         = getTitle
-      if $eq 'subtext-with-full-path' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentString ' > ' }}
-      if $eq 'subtext-with-parent' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentCardName }}
     if labels
       .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
         each labels
@@ -132,96 +147,81 @@ template(name="minicard")
       if canModifyCard
         if comments.length
           .badge(title="{{_ 'card-comments-title' comments.length }}")
-            span.badge-icon.fa.fa-comment-o.badge-comment.badge-text
+            span.badge-icon.badge-comment.badge-text
+              i.fa.fa-comment-o
               = ' '
               = comments.length
             //span.badge-comment.badge-text
-            //|  {{_ 'comment'}}
+            //|
+              {{_ 'comment'}}
       if getDescription
         unless currentBoard.allowsDescriptionTextOnMinicard
           .badge.badge-state-image-only(title=getDescription)
-            span.badge-icon.fa.fa-align-left
+            span.badge-icon
+              i.fa.fa-file-text-o
       if getVoteQuestion
         .badge.badge-state-image-only(title=getVoteQuestion)
-          span.badge-icon.fa.fa-thumbs-up(class="{{#if voteState}}text-green{{/if}}")
+          span.badge-icon(class="{{#if voteState}}text-green{{/if}}")
+            i.fa.fa-thumbs-up
           span.badge-text {{ voteCountPositive }}
-          span.badge-icon.fa.fa-thumbs-down(class="{{#if $eq voteState false}}text-red{{/if}}")
+          span.badge-icon(class="{{#if $eq voteState false}}text-red{{/if}}")
+            i.fa.fa-thumbs-down
           span.badge-text {{ voteCountNegative }}
       if getPokerQuestion
         .badge.badge-state-image-only(title=getPokerQuestion)
-          span.badge-icon.fa.fa-check(class="{{#if pokerState}}text-green{{/if}}")
+          span.badge-icon(class="{{#if pokerState}}text-green{{/if}}")
+            i.fa.fa-check-square
           if expiredPoker
             span.badge-text {{ getPokerEstimation }}
       if attachments.length
         if currentBoard.allowsBadgeAttachmentOnMinicard
           .badge
-            span.badge-icon.fa.fa-paperclip
+            span.badge-icon
+              i.fa.fa-paperclip
             span.badge-text= attachments.length
-      if checklists.length
-        .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
-          span.badge-icon.fa.fa-check-square-o
-          span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
       if allSubtasks.count
         .badge
-          span.badge-icon.fa.fa-sitemap
+          span.badge-icon
+            i.fa.fa-globe
           span.badge-text.check-list-text {{subtasksFinishedCount}}/{{allSubtasksCount}}
           //{{subtasksFinishedCount}}/{{subtasksCount}} does not work because when a subtaks is archived, the count goes down
       if currentBoard.allowsCardSortingByNumber
         if currentBoard.allowsCardSortingByNumberOnMinicard
           .badge
-            span.badge-icon.fa.fa-sort
+            span.badge-icon
+              i.fa.fa-sort-numeric-asc
             span.badge-text.check-list-sort {{ sort }}
+    if shouldShowChecklistAtMinicard
+      each shouldShowChecklistAtMinicard
+        +minicardChecklist(checklist=. card=..)
     if currentBoard.allowsDescriptionTextOnMinicard
       if getDescription
         .minicard-description
           +viewer
             | {{ getDescription }}
+    if shouldShowListOnMinicard
+      .minicard-list-name
+        i.fa.fa-list
+        | {{ listName }}
+    if $eq 'subtext-with-full-path' currentBoard.presentParentTask
+      .parent-subtext
+        | {{ parentString ' > ' }}
+    if $eq 'subtext-with-parent' currentBoard.presentParentTask
+      .parent-subtext
+        | {{ parentCardName }}
 
 template(name="editCardSortOrderPopup")
   input.js-edit-card-sort-popup(type='text' autofocus value=sort dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-sort-popup(type="submit") {{_ 'save'}}
 
-template(name="minicardDetailsActionsPopup")
-  ul.pop-over-list
-    if canModifyCard
-      li
-        a.js-move-card
-          i.fa.fa-arrow-right
-          | {{_ 'moveCardPopup-title'}}
-      li
-        a.js-copy-card
-          i.fa.fa-copy
-          | {{_ 'copyCardPopup-title'}}
-      hr
-      li
-        a.js-archive
-          i.fa.fa-arrow-right
-          i.fa.fa-archive
-          | {{_ 'archive-card'}}
-      hr
-      li
-        a.js-move-card-to-top
-          i.fa.fa-arrow-up
-          | {{_ 'moveCardToTop-title'}}
-      li
-        a.js-move-card-to-bottom
-          i.fa.fa-arrow-down
-          | {{_ 'moveCardToBottom-title'}}
-      hr
-      li
-        a.js-add-labels
-          i.fa.fa-tags
-          | {{_ 'card-edit-labels'}}
-      li
-        a.js-due-date
-          i.fa.fa-sign-in
-          | {{_ 'editCardDueDatePopup-title'}}
-      li
-        a.js-set-card-color
-          i.fa.fa-paint-brush
-          | {{_ 'setCardColorPopup-title'}}
-      li
-        a.js-link
-          i.fa.fa-link
-          | {{_ 'link-card'}}
+template(name="minicardChecklist")
+  .minicard-checklist
+    .checklist-header
+      .checklist-title= checklist.title
+      if canModifyCard
+        a.checklist-menu.js-open-checklist-menu(title="{{_ 'checklistActionsPopup-title'}}")
+          i.fa.fa-bars
+    each visibleItems
+      +checklistItemDetail(item = . checklist = checklist card = card)
+

client/components/cards/minicard.js

@@ -1,18 +1,17 @@
 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';
+import { Utils } from '/client/lib/utils';
 
 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
 // });
 
-BlazeComponent.extendComponent({
-  template() {
-    return 'minicard';
-  },
-
+Template.minicard.helpers({
   formattedCurrencyCustomFieldValue(definition) {
-    const customField = this.data()
+    const customField = this
       .customFieldsWD()
       .find(f => f._id === definition._id);
     const customFieldTrueValue =
@@ -26,7 +25,7 @@ BlazeComponent.extendComponent({
   },
 
   formattedStringtemplateCustomFieldValue(definition) {
-    const customField = this.data()
+    const customField = this
       .customFieldsWD()
       .find(f => f._id === definition._id);
 
@@ -39,17 +38,20 @@ BlazeComponent.extendComponent({
 
   showCreatorOnMinicard() {
     // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
+    const board = this.board();
     let ret = false;
     if (board) {
       ret = board.allowsCreatorOnMinicard ?? false;
     }
     return ret;
   },
+  isWatching() {
+    return this.findWatcher(Meteor.userId());
+  },
 
   showMembers() {
     // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
+    const board = this.board();
     let ret = false;
     if (board) {
       ret =
@@ -63,7 +65,7 @@ BlazeComponent.extendComponent({
 
   showAssignee() {
     // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
+    const board = this.board();
     let ret = false;
     if (board) {
       ret =
@@ -75,40 +77,6 @@ BlazeComponent.extendComponent({
     return ret;
   },
 
-  /** opens the card label popup only if clicked onto a label
-   * <li> this is necessary to have the data context of the minicard.
-   *      if .js-card-label is used at click event, then only the data context of the label itself is available at this.currentData()
-   */
-  cardLabelsPopup(event) {
-    if (this.find('.js-card-label:hover')) {
-      Popup.open("cardLabels")(event, {dataContextIfCurrentDataIsUndefined: this.currentData()});
-    }
-  },
-
-  events() {
-    return [
-      {
-        'click .js-linked-link'() {
-          if (this.data().isLinkedCard()) Utils.goCardId(this.data().linkedId);
-          else if (this.data().isLinkedBoard())
-            Utils.goBoardId(this.data().linkedId);
-        },
-        'click .js-toggle-minicard-label-text'() {
-          if (window.localStorage.getItem('hiddenMinicardLabelText')) {
-            window.localStorage.removeItem('hiddenMinicardLabelText'); //true
-          } else {
-            window.localStorage.setItem('hiddenMinicardLabelText', 'true'); //true
-          }
-        },
-        'click span.badge-icon.fa.fa-sort, click span.badge-text.check-list-sort' : Popup.open("editCardSortOrder"),
-        'click .minicard-labels' : this.cardLabelsPopup,
-        'click .js-open-minicard-details-menu': Popup.open('minicardDetailsActions'),
-      }
-    ];
-  },
-}).register('minicard');
-
-Template.minicard.helpers({
   hiddenMinicardLabelText() {
     const currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) {
@@ -119,63 +87,197 @@ Template.minicard.helpers({
       return false;
     }
   },
+  cover() {
+    if (!this.coverId) return null;
+    const attachment = ReactiveCache.getAttachment(this.coverId);
+    if (!attachment) return null;
+    const coverId = this.coverId;
+    return {
+      link() {
+        return `/cdn/storage/attachments/${coverId}`;
+      },
+    };
+  },
   // XXX resolve this nasty hack for https://github.com/veliovgroup/Meteor-Files/issues/763
   sess() {
     return Meteor.connection && Meteor.connection._lastSessionId
       ? Meteor.connection._lastSessionId
       : null;
   },
-});
+  // 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 : '';
+  },
 
-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'keydown input.js-edit-card-sort-popup'(evt) {
-          // enter = save
-          if (evt.keyCode === 13) {
-            this.find('button[type=submit]').click();
-          }
-        },
-        'click button.js-submit-edit-card-sort-popup'(event) {
-          // save button pressed
-          event.preventDefault();
-          const sort = this.$('.js-edit-card-sort-popup')[0]
-            .value
-            .trim();
-          if (!Number.isNaN(sort)) {
-            let card = this.data();
-            card.move(card.boardId, card.swimlaneId, card.listId, sort);
-            Popup.back();
-          }
-        },
+  shouldShowListOnMinicard() {
+    // Show list name if either:
+    // 1. Board-wide setting is enabled, OR
+    // 2. This specific card has the setting enabled
+    const currentBoard = this.board();
+    if (!currentBoard) return false;
+    return currentBoard.allowsShowListsOnMinicard || this.showListOnMinicard;
+  },
+
+  shouldShowChecklistAtMinicard() {
+    // Return checklists that should be shown on minicard
+    const currentBoard = this.board();
+    if (!currentBoard) return [];
+
+    const checklists = this.checklists();
+    const visibleChecklists = [];
+
+    checklists.forEach(checklist => {
+      // Show checklist if either:
+      // 1. Board-wide setting is enabled, OR
+      // 2. This specific checklist has the setting enabled
+      if (currentBoard.allowsChecklistAtMinicard || checklist.showChecklistAtMinicard) {
+        visibleChecklists.push(checklist);
       }
-    ]
-  }
-}).register('editCardSortOrderPopup');
+    });
 
-Template.minicardDetailsActionsPopup.events({
-  'click .js-due-date': Popup.open('editCardDueDate'),
-  'click .js-move-card': Popup.open('moveCard'),
-  'click .js-copy-card': Popup.open('copyCard'),
-  'click .js-set-card-color': Popup.open('setCardColor'),
-  'click .js-add-labels': Popup.open('cardLabels'),
-  'click .js-link': Popup.open('linkCard'),
-  'click .js-move-card-to-top'(event) {
-    event.preventDefault();
-    const minOrder = this.getMinSort();
-    this.move(this.boardId, this.swimlaneId, this.listId, minOrder - 1);
-    Popup.back();
-  },
-  'click .js-move-card-to-bottom'(event) {
-    event.preventDefault();
-    const maxOrder = this.getMaxSort();
-    this.move(this.boardId, this.swimlaneId, this.listId, maxOrder + 1);
-    Popup.back();
-  },
-  'click .js-archive': Popup.afterConfirm('cardArchive', function () {
-    Popup.close();
-    this.archive();
-    Utils.goBoardId(this.boardId);
-  }),
+    return visibleChecklists;
+  }
+});
+
+Template.minicard.events({
+  'click .js-linked-link'() {
+    if (this.isLinkedCard()) Utils.goCardId(this.linkedId);
+    else if (this.isLinkedBoard())
+      Utils.goBoardId(this.linkedId);
+  },
+  'click .js-toggle-minicard-label-text'() {
+    if (window.localStorage.getItem('hiddenMinicardLabelText')) {
+      window.localStorage.removeItem('hiddenMinicardLabelText'); //true
+    } else {
+      window.localStorage.setItem('hiddenMinicardLabelText', 'true'); //true
+    }
+  },
+  'click span.badge-icon.fa.fa-sort, click span.badge-text.check-list-sort' : Popup.open("editCardSortOrder"),
+  'click .minicard-labels'(event, tpl) {
+    if (tpl.find('.js-card-label:hover')) {
+      Popup.open("cardLabels")(event, {dataContextIfCurrentDataIsUndefined: Template.currentData()});
+    }
+  },
+  'click .js-open-minicard-details-menu'(event, tpl) {
+    event.preventDefault();
+    event.stopPropagation();
+    const card = Template.currentData();
+    Popup.open('cardDetailsActions').call({currentData: () => card}, event);
+  },
+  // Drag and drop file upload handlers
+  'dragover .minicard'(event) {
+    // Only prevent default for file drags to avoid interfering with sortable
+    const dataTransfer = event.originalEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+  'dragenter .minicard'(event) {
+    const dataTransfer = event.originalEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+      event.preventDefault();
+      event.stopPropagation();
+      const card = this;
+      const board = card.board();
+      // Only allow drag-and-drop if user can modify card and board allows attachments
+      if (Utils.canModifyCard() && board && board.allowsAttachments) {
+        $(event.currentTarget).addClass('is-dragging-over');
+      }
+    }
+  },
+  'dragleave .minicard'(event) {
+    const dataTransfer = event.originalEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+      event.preventDefault();
+      event.stopPropagation();
+      $(event.currentTarget).removeClass('is-dragging-over');
+    }
+  },
+  'drop .minicard'(event) {
+    const dataTransfer = event.originalEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+      event.preventDefault();
+      event.stopPropagation();
+      $(event.currentTarget).removeClass('is-dragging-over');
+
+      const card = this;
+      const board = card.board();
+
+      // Check permissions
+      if (!Utils.canModifyCard() || !board || !board.allowsAttachments) {
+        return;
+      }
+
+      // Check if this is a file drop (not a card reorder)
+      if (!dataTransfer.files || dataTransfer.files.length === 0) {
+        return;
+      }
+
+      const files = dataTransfer.files;
+      if (files && files.length > 0) {
+        handleFileUpload(card, files);
+      }
+    }
+  },
+});
+
+Template.minicardChecklist.helpers({
+  visibleItems() {
+    const checklist = this.checklist || this;
+    const items = checklist.items();
+
+    return items.filter(item => {
+      // Hide finished items if hideCheckedChecklistItems is true
+      if (item.isFinished && checklist.hideCheckedChecklistItems) {
+        return false;
+      }
+      // Hide all items if hideAllChecklistItems is true
+      if (checklist.hideAllChecklistItems) {
+        return false;
+      }
+      return true;
+    });
+  },
+});
+
+Template.minicardChecklist.events({
+  'click .js-open-checklist-menu'(event) {
+    const data = Template.currentData();
+    const checklist = data.checklist || data;
+    const card = data.card || this;
+    const context = { currentData: () => ({ checklist, card }) };
+    Popup.open('checklistActions').call(context, event);
+  },
+});
+
+Template.editCardSortOrderPopup.events({
+  'keydown input.js-edit-card-sort-popup'(evt, tpl) {
+    // enter = save
+    if (evt.keyCode === 13) {
+      tpl.find('button[type=submit]').click();
+    }
+  },
+  'click button.js-submit-edit-card-sort-popup'(event, tpl) {
+    // save button pressed
+    event.preventDefault();
+    const sort = tpl.$('.js-edit-card-sort-popup')[0]
+      .value
+      .trim();
+    if (!Number.isNaN(sort)) {
+      let card = this;
+      card.move(card.boardId, card.swimlaneId, card.listId, sort);
+      Popup.back();
+    }
+  },
 });

client/components/cards/resultCard.jade

@@ -11,7 +11,7 @@ template(name="resultCard")
               = getBoard.title
           else
             .broken-cards-null
-              | NULL
+              | {{_ 'no-name'}}
         if getBoard.archived
           i.fa.fa-archive
       li.result-card-context.result-card-context-separator
@@ -25,7 +25,7 @@ template(name="resultCard")
               = getSwimlane.title
           else
             .broken-cards-null
-              | NULL
+              | {{_ 'no-name'}}
         if getSwimlane.archived
           i.fa.fa-archive
       li.result-card-context.result-card-context-separator
@@ -39,6 +39,6 @@ template(name="resultCard")
               = getList.title
           else
             .broken-cards-null
-              | NULL
+              | {{_ 'no-name'}}
         if getList.archived
           i.fa.fa-archive

client/components/cards/resultCard.js

@@ -1,35 +1,67 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 Template.resultCard.helpers({
   userId() {
     return Meteor.userId();
   },
+  getBoard() {
+    const card = Template.currentData();
+    try {
+      if (card && card.boardId) {
+        const board = ReactiveCache.getBoard(card.boardId);
+        return board || null;
+      }
+    } catch (err) {
+      // Silently handle errors
+    }
+    return null;
+  },
+  getSwimlane() {
+    const card = Template.currentData();
+    try {
+      if (card && card.swimlaneId) {
+        const swimlane = ReactiveCache.getSwimlane(card.swimlaneId);
+        return swimlane || null;
+      }
+    } catch (err) {
+      // Silently handle errors
+    }
+    return null;
+  },
+  getList() {
+    const card = Template.currentData();
+    try {
+      if (card && card.listId) {
+        const list = ReactiveCache.getList(card.listId);
+        return list || null;
+      }
+    } catch (err) {
+      // Silently handle errors
+    }
+    return null;
+  },
+  originRelativeUrl() {
+    const card = Template.currentData();
+    if (card && card.boardId && card._id) {
+      return `/board/${card.boardId}?cardId=${card._id}`;
+    }
+    return '#';
+  },
 });
 
-BlazeComponent.extendComponent({
-  clickOnMiniCard(evt) {
-    evt.preventDefault();
-    const this_ = this;
-    const cardId = this.currentData()._id;
-    const boardId = this.currentData().boardId;
+Template.resultCard.events({
+  'click .js-minicard'(event) {
+    event.preventDefault();
+    const cardId = Template.currentData()._id;
+    const boardId = Template.currentData().boardId;
     Meteor.subscribe('popupCardData', cardId, {
       onReady() {
         Session.set('popupCardId', cardId);
         Session.set('popupCardBoardId', boardId);
-        this_.cardDetailsPopup(evt);
+        if (!Popup.isOpen()) {
+          Popup.open("cardDetails")(event);
+        }
       },
     });
   },
-
-  cardDetailsPopup(event) {
-    if (!Popup.isOpen()) {
-      Popup.open("cardDetails")(event);
-    }
-  },
-
-  events() {
-    return [
-      {
-        'click .js-minicard': this.clickOnMiniCard,
-      },
-    ];
-  },
-}).register('resultCard');
+});

client/components/cards/subtasks.css

@@ -87,6 +87,15 @@ textarea.js-edit-subtask-item {
   top: 0;
   bottom: -600px;
   right: 0;
+  z-index: 15;
+}
+
+/* Fix for mobile Safari: ensure this doesn't block card interaction */
+@media screen and (max-width: 800px) {
+  #card-details-overlay {
+    z-index: 15;
+    pointer-events: none;
+  }
 }
 .subtasks {
   background: #f7f7f7;
@@ -127,6 +136,25 @@ textarea.js-edit-subtask-item {
   border-bottom: 2px solid #3cb500;
   border-right: 2px solid #3cb500;
 }
+/* Unicode checkbox icons styling */
+.subtasks-item .check-box-unicode {
+  font-size: 1.3em;
+  margin-right: 8px;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+}
+/* Grey checkmarks when grey icons setting is enabled */
+body.grey-icons-enabled .subtasks-item .check-box.is-checked {
+  border-bottom: 2px solid #7a7a7a;
+  border-right: 2px solid #7a7a7a;
+}
+body.grey-icons-enabled .subtasks-item .check-box-unicode {
+  filter: grayscale(100%);
+  -webkit-filter: grayscale(100%);
+  opacity: 0.85;
+}
 .subtasks-item .item-title {
   flex: 1;
   padding-left: 10px;

client/components/cards/subtasks.jade

@@ -1,6 +1,6 @@
 template(name="subtasks")
   h3.card-details-item-title
-    i.fa.fa-sitemap
+    i.fa.fa-globe
     | {{_ 'subtasks'}}
   if currentUser.isBoardAdmin
     if toggleDeleteDialog.get
@@ -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.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
 
 template(name="editSubtaskItemForm")
   textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
@@ -50,8 +50,8 @@ template(name="editSubtaskItemForm")
       = subtask.title
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
-    span(title=createdAt) {{ moment createdAt }}
+    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
+    span(title=createdAt) {{ displayDate createdAt }}
     if canModifyCard
       if currentUser.isBoardAdmin
         a.js-delete-subtask-item {{_ "delete"}}...
@@ -74,12 +74,14 @@ template(name="subtasksItems")
 template(name='subtaskItemDetail')
   .js-subtasks-item.subtasks-item
     if canModifyCard
-      .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+      span.check-box-unicode
+        i.fa(class="{{#if item.isFinished}}fa-check-square{{else}}fa-square-o{{/if}}")
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
         +viewer
           = item.title
     else
-      .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+      span.check-box-unicode
+        i.fa(class="{{#if item.isFinished}}fa-check-square{{else}}fa-square-o{{/if}}")
       .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
         +viewer
           = item.title
@@ -94,6 +96,10 @@ template(name="subtaskActionsPopup")
       a.js-view-subtask(title="{{ subtask.title }}")
         i.fa.fa-eye
         | {{_ "view-it"}}
+    li
+      a.js-go-to-subtask-board
+        i.fa.fa-folder
+        | {{_ "go-to-board"}}
       if currentUser.isBoardAdmin
         a.js-delete-subtask.delete-subtask
           i.fa.fa-trash

client/components/cards/subtasks.js

@@ -1,16 +1,28 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+import Cards from '/models/cards';
+import { Filter } from '/client/lib/filter';
 
-BlazeComponent.extendComponent({
-  addSubtask(event) {
+Template.subtasks.events({
+  'click .js-open-subtask-details-menu': Popup.open('subtaskActions'),
+  async 'submit .js-add-subtask'(event, tpl) {
     event.preventDefault();
-    const textarea = this.find('textarea.js-add-subtask-item');
+    const textarea = tpl.find('textarea.js-add-subtask-item');
     const title = textarea.value.trim();
-    const cardId = this.currentData().cardId;
+    const cardId = Template.currentData().cardId;
     const card = ReactiveCache.getCard(cardId);
     const sortIndex = -1;
     const crtBoard = ReactiveCache.getBoard(card.boardId);
-    const targetBoard = crtBoard.getDefaultSubtasksBoard();
-    const listId = targetBoard.getDefaultSubtasksListId();
+    const targetBoard = await crtBoard.getDefaultSubtasksBoardAsync();
+    if (!targetBoard) {
+      return;
+    }
+
+    const targetList = await targetBoard.getDefaultSubtasksListAsync();
+    if (!targetList) {
+      return;
+    }
+    const listId = targetList._id;
 
     //Get the full swimlane data for the parent task.
     const parentSwimlane = ReactiveCache.getSwimlane({
@@ -28,10 +40,10 @@ BlazeComponent.extendComponent({
         ? targetBoard.getDefaultSwimline()._id
         : targetSwimlane._id;
 
-    const nextCardNumber = targetBoard.getNextCardNumber();
+    const nextCardNumber = await targetBoard.getNextCardNumber();
 
     if (title) {
-      const _id = Cards.insert({
+      const _id = await Cards.insertAsync({
         title,
         parentId: cardId,
         members: [],
@@ -42,7 +54,7 @@ BlazeComponent.extendComponent({
         sort: sortIndex,
         swimlaneId,
         type: 'cardType-card',
-        cardNumber: nextCardNumber
+        cardNumber: nextCardNumber,
       });
 
       // In case the filter is active we need to add the newly inserted card in
@@ -52,7 +64,7 @@ BlazeComponent.extendComponent({
       Filter.addException(_id);
 
       setTimeout(() => {
-        this.$('.add-subtask-item')
+        tpl.$('.add-subtask-item')
           .last()
           .click();
       }, 100);
@@ -60,27 +72,20 @@ BlazeComponent.extendComponent({
     textarea.value = '';
     textarea.focus();
   },
-
-  deleteSubtask() {
-    const subtask = this.currentData().subtask;
-    if (subtask && subtask._id) {
-      subtask.archive();
-    }
-  },
-
-  isBoardAdmin() {
-    return ReactiveCache.getCurrentUser().isBoardAdmin();
-  },
-
-  editSubtask(event) {
+  'submit .js-edit-subtask-title'(event, tpl) {
     event.preventDefault();
-    const textarea = this.find('textarea.js-edit-subtask-item');
+    const textarea = tpl.find('textarea.js-edit-subtask-item');
     const title = textarea.value.trim();
-    const subtask = this.currentData().subtask;
+    const subtask = Template.currentData().subtask;
     subtask.setTitle(title);
   },
-
-  pressKey(event) {
+  async 'click .js-delete-subtask-item'() {
+    const subtask = Template.currentData().subtask;
+    if (subtask && subtask._id) {
+      await subtask.archive();
+    }
+  },
+  keydown(event) {
     //If user press enter key inside a form, submit it
     //Unless the user is also holding down the 'shift' key
     if (event.keyCode === 13 && !event.shiftKey) {
@@ -89,53 +94,66 @@ BlazeComponent.extendComponent({
       $form.find('button[type=submit]').click();
     }
   },
+});
 
-  events() {
-    return [
-      {
-        'click .js-open-subtask-details-menu': Popup.open('subtaskActions'),
-        'submit .js-add-subtask': this.addSubtask,
-        'submit .js-edit-subtask-title': this.editSubtask,
-        'click .js-delete-subtask-item': this.deleteSubtask,
-        keydown: this.pressKey,
-      },
-    ];
-  },
-}).register('subtasks');
+Template.subtasks.onCreated(function () {
+  this.toggleDeleteDialog = new ReactiveVar(false);
+});
 
-BlazeComponent.extendComponent({
-  // ...
-}).register('subtaskItemDetail');
-
-BlazeComponent.extendComponent({
+Template.subtasks.helpers({
   isBoardAdmin() {
     return ReactiveCache.getCurrentUser().isBoardAdmin();
   },
-  events() {
-    return [
-      {
-        'click .js-view-subtask'(event) {
-          if ($(event.target).hasClass('js-view-subtask')) {
-            const subtask = this.currentData().subtask;
-            const board = subtask.board();
-            FlowRouter.go('card', {
-              boardId: board._id,
-              slug: board.slug,
-              cardId: subtask._id,
-            });
-          }
-        },
-        'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', function () {
-          Popup.back(2);
-          const subtask = this.subtask;
-          if (subtask && subtask._id) {
-            subtask.archive();
-          }
-        }),
-      }
-    ]
-  }
-}).register('subtaskActionsPopup');
+  toggleDeleteDialog() {
+    return Template.instance().toggleDeleteDialog;
+  },
+});
+
+Template.subtaskItemDetail.events({
+  async 'click .js-subtasks-item .check-box-unicode'() {
+    const item = Template.currentData().item;
+    if (item && item._id) {
+      await item.toggleItem();
+    }
+  },
+});
+
+Template.subtaskActionsPopup.helpers({
+  isBoardAdmin() {
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
+  },
+});
+
+Template.subtaskActionsPopup.events({
+  'click .js-view-subtask'(event) {
+    if ($(event.target).hasClass('js-view-subtask')) {
+      const subtask = Template.currentData().subtask;
+      const board = subtask.board();
+      FlowRouter.go('card', {
+        boardId: board._id,
+        slug: board.slug,
+        cardId: subtask._id,
+        swimlaneId: subtask.swimlaneId,
+        listId: subtask.listId,
+      });
+    }
+  },
+  'click .js-go-to-subtask-board'() {
+    const subtask = Template.currentData().subtask;
+    const board = subtask.board();
+    if (board) {
+      Popup.close();
+      FlowRouter.go('board', { id: board._id, slug: board.slug });
+    }
+  },
+  'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', async function () {
+    Popup.back(2);
+    const subtask = this.subtask;
+    if (subtask && subtask._id) {
+      await subtask.archive();
+    }
+  }),
+});
 
 Template.editSubtaskItemForm.helpers({
   user() {
@@ -145,5 +163,3 @@ Template.editSubtaskItemForm.helpers({
     return ReactiveCache.getCurrentUser().isBoardAdmin();
   },
 });
-
-

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.jade

@@ -0,0 +1,19 @@
+template(name="originalPosition")
+  .original-position-info
+    if isLoading
+      .original-position-loading
+        | ⏳ Loading original position...
+    else
+      if showOriginalPosition
+        .original-position-details
+          if hasMovedFromOriginal
+            .original-position-moved
+              span.original-position-text ℹ️ {{getOriginalPositionDescription}}
+          else
+            .original-position-unchanged
+              span.original-position-text ✅ In original position
+
+          if getOriginalTitle
+            .original-title
+              strong Original title:
+              |  {{getOriginalTitle}}

client/components/common/originalPosition.js

@@ -0,0 +1,94 @@
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Meteor } from 'meteor/meteor';
+
+/**
+ * Component to display original position information for swimlanes, lists, and cards
+ */
+
+Template.originalPosition.onCreated(function () {
+  this.originalPosition = new ReactiveVar(null);
+  this.isLoading = new ReactiveVar(false);
+  this.hasMoved = new ReactiveVar(false);
+
+  const tpl = this;
+
+  function loadOriginalPosition(entityId, entityType) {
+    tpl.isLoading.set(true);
+
+    const methodName = `positionHistory.get${entityType.charAt(0).toUpperCase() + entityType.slice(1)}OriginalPosition`;
+
+    Meteor.call(methodName, entityId, (error, result) => {
+      tpl.isLoading.set(false);
+      if (error) {
+        console.error('Error loading original position:', error);
+        tpl.originalPosition.set(null);
+      } else {
+        tpl.originalPosition.set(result);
+
+        // Check if the entity has moved
+        const movedMethodName = `positionHistory.has${entityType.charAt(0).toUpperCase() + entityType.slice(1)}Moved`;
+        Meteor.call(movedMethodName, entityId, (movedError, movedResult) => {
+          if (!movedError) {
+            tpl.hasMoved.set(movedResult);
+          }
+        });
+      }
+    });
+  }
+
+  this.autorun(() => {
+    const data = Template.currentData();
+    if (data && data.entityId && data.entityType) {
+      loadOriginalPosition(data.entityId, data.entityType);
+    }
+  });
+});
+
+Template.originalPosition.helpers({
+  getOriginalPosition() {
+    return Template.instance().originalPosition.get();
+  },
+
+  isLoading() {
+    return Template.instance().isLoading.get();
+  },
+
+  hasMovedFromOriginal() {
+    return Template.instance().hasMoved.get();
+  },
+
+  getOriginalPositionDescription() {
+    const position = Template.instance().originalPosition.get();
+    if (!position) return 'No original position data';
+
+    if (position.originalPosition) {
+      const data = Template.currentData();
+      const entityType = data.entityType;
+      let description = `Original position: ${position.originalPosition.sort || 0}`;
+
+      if (entityType === 'list' && position.originalSwimlaneId) {
+        description += ` in swimlane ${position.originalSwimlaneId}`;
+      } else if (entityType === 'card') {
+        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 = Template.instance().originalPosition.get();
+    return position ? position.originalTitle : '';
+  },
+
+  showOriginalPosition() {
+    return Template.instance().originalPosition.get() !== null;
+  },
+});

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/datepicker.js

@@ -0,0 +1,16 @@
+import {
+  setupDatePicker,
+  datePickerRendered,
+  datePickerHelpers,
+  datePickerEvents,
+} from '/client/lib/datepicker';
+
+Template.datepicker.onCreated(function () {
+  setupDatePicker(this);
+});
+
+Template.datepicker.onRendered(function () {
+  datePickerRendered(this);
+});
+
+Template.datepicker.helpers(datePickerHelpers());

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;
@@ -128,33 +130,36 @@ textarea.editor {
 }
 input[type="submit"],
 button {
-  background: #cfcfcf;
-  background: linear-gradient(#cfcfcf, #c2c2c2);
+  background: #000;
+  background: linear-gradient(#000, #000);
   border: none;
   cursor: pointer;
   display: inline-block;
   font-weight: 700;
-  line-height: 22px;
-  padding: 7px 20px;
+  line-height: 1.3;
+  padding: 1vh 2.5vw;
   text-align: center;
+  color: #fff;
 }
 input[type="submit"] .wide,
 button .wide {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: 4vw;
+  padding-right: 4vw;
 }
 input[type="submit"]:hover,
 button:hover,
 input[type="submit"]:focus,
 button:focus {
-  background: #c2c2c2;
-  background: linear-gradient(#c2c2c2, #b5b5b5);
+  background: #222;
+  background: linear-gradient(#222, #222);
+  color: #fff;
 }
 input[type="submit"]:active,
 button:active {
-  background: #b5b5b5;
-  background: linear-gradient(#b5b5b5, #a8a8a8);
-  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
+  background: #111;
+  background: linear-gradient(#111, #111);
+  box-shadow: inset 0 3px 6px rgba(0,0,0,0.3);
+  color: #fff;
 }
 input[type="submit"]:active:hover,
 button:active:hover,
@@ -181,6 +186,12 @@ input[type="submit"].primary:active,
 button.primary:active {
   background: #01628c;
 }
+input[type="submit"].negate,
+button.negate {
+  background: #eb5a46;
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
 input[type="submit"].negate:hover,
 button.negate:hover,
 input[type="submit"].negate:focus,
@@ -215,15 +226,15 @@ input[type="submit"]:disabled:active,
 input[type="button"].disabled:active,
 button.disabled:active,
 .button.disabled:active {
-  background: #cfcfcf;
+  background: #555;
   cursor: default;
   box-shadow: none;
-  color: #a8a8a8;
+  color: #999;
 }
 fieldset {
   border: 1px solid #bfbfbf;
-  padding: 15px;
-  margin-bottom: 15px;
+  padding: 2vh 2vw;
+  margin-bottom: 2vh;
 }
 input[type="hidden"] {
   display: none;
@@ -231,18 +242,18 @@ input[type="hidden"] {
 .radio-div,
 .check-div {
   display: block;
-  margin: 0 0 4px 20px;
-  min-height: 20px;
+  margin: 0 0 0.5vh 2.5vw;
+  min-height: 2.5vh;
   position: relative;
 }
 .radio-div input,
 .check-div input {
-  left: -18px;
+  left: -2.5vw;
   min-height: 0;
   margin: 0;
   padding: 0;
   position: absolute;
-  top: 2px;
+  top: 0.3vh;
 }
 .radio-div label,
 .check-div label {
@@ -251,23 +262,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 +290,13 @@ textarea::-moz-placeholder {
 .edit-controls input[type=button],
 .add-controls input[type=button] {
   float: left;
-  height: 32px;
+  height: 4.5vh;
   margin-bottom: 0px;
 }
 .edit-controls .fa-times-thin,
 .add-controls .fa-times-thin {
-  font-size: 26px;
-  margin: 3px 10px;
+  font-size: clamp(20px, 4vw, 26px);
+  margin: 0.5vh 1.5vw;
 }
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
@@ -313,15 +324,24 @@ textarea::-moz-placeholder {
   margin-right: 6px;
   border-top: 2px solid transparent;
   border-left: 2px solid transparent;
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
   transform: rotate(40deg);
   -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
   transform-origin: 100% 100%;
 }
+/* Grey checkmarks when grey icons setting is enabled */
+body.grey-icons-enabled .materialCheckBox.is-checked {
+  border-bottom: 2px solid #7a7a7a;
+  border-right: 2px solid #7a7a7a;
+}
 .button-link {
   background: #fff;
   background: linear-gradient(#fff, #f5f5f5);
   border-radius: 3px;
   box-sizing: border-box;
+   -webkit-user-select: none;
   user-select: none;
   border: 1px solid #e3e3e3;
   border-bottom-color: #c2c2c2;
@@ -374,14 +394,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,
@@ -389,15 +409,15 @@ textarea::-moz-placeholder {
 .button-link.setting.disabled.primary,
 .button-link.setting.disabled.primary:hover,
 .button-link.setting.disabled.primary:active {
-  background: #cfcfcf;
-  border-color: #c2c2c2;
-  border-bottom-color: #b5b5b5;
+  background: #555;
+  border-color: #444;
+  border-bottom-color: #333;
   cursor: default;
   box-shadow: none;
-  color: #a8a8a8;
+  color: #999;
 }
 .button-link.setting .label {
-  color: #8c8c8c;
+  color: #222;
   display: block;
   font-size: 12px;
   line-height: 14px;
@@ -505,8 +525,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 +592,7 @@ button.loud-text-button:hover {
   top: 6px;
 }
 .big-link.none {
-  color: #8c8c8c;
+  color: #222;
   text-decoration: none;
 }
 .big-link.none:hover {
@@ -601,7 +622,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/forms/inlinedform.jade

@@ -1,6 +1,7 @@
 template(name='inlinedForm')
-  if isOpen.get
-    form.inlined-form.js-inlined-form(id=id class=classNames)
-      +Template.contentBlock
-  else
-    +Template.elseBlock
+  .js-inlined-form-wrapper(style='display: contents;' data-position=position)
+    if isOpen.get
+      form.inlined-form.js-inlined-form(id=id class=classNames)
+        +Template.contentBlock
+    else
+      +Template.elseBlock

client/components/gantt/gantt.css

@@ -0,0 +1,203 @@
+/* Gantt chart cell background colors for Received, Start, Due, End (matching cardDetails) */
+.ganttview-received {
+  background-color: #dbdbdb !important;
+  color: #000 !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+}
+.ganttview-start {
+  background-color: #90ee90 !important;
+  color: #000 !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+}
+.ganttview-due {
+  background-color: #ffd700 !important;
+  color: #000 !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+}
+.ganttview-end {
+  background-color: #ffb3b3 !important;
+  color: #000 !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+}
+/* Gantt View Styles */
+
+.gantt-view {
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  background-color: #fff;
+}
+
+.gantt-view.swimlane {
+  background-color: #fff;
+  padding: 10px;
+}
+
+.gantt-container {
+  overflow-x: auto;
+  overflow-y: visible;
+  background-color: #fff;
+  display: block;
+  width: 100%;
+}
+
+.gantt-container table,
+.gantt-table {
+  border-collapse: collapse;
+  width: 100%;
+  min-width: 800px;
+  border: 2px solid #666;
+  font-family: sans-serif;
+  font-size: 13px;
+  background-color: #fff;
+}
+
+.gantt-container thead {
+  background-color: #e8e8e8;
+  border-bottom: 2px solid #666;
+  font-weight: bold;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.gantt-container thead th,
+.gantt-container thead tr > td:first-child {
+  border-right: 2px solid #666;
+  padding: 4px; /* half of 8px */
+  width: 100px; /* half of 200px */
+  text-align: left;
+  font-weight: bold;
+  background-color: #e8e8e8;
+  min-width: 100px; /* half of 200px */
+}
+
+.gantt-container thead td {
+  border-right: 1px solid #999;
+  padding: 2px 1px; /* half */
+  text-align: center;
+  background-color: #f5f5f5;
+  font-size: 11px;
+  min-width: 15px; /* half of 30px */
+  font-weight: bold;
+  height: auto;
+  line-height: 1.2;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.gantt-container tbody tr {
+  border-bottom: 1px solid #999;
+  height: 32px;
+}
+
+.gantt-container tbody tr:hover {
+  background-color: #f9f9f9;
+}
+
+.gantt-container tbody tr:hover td {
+  background-color: #f9f9f9 !important;
+}
+
+.gantt-container tbody td {
+  border-right: 1px solid #ccc;
+  padding: 1px; /* half */
+  text-align: center;
+  min-width: 15px; /* half of 30px */
+  height: 32px;
+  vertical-align: middle;
+  line-height: 28px;
+  background-color: #ffffff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.gantt-container tbody td:nth-child(even) {
+  background-color: #fafafa;
+}
+
+.gantt-container tbody td:first-child {
+  border-right: 2px solid #666;
+  padding: 4px; /* half of 8px */
+  font-weight: 500;
+  cursor: pointer;
+  background-color: #fafafa !important;
+  text-align: left;
+  width: 100px; /* half of 200px */
+  min-width: 100px; /* half of 200px */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: auto;
+  line-height: normal;
+}
+
+.gantt-container tbody td:first-child:hover {
+  background-color: #f0f0f0 !important;
+  text-decoration: underline;
+}
+
+.js-gantt-task-cell {
+  cursor: pointer;
+}
+
+.js-gantt-date-icon {
+  cursor: pointer;
+}
+
+.gantt-container .ganttview-weekend {
+  background-color: #efefef;
+}
+
+.gantt-container .ganttview-today {
+  background-color: #fcf8e3;
+  border-right: 2px solid #ffb347;
+}
+
+/* Task bar styling - VERY VISIBLE */
+.gantt-container tbody td.ganttview-block {
+  background-color: #4CAF50 !important;
+  color: #fff !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+  padding: 2px !important;
+  border-radius: 2px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .gantt-container table {
+    font-size: 11px;
+  }
+
+  .gantt-container thead td {
+    min-width: 20px;
+    padding: 2px;
+  }
+
+  .gantt-container tbody td {
+    min-width: 20px;
+    padding: 1px;
+    height: 20px;
+  }
+
+  .gantt-container tbody td:first-child {
+    width: 100px;
+    font-size: 12px;
+  }
+}
+
+/* Print styles */
+@media print {
+  .gantt-container {
+    overflow: visible;
+  }
+
+  .gantt-container table {
+    page-break-inside: avoid;
+  }
+}