v8.29

Resolve merge conflicts for PR #6131 UI improvements

.eslintrc.json

@@ -97,9 +97,8 @@
     "Avatar": true,
     "Avatars": true,
     "BlazeComponent": false,
-    "BlazeLayout": false,
+    
     "CollectionHooks": false,
-    "DocHead": false,
     "ESSearchResults": false,
     "FastRender": false,
     "FlowRouter": false,

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

.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@c94ce9fb468520275223c153574b00df6fe4bcc9
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -48,14 +48,14 @@ jobs:
       # https://github.com/docker/metadata-action
       - name: Extract Docker metadata
         id: meta
-        uses: docker/metadata-action@369eb591f429131d6889c46b94e711f089e6ca96
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
       # Build and push Docker image with Buildx (don't push on PR)
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
-        uses: docker/build-push-action@48aba3b46d1b1fec4febb7c5d0c644b249a11355
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}

.github/workflows/dockerimage.yml

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

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@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
@@ -136,7 +136,7 @@ jobs:
         run: sh ./test-wekan.sh -cv
 
       - name: Upload coverage
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         with:
           name: coverage-folder
           path: .coverage/
@@ -147,10 +147,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@v7
         with:
           name: coverage-folder
           path: .coverage/

.meteor/packages

@@ -16,17 +16,13 @@ es5-shim@4.8.0
 
 # Collections
 aldeed:collection2
-cottz:publish-relations
+reywood:publish-composite
 dburles:collection-helpers
-idmontie:migrations
-easy:search
 mongo@1.16.8
-mquandalle:collection-mutations
 
 # Account system
 accounts-password@2.4.0
 useraccounts:core
-useraccounts:flow-routing
 useraccounts:unstyled
 simple:rest-accounts-password
 wekan-ldap
@@ -44,23 +40,16 @@ reactive-dict@1.3.1
 session@1.2.1
 tracker@1.3.3
 underscore@1.0.13
-arillo:flow-router-helpers
 audit-argument-checks@1.0.7
-kadira:dochead
-mquandalle:autofocus
-ongoworks:speakingurl
 raix:handlebar-helpers
 http@2.0.0! # force new http package
 
-# Datepicker
-wekan-bootstrap-datepicker
+# Datepicker (disabled - using native HTML inputs)
+# wekan-bootstrap-datepicker
 
 # UI components
 ostrio:i18n
 reactive-var@1.0.12
-mousetrap:mousetrap
-mquandalle:jquery-textcomplete
-mquandalle:mousetrap-bindglobal
 templates:tabs
 meteor-autosize
 shell-server@0.5.0
@@ -72,25 +61,25 @@ meteorhacks:subs-manager
 meteorhacks:aggregate@1.3.0
 wekan-markdown
 konecty:mongo-counter
-percolate:synced-cron
+quave:synced-cron
 ostrio:cookies
 ostrio:files@2.3.0
-pascoual:pdfkit
 lmieulet:meteor-coverage
 meteortesting:mocha@2.0.3
 aldeed:simple-schema
 matb33:collection-hooks
 simple:json-routes
-kadira:flow-router
 spacebars
 service-configuration@1.3.2
 communitypackages:picker
 minifier-css@1.6.4
 blaze
-kadira:blaze-layout
 peerlibrary:blaze-components
 ejson@1.1.3
 logging@1.3.3
 wekan-fullcalendar
 momentjs:moment@2.29.3
 wekan-fontawesome
+
+useraccounts:flow-routing-extra
+ostrio:flow-router-extra

.meteor/release

@@ -1 +1 @@
-METEOR@2.14
+METEOR@2.16

.meteor/versions

@@ -1,5 +1,5 @@
-accounts-base@2.2.10
-accounts-oauth@1.4.3
+accounts-base@2.2.11
+accounts-oauth@1.4.4
 accounts-password@2.4.0
 aldeed:collection2@2.10.0
 aldeed:collection2-core@1.2.0
@@ -7,7 +7,6 @@ aldeed:schema-deny@1.1.0
 aldeed:schema-index@1.1.1
 aldeed:simple-schema@1.5.4
 allow-deny@1.1.1
-arillo:flow-router-helpers@0.5.2
 audit-argument-checks@1.0.7
 autoupdate@1.8.0
 babel-compiler@7.10.5
@@ -20,29 +19,25 @@ boilerplate-generator@1.7.2
 caching-compiler@1.2.2
 caching-html-compiler@1.2.1
 callback-hook@1.5.1
-check@1.3.2
+check@1.4.1
 coffeescript@2.7.0
 coffeescript-compiler@2.4.1
 communitypackages:picker@1.1.1
-cottz:publish-relations@2.0.8
 dburles:collection-helpers@1.1.0
 ddp@1.4.1
-ddp-client@2.6.1
-ddp-common@1.4.0
+ddp-client@2.6.2
+ddp-common@1.4.1
 ddp-rate-limiter@1.2.1
-ddp-server@2.7.0
+ddp-server@2.7.1
 deps@1.0.12
 diff-sequence@1.1.2
 dynamic-import@0.7.3
-easy:search@2.2.1
-easysearch:components@2.2.2
-easysearch:core@2.2.2
 ecmascript@0.16.8
 ecmascript-runtime@0.8.1
 ecmascript-runtime-client@0.12.1
 ecmascript-runtime-server@0.11.0
 ejson@1.1.3
-email@2.2.5
+email@2.2.6
 es5-shim@4.8.0
 fetch@0.1.4
 geojson-utils@1.0.11
@@ -51,16 +46,12 @@ html-tools@1.1.3
 htmljs@1.1.1
 http@2.0.0
 id-map@1.1.1
-idmontie:migrations@1.0.3
 inter-process-messaging@0.1.1
 jquery@3.0.0
-kadira:blaze-layout@2.3.0
-kadira:dochead@1.5.0
-kadira:flow-router@2.12.1
 konecty:mongo-counter@0.0.5_3
 lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.3.3
+logging@1.3.4
 matb33:collection-hooks@1.3.0
 mdg:validation-error@0.5.1
 meteor@1.11.5
@@ -74,45 +65,39 @@ meteortesting:browser-tests@1.4.2
 meteortesting:mocha@2.1.0
 meteortesting:mocha-core@8.0.1
 minifier-css@1.6.4
-minifier-js@2.7.5
+minifier-js@2.8.0
 minifiers@1.1.8-faster-rebuild.0
-minimongo@1.9.3
+minimongo@1.9.4
 modern-browsers@0.1.10
 modules@0.20.0
 modules-runtime@0.13.1
 momentjs:moment@2.29.3
-mongo@1.16.8
+mongo@1.16.10
 mongo-decimal@0.1.3
 mongo-dev-server@1.1.0
 mongo-id@1.0.8
 mongo-livedata@1.0.12
-mousetrap:mousetrap@1.4.6_1
-mquandalle:autofocus@1.0.0
-mquandalle:collection-mutations@0.1.0
 mquandalle:jade@0.4.9
 mquandalle:jade-compiler@0.4.5
-mquandalle:jquery-textcomplete@0.8.0_1
-mquandalle:mousetrap-bindglobal@0.0.1
 msavin:usercache@1.8.0
 npm-mongo@4.17.2
 oauth@2.2.1
 oauth2@1.3.2
 observe-sequence@1.0.21
-ongoworks:speakingurl@1.1.0
 ordered-dict@1.1.0
 ostrio:cookies@2.7.2
 ostrio:cstorage@4.0.1
 ostrio:files@2.3.3
+ostrio:flow-router-extra@3.10.1
 ostrio:i18n@3.2.1
-pascoual:pdfkit@1.0.7
 peerlibrary:assert@0.3.0
 peerlibrary:base-component@0.17.1
 peerlibrary:blaze-components@0.23.0
 peerlibrary:computed-field@0.10.0
 peerlibrary:data-lookup@0.3.0
 peerlibrary:reactive-field@0.6.0
-percolate:synced-cron@1.5.2
 promise@0.12.2
+quave:synced-cron@2.2.1
 raix:eventemitter@0.1.3
 raix:handlebar-helpers@0.2.5
 random@1.2.1
@@ -122,8 +107,9 @@ reactive-dict@1.3.1
 reactive-var@1.0.12
 reload@1.3.1
 retry@1.1.0
+reywood:publish-composite@1.9.0
 routepolicy@1.1.1
-service-configuration@1.3.3
+service-configuration@1.3.4
 session@1.2.1
 sha@1.0.9
 shell-server@0.5.0
@@ -144,23 +130,21 @@ templating-tools@1.2.2
 tracker@1.3.3
 typescript@4.9.5
 ui@1.0.13
-underscore@1.0.13
+underscore@1.6.1
 url@1.3.2
 useraccounts:core@1.16.2
-useraccounts:flow-routing@1.15.0
+useraccounts:flow-routing-extra@1.1.0
 useraccounts:unstyled@1.14.2
-webapp@1.13.6
+webapp@1.13.8
 webapp-hashing@1.1.1
 wekan-accounts-cas@0.1.0
-wekan-accounts-lockout@1.0.0
+wekan-accounts-lockout@1.1.0
 wekan-accounts-oidc@1.0.10
 wekan-accounts-sandstorm@0.8.0
-wekan-bootstrap-datepicker@1.10.0
 wekan-fontawesome@6.4.2
 wekan-fullcalendar@3.10.5
 wekan-ldap@0.0.2
 wekan-markdown@1.0.9
 wekan-oidc@1.0.12
 yasaricli:slugify@0.0.7
-zimme:active-route@2.3.2
-zodern:types@1.0.10
+zodern:types@1.0.13

.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

@@ -11,7 +11,7 @@ Not paid:
 
 Paid by customers of WeKan Team:
 
-- Commercial Support at https://wekan.team/commercial-support/
+- Commercial Support at https://wekan.fi/commercial-support/
   - Support
   - Private Chat
   - Features

Dockerfile

@@ -1,76 +1,25 @@
-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 is automatically provided by Docker Buildx
+ARG TARGETARCH
+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=v14.21.4 \
+    METEOR_RELEASE=METEOR@2.16 \
+    USE_EDGE=false \
+    METEOR_EDGE=1.5-beta.17 \
+    NPM_VERSION=6.14.17 \
+    FIBERS_VERSION=4.0.1 \
+    SRC_PATH=./ \
+    WITH_API=true \
     RESULTS_PER_PAGE="" \
     DEFAULT_BOARD_ID="" \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
@@ -111,6 +60,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 +86,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 +152,74 @@ 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 logic
+case "${TARGETARCH}" in
+    "amd64")  NODE_ARCH="x64"  WEKAN_ARCH="amd64" ;;
+    "arm64")  NODE_ARCH="arm64" WEKAN_ARCH="arm64" ;;
+    "s390x")  NODE_ARCH="s390x" WEKAN_ARCH="s390x" ;;
+    *) echo "Unsupported architecture: ${TARGETARCH}"; exit 1 ;;
+esac
+
+# Node.js Installation
+cd /tmp
+wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz"
+wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt"
+grep "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt | shasum -a 256 -c -
+tar xzf "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" -C /usr/local --strip-components=1 --no-same-owner
+rm -f "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt
+ln -s "/usr/local/bin/node" "/usr/local/bin/nodejs"
+
+# NPM configuration
+npm install -g npm@${NPM_VERSION} --production
+chown --recursive wekan:wekan /home/wekan/
+
+# Temporary Tar swap for Meteor bundle
+cp $(which tar) $(which tar)~
+ln -sf $(which bsdtar) $(which tar)
+
+# WeKan Bundle Installation
+mkdir -p /home/wekan/app
+cd /home/wekan/app
+wget "https://github.com/wekan/wekan/releases/download/v8.29/wekan-8.29-${WEKAN_ARCH}.zip"
+unzip "wekan-8.29-${WEKAN_ARCH}.zip"
+rm "wekan-8.29-${WEKAN_ARCH}.zip"
+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

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

Dockerfile.s390x

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

LICENSE

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

Stackerfile.yml

@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v7.78.0"
+appVersion: "v8.29.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,79 @@ if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/pwa-service-worker.js');
   });
 }
+
+// Import board converter for on-demand conversion
+import '/client/lib/boardConverter';
+import '/client/components/boardConversionProgress';
+
+// Import migration manager and progress UI
+import '/client/lib/attachmentMigrationManager';
+import '/client/components/settings/migrationProgress';
+
+// Import cron settings
+import '/client/components/settings/cronSettings';
+
+// 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,22 @@
 .activity-title {
-  margin: 0 0.5em 0.8em;
   display: flex;
+  gap: 0.5lh;
   justify-content: space-between;
 }
+.reactions-popup {
+  display: flex;
+  gap: 1ch;
+  flex-wrap: wrap;
+  margin: 0.5lh 0.5ch;
+  max-width: 80vw;
+}
 .reactions-popup .add-comment-reaction {
   display: inline-block;
   cursor: pointer;
-  border-radius: 5px;
-  font-size: 22px;
+  border-radius: 0.7vw;
   text-align: center;
-  line-height: 30px;
-  width: 40px;
+  line-height: 1.3;
+  font-size: 1.2em;
 }
 .reactions-popup .add-comment-reaction:hover {
   background-color: #b0c4de;
@@ -18,36 +24,36 @@
 .activities {
   clear: both;
 }
-.activities .activity {
-  margin: 0.5px 0;
-  padding: 6px 0;
+.activity {
   display: flex;
 }
-.activities .activity .member {
-  width: 32px;
-  height: 32px;
+.activities .activity {
+  margin: 0.1vh 0;
+  padding: 0.8vh 0;
+  display: flex;
+  font-size: 0.8em;
 }
 .activities .activity .activity-member {
   font-weight: 700;
 }
 .activities .activity .activity-desc {
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   overflow: hidden;
   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

@@ -199,4 +199,5 @@ template(name="activity")
       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 {{ moment activity.createdAt }}

client/components/activities/activities.js

@@ -1,5 +1,6 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import DOMPurify from 'dompurify';
+import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
 import { TAPi18n } from '/imports/i18n';
 
 const activitiesPerPage = 500;
@@ -216,15 +217,11 @@ BlazeComponent.extendComponent({
             {
               href: source.url,
             },
-            DOMPurify.sanitize(source.system, {
-              ALLOW_UNKNOWN_PROTOCOLS: true,
-            }),
+            sanitizeHTML(source.system),
           ),
         );
       } else {
-        return DOMPurify.sanitize(source.system, {
-          ALLOW_UNKNOWN_PROTOCOLS: true,
-        });
+        return sanitizeHTML(source.system);
       }
     }
     return null;
@@ -248,10 +245,10 @@ BlazeComponent.extendComponent({
               href: `${attachment.link()}?download=true`,
               target: '_blank',
             },
-            DOMPurify.sanitize(attachment.name),
+            sanitizeText(attachment.name),
           ),
         )) ||
-      DOMPurify.sanitize(this.currentData().activity.attachmentName)
+      sanitizeText(this.currentData().activity.attachmentName)
     );
   },
 
@@ -265,7 +262,7 @@ BlazeComponent.extendComponent({
 
 Template.activity.helpers({
   sanitize(value) {
-    return DOMPurify.sanitize(value, { ALLOW_UNKNOWN_PROTOCOLS: true });
+    return sanitizeHTML(value);
   },
 });
 
@@ -278,7 +275,7 @@ Template.commentReactions.events({
       cardComment.toggleReaction(codepoint);
     }
   },
-  'click .open-comment-reaction-popup': Popup.open('addReaction'),
+  'click .open-comment-reaction-popup': Popup.open('addReaction', {showHeader: false})
 })
 
 Template.addReactionPopup.events({
@@ -309,6 +306,11 @@ Template.addReactionPopup.helpers({
       '😊',
       '🤔',
       '😔'];
+  },
+  hasUserReacted(codepoint) {
+    const commentId = Template.instance().data.commentId;
+    const cardComment = ReactiveCache.getCardComment(commentId);
+    return cardComment.hasUserReacted(codepoint);
   }
 })
 
@@ -336,7 +338,7 @@ function createCardLink(card, board) {
           href: card.originRelativeUrl(),
           class: 'action-card',
         },
-        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        sanitizeHTML(text),
       ),
     )
   );
@@ -353,7 +355,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

@@ -1,12 +1,12 @@
 .new-comment {
   position: relative;
-  margin: 0 0 20px 38px;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  gap: 1ch;
 }
 .new-comment .member {
   opacity: 0.7;
-  position: absolute;
-  top: 1px;
-  left: -38px;
 }
 .new-comment.is-open .member {
   opacity: 1;
@@ -14,34 +14,44 @@
 .new-comment.is-open .helper {
   display: inline-block;
 }
-.new-comment.is-open textarea {
-  min-height: 100px;
-  color: #4d4d4d;
-  cursor: auto;
-  overflow: hidden;
-  word-wrap: break-word;
+
+.new-comment, .comment {
+  .is-open textarea {
+    min-height: 100px;
+    color: #4d4d4d;
+    cursor: auto;
+    overflow-wrap: break-word;
+  }
+  textarea {
+    grid-area: editor;
+    background-color: #fff;
+    border: 0;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+    min-height: 3lh;
+    &:hover, &.is-open {
+      cursor: auto;
+      background-color: #fff;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33);
+      border: 0;
+      cursor: pointer;
+    }
+  }
 }
+
 .new-comment .too-long {
   margin-top: 8px;
 }
-.new-comment textarea {
-  background-color: #fff;
-  border: 0;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
-  height: 36px;
-  margin: 4px 4px 6px 0;
-  padding: 9px 11px;
-  width: 100%;
-}
-.new-comment textarea:hover,
-.new-comment textarea:is-open {
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
-  border: 0;
-  cursor: pointer;
-}
-.new-comment textarea:is-open {
-  cursor: auto;
+
+.js-new-comment-form, .js-edit-comment {
+  display: grid !important;
+  grid-template-areas:
+    "editor editor editor editor"
+    "main-controls main-controls link-controls editor-controls";
+  grid-auto-columns: 1fr;
+  grid-auto-rows: min-content;
+  align-items: center;
+  flex: 1;
+  gap: 0.3lh;
 }
 .comment-item {
   background-color: #fff;
@@ -65,31 +75,30 @@
 }
 .comments {
   clear: both;
+  display: flex;
+  flex-direction: column;
+  gap: 1lh;
+  padding-top: 1lh;
 }
 .comments .comment {
-  margin: 0.5px 0;
-  padding: 6px 0;
   display: flex;
+  gap: 1ch;
 }
-.comments .comment .member {
-  width: 32px;
-  height: 32px;
-}
+
 .comments .comment .comment-member {
   font-weight: 700;
 }
 .comments .comment .comment-desc {
-  word-wrap: break-word;
-  overflow: hidden;
+  overflow-wrap: break-word;
   flex: 1;
   align-self: center;
   margin: 0;
-  margin-left: 3px;
-  overflow: hidden;
-  word-break: break-word;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3lh;
 }
 .comments .comment .comment-desc .comment-text {
-  display: block;
+  display: flex;
   border-radius: 3px;
   background: #fff;
   text-decoration: none;
@@ -101,6 +110,7 @@
   display: flex;
   margin-top: 5px;
   gap: 5px;
+  align-items: center;
 }
 .comments .comment .comment-desc .reactions .open-comment-reaction-popup {
   display: flex;
@@ -108,15 +118,11 @@
   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-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;
@@ -131,10 +137,14 @@
 .comments .comment .comment-desc .reactions .reaction:hover {
   background-color: #b0c4de;
 }
-.comments .comment .comment-desc .reactions .reaction .reaction-count {
-  font-size: 12px;
-}
 .comments .comment .comment-desc .comment-meta {
   font-size: 0.8em;
   color: #999;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  gap: 1ch;
+  align-items: center;
+  /* #FIXME maybe put date outside of comment body ?*/
+  margin-inline-start: -10vw;
 }

client/components/activities/comments.jade

@@ -25,7 +25,8 @@ 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
@@ -54,12 +55,14 @@ 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
     each codepoint in codepoints
-      span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
-
+      unless (hasUserReacted codepoint)
+        span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}

client/components/activities/comments.js

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

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: 0.8ch;
+  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-weight: 500;
+}
+
+.board-conversion-header h3 i {
+  margin-right: 8px;
+  color: #2196F3;
+}
+
+.board-conversion-header p {
+  margin: 0;
+  color: #666;
+
+}
+
+.board-conversion-content {
+  padding: 24px;
+}
+
+.conversion-progress {
+  margin-bottom: 20px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: #e0e0e0;
+  border-radius: 0.4ch;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #2196F3, #21CBF3);
+  border-radius: 0.4ch;
+  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;
+
+}
+
+.conversion-status {
+  text-align: center;
+  margin-bottom: 16px;
+  color: #333;
+
+}
+
+.conversion-status i {
+  margin-right: 8px;
+  color: #2196F3;
+}
+
+.conversion-time {
+  text-align: center;
+  color: #666;
+
+  background-color: #f5f5f5;
+  padding: 8px 12px;
+  border-radius: 0.4ch;
+  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;
+
+  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 {
+
+  }
+}

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,5 +1,6 @@
 template(name="archivedBoards")
   h2
+    span(title="{{_ 'archived-boards'}}")
     i.fa.fa-archive
     | {{_ 'archived-boards'}}
 
@@ -8,7 +9,7 @@ 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

client/components/boards/boardArchive.js

@@ -1,4 +1,5 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 
 BlazeComponent.extendComponent({
   onCreated() {
@@ -22,7 +23,7 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
-        'click .js-restore-board'() {
+        async 'click .js-restore-board'() {
           // TODO : Make isSandstorm variable global
           const isSandstorm =
             Meteor.settings &&
@@ -30,13 +31,13 @@ BlazeComponent.extendComponent({
             Meteor.settings.public.sandstorm;
           if (isSandstorm && Utils.getCurrentBoardId()) {
             const currentBoard = Utils.getCurrentBoard();
-            currentBoard.archive();
+            await currentBoard.archive();
           }
           const board = this.currentData();
-          board.restore();
+          await board.restore();
           Utils.goBoardId(board._id);
         },
-        'click .js-delete-board': Popup.afterConfirm('boardDelete', function() {
+        'click .js-delete-board': Popup.afterConfirm('boardDelete', async function() {
           Popup.back();
           const isSandstorm =
             Meteor.settings &&
@@ -44,9 +45,9 @@ BlazeComponent.extendComponent({
             Meteor.settings.public.sandstorm;
           if (isSandstorm && Utils.getCurrentBoardId()) {
             const currentBoard = Utils.getCurrentBoard();
-            Boards.remove(currentBoard._id);
+            await Boards.removeAsync(currentBoard._id);
           }
-          Boards.remove(this._id);
+          await Boards.removeAsync(this._id);
           FlowRouter.go('home');
         }),
       },

client/components/boards/boardBody.css

@@ -1,47 +1,125 @@
-.board-wrapper {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  overflow-x: hidden;
-  overflow-y: hidden;
+.swim-flex {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  padding-bottom: 40vw;
 }
+
+.board-wrapper {
+  display: flex;
+  flex: 1;
+  overflow: auto;
+}
+
 .board-wrapper .board-canvas {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
   transition: margin 0.1s;
   overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  /* don't stretch vertically if not needed (e.g collapsed) */
+  align-self: start;
+  flex: 1;
 }
-.board-wrapper .board-canvas .board-overlay {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  top: -100px;
-  right: -400px;
-  background: #000;
-  opacity: 0.33;
-  animation: fadeIn 0.2s;
-  z-index: 16;
+
+/* 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;
+}
+
+
+/* Force vertical scrollbar to always be visible */
+#content[style*="overflow-y: auto"] {
+  overflow-y: scroll !important;
+}
+
+
+/* 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;
+}
+
+/* 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) {
-  .board-wrapper .board-canvas .swimlane {
-    border-bottom: 1px solid #ccc;
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    padding: 0 0px 0px 0;
-    overflow-x: hidden;
-    overflow-y: auto;
+
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
+
+.board-wrapper .board-canvas .swimlane {
+    /* this effectively prevents board
+    to shrink */
+    min-width: 100vw;
   }
 }
 .calendar-event-green {
@@ -200,7 +278,6 @@
   justify-content: center;
   align-items: center;
   margin: 0;
-  font-size: 18px;
 }
 .modal-footer {
   display: flex;
@@ -213,9 +290,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  font-size: 25px;
   cursor: pointer;
 }
+
+/* Global file drag over state for board canvas */
+.board-canvas.file-drag-over {
+  background-color: rgba(0, 123, 255, 0.05) !important;
+  border: 2px dashed #007bff !important;
+  transition: all 0.2s ease;
+}

client/components/boards/boardBody.jade

@@ -1,10 +1,9 @@
 template(name="board")
-  if isBoardReady.get
+  if isConverting.get
+    +boardConversionProgress
+  else if isBoardReady.get
     if currentBoard
-      if onlyShowCurrentCard
-        +cardDetails(currentCard)
-      else
-        +boardBody
+      +boardBody
     else
       //-- XXX We need a better error message in case the board has been archived
       +message(label="board-not-found")
@@ -14,34 +13,45 @@ template(name="board")
 
 template(name="boardBody")
   if notDisplayThisBoard
-   | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
+    | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
   else
-    .board-wrapper(class=currentBoard.colorClass)
+    //- Debug information (remove in production)
+    if debugBoardState
+      //- Debug information (remove in production)
+      .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
-          .board-overlay
+        class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}"
+        class="{{#if isMiniScreen}}mobile-view{{/if}}")
         if currentBoard.isTemplatesBoard
-          each currentBoard.swimlanes
-            +swimlane(this)
-        else if isViewSwimlanes
-          if hasSwimlanes
+          .swim-flex
             each currentBoard.swimlanes
               +swimlane(this)
-          else
-            a.js-empty-board-add-swimlane(title="{{_ 'add-swimlane'}}")
-              h1.big-message.quiet
-                | {{_ 'add-swimlane'}} +
+        else if isViewSwimlanes
+          .swim-flex
+            if hasSwimlanes
+              each currentBoard.swimlanes
+                +swimlane(this)
+            else
+              // Fallback: If no swimlanes exist, show lists instead of empty message
+              +listsGroup(currentBoard)
         else if isViewLists
           +listsGroup(currentBoard)
         else if isViewCalendar
           +calendarView
+        else 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)
       +sidebar
 
 template(name="calendarView")
@@ -49,4 +59,4 @@ template(name="calendarView")
     .calendar-view.swimlane
       if currentCard
         +cardDetails(currentCard)
-      +fullcalendar(calendarOptions)
+      +fullcalendar(calendarOptions)

client/components/boards/boardBody.js

@@ -1,6 +1,12 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import '../gantt/gantt.js';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import { TAPi18n } from '/imports/i18n';
 import dragscroll from '@wekanteam/dragscroll';
+import { boardConverter } from '/client/lib/boardConverter';
+import { formatDateByUserPreference } from '/imports/lib/dateUtils';
+import Swimlanes from '/models/swimlanes';
+import Lists from '/models/lists';
 
 const subManager = new SubsManager();
 const { calculateIndex } = Utils;
@@ -9,6 +15,10 @@ const swimlaneWhileSortingHeight = 150;
 BlazeComponent.extendComponent({
   onCreated() {
     this.isBoardReady = new ReactiveVar(false);
+    this.isConverting = new ReactiveVar(false);
+    this._swimlaneCreated = new Set(); // Track boards where we've created swimlanes
+    this._boardProcessed = false; // Track if board has been processed
+    this._lastProcessedBoardId = null; // Track last processed board ID
 
     // The pattern we use to manually handle data loading is described here:
     // https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager
@@ -17,21 +27,114 @@ BlazeComponent.extendComponent({
     this.autorun(() => {
       const currentBoardId = Session.get('currentBoard');
       if (!currentBoardId) return;
+
       const handle = subManager.subscribe('board', currentBoardId, false);
-      Tracker.nonreactive(() => {
-        Tracker.autorun(() => {
-          this.isBoardReady.set(handle.ready());
-        });
+
+      // Use a separate autorun for subscription ready state to avoid reactive loops
+      this.subscriptionReadyAutorun = Tracker.autorun(() => {
+        if (handle.ready()) {
+          if (!this._boardProcessed || this._lastProcessedBoardId !== currentBoardId) {
+            this._boardProcessed = true;
+            this._lastProcessedBoardId = currentBoardId;
+
+            // Ensure default swimlane exists (only once per board)
+            this.ensureDefaultSwimlane(currentBoardId);
+            // Check if board needs conversion
+            this.checkAndConvertBoard(currentBoardId);
+          }
+        } else {
+          this.isBoardReady.set(false);
+        }
       });
     });
   },
 
+  onDestroyed() {
+    // Clean up the subscription ready autorun to prevent memory leaks
+    if (this.subscriptionReadyAutorun) {
+      this.subscriptionReadyAutorun.stop();
+    }
+  },
+
+  ensureDefaultSwimlane(boardId) {
+    // Only create swimlane once per board
+    if (this._swimlaneCreated.has(boardId)) {
+      return;
+    }
+
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) return;
+
+      const swimlanes = board.swimlanes();
+
+      if (swimlanes.length === 0) {
+        // Check if any swimlane exists in the database to avoid race conditions
+        const existingSwimlanes = ReactiveCache.getSwimlanes({ boardId });
+        if (existingSwimlanes.length === 0) {
+          const swimlaneId = Swimlanes.insert({
+            title: 'Default',
+            boardId: boardId,
+          });
+          if (process.env.DEBUG === 'true') {
+            console.log(`Created default swimlane ${swimlaneId} for board ${boardId}`);
+          }
+        }
+        this._swimlaneCreated.add(boardId);
+      } else {
+        this._swimlaneCreated.add(boardId);
+      }
+    } catch (error) {
+      console.error('Error creating default swimlane:', error);
+    }
+  },
+
+  async checkAndConvertBoard(boardId) {
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) {
+        this.isBoardReady.set(true);
+        return;
+      }
+
+      this.isBoardReady.set(true);
+
+    } catch (error) {
+      console.error('Error during board conversion check:', error);
+      this.isConverting.set(false);
+      this.isBoardReady.set(true); // Show board even if conversion check failed
+    }
+  },
   onlyShowCurrentCard() {
-    return Utils.isMiniScreen() && Utils.getCurrentCardId(true);
+    const isMiniScreen = Utils.isMiniScreen();
+    const currentCardId = Utils.getCurrentCardId(true);
+    return isMiniScreen && currentCardId;
+  },
+
+  openCards() {
+    // In desktop mode, return array of all open cards
+    const isMobile = Utils.isMiniScreen();
+    if (!isMobile) {
+      const openCardIds = Session.get('openCards') || [];
+      return openCardIds.map(id => ReactiveCache.getCard(id)).filter(card => card);
+    }
+    return [];
   },
 
   goHome() {
-    FlowRouter.go('home');
+    FlowRouter.go('home')
+  },
+
+  isConverting() {
+    return this.isConverting.get();
+  },
+
+  isBoardReady() {
+    return this.isBoardReady.get();
+  },
+
+  currentBoard() {
+    return Utils.getCurrentBoard();
   },
 }).register('board');
 
@@ -43,39 +146,241 @@ BlazeComponent.extendComponent({
     this._isDragging = false;
     // Used to set the overlay
     this.mouseHasEnterCardDetails = false;
+    this._sortFieldsFixed = new Set(); // Track which boards have had sort fields fixed
 
     // fix swimlanes sort field if there are null values
     const currentBoardData = Utils.getCurrentBoard();
-    const nullSortSwimlanes = currentBoardData.nullSortSwimlanes();
-    if (nullSortSwimlanes.length > 0) {
-      const swimlanes = currentBoardData.swimlanes();
-      let count = 0;
-      swimlanes.forEach(s => {
-        Swimlanes.update(s._id, {
-          $set: {
-            sort: count,
-          },
-        });
-        count += 1;
-      });
+    if (currentBoardData && Swimlanes) {
+      const boardId = currentBoardData._id;
+      // Only fix sort fields once per board to prevent reactive loops
+      if (!this._sortFieldsFixed.has(`swimlanes-${boardId}`)) {
+        const nullSortSwimlanes = currentBoardData.nullSortSwimlanes();
+        if (nullSortSwimlanes.length > 0) {
+          const swimlanes = currentBoardData.swimlanes();
+          let count = 0;
+          swimlanes.forEach(s => {
+            Swimlanes.update(s._id, {
+              $set: {
+                sort: count,
+              },
+            });
+            count += 1;
+          });
+        }
+        this._sortFieldsFixed.add(`swimlanes-${boardId}`);
+      }
     }
 
     // fix lists sort field if there are null values
-    const nullSortLists = currentBoardData.nullSortLists();
-    if (nullSortLists.length > 0) {
-      const lists = currentBoardData.lists();
-      let count = 0;
-      lists.forEach(l => {
-        Lists.update(l._id, {
-          $set: {
-            sort: count,
-          },
-        });
-        count += 1;
-      });
+    if (currentBoardData && Lists) {
+      const boardId = currentBoardData._id;
+      // Only fix sort fields once per board to prevent reactive loops
+      if (!this._sortFieldsFixed.has(`lists-${boardId}`)) {
+        const nullSortLists = currentBoardData.nullSortLists();
+        if (nullSortLists.length > 0) {
+          const lists = currentBoardData.lists();
+          let count = 0;
+          lists.forEach(l => {
+            Lists.update(l._id, {
+              $set: {
+                sort: count,
+              },
+            });
+            count += 1;
+          });
+        }
+        this._sortFieldsFixed.add(`lists-${boardId}`);
+      }
     }
   },
   onRendered() {
+    // Initialize user settings (mobile mode)
+    Utils.initializeUserSettings();
+
+    // Detect iPhone devices and add class for better CSS targeting
+    const isIPhone = /iPhone|iPod/.test(navigator.userAgent);
+    if (isIPhone) {
+      document.body.classList.add('iphone-device');
+    }
+
+    // Accessibility: Focus management for popups and menus
+    function focusFirstInteractive(container) {
+      if (!container) return;
+      // Find first focusable element
+      const focusable = container.querySelectorAll('button, [role="button"], a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      for (let i = 0; i < focusable.length; i++) {
+        if (!focusable[i].disabled && focusable[i].offsetParent !== null) {
+          focusable[i].focus();
+          break;
+        }
+      }
+    }
+
+    // Observe for new popups/menus and set focus (but exclude swimlane content)
+    const popupObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        mutation.addedNodes.forEach(function(node) {
+          if (node.nodeType === 1 &&
+              (node.classList.contains('popup') || node.classList.contains('modal') || node.classList.contains('menu')) &&
+              !node.closest('.js-swimlanes') &&
+              !node.closest('.swimlane') &&
+              !node.closest('.list') &&
+              !node.closest('.minicard')) {
+            setTimeout(function() { focusFirstInteractive(node); }, 10);
+          }
+        });
+      });
+    });
+    popupObserver.observe(document.body, { childList: true, subtree: true });
+
+    // Remove tabindex from non-interactive elements (e.g., user abbreviations, labels)
+    document.querySelectorAll('.user-abbreviation, .user-label, .card-header-label, .edit-label, .private-label').forEach(function(el) {
+      if (el.hasAttribute('tabindex')) {
+        el.removeAttribute('tabindex');
+      }
+    });
+    /*
+    // Add a toggle button for keyboard shortcuts accessibility
+    if (!document.getElementById('wekan-shortcuts-toggle')) {
+      const toggleContainer = document.createElement('div');
+      toggleContainer.id = 'wekan-shortcuts-toggle';
+      toggleContainer.style.position = 'fixed';
+      toggleContainer.style.top = '10px';
+      toggleContainer.style.right = '10px';
+      toggleContainer.style.zIndex = '1000';
+      toggleContainer.style.background = '#fff';
+      toggleContainer.style.border = '2px solid #005fcc';
+      toggleContainer.style.borderRadius = '6px';
+      toggleContainer.style.padding = '8px 12px';
+      toggleContainer.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+      toggleContainer.style.fontSize = '16px';
+      toggleContainer.style.color = '#005fcc';
+      toggleContainer.setAttribute('role', 'region');
+      toggleContainer.setAttribute('aria-label', 'Keyboard Shortcuts Settings');
+      toggleContainer.innerHTML = `
+        <label for="shortcuts-toggle-checkbox" style="cursor:pointer;">
+          <input type="checkbox" id="shortcuts-toggle-checkbox" ${window.wekanShortcutsEnabled ? 'checked' : ''} style="margin-right:8px;" />
+          Enable keyboard shortcuts
+        </label>
+      `;
+      document.body.appendChild(toggleContainer);
+      const checkbox = document.getElementById('shortcuts-toggle-checkbox');
+      checkbox.addEventListener('change', function(e) {
+        window.toggleWekanShortcuts(e.target.checked);
+      });
+    }
+    */
+    // Ensure toggle-buttons, color choices, reactions, renaming, and calendar controls are focusable and have ARIA roles
+    document.querySelectorAll('.js-toggle').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      // Short, descriptive label for favorite/star toggle
+      if (el.classList.contains('js-favorite-toggle')) {
+        el.setAttribute('aria-label', TAPi18n.__('favorite-toggle-label'));
+      } else {
+        el.setAttribute('aria-label', 'Toggle');
+      }
+    });
+    document.querySelectorAll('.js-color-choice').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Choose color');
+    });
+    document.querySelectorAll('.js-reaction').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'React');
+    });
+    document.querySelectorAll('.js-rename-swimlane').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Rename swimlane');
+    });
+    document.querySelectorAll('.js-rename-list').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Rename list');
+    });
+    document.querySelectorAll('.fc-button').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+    });
+    // Set the language attribute on the <html> element for accessibility
+    document.documentElement.lang = TAPi18n.getLanguage();
+
+    // Ensure the accessible name for the board view switcher matches the visible label "Swimlanes"
+    // This fixes WCAG 2.5.3: Label in Name
+    const swimlanesSwitcher = this.$('.js-board-view-swimlanes');
+    if (swimlanesSwitcher.length) {
+      swimlanesSwitcher.attr('aria-label', swimlanesSwitcher.text().trim() || 'Swimlanes');
+    }
+
+    // Add a highly visible focus indicator and improve contrast for interactive elements
+    if (!document.getElementById('wekan-accessible-focus-style')) {
+      const style = document.createElement('style');
+      style.id = 'wekan-accessible-focus-style';
+      style.innerHTML = `
+        /* Focus indicator */
+        button:focus, [role="button"]:focus, a:focus, input:focus, select:focus, textarea:focus, .dropdown-menu:focus, .js-board-view-swimlanes:focus, .js-add-card:focus {
+          outline: 3px solid #005fcc !important;
+          outline-offset: 2px !important;
+        }
+        /* Input borders */
+        input, textarea, select {
+          border: 2px solid #222 !important;
+        }
+        /* Plus icon for adding a new card */
+        .js-add-card {
+          color: #005fcc !important; /* dark blue for contrast */
+          cursor: pointer;
+          outline: none;
+        }
+        .js-add-card[tabindex] {
+          outline: none;
+        }
+        /* Sidebar hamburger menu button in header */
+        .js-toggle-sidebar .fa-bars {
+          color: #fff !important;
+        }
+        /* Grey icons in card detail header */
+        .card-detail-header .fa, .card-detail-header .icon {
+          color: #444 !important;
+        }
+        /* Grey operating elements in card detail */
+        .card-detail .fa, .card-detail .icon {
+          color: #444 !important;
+        }
+        /* Blue bar in checklists */
+        .checklist-progress-bar {
+          background-color: #005fcc !important;
+        }
+        /* Green checkmark in checklists */
+        .checklist .fa-check {
+          color: #007a33 !important;
+        }
+        /* X-Button and arrow button in menus */
+        .close, .fa-arrow-left, .icon-arrow-left {
+          color: #005fcc !important;
+        }
+        /* Cross icon to move boards */
+        .js-move-board {
+          color: #005fcc !important;
+        }
+        /* Current date background */
+        .current-date {
+          background-color: #005fcc !important;
+          color: #fff !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    // Ensure plus/add elements are focusable and have ARIA roles
+    document.querySelectorAll('.js-add-card').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Add new card');
+    });
+
     const boardComponent = this;
     const $swimlanesDom = boardComponent.$('.js-swimlanes');
 
@@ -85,23 +390,24 @@ BlazeComponent.extendComponent({
       helper(evt, item) {
         const helper = $(`<div class="swimlane"
                                style="flex-direction: column;
-                                      height: ${swimlaneWhileSortingHeight}px;
-                                      width: $(boardComponent.width)px;
-                                      overflow: hidden;"/>`);
+                                      max-height: 30vh;
+                                      width: 100vw;
+                                      overflow: hidden; z-index: 100;"/>`);
         helper.append(item.clone());
         // Also grab the list of lists of cards
         const list = item.next();
         helper.append(list.clone());
         return helper;
       },
-      items: '.swimlane:not(.placeholder)',
+      items: '.swimlane-container',
       placeholder: 'swimlane placeholder',
       distance: 7,
       start(evt, ui) {
         const listDom = ui.placeholder.next('.js-swimlane');
         const parentOffset = ui.item.parent().offset();
 
-        ui.placeholder.height(ui.helper.height());
+        height = ui.helper.height();
+        ui.placeholder[0].setAttribute('style', `height: ${height}px !important;`);
         EscapeActions.executeUpTo('popup-close');
         listDom.addClass('moving-swimlane');
         boardComponent.setIsDragging(true);
@@ -109,40 +415,19 @@ BlazeComponent.extendComponent({
         ui.placeholder.insertAfter(ui.placeholder.next());
         boardComponent.origPlaceholderIndex = ui.placeholder.index();
 
-        // resize all swimlanes + headers to be a total of 150 px per row
-        // this could be achieved by setIsDragging(true) but we want immediate
-        // result
-        ui.item
-          .siblings('.js-swimlane')
-          .css('height', `${swimlaneWhileSortingHeight - 26}px`);
-
-        // set the new scroll height after the resize and insertion of
-        // the placeholder. We want the element under the cursor to stay
-        // at the same place on the screen
-        ui.item.parent().get(0).scrollTop =
-          ui.placeholder.get(0).offsetTop + parentOffset.top - evt.pageY;
       },
       beforeStop(evt, ui) {
-        const parentOffset = ui.item.parent().offset();
         const siblings = ui.item.siblings('.js-swimlane');
         siblings.css('height', '');
 
-        // compute the new scroll height after the resize and removal of
-        // the placeholder
-        const scrollTop =
-          ui.placeholder.get(0).offsetTop + parentOffset.top - evt.pageY;
-
         // then reset the original view of the swimlane
         siblings.removeClass('moving-swimlane');
-
-        // and apply the computed scrollheight
-        ui.item.parent().get(0).scrollTop = scrollTop;
       },
       stop(evt, ui) {
         // To attribute the new index number, we need to get the DOM element
         // of the previous and the following card -- if any.
-        const prevSwimlaneDom = ui.item.prevAll('.js-swimlane').get(0);
-        const nextSwimlaneDom = ui.item.nextAll('.js-swimlane').get(0);
+        const prevSwimlaneDom = ui.item.prevAll('.swimlane-container').get(0);
+        const nextSwimlaneDom = ui.item.nextAll('.swimlane-container').get(0);
         const sortIndex = calculateIndex(prevSwimlaneDom, nextSwimlaneDom, 1);
 
         $swimlanesDom.sortable('cancel');
@@ -158,39 +443,7 @@ BlazeComponent.extendComponent({
         boardComponent.setIsDragging(false);
       },
       sort(evt, ui) {
-        // get the mouse position in the sortable
-        const parentOffset = ui.item.parent().offset();
-        const cursorY =
-          evt.pageY - parentOffset.top + ui.item.parent().scrollTop();
-
-        // compute the intended index of the placeholder (we need to skip the
-        // slots between the headers and the list of cards)
-        const newplaceholderIndex = Math.floor(
-          cursorY / swimlaneWhileSortingHeight,
-        );
-        let destPlaceholderIndex = (newplaceholderIndex + 1) * 2;
-
-        // if we are scrolling far away from the bottom of the list
-        if (destPlaceholderIndex >= ui.item.parent().get(0).childElementCount) {
-          destPlaceholderIndex = ui.item.parent().get(0).childElementCount - 1;
-        }
-
-        // update the placeholder position in the DOM tree
-        if (destPlaceholderIndex !== ui.placeholder.index()) {
-          if (destPlaceholderIndex < boardComponent.origPlaceholderIndex) {
-            ui.placeholder.insertBefore(
-              ui.placeholder
-                .siblings()
-                .slice(destPlaceholderIndex - 2, destPlaceholderIndex - 1),
-            );
-          } else {
-            ui.placeholder.insertAfter(
-              ui.placeholder
-                .siblings()
-                .slice(destPlaceholderIndex - 1, destPlaceholderIndex),
-            );
-          }
-        }
+        Utils.scrollIfNeeded(evt);
       },
     });
 
@@ -198,22 +451,20 @@ BlazeComponent.extendComponent({
       // Always reset dragscroll on view switch
       dragscroll.reset();
 
-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $swimlanesDom.sortable({
-          handle: '.js-swimlane-header-handle',
-        });
-      } else {
-        $swimlanesDom.sortable({
-          handle: '.swimlane-header',
-        });
-      }
+      if ($swimlanesDom.data('uiSortable') || $swimlanesDom.data('sortable')) {
+        if (Utils.isMiniScreen()) {
+          $swimlanesDom.sortable('option', 'handle', '.js-swimlane-header-handle');
+        } else {
+          $swimlanesDom.sortable('option', 'handle', '.swimlane-header-wrap');
+        }
 
-      // Disable drag-dropping if the current user is not a board member
-      $swimlanesDom.sortable(
-        'option',
-        'disabled',
-        !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
-      );
+        // Disable drag-dropping if the current user is not a board member
+        $swimlanesDom.sortable(
+          'option',
+          'disabled',
+          !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
+        );
+      }
     });
 
     // If there is no data in the board (ie, no lists) we autofocus the list
@@ -230,51 +481,132 @@ BlazeComponent.extendComponent({
   notDisplayThisBoard() {
     let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');
     let currentBoard = Utils.getCurrentBoard();
-    if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue && currentBoard.permission == 'public') {
-      return true;
-    }
-
-    return false;
+    return allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue && currentBoard && currentBoard.permission == 'public';
   },
 
   isViewSwimlanes() {
     const currentUser = ReactiveCache.getCurrentUser();
-    if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-swimlanes';
-    } else {
-      return (
-        window.localStorage.getItem('boardView') === 'board-view-swimlanes'
-      );
-    }
-  },
+    let boardView;
 
-  hasSwimlanes() {
-    return Utils.getCurrentBoard().swimlanes().length > 0;
+    if (currentUser) {
+      boardView = (currentUser.profile || {}).boardView;
+    } else {
+      boardView = window.localStorage.getItem('boardView');
+    }
+
+    // If no board view is set, default to swimlanes
+    if (!boardView) {
+      boardView = 'board-view-swimlanes';
+    }
+
+    return boardView === 'board-view-swimlanes';
   },
 
   isViewLists() {
     const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+
     if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-lists';
+      boardView = (currentUser.profile || {}).boardView;
     } else {
-      return window.localStorage.getItem('boardView') === 'board-view-lists';
+      boardView = window.localStorage.getItem('boardView');
     }
+
+    return boardView === 'board-view-lists';
   },
 
   isViewCalendar() {
     const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+
     if (currentUser) {
-      return (currentUser.profile || {}).boardView === 'board-view-cal';
+      boardView = (currentUser.profile || {}).boardView;
     } else {
-      return window.localStorage.getItem('boardView') === 'board-view-cal';
+      boardView = window.localStorage.getItem('boardView');
+    }
+
+    return boardView === 'board-view-cal';
+  },
+
+  isViewGantt() {
+    const currentUser = ReactiveCache.getCurrentUser();
+    let boardView;
+
+    if (currentUser) {
+      boardView = (currentUser.profile || {}).boardView;
+    } else {
+      boardView = window.localStorage.getItem('boardView');
+    }
+
+    return boardView === 'board-view-gantt';
+  },
+
+  hasSwimlanes() {
+    const currentBoard = Utils.getCurrentBoard();
+    if (!currentBoard) {
+      if (process.env.DEBUG === 'true') {
+        console.log('hasSwimlanes: No current board');
+      }
+      return false;
+    }
+
+    try {
+      const swimlanes = currentBoard.swimlanes();
+      const hasSwimlanes = swimlanes && swimlanes.length > 0;
+      if (process.env.DEBUG === 'true') {
+        console.log('hasSwimlanes: Board has', swimlanes ? swimlanes.length : 0, 'swimlanes');
+      }
+      return hasSwimlanes;
+    } catch (error) {
+      console.error('hasSwimlanes: Error getting swimlanes:', error);
+      return false;
     }
   },
 
+
   isVerticalScrollbars() {
     const user = ReactiveCache.getCurrentUser();
     return user && user.isVerticalScrollbars();
   },
 
+  boardView() {
+    return Utils.boardView();
+  },
+
+  debugBoardState() {
+    // Enable debug mode by setting ?debug=1 in URL
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get('debug') === '1';
+  },
+
+  debugBoardStateData() {
+    const currentBoard = Utils.getCurrentBoard();
+    const currentBoardId = Session.get('currentBoard');
+    const isBoardReady = this.isBoardReady.get();
+    const isConverting = this.isConverting.get();
+    const boardView = Utils.boardView();
+
+    if (process.env.DEBUG === 'true') {
+      console.log('=== BOARD DEBUG STATE ===');
+      console.log('currentBoardId:', currentBoardId);
+      console.log('currentBoard:', !!currentBoard, currentBoard ? currentBoard.title : 'none');
+      console.log('isBoardReady:', isBoardReady);
+      console.log('isConverting:', isConverting);
+      console.log('boardView:', boardView);
+      console.log('========================');
+    }
+
+    return {
+      currentBoardId,
+      hasCurrentBoard: !!currentBoard,
+      currentBoardTitle: currentBoard ? currentBoard.title : 'none',
+      isBoardReady,
+      isConverting,
+      boardView
+    };
+  },
+
+
   openNewListForm() {
     if (this.isViewSwimlanes()) {
       // The form had been removed in 416b17062e57f215206e93a85b02ef9eb1ab4902
@@ -298,6 +630,31 @@ BlazeComponent.extendComponent({
           }
         },
         'click .js-empty-board-add-swimlane': Popup.open('swimlaneAdd'),
+        // Global drag and drop file upload handlers for better visual feedback
+        'dragover .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            // Add visual indicator that files can be dropped
+            $('.board-canvas').addClass('file-drag-over');
+          }
+        },
+        'dragleave .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            // Only remove class if we're leaving the board canvas entirely
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              $('.board-canvas').removeClass('file-drag-over');
+            }
+          }
+        },
+        'drop .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            $('.board-canvas').removeClass('file-drag-over');
+          }
+        },
       },
     ];
   },
@@ -326,8 +683,109 @@ BlazeComponent.extendComponent({
   },
 }).register('boardBody');
 
+// Accessibility: Allow users to enable/disable keyboard shortcuts
+window.wekanShortcutsEnabled = true;
+window.toggleWekanShortcuts = function(enabled) {
+  window.wekanShortcutsEnabled = !!enabled;
+};
+
+// Example: Wrap your character key shortcut handler like this
+document.addEventListener('keydown', function(e) {
+  // Example: "W" key shortcut (replace with your actual shortcut logic)
+  if (!window.wekanShortcutsEnabled) return;
+  if (e.key === 'w' || e.key === 'W') {
+    // ...existing shortcut logic...
+    // e.g. open swimlanes view, etc.
+  }
+});
+
+// Keyboard accessibility for card actions (favorite, archive, duplicate, etc.)
+document.addEventListener('keydown', function(e) {
+  if (!window.wekanShortcutsEnabled) return;
+  // Only proceed if focus is on a card action element
+  const active = document.activeElement;
+  if (active && active.classList.contains('js-card-action')) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      active.click();
+    }
+    // Move card up/down with arrow keys
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (active.dataset.cardId) {
+        Meteor.call('moveCardUp', active.dataset.cardId);
+      }
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (active.dataset.cardId) {
+        Meteor.call('moveCardDown', active.dataset.cardId);
+      }
+    }
+  }
+  // Make plus/add elements keyboard accessible
+  if (active && active.classList.contains('js-add-card')) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      active.click();
+    }
+  }
+  // Keyboard move for cards (alternative to drag & drop)
+  if (active && active.classList.contains('js-move-card')) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (active.dataset.cardId) {
+        Meteor.call('moveCardUp', active.dataset.cardId);
+      }
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (active.dataset.cardId) {
+        Meteor.call('moveCardDown', active.dataset.cardId);
+      }
+    }
+  }
+    // Ensure move card buttons are focusable and have ARIA roles
+    document.querySelectorAll('.js-move-card').forEach(function(el) {
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'button');
+      el.setAttribute('aria-label', 'Move card');
+    });
+  // Make toggle-buttons, color choices, reactions, and X-buttons keyboard accessible
+  if (active && (active.classList.contains('js-toggle') || active.classList.contains('js-color-choice') || active.classList.contains('js-reaction') || active.classList.contains('close'))) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      active.click();
+    }
+  }
+  // Prevent scripts from removing focus when received
+  if (active) {
+    active.addEventListener('focus', function(e) {
+      // Do not remove focus
+      // No-op: This prevents F55 failure
+    }, { once: true });
+  }
+  // Make swimlane/list renaming keyboard accessible
+  if (active && (active.classList.contains('js-rename-swimlane') || active.classList.contains('js-rename-list'))) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      active.click();
+    }
+  }
+  // Calendar navigation buttons
+  if (active && active.classList.contains('fc-button')) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      active.click();
+    }
+  }
+});
+
 BlazeComponent.extendComponent({
   onRendered() {
+    // Set the language attribute on the <html> element for accessibility
+    document.documentElement.lang = TAPi18n.getLanguage();
+
     this.autorun(function () {
       $('#calendar-view').fullCalendar('refetchEvents');
     });
@@ -341,11 +799,19 @@ BlazeComponent.extendComponent({
       timezone: 'local',
       weekNumbers: true,
       header: {
-        left: 'title   today prev,next',
+          left: 'title   today prev,next',
         center:
           'agendaDay,listDay,timelineDay agendaWeek,listWeek,timelineWeek month,listMonth',
         right: '',
       },
+        buttonText: {
+          prev: TAPi18n.__('calendar-previous-month-label'), // e.g. "Previous month"
+          next: TAPi18n.__('calendar-next-month-label'), // e.g. "Next month"
+        },
+        ariaLabel: {
+          prev: TAPi18n.__('calendar-previous-month-label'),
+          next: TAPi18n.__('calendar-next-month-label'),
+        },
       // height: 'parent', nope, doesn't work as the parent might be small
       height: 'auto',
       /* TODO: lists as resources: https://fullcalendar.io/docs/vertical-resource-view */
@@ -465,9 +931,13 @@ BlazeComponent.extendComponent({
             const firstSwimlane = currentBoard.swimlanes()[0];
             Meteor.call('createCardWithDueDate', currentBoard._id, firstList._id, myTitle, startDate.toDate(), firstSwimlane._id, function(error, result) {
               if (error) {
-                console.log(error);
+                if (process.env.DEBUG === 'true') {
+                  console.log(error);
+                }
               } else {
-                console.log("Card Created", result);
+                if (process.env.DEBUG === 'true') {
+                  console.log("Card Created", result);
+                }
               }
             });
             closeModal();
@@ -476,6 +946,9 @@ BlazeComponent.extendComponent({
         document.body.appendChild(modalElement);
         const openModal = function() {
           modalElement.style.display = 'flex';
+          // Set focus to the input field for better keyboard accessibility
+          const input = modalElement.querySelector('#card-title-input');
+          if (input) input.focus();
         };
         const closeModal = function() {
           modalElement.style.display = 'none';
@@ -495,3 +968,7 @@ BlazeComponent.extendComponent({
     }
   },
 }).register('calendarView');
+/**
+ * Gantt View Component
+ * Displays cards as a Gantt chart with start/due dates
+ */

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,100 @@
   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;
+}
+
+.board-header {
+  display: grid;
+  flex: 1;
+  gap: 0.3lh;
+}
+
+body {
+  &.mobile-mode {
+    .board-header {
+      flex-wrap: wrap;
+    }
+  }
+  &:not(.mobile-mode) {
+    .header-board-menu {
+      flex: 1;
+    }
+    .board-header {
+      justify-content: space-between;
+      grid-auto-flow: column;
+    }
+    .board-header-btns-left {
+      flex: 1;
+      justify-content: center;
+    }
+    .board-header-btns-right {
+      flex-grow: 0;
+      justify-content: end;
+    }
+    & .board-header-btns-right,
+    & .board-header-btns-left,
+    & .header-board-menu {
+      align-self: center;
+      align-items: center;
+      display: flex;
+      gap: 1.5ch;
+      overflow-wrap: normal;
+    }
+  }
+}
+
+/* Make some space on intermediate layouts */
+@media screen and (max-width: 1200px) {
+  .board-header-btns-right span {
+    display: none !important;
+  }
+}
+.header-board-menu, .board-header-btns {
+  display: flex;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  & p {
+    margin: 0;
+  }
+}
+
+.board-header-btns-right > a {
+  flex-wrap: no-wrap;
+}
+body.mobile-mode {
+  header-board-menu h1 {
+    font-size: 2em;
+  }
+  .board-header-btn {
+    /* avoid wrapping if possible, at the cost of little icons */
+    font-size: 0.5em;
+    /* no much choice because the way FA icons are inserted */
+    padding-top: 0.1lh;
+    min-height: 0.8lh;
+  }
+  .board-header-btns-right {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: repeat(auto-fit, 1fr);
+    flex: 1;
+    gap: 1ch;
+    justify-content: start;
+    align-items: center;
+  }
+}
+.board-header-btns-left {
+  display: flex;
+  flex: 1;
+  gap: 2ch;
+  padding: 0 0.5ch;
 }

client/components/boards/boardHeader.jade

@@ -1,126 +1,115 @@
 template(name="boardHeaderBar")
-  h1.header-board-menu
-    with currentBoard
-      if $eq title 'Templates'
-        | {{_ 'templates'}}
-      else
-        +viewer
-          = title
+  .board-header
+    .header-board-menu
+      with currentBoard
+        if $eq title 'Templates'
+          | {{_ 'templates'}}
+        else
+          +viewer
+            = title
+          if currentBoard
+            if currentUser
+              with currentBoard
+                if currentUser.isBoardAdmin
+                  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
+      unless isMiniScreen
+        .board-header-btns-left
+          if currentBoard
+            if currentUser
+              with currentBoard
+                a.board-header-btn(
+                  class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+                  title="{{_ currentBoard.permission}}")
+                  i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+                  span {{_ currentBoard.permission}}
 
-  .board-header-btns.left
-    unless isMiniScreen
+                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
+
+            else
+              a.board-header-btn.js-log-in(
+                title="{{_ 'log-in'}}")
+                i.fa.fa-sign-in
+                span {{_ 'log-in'}}
+
+    .board-header-btns-right
+      .separator
       if currentBoard
-        if currentUser
-          with currentBoard
-            if currentUser.isBoardAdmin
+        if isMiniScreen
+          if currentUser
+            with currentBoard
               a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
                 i.fa.fa-pencil-square-o
+              a.board-header-btn(
+                class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+                title="{{_ currentBoard.permission}}")
+                i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
 
-          a.board-header-btn.js-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.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
+            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
             if isSortActive
               a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                 i.fa.fa-times-thin
 
-        else
-          a.board-header-btn.js-log-in(
-            title="{{_ 'log-in'}}")
-            i.fa.fa-sign-in
-            span {{_ 'log-in'}}
+          else
+            a.board-header-btn.js-log-in(
+              title="{{_ 'log-in'}}")
+              i.fa.fa-sign-in
 
-  .board-header-btns.right
-    if currentBoard
-      if isMiniScreen
-        if currentUser
-          with currentBoard
-            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
-              i.fa.fa-pencil-square-o
+        if isSandstorm
+          if currentUser
+            a.js-open-archived-board
+              i.fa.fa-archive
 
-          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
+        //if showSort
+        //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
+        //    i.fa(class="{{directionClass}}")
+        //    span {{_ 'sort'}}{{_ listSortShortDesc}}
 
-          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-open-filter-view(
+            title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
+            class="{{#if Filter.isActive}}js-filter-active{{/if}}")
+          i.fa.fa-filter
+          span {{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}
+          if Filter.isActive
+            a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
+              i.fa.fa-times-thin
 
-          a.board-header-btn.js-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}}
-            if isSortActive
-              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
-                i.fa.fa-times-thin
-
-        else
-          a.board-header-btn.js-log-in(
-            title="{{_ 'log-in'}}")
-            i.fa.fa-sign-in
-            span {{_ 'log-in'}}
-
-      if isSandstorm
-        if currentUser
-          a.board-header-btn.js-open-archived-board
-            i.fa.fa-archive
-            span {{_ 'archives'}}
-
-      //if showSort
-      //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
-      //    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}}")
-        i.fa.fa-filter
-        span {{#if Filter.isActive}}{{_ 'filter-on'}}{{else}}{{_ 'filter'}}{{/if}}
-        if Filter.isActive
-          a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
-            i.fa.fa-times-thin
-
-      a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
-        i.fa.fa-search
-        span {{_ 'search'}}
+        a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
+          i.fa.fa-search
+          span {{_ 'search'}}
 
       unless currentBoard.isTemplatesBoard
-        a.board-header-btn.js-toggle-board-view(
-          title="{{_ 'board-view'}}")
+        a.board-header-btn.js-toggle-board-view
           i.fa.fa-caret-down
           if $eq boardView 'board-view-swimlanes'
             i.fa.fa-th-large
@@ -128,8 +117,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}}"
@@ -140,16 +138,16 @@ template(name="boardHeaderBar")
             a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
               i.fa.fa-times-thin
 
-      .separator
-      a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
-        i.fa.fa-navicon
+        .separator
+        a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
+          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 +156,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,26 +170,29 @@ template(name="boardChangeWatchPopup")
     li
       with "watching"
         a.js-select-watch
-          i.fa.fa-eye.colorful
-          | {{_ 'watching'}}
-          if watchCheck
-            i.fa.fa-check
+          span
+            i.fa.fa-eye
+            | {{_ 'watching'}}
+            if watchCheck
+              i.fa.fa-check
           span.sub-name {{_ 'watching-info'}}
     li
       with "tracking"
         a.js-select-watch
-          i.fa.fa-bell.colorful
-          | {{_ 'tracking'}}
-          if watchCheck
-            i.fa.fa-check
+          span
+            i.fa.fa-bell
+            | {{_ 'tracking'}}
+            if watchCheck
+              i.fa.fa-check
           span.sub-name {{_ 'tracking-info'}}
     li
       with "muted"
         a.js-select-watch
-          i.fa.fa-bell-slash.colorful
-          | {{_ 'muted'}}
-          if watchCheck
-            i.fa.fa-check
+          span
+            i.fa.fa-bell-slash
+            | {{_ 'muted'}}
+            if watchCheck
+              i.fa.fa-check
           span.sub-name {{_ 'muted-info'}}
 
 template(name="boardChangeViewPopup")
@@ -199,24 +200,31 @@ template(name="boardChangeViewPopup")
     li
       with "board-view-swimlanes"
         a.js-open-swimlanes-view
-          i.fa.fa-th-large.colorful
-          | {{_ 'board-view-swimlanes'}}
+          i.fa.fa-th-large
+          | {{_ 'swimlanes'}}
           if $eq Utils.boardView "board-view-swimlanes"
             i.fa.fa-check
     li
       with "board-view-lists"
         a.js-open-lists-view
-          i.fa.fa-trello.colorful
+          i.fa.fa-trello
           | {{_ 'board-view-lists'}}
           if $eq Utils.boardView "board-view-lists"
             i.fa.fa-check
     li
       with "board-view-cal"
         a.js-open-cal-view
-          i.fa.fa-calendar.colorful
+          i.fa.fa-calendar
           | {{_ 'board-view-cal'}}
           if $eq Utils.boardView "board-view-cal"
             i.fa.fa-check
+    li
+      with "board-view-gantt"
+        a.js-open-gantt-view
+          i.fa.fa-bar-chart
+          | {{_ 'board-view-gantt'}}
+          if $eq Utils.boardView "board-view-gantt"
+            i.fa.fa-check
 
 template(name="createBoard")
   form
@@ -240,12 +248,74 @@ template(name="createBoard")
       .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'}}
+    .create-element-foooter
+      span.quiet
+        | {{_ 'or'}}
+        a.js-import-board {{_ 'import'}}
+      span.quiet
+        | /
+        a.js-board-template {{_ 'template'}}
+
+template(name="createBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen.get
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility.get 'public'
+          span.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'}}")
+    .create-element-foooter
+      span.quiet
+        | {{_ 'or'}}
+        a.js-import-board {{_ 'import'}}
+      span.quiet
+        | /
+        a.js-board-template {{_ 'template'}}
+
+// New popup for Template Container creation; shares the same form content
+template(name="createTemplateContainerPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen.get
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility.get 'public'
+          span.fa.fa-globe.colorful
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
+    .create-element-foooter
+      input.primary.wide(type="submit" value="{{_ 'create'}}")
+      span.quiet
+        | {{_ 'or'}}
+        a.js-import-board {{_ 'import'}}
+      span.quiet
+        | /
+        a.js-board-template {{_ 'template'}}
 
 //template(name="listsortPopup")
 //  h2
@@ -256,11 +326,10 @@ template(name="createBoard")
 //     li
 //      a.js-sort-by(name="{{value.name}}")
 //        if $eq sortby value.name
-//           i(class="fa {{Direction}}")
+//           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
 //        | {{_ value.label }}{{_ value.shortLabel}}
 //        if $eq sortby value.name
-//           i(class="fa fa-check")
-
+//           i.fa.fa-check
 template(name="boardChangeTitlePopup")
   form
     label
@@ -279,14 +348,21 @@ 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,5 +1,6 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 import dragscroll from '@wekanteam/dragscroll';
 
 /*
@@ -9,7 +10,7 @@ const UPCLS = 'fa-sort-up';
 const sortCardsBy = new ReactiveVar('');
 
 Template.boardChangeTitlePopup.events({
-  submit(event, templateInstance) {
+  async submit(event, templateInstance) {
     const newTitle = templateInstance
       .$('.js-board-name')
       .val()
@@ -19,8 +20,8 @@ Template.boardChangeTitlePopup.events({
       .val()
       .trim();
     if (newTitle) {
-      this.rename(newTitle);
-      this.setDescription(newDesc);
+      await this.rename(newTitle);
+      await this.setDescription(newDesc);
       Popup.back();
     }
     event.preventDefault();
@@ -32,7 +33,6 @@ BlazeComponent.extendComponent({
     const currentBoard = Utils.getCurrentBoard();
     return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
   },
-
   isStarred() {
     const boardId = Session.get('currentBoard');
     const user = ReactiveCache.getCurrentUser();
@@ -70,7 +70,10 @@ BlazeComponent.extendComponent({
       {
         'click .js-edit-board-title': Popup.open('boardChangeTitle'),
         'click .js-star-board'() {
-          ReactiveCache.getCurrentUser().toggleBoardStar(Session.get('currentBoard'));
+          const boardId = Session.get('currentBoard');
+          if (boardId) {
+            Meteor.call('toggleBoardStar', boardId);
+          }
         },
         'click .js-open-board-menu': Popup.open('boardMenu'),
         'click .js-change-visibility': Popup.open('boardChangeVisibility'),
@@ -80,10 +83,37 @@ BlazeComponent.extendComponent({
         },
         'click .js-toggle-board-view': Popup.open('boardChangeView'),
         'click .js-toggle-sidebar'() {
-          Sidebar.toggle();
+          if (process.env.DEBUG === 'true') {
+            console.log('Hamburger menu clicked');
+          }
+          // Use the same approach as keyboard shortcuts
+          if (typeof Sidebar !== 'undefined' && Sidebar && typeof Sidebar.toggle === 'function') {
+            if (process.env.DEBUG === 'true') {
+              console.log('Using Sidebar.toggle()');
+            }
+            Sidebar.toggle();
+          } else {
+            if (process.env.DEBUG === 'true') {
+              console.warn('Sidebar not available, trying alternative approach');
+            }
+            // Try to trigger the sidebar through the global Blaze helper
+            if (typeof Blaze !== 'undefined' && Blaze._globalHelpers && Blaze._globalHelpers.Sidebar) {
+              const sidebar = Blaze._globalHelpers.Sidebar();
+              if (sidebar && typeof sidebar.toggle === 'function') {
+                if (process.env.DEBUG === 'true') {
+                  console.log('Using Blaze helper Sidebar.toggle()');
+                }
+                sidebar.toggle();
+              }
+            }
+          }
         },
         'click .js-open-filter-view'() {
-          Sidebar.setView('filter');
+          if (Sidebar) {
+            Sidebar.setView('filter');
+          } else {
+            console.warn('Sidebar not available for setView');
+          }
         },
         'click .js-sort-cards': Popup.open('cardsSort'),
         /*
@@ -100,14 +130,22 @@ BlazeComponent.extendComponent({
         */
         'click .js-filter-reset'(event) {
           event.stopPropagation();
-          Sidebar.setView();
+          if (Sidebar) {
+            Sidebar.setView();
+          } else {
+            console.warn('Sidebar not available for setView');
+          }
           Filter.reset();
         },
         'click .js-sort-reset'() {
           Session.set('sortBy', '');
         },
         'click .js-open-search-view'() {
-          Sidebar.setView('search');
+          if (Sidebar) {
+            Sidebar.setView('search');
+          } else {
+            console.warn('Sidebar not available for setView');
+          }
         },
         'click .js-multiselection-activate'() {
           const currentCard = Utils.getCurrentCardId();
@@ -126,6 +164,7 @@ BlazeComponent.extendComponent({
       },
     ];
   },
+
 }).register('boardHeaderBar');
 
 Template.boardHeaderBar.helpers({
@@ -135,6 +174,23 @@ Template.boardHeaderBar.helpers({
   isSortActive() {
     return Session.get('sortBy') ? true : false;
   },
+  sortCardsIcon() {
+    const sortBy = Session.get('sortBy');
+    if (!sortBy) {
+      return '🃏'; // Card icon when nothing is selected
+    }
+
+    // Determine which sort option is active based on sortBy object
+    if (sortBy.dueAt) {
+      return '📅'; // Due date icon
+    } else if (sortBy.title) {
+      return '🔤'; // Alphabet icon
+    } else if (sortBy.createdAt) {
+      return sortBy.createdAt === 1 ? '⬆️' : '⬇️'; // Up/down arrow based on direction
+    }
+
+    return '🃏'; // Default card icon
+  },
 });
 
 Template.boardChangeViewPopup.events({
@@ -150,6 +206,10 @@ Template.boardChangeViewPopup.events({
     Utils.setBoardView('board-view-cal');
     Popup.back();
   },
+  'click .js-open-gantt-view'() {
+    Utils.setBoardView('board-view-gantt');
+    Popup.back();
+  },
 });
 
 const CreateBoard = BlazeComponent.extendComponent({
@@ -201,6 +261,7 @@ const CreateBoard = BlazeComponent.extendComponent({
             title: title,
             permission: 'private',
             type: 'template-container',
+            migrationVersion: 1, // Latest version - no migration needed
           }),
        );
 
@@ -235,6 +296,15 @@ const CreateBoard = BlazeComponent.extendComponent({
         },
       );
 
+      // Assign to space if one was selected
+      const spaceId = Session.get('createBoardInWorkspace');
+      if (spaceId) {
+        Meteor.call('assignBoardToWorkspace', this.boardId.get(), spaceId, (err) => {
+          if (err) console.error('Error assigning board to space:', err);
+        });
+        Session.set('createBoardInWorkspace', null); // Clear after use
+      }
+
       Utils.goBoardId(this.boardId.get());
 
     } else {
@@ -244,6 +314,7 @@ const CreateBoard = BlazeComponent.extendComponent({
         Boards.insert({
           title,
           permission: visibility,
+          migrationVersion: 1, // Latest version - no migration needed
         }),
       );
 
@@ -252,6 +323,15 @@ const CreateBoard = BlazeComponent.extendComponent({
         boardId: this.boardId.get(),
       });
 
+      // Assign to space if one was selected
+      const spaceId = Session.get('createBoardInWorkspace');
+      if (spaceId) {
+        Meteor.call('assignBoardToWorkspace', this.boardId.get(), spaceId, (err) => {
+          if (err) console.error('Error assigning board to space:', err);
+        });
+        Session.set('createBoardInWorkspace', null); // Clear after use
+      }
+
       Utils.goBoardId(this.boardId.get());
     }
   },
@@ -273,11 +353,18 @@ const CreateBoard = BlazeComponent.extendComponent({
   },
 }).register('createBoardPopup');
 
+(class CreateTemplateContainerPopup extends CreateBoard {
+  onRendered() {
+    // Always pre-check the template container checkbox for this popup
+    $('#add-template-container').addClass('is-checked');
+  }
+}).register('createTemplateContainerPopup');
+
 (class HeaderBarCreateBoard extends CreateBoard {
-  onSubmit(event) {
+  async onSubmit(event) {
     super.onSubmit(event);
     // Immediately star boards crated with the headerbar popup.
-    ReactiveCache.getCurrentUser().toggleBoardStar(this.boardId.get());
+    await ReactiveCache.getCurrentUser().toggleBoardStar(this.boardId.get());
   }
 }.register('headerBarCreateBoardPopup'));
 

client/components/boards/boardsList.jade

@@ -1,154 +1,227 @@
 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-bottom
+            .path-left
+              span.path-icon.emoji-icon {{currentMenuPath.icon}}
+              span.path-text {{currentMenuPath.text}}
+            .path-right
+              unless isMiniScreen
+                +headerMultiSelection
+              if canModifyBoards
+                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
+                  .board-card-header
+                    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}}")
+                  .board-card-body
+                    span.details
+                      span.board-list-item-name= title
+                    p.board-list-item-desc {{_ 'just-invited'}}
+                    button.js-accept-invite.primary {{_ 'accept'}}
+                    button.js-decline-invite {{_ 'decline'}}
+                  .board-card-footer
+                    .materialCheckBox.multi-selection-checkbox.js-toggle-board-multi-selection(
+                      class="{{#if BoardMultiSelection.isActive }}active{{/if}} {{#if BoardMultiSelection.isSelected _id}}is-checked{{/if}}")
+              else
+                if $eq type "template-container"
+                  a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
+                    .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.details
+                        span.board-list-item-name(title="{{_ 'template-container'}}")
+                          +viewer
+                            = title
+                        //- #FIXME: is this obsolete ?
+                        //- 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
+                  a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
+                    .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="{{_ 'board-drag-drop-reorder-or-click-open'}}")
+                          +viewer
+                            = title
+                        //- p.board-list-item-desc
+                        //-   +viewer
+                        //-     = description
+                        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
+                              each list in boardLists _id
+                                .item
+                                  | {{ list }}
+                        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'}}
+
+// Recursive template for workspaces tree
+template(name="workspaceTree")
+  if nodes
+    ul.workspace-tree.js-workspace-tree
+      each nodes
+        li.workspace-node(class="{{#if $eq id selectedWorkspaceId}}active{{/if}}" data-workspace-id="{{id}}" draggable="true")
+          .workspace-node-content
+            span.workspace-drag-handle
+              span.emoji-icon
+                i.fa.fa-arrows
+
+            a.js-select-workspace(data-id="{{id}}")
+              span.workspace-icon
+                if icon
+                  +viewer
+                    = icon
+                else
+                  span.emoji-icon
+                    i.fa.fa-folder
+              span.workspace-name= name
+            a.js-edit-workspace(data-id="{{id}}" title="{{_ 'allboards.edit-workspace'}}")
+              span.emoji-icon
+                i.fa.fa-pencil-square-o
+            span.workspace-count {{workspaceCount id}}
+            a.js-add-subworkspace(data-id="{{id}}" title="{{_ 'allboards.add-subworkspace'}}") +
+          if children
+            +workspaceTree(nodes=children selectedWorkspaceId=selectedWorkspaceId)
+
+template(name="headerMultiSelection")
+  if BoardMultiSelection.isActive
+    if canModifyBoards
+      if hasBoardsSelected
+        button.negate.js-archive-selected-boards.board-header-btn
+          span.emoji-icon
+            i.fa.fa-archive
+          span {{_ 'archive-board'}}
+        button.negate.js-duplicate-selected-boards.board-header-btn
+          span.emoji-icon
+            i.fa.fa-clipboard
+          span {{_ 'duplicate-board'}}

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: 0.4ch;
+  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: 0.4ch;
+  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-weight: 500;
+  text-transform: uppercase;
+}
+
+.entity-name {
+  color: #212529;
+  font-weight: 600;
+}
+
+.entity-id {
+  color: #6c757d;
+
+  font-family: monospace;
+}
+
+.original-position-item-details {
+  margin-left: 24px;
+}
+
+.original-position-description {
+  color: #495057;
+  margin-bottom: 6px;
+
+}
+
+.original-title {
+  color: #6c757d;
+
+  margin-bottom: 6px;
+  padding: 4px 6px;
+  background-color: #e9ecef;
+  border-radius: 3px;
+}
+
+.original-title strong {
+  color: #495057;
+}
+
+.original-position-date {
+  color: #6c757d;
+
+}
+
+.no-original-positions {
+  text-align: center;
+  padding: 40px 20px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.no-original-positions i {
+
+  margin-bottom: 10px;
+  display: block;
+  color: #adb5bd;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .original-positions-view {
+    margin: 5px 0;
+    padding: 10px;
+  }
+
+  .original-positions-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .original-positions-header .btn {
+    justify-content: center;
+  }
+
+  .original-positions-filters .btn-group {
+    justify-content: center;
+  }
+
+  .original-position-item-header {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .entity-name {
+    flex: 1;
+    min-width: 0;
+    word-break: break-word;
+  }
+
+  .original-position-item-details {
+    margin-left: 0;
+    margin-top: 8px;
+  }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .original-positions-view {
+    background-color: #2d3748;
+    border-color: #4a5568;
+    color: #e2e8f0;
+  }
+
+  .original-positions-content {
+    background-color: #1a202c;
+    border-color: #4a5568;
+  }
+
+  .original-position-item {
+    background-color: #2d3748;
+    border-color: #4a5568;
+    color: #e2e8f0;
+  }
+
+  .original-position-item:hover {
+    background-color: #4a5568;
+    border-color: #718096;
+  }
+
+  .original-position-item-header {
+    color: #e2e8f0;
+  }
+
+  .original-position-item-header i {
+    color: #a0aec0;
+  }
+
+  .entity-name {
+    color: #e2e8f0;
+  }
+
+  .entity-id {
+    color: #a0aec0;
+  }
+
+  .original-position-description {
+    color: #e2e8f0;
+  }
+
+  .original-title {
+    background-color: #4a5568;
+    color: #a0aec0;
+  }
+
+  .original-title strong {
+    color: #e2e8f0;
+  }
+
+  .original-position-date {
+    color: #a0aec0;
+  }
+
+  .no-original-positions {
+    color: #a0aec0;
+  }
+
+  .no-original-positions i {
+    color: #718096;
+  }
+}

client/components/boards/originalPositionsView.html

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

client/components/boards/originalPositionsView.js

@@ -0,0 +1,148 @@
+import { BlazeComponent } from 'meteor/peerlibrary:blaze-components';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import './originalPositionsView.html';
+
+/**
+ * Component to display original positions for all entities on a board
+ */
+class OriginalPositionsViewComponent extends BlazeComponent {
+  onCreated() {
+    super.onCreated();
+    this.showOriginalPositions = new ReactiveVar(false);
+    this.boardHistory = new ReactiveVar([]);
+    this.isLoading = new ReactiveVar(false);
+    this.filterType = new ReactiveVar('all'); // 'all', 'swimlane', 'list', 'card'
+  }
+
+  onRendered() {
+    super.onRendered();
+    this.loadBoardHistory();
+  }
+
+  loadBoardHistory() {
+    const boardId = Session.get('currentBoard');
+    if (!boardId) return;
+
+    this.isLoading.set(true);
+    
+    Meteor.call('positionHistory.getBoardHistory', boardId, (error, result) => {
+      this.isLoading.set(false);
+      if (error) {
+        console.error('Error loading board history:', error);
+        this.boardHistory.set([]);
+      } else {
+        this.boardHistory.set(result);
+      }
+    });
+  }
+
+  toggleOriginalPositions() {
+    this.showOriginalPositions.set(!this.showOriginalPositions.get());
+  }
+
+  isShowingOriginalPositions() {
+    return this.showOriginalPositions.get();
+  }
+
+  isLoading() {
+    return this.isLoading.get();
+  }
+
+  getBoardHistory() {
+    return this.boardHistory.get();
+  }
+
+  getFilteredHistory() {
+    const history = this.getBoardHistory();
+    const filterType = this.filterType.get();
+    
+    if (filterType === 'all') {
+      return history;
+    }
+    
+    return history.filter(item => item.entityType === filterType);
+  }
+
+  getSwimlanesHistory() {
+    return this.getBoardHistory().filter(item => item.entityType === 'swimlane');
+  }
+
+  getListsHistory() {
+    return this.getBoardHistory().filter(item => item.entityType === 'list');
+  }
+
+  getCardsHistory() {
+    return this.getBoardHistory().filter(item => item.entityType === 'card');
+  }
+
+  setFilterType(type) {
+    this.filterType.set(type);
+  }
+
+  getFilterType() {
+    return this.filterType.get();
+  }
+
+  getEntityDisplayName(entity) {
+    const position = entity.originalPosition || {};
+    return position.title || `Entity ${entity.entityId}`;
+  }
+
+  getEntityOriginalPositionDescription(entity) {
+    const position = entity.originalPosition || {};
+    let description = `Position: ${position.sort || 0}`;
+    
+    if (entity.entityType === 'list' && entity.originalSwimlaneId) {
+      description += ` in swimlane ${entity.originalSwimlaneId}`;
+    } else if (entity.entityType === 'card') {
+      if (entity.originalSwimlaneId) {
+        description += ` in swimlane ${entity.originalSwimlaneId}`;
+      }
+      if (entity.originalListId) {
+        description += ` in list ${entity.originalListId}`;
+      }
+    }
+    
+    return description;
+  }
+
+  getEntityTypeIcon(entityType) {
+    switch (entityType) {
+      case 'swimlane':
+        return 'fa-bars';
+      case 'list':
+        return 'fa-columns';
+      case 'card':
+        return 'fa-sticky-note';
+      default:
+        return 'fa-question';
+    }
+  }
+
+  getEntityTypeLabel(entityType) {
+    switch (entityType) {
+      case 'swimlane':
+        return 'Swimlane';
+      case 'list':
+        return 'List';
+      case 'card':
+        return 'Card';
+      default:
+        return 'Unknown';
+    }
+  }
+
+  formatDate(date) {
+    return new Date(date).toLocaleString();
+  }
+
+  refreshHistory() {
+    this.loadBoardHistory();
+  }
+}
+
+OriginalPositionsViewComponent.register('originalPositionsView');
+
+export default OriginalPositionsViewComponent;

client/components/cards/attachments.css

@@ -6,69 +6,80 @@
   font-weight: bold;
 }
 .attachment-gallery {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-auto-flow: row;
 }
 .attachment-item {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 10ch auto;
   align-items: center;
-  margin-top: 16px;
+  grid-template-rows: repeat(auto-fit, minmax(1.5lh, auto));
+  justify-content: stretch;
+  gap: 2ch;
+  padding: 2ch;
+  border-radius: 0.6ch;
 }
+
 .attachment-item:hover {
   background: #e0e0e0;
 }
-.attachment-thumbnail-container {
-  display: block;
-  width: 150px;
-  min-width: 150px;
-  max-height: 150px;
-  padding-right: 16px;
+
+.attachment-details-container {
+  display: flex;
+  flex: 1;
 }
+
+.attachment-thumbnail-container {
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+
 .attachment-thumbnail {
-  max-width: 150px;
-  max-height: 150px;
-  min-height: 2em;
+  /* more deterministic outcome */
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  max-width: 100%;
   cursor: pointer;
+  border-radius: 0.4ch;
 }
 .attachment-thumbnail-text {
-  min-height: 2em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-  cursor: pointer;
+  flex: 1;
+  text-align: center;
+  border-radius: 2px;
   border: 1px solid #ccc;
-  border-radius: 5px;
-}
-.attachment-details-container {
-  display: block;
-  flex-grow: 1;
 }
 .attachment-details {
   display: flex;
-  justify-content: space-between;
-  margin-right: 25px; /* Make sure the icons are not to far to the right */
+  flex: 1;
+  gap: 0.5ch;
+  align-items: center;
 }
 .attachment-actions {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 1.5ch;
 }
+
+body.mobile-mode .attachment-actions {
+  flex-direction: column;
+  gap: 0;
+}
+
 .add-attachment {
+  border: 1px dashed #555;
+  border-radius: .5ch;
+  cursor: pointer;
+  aspect-ratio: 1/1;
+  height: 1.5lh;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px dashed #555;
-  border-radius: 5px;
-  padding: 10px;
-  cursor: pointer;
-  margin-top: 16px;
 }
 .icon {
   font-size: 1.5em;
   cursor: pointer;
-  margin-left: 10px;
 }
 .icon:hover {
   color: #666;
@@ -89,33 +100,127 @@
   height: 100%;
 }
 #viewer-top-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  padding: 16px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  justify-content: center;
+  justify-items: center;
+  font-size: 2rem;
+  padding: 0.3lh 0.5ch;
 }
 #attachment-name {
   color: white;
-  font-size: 1.5em;
-  max-width: calc(
-    100% - 50px
-  ); /* Make sure the name does not overlap the close button */
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 #viewer-close {
   color: white;
   cursor: pointer;
-  font-size: 4em;
-  top: 0;
-  right: 8px;
   position: absolute;
+  right: 50px;
+  top: 16px;
+  font-size: 2em;
+}
+
+/* Upload progress indicators for drag-and-drop uploads */
+.minicard-upload-progress,
+.card-details-upload-progress {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 0.4ch;
+
+}
+
+.upload-progress-header {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  color: #495057;
+}
+
+.upload-progress-header i {
+  color: #007bff;
+}
+
+.upload-progress-item {
+  display: flex;
+  flex-direction: column;
+  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;
+  color: #495057;
+  word-break: break-all;
+}
+
+.upload-progress-bar {
+  background: #e9ecef;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.upload-progress-fill {
+  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-weight: 500;
+}
+
+.upload-progress-error {
+  color: #dc3545;
+}
+
+.upload-progress-success {
+  color: #28a745;
+}
+
+/* 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;
   color: white;
   cursor: pointer;
   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;
@@ -130,6 +235,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%;
@@ -160,13 +272,22 @@
     position: absolute;
     bottom: 2.2em;
     font-size: 1.6em;
-    padding: 16px;
   }
   #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%;
@@ -184,19 +305,10 @@
     margin-top: 20%;
     width: 100%;
   }
-  .attachment-thumbnail-container {
-    width: 100px;
-    min-width: 100px;
-  }
-  .attachment-thumbnail {
-    max-width: 100px;
-  }
   .attachment-details {
     flex-direction: column;
-    margin-right: 0px;
   }
   .attachment-actions {
     flex-direction: row;
-    margin-top: 10px;
   }
 }

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,19 +46,15 @@ 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")
-
+  if canModifyCard
+    a.add-attachment.js-add-attachment
+      i.fa.fa-plus
   .attachment-gallery
-
-    if canModifyCard
-      a.attachment-item.add-attachment.js-add-attachment
-        i.fa.fa-plus.icon
-
     each attachments
-
-      .attachment-item
+      .attachment-item(class="{{#if isAttachmentMigrating _id}}migrating{{/if}}")
         .attachment-thumbnail-container.open-preview(data-attachment-id="{{_id}}" data-card-id="{{ meta.cardId }}")
           if link
             if(isImage)
@@ -86,29 +83,31 @@ template(name="attachmentGallery")
                 = name
               span.file-size ({{fileSize size}})
             .attachment-actions
-              a.js-download(href="{{link}}?download=true", download="{{name}}")
-                i.fa.fa-download.icon(title="{{_ 'download'}}")
+              a.js-download(href="{{link}}?download=true", download="{{name}}", title="{{_ 'download'}}")
+                i.fa.fa-arrow-down
               if currentUser.isBoardMember
                 unless currentUser.isCommentOnly
                   unless currentUser.isWorker
-                    a.js-rename
-                      i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}")
-                    a.js-confirm-delete
-                      i.fa.fa-trash.icon(title="{{_ 'delete'}}")
-                    a.fa.fa-navicon.icon.js-open-attachment-menu(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")
-
+                    a.js-rename(title="{{_ 'rename'}}")
+                      i.fa.fa-pencil-square-o
+                    a.js-confirm-delete(title="{{_ 'delete'}}")
+                      i.fa.fa-trash
+                    a.js-open-attachment-menu(data-attachment-link="{{link}}", title="{{_ 'attachmentActionsPopup-title'}}")
+                      i.fa.fa-bars
+        // Migration spinner overlay
+        if isAttachmentMigrating _id
+          .attachment-migration-overlay
+            .migration-spinner
+              i.fa.fa-cog.fa-spin
+            .migration-text {{_ 'migrating-attachment'}}
 
 template(name="attachmentActionsPopup")
   ul.pop-over-list
     li
       if isImage
         a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
-          i.fa.fa-book
           i.fa.fa-picture-o
-          if isCover
-            | {{_ 'remove-cover'}}
-          else
-            | {{_ 'add-cover'}}
+          | {{#if isCover}}{{_ 'remove-cover'}}{{else}}{{_ 'add-cover'}}{{/if}}
       if currentUser.isBoardAdmin
         if isImage
           a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")

client/components/cards/attachments.js

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

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,9 @@ template(name="cardCustomField-date")
         div.card-date
           time(datetime="{{showISODate}}")
             | {{showDate}}
-            b
-              | {{showWeek}}
+            if showWeekOfYear
+                b
+                | {{showWeek}}
 
 template(name="cardCustomField-dropdown")
     if canModifyCard
@@ -111,7 +114,7 @@ template(name="cardCustomField-dropdown")
                             = name
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -132,7 +135,7 @@ template(name="cardCustomField-stringtemplate")
             input.js-card-customfield-stringtemplate-item.last(type="text" value="" placeholder="{{_ 'custom-field-stringtemplate-item-placeholder'}}" autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value

client/components/cards/cardCustomFields.js

@@ -1,6 +1,27 @@
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
+import { ReactiveCache } from '/imports/reactiveCache';
+import { 
+  formatDateTime, 
+  formatDate, 
+  formatDateByUserPreference,
+  formatTime, 
+  getISOWeek, 
+  isValidDate, 
+  isBefore, 
+  isAfter, 
+  isSame, 
+  add, 
+  subtract, 
+  startOf, 
+  endOf, 
+  format, 
+  parseDate, 
+  now, 
+  createDate, 
+  fromNow, 
+  calendar 
+} from '/imports/lib/dateUtils';
 import Cards from '/models/cards';
 import { CustomFieldStringTemplate } from '/client/lib/customFields'
 
@@ -91,6 +112,7 @@ CardCustomField.register('cardCustomField');
   events() {
     return [
       {
+        'click .js-checklist-item .check-box-unicode': this.toggleItem,
         'click .js-checklist-item .check-box-container': this.toggleItem,
       },
     ];
@@ -134,27 +156,33 @@ CardCustomField.register('cardCustomField');
     super.onCreated();
     const self = this;
     self.date = ReactiveVar();
-    self.now = ReactiveVar(moment());
+    self.now = ReactiveVar(now());
     window.setInterval(() => {
-      self.now.set(moment());
+      self.now.set(now());
     }, 60000);
 
     self.autorun(() => {
-      self.date.set(moment(self.data().value));
+      self.date.set(new Date(self.data().value));
     });
   }
 
   showWeek() {
-    return this.date.get().week().toString();
+    return getISOWeek(this.date.get()).toString();
+  }
+
+  showWeekOfYear() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
   }
 
   showDate() {
-    // this will start working once mquandalle:moment
-    // is updated to at least moment.js 2.10.5
-    // until then, the date is displayed in the "L" format
-    return this.date.get().calendar(null, {
-      sameElse: 'llll',
-    });
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 
   showISODate() {
@@ -163,8 +191,8 @@ CardCustomField.register('cardCustomField');
 
   classes() {
     if (
-      this.date.get().isBefore(this.now.get(), 'minute') &&
-      this.now.get().isBefore(this.data().value)
+      isBefore(this.date.get(), this.now.get(), 'minute') &&
+      isBefore(this.now.get(), this.data().value, 'minute')
     ) {
       return 'current';
     }
@@ -172,7 +200,7 @@ CardCustomField.register('cardCustomField');
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-start-on')} ${this.date.get().toLocaleString()}`;
   }
 
   events() {
@@ -191,7 +219,7 @@ CardCustomField.register('cardCustomField');
     const self = this;
     self.card = Utils.getCurrentCard();
     self.customFieldId = this.data()._id;
-    this.data().value && this.date.set(moment(this.data().value));
+    this.data().value && this.date.set(new Date(this.data().value));
   }
 
   _storeDate(date) {

client/components/cards/cardDate.css

@@ -1,6 +1,5 @@
 .card-date {
   display: block;
-  border-radius: 4px;
   padding: 1px 3px;
   background-color: #dbdbdb;
 }
@@ -8,60 +7,141 @@
 .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;
+}
+
+.date a:has(time) {
+  text-decoration: none;
+}
+
+.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;
-  border-radius: 4px;
+  border-radius: 0.4ch;
   padding: 1px 3px;
 }

client/components/cards/cardDate.jade

@@ -1,20 +1,155 @@
 template(name="dateBadge")
   if canModifyCard
-    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
       time(datetime="{{showISODate}}")
         | {{showDate}}
-        b
-          | {{showWeek}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
   else
-    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
       time(datetime="{{showISODate}}")
         | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="dateCustomField")
+  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+      if showWeekOfYear
         b
           | {{showWeek}}
 
-template(name="dateCustomField")
-  a(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
+template(name="minicardReceivedDate")
+  if canModifyCard
+    a.js-edit-date.card-date.received-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date.received-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardStartDate")
+  if canModifyCard
+    a.js-edit-date.card-date.start-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date.start-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardDueDate")
+  if canModifyCard
+    a.js-edit-date.card-date.due-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date.due-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date.end-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date.end-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardCustomFieldDate")
+  a(title="{{_ 'date'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
     time(datetime="{{showISODate}}")
       | {{showDate}}
-      b
-        | {{showWeek}}
+      if showWeekOfYear
+        b
+          | {{showWeek}}
+
+template(name="editCardReceivedDatePopup")
+  .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'}}

client/components/cards/cardDate.js

@@ -1,17 +1,38 @@
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
+import {
+  formatDateTime,
+  formatDate,
+  formatDateByUserPreference,
+  formatTime,
+  getISOWeek,
+  isValidDate,
+  isBefore,
+  isAfter,
+  isSame,
+  add,
+  subtract,
+  startOf,
+  endOf,
+  format,
+  parseDate,
+  now,
+  createDate,
+  fromNow,
+  calendar,
+  diff
+} from '/imports/lib/dateUtils';
 
 // editCardReceivedDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
+    super.onCreated(formatDateTime(now()));
     this.data().getReceived() &&
-      this.date.set(moment(this.data().getReceived()));
+      this.date.set(new Date(this.data().getReceived()));
   }
 
   _storeDate(date) {
-    this.card.setReceived(date);
+    this.card.setReceived(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -22,22 +43,12 @@ import { DatePicker } from '/client/lib/datepicker';
 // editCardStartDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getStart() && this.date.set(moment(this.data().getStart()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getReceived())) {
-      this.$('.js-datepicker').datepicker(
-        'setStartDate',
-        this.card.getReceived(),
-      );
-    }
+    super.onCreated(formatDateTime(now()));
+    this.data().getStart() && this.date.set(new Date(this.data().getStart()));
   }
 
   _storeDate(date) {
-    this.card.setStart(date);
+    this.card.setStart(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -49,18 +60,11 @@ import { DatePicker } from '/client/lib/datepicker';
 (class extends DatePicker {
   onCreated() {
     super.onCreated('1970-01-01 17:00:00');
-    this.data().getDue() && this.date.set(moment(this.data().getDue()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
+    this.data().getDue() && this.date.set(new Date(this.data().getDue()));
   }
 
   _storeDate(date) {
-    this.card.setDue(date);
+    this.card.setDue(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -71,19 +75,12 @@ import { DatePicker } from '/client/lib/datepicker';
 // editCardEndDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getEnd() && this.date.set(moment(this.data().getEnd()));
-  }
-
-  onRendered() {
-    super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
+    super.onCreated(formatDateTime(now()));
+    this.data().getEnd() && this.date.set(new Date(this.data().getEnd()));
   }
 
   _storeDate(date) {
-    this.card.setEnd(date);
+    this.card.setEnd(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -100,23 +97,29 @@ const CardDate = BlazeComponent.extendComponent({
   onCreated() {
     const self = this;
     self.date = ReactiveVar();
-    self.now = ReactiveVar(moment());
+    self.now = ReactiveVar(now());
     window.setInterval(() => {
-      self.now.set(moment());
+      self.now.set(now());
     }, 60000);
   },
 
   showWeek() {
-    return this.date.get().week().toString();
+    return getISOWeek(this.date.get()).toString();
+  },
+
+  showWeekOfYear() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
   },
 
   showDate() {
-    // this will start working once mquandalle:moment
-    // is updated to at least moment.js 2.10.5
-    // until then, the date is displayed in the "L" format
-    return this.date.get().calendar(null, {
-      sameElse: 'llll',
-    });
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   },
 
   showISODate() {
@@ -129,7 +132,7 @@ class CardReceivedDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getReceived()));
+      self.date.set(new Date(self.data().getReceived()));
     });
   }
 
@@ -139,21 +142,26 @@ class CardReceivedDate extends CardDate {
     const endAt = this.data().getEnd();
     const startAt = this.data().getStart();
     const theDate = this.date.get();
-    // if dueAt, endAt and startAt exist & are > receivedAt, receivedAt doesn't need to be flagged
+    const now = this.now.get();
+
+    // Received date logic: if received date is after start, due, or end dates, it's overdue
     if (
-      (startAt && theDate.isAfter(startAt)) ||
-      (endAt && theDate.isAfter(endAt)) ||
-      (dueAt && theDate.isAfter(dueAt))
-    )
-      classes += 'long-overdue';
-    else classes += 'current';
+      (startAt && isAfter(theDate, startAt)) ||
+      (endAt && isAfter(theDate, endAt)) ||
+      (dueAt && isAfter(theDate, dueAt))
+    ) {
+      classes += 'overdue';
+    } else {
+      classes += 'not-due';
+    }
     return classes;
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-received-on')} ${this.date
-      .get()
-      .format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-received-on')} ${formattedDate}`;
   }
 
   events() {
@@ -169,26 +177,35 @@ class CardStartDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getStart()));
+      self.date.set(new Date(self.data().getStart()));
     });
   }
 
   classes() {
-    let classes = 'start-date' + ' ';
+    let classes = 'start-date ';
     const dueAt = this.data().getDue();
     const endAt = this.data().getEnd();
     const theDate = this.date.get();
     const now = this.now.get();
-    // if dueAt or endAt exist & are > startAt, startAt doesn't need to be flagged
-    if ((endAt && theDate.isAfter(endAt)) || (dueAt && theDate.isAfter(dueAt)))
-      classes += 'long-overdue';
-    else if (theDate.isAfter(now)) classes += '';
-    else classes += 'current';
+
+    // Start date logic: if start date is after due or end dates, it's overdue
+    if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt))) {
+      classes += 'overdue';
+    } else if (isAfter(theDate, now)) {
+      // Start date is in the future - not due yet
+      classes += 'not-due';
+    } else {
+      // Start date is today or in the past - current/active
+      classes += 'current';
+    }
     return classes;
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-start-on')} ${formattedDate}`;
   }
 
   events() {
@@ -204,27 +221,48 @@ class CardDueDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getDue()));
+      self.date.set(new Date(self.data().getDue()));
     });
   }
 
   classes() {
-    let classes = 'due-date' + ' ';
+    let classes = 'due-date ';
     const endAt = this.data().getEnd();
     const theDate = this.date.get();
     const now = this.now.get();
-    // if the due date is after the end date, green - done early
-    if (endAt && theDate.isAfter(endAt)) classes += 'current';
-    // if there is an end date, don't need to flag the due date
-    else if (endAt) classes += '';
-    else if (now.diff(theDate, 'days') >= 2) classes += 'long-overdue';
-    else if (now.diff(theDate, 'minute') >= 0) classes += 'due';
-    else if (now.diff(theDate, 'days') >= -1) classes += 'almost-due';
+
+    // If there's an end date and it's before the due date, task is completed early
+    if (endAt && isBefore(endAt, theDate)) {
+      classes += 'completed-early';
+    }
+    // If there's an end date, don't show due date status since task is completed
+    else if (endAt) {
+      classes += 'completed';
+    }
+    // Due date logic based on current time
+    else {
+      const daysDiff = diff(theDate, now, 'days');
+
+      if (daysDiff < 0) {
+        // Due date is in the past - overdue
+        classes += 'overdue';
+      } else if (daysDiff <= 1) {
+        // Due today or tomorrow - due soon
+        classes += 'due-soon';
+      } else {
+        // Due date is more than 1 day away - not due yet
+        classes += 'not-due';
+      }
+    }
+
     return classes;
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-due-on')} ${formattedDate}`;
   }
 
   events() {
@@ -240,22 +278,33 @@ class CardEndDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getEnd()));
+      self.date.set(new Date(self.data().getEnd()));
     });
   }
 
   classes() {
-    let classes = 'end-date' + ' ';
+    let classes = 'end-date ';
     const dueAt = this.data().getDue();
     const theDate = this.date.get();
-    if (!dueAt) classes += '';
-    else if (theDate.isBefore(dueAt)) classes += 'current';
-    else if (theDate.isAfter(dueAt)) classes += 'due';
+
+    if (!dueAt) {
+      // No due date set - just show as completed
+      classes += 'completed';
+    } else if (isBefore(theDate, dueAt)) {
+      // End date is before due date - completed early
+      classes += 'completed-early';
+    } else if (isAfter(theDate, dueAt)) {
+      // End date is after due date - completed late
+      classes += 'completed-late';
+    } else {
+      // End date equals due date - completed on time
+      classes += 'completed-on-time';
+    }
     return classes;
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${format(this.date.get(), 'LLLL')}`;
   }
 
   events() {
@@ -275,12 +324,21 @@ class CardCustomFieldDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().value));
+      self.date.set(new Date(self.data().value));
     });
   }
 
   showWeek() {
-    return this.date.get().week().toString();
+    return getISOWeek(this.date.get()).toString();
+  }
+
+  showWeekOfYear() {
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
   }
 
   showDate() {
@@ -293,7 +351,10 @@ class CardCustomFieldDate extends CardDate {
   }
 
   showTitle() {
-    return `${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${formattedDate}`;
   }
 
   classes() {
@@ -307,32 +368,62 @@ class CardCustomFieldDate extends CardDate {
 CardCustomFieldDate.register('cardCustomFieldDate');
 
 (class extends CardReceivedDate {
+  template() {
+    return 'minicardReceivedDate';
+  }
+
   showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardReceivedDate'));
 
 (class extends CardStartDate {
+  template() {
+    return 'minicardStartDate';
+  }
+
   showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardStartDate'));
 
 (class extends CardDueDate {
+  template() {
+    return 'minicardDueDate';
+  }
+
   showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardDueDate'));
 
 (class extends CardEndDate {
+  template() {
+    return 'minicardEndDate';
+  }
+
   showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardEndDate'));
 
 (class extends CardCustomFieldDate {
+  template() {
+    return 'minicardCustomFieldDate';
+  }
+
   showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardCustomFieldDate'));
 
@@ -341,7 +432,7 @@ class VoteEndDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getVoteEnd()));
+      self.date.set(new Date(self.data().getVoteEnd()));
     });
   }
   classes() {
@@ -349,10 +440,12 @@ class VoteEndDate extends CardDate {
     return classes;
   }
   showDate() {
-    return this.date.get().format('L LT');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
   showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${this.date.get().toLocaleString()}`;
   }
 
   events() {
@@ -368,7 +461,7 @@ class PokerEndDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getPokerEnd()));
+      self.date.set(new Date(self.data().getPokerEnd()));
     });
   }
   classes() {
@@ -376,10 +469,12 @@ class PokerEndDate extends CardDate {
     return classes;
   }
   showDate() {
-    return this.date.get().format('l LT');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
   showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${format(this.date.get(), 'LLLL')}`;
   }
 
   events() {

client/components/cards/cardDescription.css

@@ -1,16 +1,12 @@
 .new-description {
-  position: relative;
-  margin: 0 0 20px 0;
+  flex: 1;
 }
-.new-description.is-open .helper {
-  display: inline-block;
-}
-.new-description.is-open textarea {
-  min-height: 100px;
+.new-description textarea {
+  min-height: 1lh;
   color: #4d4d4d;
   cursor: auto;
   overflow: hidden;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .new-description .too-long {
   margin-top: 8px;
@@ -19,9 +15,6 @@
   background-color: #fff;
   border: 0;
   box-shadow: 0 1px 2px rgba(0,0,0,0.23);
-  height: 36px;
-  margin: 4px 4px 6px 0;
-  padding: 9px 11px;
   width: 100%;
 }
 .new-description textarea:hover,
@@ -39,16 +32,12 @@
   border: 0;
   box-shadow: 0 1px 2px rgba(0,0,0,0.23);
   color: #8c8c8c;
-  height: 36px;
-  margin: 4px 4px 6px 0;
-  width: 92%;
 }
 .description-item:hover {
   background: #e0e0e0;
 }
 .description-item.add-description {
   display: flex;
-  margin: 5px;
 }
 .description-item.add-description a {
   display: block;

client/components/cards/cardDescription.js

@@ -17,10 +17,10 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
-        'submit .js-card-description'(event) {
+        async 'submit .js-card-description'(event) {
           event.preventDefault();
           const description = this.currentComponent().getValue();
-          this.data().setDescription(description);
+          await this.data().setDescription(description);
         },
         // Pressing Ctrl+Enter should submit the form
         'keydown form textarea'(evt) {

client/components/cards/cardDetails.css

@@ -1,35 +1,100 @@
-.assignee {
-  border-radius: 3px;
-  display: block;
-  position: relative;
-  float: left;
-  height: 30px;
-  width: 30px;
-  margin: .3vh;
+.card-details-item-date-format .card-details-item-title {
+  font-weight: bold;
+  color: #333;
+  letter-spacing: 0.03em;
+}
+
+.card-details-item-date-format .js-date-format-selector {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  background-color: #fff;
+  transition: border-color 0.15s, box-shadow 0.15s;
   cursor: pointer;
-  user-select: none;
-  z-index: 1;
-  text-decoration: none;
-  border-radius: 50%;
-}
-.assignee .avatar {
-  overflow: hidden;
-  border-radius: 50%;
-}
-.assignee .avatar.avatar-assignee-initials {
-  height: 70%;
-  width: 70%;
-  padding: 15%;
-  background-color: #dbdbdb;
-  color: #444;
-  position: absolute;
-}
-.assignee .avatar.avatar-image {
-  object-fit: cover;
-  object-position: center;
-  height: 100%;
   width: 100%;
+  display: flex;
+  flex: 1;
 }
+
+.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);
+}
+
+.card-details h3 {
+  font-size: 1.1em;
+}
+
+.card-checklists {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 2ch;
+  align-items: stretch;
+  gap: 0.5lh;
+  /* for popups */
+  overflow-y: auto;
+
+  &.is-maximized {
+    display: grid;
+    /* divide available space; 3/4 for main content, 1/4 for activity feed */
+    /* better use a grid, otherwise flexbox will not expand left pane if fullscreen
+    > max-content, but some users may want to expend elements anyways */
+    grid-template-columns: 3fr 1fr;
+    .card-details-left {
+      border-right: solid 2px #dbdbdb;
+      padding-right: 2ch;
+    }
+  }
+}
+
+.card-header-content {
+  display: grid;
+  margin: 0 1ch;
+  grid-auto-columns: auto 1fr auto;
+  grid-auto-flow: column;
+  justify-content: stretch;
+  align-items: center;
+  min-height: 2lh;
+  gap: 1ch;
+}
+
+body.mobile-mode {
+  .card-header-content {
+    padding-inline: 0.5ch;
+  }
+  .card-header-middle {
+    padding-inline: 0;
+    background: unset;
+    font-size: 1.1em;
+  }
+}
+
+.card-header-middle {
+  display: flex;
+  min-height: 1.5lh;
+  font-size: 1.3em;
+  justify-content: center;
+  align-items: center;
+  background: #dfdfdf;
+  border-radius: 1ch;
+  padding-inline: 1ch;
+  justify-self: stretch;
+  cursor: grab !important;
+}
+.assignee.add-assignee:hover,
+.assignee.add-assignee.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.assignee {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+}
+
 .assignee .assignee-presence-status {
   background-color: #b3b3b3;
   border: 1px solid #fff;
@@ -39,9 +104,9 @@
   position: absolute;
   right: -1px;
   bottom: -1px;
-  border: 1px solid #fff;
   z-index: 15;
 }
+
 .assignee .assignee-presence-status.active {
   background: #64c464;
   border-color: #daf1da;
@@ -61,109 +126,310 @@
 .assignee.add-assignee {
   display: flex;
   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 {
-  box-shadow: 0 0 0 2px #666 inset;
+
+.card-header-controls-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 2ch);
+  gap: 0.5ch;
+  grid-auto-flow: column;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
 }
 .copied-tooltip {
-  display: none;
-  padding: 0px 10px;
+  position: absolute;
   background-color: rgba(0,0,0,0.875);
   color: #fff;
-  border-radius: 5px;
+  border-radius: 0.7vw;
+  font-size: 0.98em;
+}
+
+.copied-tooltip-visible {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.1s linear;
+}
+
+.copied-tooltip-hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s 0.1s, opacity 0.1s linear;
 }
 .card-details {
   padding: 0;
-  flex-shrink: 0;
-  flex-basis: 600px;
-  will-change: flex-basis;
-  overflow-y: scroll;
+  display: flex;
+  flex: 1;
+  overflow-y: auto;
   overflow-x: hidden;
   background: #f7f7f7;
-  border-radius: bottom 3px;
-  z-index: 30;
+  border-radius: 0 0 0.4vw 0.4vw;
+  z-index: 100;
   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;
+  &:not(.collapsed) {
+    min-height: 20lh;
+    /* at this point, popup can still be resized but stops
+    to shrink content, so the later stays visible */
+    min-width: 30vw;
+  }
+}
+
+.edit-vote-question {
+  display: flex;
+  flex-direction: column;
+  & > .fields {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2lh;
+    margin: 0.2lh 0;
+  }
+}
+.card-details .card-details-canvas {
+  display: grid;
+  background: #ededed;
+  border-bottom: 1px solid #dbdbdb;
+  flex: 1;
+  grid-template-rows: auto auto;
+  grid-auto-flow: row;
+  grid-template-columns: auto;
+  align-items: stretch;
+  align-content: center;
+}
+/* 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 .mCustomScrollBox {
   padding-left: 0;
 }
-.card-details .card-details-canvas {
-  width: auto;
-  padding: 0 20px;
-}
-.card-details .card-details-header {
-  margin: 0 -20px 5px;
-  padding: 7px 20px;
-  background: #ededed;
-  border-bottom: 1px solid #dbdbdb;
-  position: sticky;
-  top: 0px;
-  z-index: 500;
-}
 .card-details .card-details-header .card-number {
   color: #b3b3b3;
   display: inline-block;
-  margin-right: 5px;
 }
-.card-details .card-details-header .close-card-details,
-.card-details .card-details-header .maximize-card-details,
-.card-details .card-details-header .minimize-card-details,
-.card-details .card-details-header .card-details-menu,
-.card-details .card-details-header .card-copy-button,
-.card-details .card-details-header .card-copy-mobile-button,
-.card-details .card-details-header .close-card-details-mobile-web,
-.card-details .card-details-header .card-details-menu-mobile-web,
-.card-details .card-details-header .copied-tooltip {
+
+/* Collapse toggle triangle */
+.card-details .card-details-header .card-collapse-toggle {
+  cursor: pointer;
+  user-select: none;
+  color: #000;
+}
+
+/* Bring to front / Send to back buttons */
+/* #FIXME see .jade */
+/* .card-details .card-details-header .card-bring-to-front,
+.card-details .card-details-header .card-send-to-back {
   float: right;
+  font-size: 18px;
+  padding: 7px 8px;
+  margin-right: 5px;
+  cursor: pointer;
+  user-select: none;
+  color: #333;
+} */
+
+.card-details .card-details-header .card-bring-to-front:hover,
+.card-details .card-details-header .card-send-to-back:hover {
+  color: #000;
+  background: rgba(0,0,0,0.05);
+  border-radius: 3px;
 }
+
+.card-details .card-details-header .card-drag-handle {
+  cursor: move;
+  user-select: none;
+}
+
+.card-details .js-card-details-title {
+  /* override inlined forms defauts: take all width available
+  and just what's needed to edit card title */
+  width: 100%;
+  display: flex;
+  .js-edit-card-title {
+    height: fit-content;
+    margin: 0;
+  }
+  .edit-controls {
+    flex: 1;
+    align-items: center;
+    button {
+      margin: 0;
+      display: flex;
+      max-width: 20ch;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .js-submit-edit-card-title-form {
+    margin: 0.3lh 0;
+    flex: 1;
+    display: flex;
+  }
+}
+
 .card-details .card-details-header .close-card-details,
 .card-details .card-details-header .maximize-card-details,
 .card-details .card-details-header .minimize-card-details {
-  font-size: 24px;
-  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 {
-  font-size: 24px;
-  padding: 5px;
-  margin-right: 40px;
+.card-details .card-details-header .close-card-details-mobile-web,
+.card-details .card-details-header .card-mobile-desktop-toggle {
+  cursor: pointer;
+  user-select: none;
 }
-.card-details .card-details-header .card-copy-button {
-  font-size: 17px;
-  padding: 10px;
-  margin-right: 10px;
+.card-details .card-details-header .card-mobile-desktop-toggle {
+  cursor: pointer;
+  user-select: none;
+  float: right;
 }
-.card-details .card-details-header .card-copy-mobile-button {
-  font-size: 17px;
-  padding: 10px;
-  margin-right: 10px;
+
+body:not(.mobile-mode) {
+
+  .card-details-date-container,
+  .card-details-user-container,
+  .card-details-misc-container,
+  card-details-description {
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 1ch;
+  }
 }
-.card-details .card-details-header .card-details-menu {
-  font-size: 17px;
-  padding: 10px;
+
+/* Unify all card text to match title size */
+.card-details {
+  font-size: 1em;
 }
-.card-details .card-details-header .card-details-menu-mobile-web {
-  font-size: 17px;
-  padding: 10px;
-  margin-right: 30px;
+
+.card-details .card-details-header .card-details-watch {
+  color: #a6a6a6;
+}
+
+.card-details .card-details-header {
+  & .card-details-title {
+    display: inline-block;
+    font-weight: bold;
+    font-size: 1.33em;
+    margin: 0;
+    --overflow-lines: 3;
+    & p {
+      margin: 0;
+    }
+  }
+}
+
+
+.card-add-label, .card-details .js-date-format-selector {
+  padding: 0.2lh 0.5ch;
+}
+.card-details-main {
+  display: flex;
+  gap: 0.3lh;
+  flex-direction: column;
+  hr {
+    margin: 0;
+  }
+  &>div {
+    display: flex;
+    gap: 0.2lh;
+    flex: 1;
+  }
+  &>div:empty {
+    /* to avoid gaps */
+    display: none;
+  }
+  .card-details-misc-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3lh;
+  }
+  .card-details-date-container, .card-details-user-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1ch;
+    align-items: end;
+    h3 {
+      + *:not(:has(.member), :is(:hover)) {
+        background-color: #f7f7f7;
+      }
+      + *:not(:is(form)) {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        font-size: 0.8em;
+
+        &:not(.member, :has(.member)) {
+          border-radius: 5px;
+          justify-content: start;
+          height: 1.8lh;
+          padding: 0.3lh 1ch;
+        }
+
+        &:has(select) {
+          padding-inline: 0 !important;
+          >select {
+            align-self: stretch;
+          }
+        }
+
+        time {
+          color: black;
+        }
+        +form {
+          height: 3lh;
+          overflow: visible;
+          margin: 0.5lh 0;
+
+          > {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  .card-details-items {
+    gap: 0.5lh;
+  }
+  .card-details-comments {
+    flex-direction: column;
+    gap: 0.5lh;
+  }
+}
+
+.card-details-description {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.card-details-comments {
+  flex-direction: column;
+  gap: 0.5lh;
 }
 .card-details .card-details-header .card-details-watch {
-  font-size: 17px;
-  padding-left: 7px;
   color: #a6a6a6;
 }
 .card-details .card-details-header .card-details-title {
   font-weight: bold;
-  font-size: 1.33em;
-  margin: 7px 0 0;
+  font-size: 1.35em;
   padding: 0;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
 }
+
+body.mobile-mode {
+  .card-details .card-details-header .card-details-title {
+    --overflow-lines: 2;
+    font-size: 0.8em;
+  }
+}
+
 .card-details .card-details-header .linked-card-location {
   font-style: italic;
   font-size: 1em;
@@ -172,179 +438,70 @@
 .card-details .card-details-header .linked-card-location p {
   margin-bottom: 0;
 }
-.card-details .card-details-header form.inlined-form {
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-.card-details .card-details-header form.inlined-form .copied-tooltip {
-  padding: 0px 10px;
-}
-.card-details .card-details-header .card-details-list {
-  font-size: 0.85em;
-  margin-bottom: 3px;
-}
-.card-details .card-details-header .card-details-list a.card-details-list-title {
-  font-weight: bold;
-}
-.card-details .card-details-header .card-details-list a.card-details-list-title.is-editable {
-  display: inline-block;
-  background: #e6e6e6;
-  border-radius: 3px;
-  padding: 0px 5px;
-}
-.card-details .card-details-header .copied-tooltip {
-  margin-right: 10px;
-  padding: 10px;
-}
 .card-details .card-description i.fa.fa-pencil-square-o {
   float: right;
 }
 .card-details .card-description textarea {
-  min-height: 100px;
+  resize: vertical;
+  min-height: 2lh;
 }
-.card-details .card-details-items {
+.card-details {
+  .card-details-items, .card-details-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3lh;
+  }
+  .card-details-item {
+    justify-content: end;
+    align-self: stretch;
+  }
+  .card-details-avatar-container {
+    display: flex;
+    justify-content: start;
+    gap: 0.5ch;
+  }
+}
+.card-details-item-labels-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12ch, auto));
+  grid-auto-rows: 1.5lh;
+  align-items: stretch;
+  justify-content: start;
+  gap: 1ch;
+}
+
+.card-details .subtask-container {
   display: flex;
-  flex-wrap: wrap;
-  margin: 15px 0;
-}
-.card-details .card-details-items .card-details-item {
-  margin-right: 0.5em;
-  flex-grow: 1;
-}
-.card-details .card-details-items .card-details-item:last-child {
-  margin-right: 0;
-}
-.card-details .card-details-items .card-details-item.card-details-item-labels {
-  display: block;
-  word-wrap: break-word;
-  max-width: 95%;
-}
-.card-details .card-details-items .card-details-item.card-details-item-members,
-.card-details .card-details-items .card-details-item.card-details-item-assignees,
-.card-details .card-details-items .card-details-item.card-details-item-customfield,
-.card-details .card-details-items .card-details-item.card-details-item-name {
-  display: block;
-  word-wrap: break-word;
-  max-width: 36%;
-}
-.card-details .card-details-items .card-details-item.card-details-item-creator,
-.card-details .card-details-items .card-details-item.card-details-item-received,
-.card-details .card-details-items .card-details-item.card-details-item-start,
-.card-details .card-details-items .card-details-item.card-details-item-due,
-.card-details .card-details-items .card-details-item.card-details-item-end {
-  display: block;
-  word-wrap: break-word;
-  max-width: 28%;
-}
-.card-details .card-details-items .card-details-item.custom-fields {
-  padding-left: 10px;
+  flex: 1;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 1ch;
+  h2 {
+    margin: 0;
+  }
+  .subtask {
+    min-height: 1.5lh;
+  }
 }
 .card-details .card-details-item-title {
-  font-size: 16px;
   font-weight: bold;
   color: #4d4d4d;
+  display: flex;
+  align-items: center;
+  gap: 0.8ch;
+}
+
+.card-details .edit-card-details-description {
+  display: flex;
+  align-items: center;
+  gap: .5ch;
 }
 .card-details .activities {
   padding-top: 10px;
 }
-@media screen and (min-width: 801px) {
-  .card-details {
-    top: 97px;
-    left: calc(50% - (600px / 2));
-    width: 600px;
-    bottom: 0;
-    position: fixed;
-    resize: both;
-  }
-  .card-details-maximized {
-    padding: 0;
-    flex-shrink: 0;
-    flex-basis: calc(100% - 20px);
-    will-change: flex-basis;
-    overflow-y: scroll;
-    overflow-x: scroll;
-    background: #f7f7f7;
-    border-radius: bottom 3px;
-    z-index: 100;
-    animation: flexGrowIn 0.1s;
-    box-shadow: 0 0 7px 0 #b3b3b3;
-    transition: flex-basis 0.1s;
-    box-sizing: border-box;
-    top: 97px;
-    left: 0px;
-    height: calc(100% - 100px);
-    width: calc(100% - 20px);
-    float: left;
-  }
-  .card-details-maximized .card-details-left {
-    float: left;
-    top: 60px;
-    left: 20px;
-    width: 47%;
-    border-right: solid 2px #dbdbdb;
-    padding-right: 10px;
-  }
-  .card-details-maximized .card-details-right {
-    position: absolute;
-    float: right;
-    left: 50%;
-    margin: 15px 0;
-  }
-  .card-details-maximized .card-details-header {
-    width: 100%;
-  }
-}
-input[type="text"].attachment-add-link-input {
-  float: left;
-  margin: 0 0 8px;
-  width: 80%;
-}
-input[type="submit"].attachment-add-link-submit {
-  float: left;
-  margin: 0 0 8px 4px;
-  padding: 6px 12px;
-  width: 18%;
-}
-@media screen and (max-width: 800px) {
-  .card-details {
-    width: calc(100% - 1px);
-    padding: 0px 20px 0px 20px;
-    margin: 0px;
-    transition: none;
-    overflow-y: revert;
-    overflow-x: revert;
-  }
-  .card-details .card-details-canvas {
-    width: 100%;
-    padding-left: 0px;
-  }
-  .card-details .card-details-header .close-card-details {
-    margin-right: 0px;
-  }
-  .card-details .card-details-header .card-details-menu {
-    margin-right: 40px;
-  }
-  .card-details .card-details-header .maximize-card-details {
-    margin-right: 40px;
-  }
-  .card-details .card-details-header .minimize-card-details {
-    margin-right: 40px;
-  }
-  .card-details-popup {
-    padding: 0px 10px;
-  }
-  .pop-over > .content-wrapper > .popup-container-depth-0 {
-    width: 100%;
-  }
-  .pop-over > .content-wrapper > .popup-container-depth-0 > .content {
-    width: calc(100% - 10px);
-  }
-  .pop-over > .content-wrapper > .popup-container-depth-0 > .content > .card-details-popup hr {
-    margin: 15px 0px;
-  }
-  .pop-over > .content-wrapper > .popup-container-depth-0 .card-details-header {
-    margin: 0;
-  }
+
+body.mobile-mode .card-details .card-details-canvas {
+  padding: 0 !important;
 }
 .card-details-white {
   background: #fff !important;
@@ -453,14 +610,21 @@ input[type="submit"].attachment-add-link-submit {
 .vote-title {
   display: flex;
   justify-content: space-between;
+  & + .viewer {
+    font-size: 1.1em;
+    font-weight: bold;
+  }
+  align-items: center;
 }
 .vote-title .js-edit-date {
-  align-self: baseline;
-  margin-left: 5px;
+  align-self: flex-start;
 }
 .vote-result {
   display: flex;
-}
+  gap: 0.5ch;
+  .card-label {
+    min-width: 5ch;
+  }
 .js-show-positive-votes {
   cursor: pointer;
 }
@@ -470,29 +634,32 @@ 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;
 }
 .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 +670,7 @@ input[type="submit"].attachment-add-link-submit {
 }
 .responsive-table {
   overflow-x: auto;
+  width: 100%;
 }
 .poker-table {
   display: table;
@@ -556,20 +724,9 @@ input[type="submit"].attachment-add-link-submit {
 .estimation-add {
   display: block;
   overflow: auto;
-  margin-top: 15px;
-  margin-bottom: 5px;
-}
-.estimation-add input {
-  display: inline-block;
-  float: right;
-  margin: auto;
-  margin-right: 10px;
-  width: 100px;
 }
 .estimation-add button {
   display: inline-block;
-  float: right;
-  margin: auto;
 }
 .poker-card {
   width: 48px;
@@ -581,13 +738,13 @@ input[type="submit"].attachment-add-link-submit {
   box-sizing: border-box;
   padding: 5px;
   margin: 3px;
-  font-size: 20px;
   font-weight: bold;
   text-shadow: #2d2d2d 1px 1px 0;
   box-shadow: 0 0 5px #aaa;
   text-align: center;
   position: relative;
   cursor: pointer;
+  transition: box-shadow 0.12s;
 }
 .poker-card .inner {
   display: table-cell;
@@ -596,3 +753,21 @@ 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;
+}
+
+.cardMorePopup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1lh;
+  .card-add-date {
+    display: flex;
+    gap: 0.5ch;
+  }
+}

client/components/cards/cardTime.css

@@ -1,6 +1,6 @@
 .card-time {
   display: block;
-  border-radius: 4px;
+  border-radius: 0.4ch;
   padding: 1px 3px;
   color: #fff;
   background-color: #dbdbdb;

client/components/cards/cardTime.jade

@@ -15,8 +15,8 @@ template(name="editCardSpentTime")
 
 template(name="timeBadge")
   if canModifyCard
-    a.js-edit-time.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
-      | {{showTime}}
+    a.js-edit-time.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | ⏱️ {{showTime}}
   else
-    a.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
-      | {{showTime}}
+    a.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | ⏱️ {{showTime}}

client/components/cards/checklists.css

@@ -4,7 +4,7 @@
 textarea.js-add-checklist-item,
 textarea.js-edit-checklist-item {
   overflow: hidden;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   resize: none;
   height: 34px;
 }
@@ -13,7 +13,7 @@ textarea.js-edit-checklist-item {
 .js-convert-checklist-item-to-card {
   color: #8c8c8c;
   text-decoration: underline;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   float: right;
   padding-top: 6px;
 }
@@ -25,6 +25,7 @@ textarea.js-edit-checklist-item {
 .checklists-title {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .checklist-progress-bar-container {
   display: flex;
@@ -35,29 +36,41 @@ textarea.js-edit-checklist-item {
   margin-right: 10px;
 }
 .checklist-progress-bar-container .checklist-progress-bar {
-  width: 80%;
+  flex: 1;
   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%;
 }
-.checklist-title {
-  padding: 10px;
+
+.checklist-controls {
+  display: flex;
+  gap: 0.25lh;
 }
+
+.checklist-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .checklist-title .checkbox {
   float: left;
   width: 30px;
   height: 30px;
-  font-size: 18px;
+
   line-height: 30px;
 }
-.checklist-title .title {
-  font-size: 18px;
-  line-height: 25px;
+.checklist-title p, .title {
+  font-size: 1em;
+  line-height: 1;
+  margin: 0;
 }
 .checklist-title .checklist-stat {
   margin: 0 0.5em;
@@ -77,29 +90,31 @@ textarea.js-edit-checklist-item {
   bottom: -600px;
   right: 0;
 }
+
 .checklist {
-  background: #f7f7f7;
+  padding: 0.5lh;
+  margin: 0.5lh 0;
+  background-color: #f7f7f7;
 }
+
+
 .checklist.placeholder {
   background: #ccc;
   border-radius: 2px;
 }
 .checklist.ui-sortable-helper {
   box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
-  transform: rotate(4deg);
   cursor: grabbing;
 }
 .checklist-item {
-  margin: 0 0 0 0.1em;
-  line-height: 18px;
-  font-size: 1.1em;
-  margin-top: 3px;
   display: flex;
-  background: #f7f7f7;
+  gap: 0.25lh;
   opacity: 1;
   transition: height 0ms 400ms, opacity 400ms 0ms;
-  height: auto;
   overflow: hidden;
+  align-items: center;
+  min-height: 1.5lh;
+  padding: 0 1ch;
 }
 .checklist-item.is-checked.invisible {
   opacity: 0;
@@ -112,26 +127,21 @@ textarea.js-edit-checklist-item {
   background: #ccc;
   border-radius: 2px;
 }
-.checklist-item.ui-sortable-helper {
-  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
-  transform: rotate(4deg);
-  cursor: grabbing;
-}
 .checklist-item:hover {
   background-color: #ebebeb;
 }
-.checklist-item .check-box-container {
-  padding-right: 10px;
-}
 .checklist-item .check-box {
   margin: 0.1em 0 0 0;
 }
 .checklist-item .check-box.is-checked {
-  border-bottom: 2px solid #3cb500;
-  border-right: 2px solid #3cb500;
+  border-bottom: 0.2ch solid #3cb500;
+  border-right: 0.2ch solid #3cb500;
 }
 .checklist-item .item-title {
+  display: flex;
+  justify-content: start;
   flex: 1;
+  cursor: grab;
 }
 .checklist-item .item-title.is-checked {
   color: #8c8c8c;
@@ -139,27 +149,18 @@ textarea.js-edit-checklist-item {
   text-decoration: line-through;
 }
 .checklist-item .item-title .viewer p {
-  margin-bottom: 2px;
-  display: block;
-  word-wrap: break-word;
+  display: flex;
+  overflow-wrap: break-word;
   max-width: 420px;
 }
-.checklist-item span.fa.checklistitem-handle {
-  padding-top: 2px;
-  padding-right: 10px;
-}
 .js-delete-checklist-item,
 .js-convert-checklist-item-to-card {
   margin: 0 0 0.5em 1.33em;
   padding: 12px 0 0 0;
 }
-.add-checklist-item {
-  margin: 0.2em 0 0.5em 1.33em;
-}
 .add-checklist-item.js-open-inlined-form,
 .add-checklist.js-open-inlined-form {
-  display: block;
-  width: 50%;
+  display: inline-block;
 }
 .add-checklist-item.js-open-inlined-form:hover,
 .add-checklist.js-open-inlined-form:hover {
@@ -167,25 +168,13 @@ textarea.js-edit-checklist-item {
   color: #222;
   box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }
-.add-checklist-top {
-  /* more space to checklists title */
-  padding-left: 20px;
-  /* + is easier clickable */
-  padding-right: 20px;
-}
+
 .add-checklist-top.js-open-inlined-form:hover {
   background: #dbdbdb;
   color: #222;
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
 }
-.card-details-item-title {
-  /* max width for adding checklist at top */
-  width: 100%;
-}
-.checklist-details-menu {
-  float: right;
-  padding: 6px 10px 6px 10px;
-}
+
 .edit-controls label.toggle-label {
   margin-left: 2px;
 }

client/components/cards/checklists.jade

@@ -36,26 +36,31 @@ template(name="checklistDetail")
       +editChecklistItemForm(checklist = checklist)
     else
       .checklist-title
-        span
-        if canModifyCard
-          a.fa.fa-navicon.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
-
-        if canModifyCard
-          h4.title.js-open-inlined-form.is-editable
-            if isTouchScreenOrShowDesktopDragHandles
-              span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
+        h4.title
+          if canModifyCard
+            a.js-open-inlined-form.is-editable(title="{{_ 'moveChecklistPopup-title'}}")
+              +viewer
+                = checklist.title
+          else
             +viewer
               = checklist.title
-        else
-          h4.title
-            +viewer
+        .checklist-controls
+          if canModifyCard
+            a.fa.fa-navicon.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
+            if isMiniScreen
+              span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
+              +viewer
                 = checklist.title
 
-    if $gt finishedPercent 0
-      .checklist-progress-bar-container
-        .checklist-progress-text {{finishedPercent}}%
-        .checklist-progress-bar
+    //- jumps where checking the first item is not comfortable;
+    //- so try to show it anytime. also, it helps to separate the checklists.
+    .checklist-progress-bar-container
+      .checklist-progress-text {{finishedPercent}}%
+      .checklist-progress-bar
+        if $gt finishedPercent 0
           .checklist-progress(style="width:{{finishedPercent}}%")
+        else
+          .checklist-progress(style="visibility:hidden")
     +checklistItems(checklist = checklist card = card)
 
 template(name="checklistDeletePopup")
@@ -64,7 +69,7 @@ template(name="checklistDeletePopup")
 
 template(name="addChecklistItemForm")
   a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
-  span.copied-tooltip {{_ 'copied'}}
+  span.copied-tooltip.copied-tooltip-hidden {{_ 'copied'}}
   textarea.js-add-checklist-item(rows='1' autofocus)
   .edit-controls.clearfix
     button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
@@ -73,16 +78,12 @@ template(name="addChecklistItemForm")
       .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItem'}}")
         input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItem")
         label.toggle-label(for="toggleNewlineBecomesNewChecklistItem")
+      span.toggle-switch-desc
         | {{_ 'newLineNewItem'}}
-      if $eq position 'top'
-        .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItemOriginOrder'}}")
-          input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItemOriginOrder")
-          label.toggle-label(for="toggleNewlineBecomesNewChecklistItemOriginOrder")
-          | {{_ 'originOrder'}}
 
 template(name="editChecklistItemForm")
   a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
-  span.copied-tooltip {{_ 'copied'}}
+  span.copied-tooltip.copied-tooltip-hidden {{_ 'copied'}}
   textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
     if $eq type 'item'
       = item.title
@@ -99,13 +100,6 @@ template(name="editChecklistItemForm")
         | {{_ 'convertChecklistItemToCardPopup-title'}}
 
 template(name="checklistItems")
-  if checklist.items.length
-    if canModifyCard
-      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist position="top")
-        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true position="top")
-      else
-        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
-          i.fa.fa-plus
   .checklist-items.js-checklist-items
     each item in checklist.items
       +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
@@ -118,14 +112,15 @@ template(name="checklistItems")
       else
         a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
           i.fa.fa-plus
+    +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
+      +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true position="top")
 
 template(name='checklistItemDetail')
-  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if checklist.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}{{#if checklist.hideAllChecklistItems}} is-checked invisible{{/if}}"
-    role="checkbox" aria-checked="{{#if item.isFinished }}true{{else}}false{{/if}}" tabindex="0")
+  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if checklist.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}{{#if checklist.hideAllChecklistItems}} is-checked invisible{{/if}}" role="checkbox" aria-checked="{{#if item.isFinished }}true{{else}}false{{/if}}" tabindex="0")
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
-      if isTouchScreenOrShowDesktopDragHandles
+      if isMiniScreen
         span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
         +viewer
@@ -141,16 +136,16 @@ template(name="checklistActionsPopup")
     li
       a.js-delete-checklist.delete-checklist
         i.fa.fa-trash
-        | {{_ "delete"}} ...
+        | {{_ "delete"}}
       a.js-move-checklist.move-checklist
         i.fa.fa-arrow-right
-        | {{_ "moveChecklist"}} ...
+        | {{_ "moveChecklist"}}
       a.js-copy-checklist.copy-checklist
         i.fa.fa-copy
-        | {{_ "copyChecklist"}} ...
+        | {{_ "copyChecklist"}}
       a.js-hide-checked-checklist-items
         i.fa.fa-eye-slash
-        | {{_ "hideCheckedChecklistItems"}} ...
+        | {{_ "hideCheckedChecklistItems"}}
         .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
           if checklist.hideCheckedChecklistItems
             input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}" checked="checked")
@@ -158,7 +153,7 @@ template(name="checklistActionsPopup")
             input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}")
           label.toggle-label(for="toggleHideCheckedChecklistItems_{{checklist._id}}")
       a.js-hide-all-checklist-items
-        i.fa.fa-ban
+        | 🚫
         | {{_ "hideAllChecklistItems"}} ...
         .material-toggle-switch(title="{{_ 'hideAllChecklistItems'}}")
           if checklist.hideAllChecklistItems

client/components/cards/checklists.js

@@ -7,7 +7,7 @@ import { DialogWithBoardSwimlaneListCard } from '/client/lib/dialogWithBoardSwim
 const subManager = new SubsManager();
 const { calculateIndexData, capitalize } = Utils;
 
-function initSorting(items) {
+function initSorting(items, handleSelector) {
   items.sortable({
     tolerance: 'pointer',
     helper: 'clone',
@@ -16,6 +16,7 @@ function initSorting(items) {
     appendTo: 'parent',
     distance: 7,
     placeholder: 'checklist-item placeholder',
+    handle: handleSelector,
     scroll: true,
     start(evt, ui) {
       ui.placeholder.height(ui.helper.height());
@@ -48,8 +49,9 @@ function initSorting(items) {
 BlazeComponent.extendComponent({
   onRendered() {
     const self = this;
+    this.handleSelector = Utils.isMiniScreen() ? 'span.fa.checklistitem-handle' : '.item-title';
     self.itemsDom = this.$('.js-checklist-items');
-    initSorting(self.itemsDom);
+    initSorting(self.itemsDom, this.handleSelector);
     self.itemsDom.mousedown(function (evt) {
       evt.stopPropagation();
     });
@@ -63,11 +65,9 @@ BlazeComponent.extendComponent({
       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',
-          });
-        }
+        $(self.itemsDom).sortable({
+          handle: this.handleSelector,
+        });
       }
     });
   },
@@ -157,7 +157,7 @@ BlazeComponent.extendComponent({
     textarea.focus();
   },
 
-  deleteItem() {
+  async deleteItem() {
     const checklist = this.currentData().checklist;
     const item = this.currentData().item;
     if (checklist && item && item._id) {

client/components/cards/labels.css

@@ -1,20 +1,20 @@
 .card-label {
-  border: 1px solid #000;
-  border-radius: 4px;
+  border-radius: 0.4ch;
   color: #fff;
   display: inline-block;
   font-weight: 700;
-  font-size: 13px;
-  margin-right: 4px;
-  margin-bottom: 5px;
-  padding: 3px 8px;
-  max-width: 210px;
-  min-width: 8px;
-  word-wrap: break-word;
-  min-height: 18px;
-  vertical-align: middle;
-  white-space: initial;
-  overflow: initial;
+  font-size: 0.9em;
+  display: flex;
+  /* prefer not using padding/margin but let outer grids
+  position/size labels (see e.g. minicards), otherwise we get
+  inconsistencies */
+  align-self: stretch;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 0 0.5ch;
+  height: var(--label-height);
+  min-width: 8ch;
 }
 .card-label:hover {
   color: #fff;
@@ -34,10 +34,12 @@
 }
 .card-label p {
   margin: 0px;
+  --overflow-lines: 1;
 }
 .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;
@@ -137,37 +139,22 @@
 .card-label-indigo {
   background-color: #4b0082;
 }
-.edit-label .card-label,
-.create-label .card-label {
-  float: left;
-  height: 25px;
-  margin: 0px 3% 7px 0px;
-  width: 10.5%;
-  max-width: 10.5%;
-  cursor: pointer;
-}
-.edit-labels input[type="text"] {
-  margin: 4px 0 6px 38px;
-  width: 243px;
-}
-.edit-labels .card-label {
-  height: 30px;
-  left: 0;
-  padding: 1px 5px;
-  position: absolute;
-  top: 0;
-  width: 24px;
-}
-.edit-labels .labels-static .card-label {
-  line-height: 30px;
-  margin-bottom: 4px;
-  position: relative;
-  top: auto;
-  left: 0;
-  width: 260px;
-}
 .edit-labels-pop-over {
-  margin-bottom: 8px;
+  display: grid;
+  /* so that inner elements, align nicely */
+  grid-template-columns: 1fr;
+  gap: 0.1lh;
+  >li {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 1ch;
+    align-items: center;
+  }
+  .card-label-selectable {
+    flex: 1;
+    display: flex;
+    gap: 1ch;
+  }
 }
 .edit-labels-pop-over .card-label .viewer p {
   margin: 0;
@@ -175,34 +162,6 @@
 .edit-labels-pop-over .shortcut {
   display: inline-block;
 }
-.card-label-selectable {
-  border-radius: 3px;
-  cursor: pointer;
-  margin: 0;
-  margin-bottom: 3px;
-  width: 190px;
-  min-height: 18px;
-  padding: 8px;
-  position: relative;
-  transition: margin-right 0.1s;
-}
-.card-label-selectable .card-label-selectable-icon {
-  position: absolute;
-  top: 8px;
-  right: -20px;
-}
-.card-label-selectable.active:hover,
-.card-label-selectable.active,
-.card-label-selectable.active.selected:hover,
-.card-label-selectable.active.selected {
-  padding-right: 32px;
-}
-.card-label-selectable.active:hover .card-label-selectable-icon,
-.card-label-selectable.active .card-label-selectable-icon,
-.card-label-selectable.active.selected:hover .card-label-selectable-icon,
-.card-label-selectable.active.selected .card-label-selectable-icon {
-  right: 6px;
-}
 .card-label-selectable.selected,
 .card-label-selectable:hover {
   opacity: 0.8;
@@ -211,20 +170,6 @@
 .active .card-label-selectable:hover {
   margin-right: 0;
 }
-.active .card-label-selectable .card-label-selectable-icon {
-  right: 8px;
-}
-.card-label-edit-button {
-  border-radius: 3px;
-  float: right;
-  padding: 8px;
-}
 .card-label-edit-button:hover {
   background: #dbdbdb;
-}
-ul.edit-labels-pop-over span.fa.label-handle {
-  padding-right: 10px;
-}
-ul.edit-labels-pop-over span.fa.label-handle + .card-label {
-  max-width: 180px;
-}
+}

client/components/cards/minicard.css

@@ -1,13 +1,35 @@
+.minicard-body {
+  display: flex;
+  flex-direction: column;
+  padding: 0 1ch 0.2lh 1ch;
+  gap: 0.2lh;
+}
+
 .minicard-wrapper {
   cursor: pointer;
   position: relative;
   display: flex;
   align-items: center;
-  margin-bottom: 9px;
+  height: min-content;
 }
+.minicard-header {
+  display: flex;
+  align-items: center;
+  padding: 0 1ch;
+  gap: 1ch;
+}
+
+.minicard > hr {
+  margin: 0;
+}
+
+.minicard-add-form {
+  width: auto;
+}
+
 .minicard-wrapper.placeholder {
   background: #ccc;
-  border-radius: 9px;
+  border-radius: 1.2vw;
 }
 .minicard-wrapper.ui-sortable-helper {
   cursor: grabbing;
@@ -16,43 +38,37 @@
 }
 .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;
-    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;
-    color: #4d4d4d;
-    overflow: hidden;
-    transition: transform 0.2s, border-radius 0.2s;
-  }
+.minicard {
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-rows: min-content 1fr auto auto;
+  gap: 0.4lh;
+  background-color: #fff;
+  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;
+  flex: 1;
 }
-.minicard-details-menu-with-handle {
-  float: right;
-  font-size: 18px;
-  padding-right: 30px;
-  padding-left: 5px;
-}
-.minicard-details-menu {
-  float: right;
-  font-size: 18px;
-  padding-left: 5px;
+
+.minicard-actions-right {
+  justify-content: end;
+  display: flex;
+  align-items: end;
+  gap: .5lh;
 }
 @media print {
   .minicard-details-menu,
@@ -63,7 +79,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 +88,10 @@
   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,27 +105,39 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
-  height: 145px;
+  height: 20vh;
   user-select: none;
-  margin: 6px -8px 6px -8px;
-  border-radius: top 2px;
+  margin: 0.8vh -1vw 0.8vh -1vw;
+  border-radius: top 0.3vw;
 }
-.minicard .minicard-labels {
-  float: none;
-}
-.minicard .minicard-labels .minicard-label {
-  width: 11px;
-  height: 11px;
-  border-radius: 2px;
-  margin-right: 3px;
-  margin-bottom: 3px;
-}
-.minicard .minicard-labels-no-text {
-  display: flex;
-  flex-wrap: wrap;
+.minicard {
+  .minicard-labels, .dates {
+    display: grid;
+    grid-auto-rows: min-content;
+    justify-content: stretch;
+    font-size: 0.8em;
+    grid-auto-rows: minmax(1.3lh, auto);
+  }
+  .minicard-labels {
+    grid-template-columns: repeat(auto-fill, minmax(12ch, auto));
+    gap: 0.2lh 0.5ch;
+  }
+  .minicard-labels-no-text {
+    grid-template-columns: repeat(auto-fill, 4ch);
+    grid-template-rows: 4ch;
+    font-size: 0.4em;
+    .minicard-label {
+      border-radius: 1ch;
+    }
+  }
+  .dates {
+    height: min-content;
+    grid-template-columns: repeat(auto-fit, minmax(15ch, auto));
+  }
 }
 .minicard .minicard-custom-fields {
   display: block;
+  margin-right: 6vw;
 }
 .minicard .minicard-custom-field {
   display: flex;
@@ -118,152 +145,296 @@
 .minicard .minicard-custom-field-item {
   flex-grow: 1;
   display: block;
-  word-wrap: break-word;
-  max-width: 100px;
-  margin-right: 4px;
+  overflow-wrap: break-word;
+  max-width: 13vw;
+  margin-right: 0.5vw;
 }
 .minicard .minicard-custom-field-item-fullwidth {
   flex-grow: 1;
   display: block;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   max-width: 100%;
-  margin-right: 4px;
+  margin-right: 0.5vw;
 }
 .minicard .handle {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  right: 5px;
-  top: 5px;
   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 {
+  display: flex;
+  max-width: 100%;
+  flex: 1;
+  cursor: grab;
+  .viewer {
+    --overflow-lines: 2;
+  }
+
 }
 .minicard .minicard-title .card-number {
   color: #b3b3b3;
   display: inline-block;
-  margin-right: 5px;
-}
-@media only screen {
-  .minicard .minicard-title p:last-child {
-    margin-bottom: 0;
-  }
-  .minicard .minicard-title .viewer {
-    display: block;
-    word-wrap: break-word;
-  }
-}
-.minicard .dates {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  margin-right: 0.7vw;
 }
 .minicard .date {
-  margin-right: 3px;
+  display: flex;
+  &>a {
+    display: flex;
+    justify-content: center;
+    flex: 1;
+    align-items: center;
+    text-align: center;
+    align-self: stretch;
+  }
+}
+/* Date type specific colors for minicards - matching cardDate.css */
+.minicard .card-date.received-date {
+  background-color: #d3d3d3; /* Grey for received - a bit darker than 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 .minicard-badges-and-creator {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: end;
+  gap: 0 0.5ch;;
+}
+
+.minicard-people-grid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-auto-rows: auto;
+}
+
+.minicard-people-wrapper {
+  display: flex;
+  justify-content: end;
+  gap: 0.1lh;
 }
 .minicard .badges {
-  float: left;
-  margin-top: 7px;
+  display: flex;
+  align-items: center;
+  gap: 1.5ch;
   color: #808080;
+  /* this avoid padding-ish at the bottom of the card */
+  font-size: 0.8rem;
 }
-.minicard .badges:empty {
-  display: none;
-}
-.minicard .badges .badge {
-  float: left;
-  margin-right: 11px;
-  margin-bottom: 3px;
-  font-size: 0.9em;
-}
+
 .minicard .badges .badge.is-finished {
   background: #3cb500;
-  padding: 0px 3px;
-  border-radius: 3px;
-  color: #fff;
+  padding: 0.3lh 0.8ch;
+  border-radius: 0.4vw;
+  &, .fa {
+    color: #fff;
+  }
 }
 .minicard .badges .badge:last-of-type {
   margin-right: 0;
 }
-.minicard .badges .badge .badge-icon,
-.minicard .badges .badge .badge-text {
-  vertical-align: middle;
-}
-.minicard .badges .badge .badge-icon.badge-comment,
-.minicard .badges .badge .badge-text.badge-comment {
-  margin-bottom: 0.1rem;
-}
-.minicard .badges .badge .badge-text {
-  font-size: 0.9em;
-  padding-left: 2px;
-  line-height: 14px;
-}
-.minicard .badges .badge .check-list-text {
-  padding-left: 0px;
-  line-height: 12px;
-}
-.minicard .minicard-members,
-.minicard .minicard-assignees,
-.minicard .minicard-creator {
-  float: right;
-  margin-left: 5px;
-  margin-bottom: 4px;
-}
 .minicard .minicard-members .member,
 .minicard .minicard-assignees .member,
 .minicard .minicard-creator .member {
-  float: right;
+  display: flex;
   border-radius: 50%;
-  height: 28px;
-  width: 28px;
-  margin-bottom: 4px;
+  font-size: 0.8em;
+  margin-bottom: 0.2lh;
 }
-.minicard .minicard-members .assignee,
-.minicard .minicard-assignees .assignee,
-.minicard .minicard-creator .assignee {
-  float: right;
-  border-radius: 50%;
-  height: 28px;
-  width: 28px;
+
+.minicard .minicard-assignees .member {
+  border: 2px solid rgb(180, 87, 87);
 }
-.minicard .minicard-members + .badges,
-.minicard .minicard-assignees + .badges,
-.minicard .minicard-creator + .badges {
-  margin-top: 5px;
+
+.minicard .minicard-creator .member {
+  border: 2px solid #7fd67f;
+}
+
+.minicard .minicard-members .member {
+  border: 2px solid #5a5ac6;
 }
 .minicard .minicard-assignees {
-  border-bottom: 1px solid #f00;
-}
-.minicard .minicard-creator {
-  border-bottom: 1px solid #008000;
+  display: flex;
 }
+
 .minicard .minicard-members:empty,
 .minicard .minicard-assignees:empty {
   display: none;
 }
 .minicard .minicard-description {
-  padding: 6px 0 0 8px;
   color: #000;
   background-color: #eee;
-  width: 100%;
-  margin-bottom: 2px;
-  margin-left: -4px;
-  border-radius: 3px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
+  padding: 0.5lh 1ch;
+  --overflow-lines: 2;
+  .viewer {
+    font-size: 0.9em;
+    ul {
+      padding-bottom: 0;
+    }
+  }
 }
+
+.minicard .minicard-description p {
+  margin: 0;
+}
+
+.minicard-composer {
+  display: flex;
+  flex-direction: column;
+
+  .minicard-composer-icons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.2lh;
+  }
+
+  .minicard-bottom {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    gap: 1ch;
+
+    .minicard-composer-icons {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      flex-direction: row-reverse;
+    }
+
+    .add-controls {
+      display: flex;
+      align-self: start;
+    }
+
+    textarea {
+      display: flex;
+      flex: 1;
+    }
+  }
+}
+
 .minicard.minicard-composer {
-  margin-bottom: 10px;
+  flex-wrap: wrap;
+  flex: 1;
+  align-self: stretch;
+  gap: 0.3lh;
+  padding: 0.5lh 1ch;
+  position: relative;
 }
+
 .minicard.minicard-composer textarea.minicard-composer-textarea,
 .minicard.minicard-composer textarea.minicard-composer-textarea:focus {
   resize: none;
@@ -272,11 +443,11 @@
   box-shadow: none;
   height: auto;
   margin: 0;
-  padding: 0;
-  max-height: 162px;
-  min-height: 36px;
-  margin-bottom: 20px;
+  padding: 1ch;
+  min-height: 5lh;
   overflow-y: auto;
+  flex: 1;
+  width: 100%;
 }
 .parent-prefix {
   color: #b3b3b3;
@@ -580,3 +751,81 @@
 .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: inherit;
+  color: #8c8c8c;
+  display: flex;
+  padding: 0 0.5ch;
+  display: flex;
+  gap: 0.5ch;
+}
+
+.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

@@ -1,227 +1,236 @@
 template(name="minicard")
+  if isSelected
+    +cardDetailsPopup(this)
   .minicard.nodragscroll(
     class="{{#if isLinkedCard}}linked-card{{/if}}"
     class="{{#if isLinkedBoard}}linked-board{{/if}}"
     class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
-    if canModifyCard
-      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'}}")
     .dates
-      if getReceived
-        unless getStart
-          unless getDue
-            unless getEnd
-              .date
-                +minicardReceivedDate
-      if getStart
-        .date
-          +minicardStartDate
-      if getDue
-        .date
-          +minicardDueDate
-      if getEnd
-         +minicardEndDate
+      if allowsReceivedDate
+        if getReceived
+          .date.viewer
+            +minicardReceivedDate
+      if allowsStartDate
+        if getStart
+          .date.viewer
+            +minicardStartDate
+      if allowsDueDate
+        if getDue
+          .date.viewer
+            +minicardDueDate
+      if allowsEndDate
+        if getEnd
+          .date.viewer
+            +minicardEndDate
       if getSpentTime
-        .date
+        .date.viewer
           +cardSpentTime
-    if cover
-      if currentBoard.allowsCoverAttachmentOnMinicard
-        .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")
-    .minicard-title
-      if $eq 'prefix-with-full-path' currentBoard.presentParentTask
-        .parent-prefix
-          | {{ parentString ' > ' }}
-      if $eq 'prefix-with-parent' currentBoard.presentParentTask
-        .parent-prefix
-          | {{ parentCardName }}
-      if isLinkedBoard
-        a.js-linked-link
-          span.linked-icon.fa.fa-folder
-      else if isLinkedCard
-        a.js-linked-link
-          span.linked-icon.fa.fa-id-card
-      if getArchived
-        span.linked-icon.linked-archived.fa.fa-archive
-      +viewer
-        if currentBoard.allowsCardNumber
-          span.card-number
-            | ##{getCardNumber}
-        = getTitle
-      if $eq 'subtext-with-full-path' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentString ' > ' }}
-      if $eq 'subtext-with-parent' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentCardName }}
-    if labels
-      .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
-        each labels
-          unless hiddenMinicardLabelText
-            span.js-card-label.card-label(class="card-label-{{color}}" title=name)
-              +viewer
-                = name
-          if hiddenMinicardLabelText
-            .minicard-label(class="card-label-{{color}}" title="{{name}}")
+    .minicard-header
+      .minicard-title
+        if $eq 'prefix-with-full-path' currentBoard.presentParentTask
+          .parent-prefix
+            | {{ parentString ' > ' }}
+        if $eq 'prefix-with-parent' currentBoard.presentParentTask
+          .parent-prefix
+            | {{ parentCardName }}
+        if isLinkedBoard
+          a.js-linked-link
+            span.linked-icon
+              i.fa.fa-folder
+        else if isLinkedCard
+          a.js-linked-link
+            span.linked-icon
+              i.fa.fa-id-card
+        if getArchived
+          span.linked-icon.linked-archived
+            i.fa.fa-archive
+        +viewer
+          if allowsCardNumber
+            span.card-number
+              | ##{getCardNumber} 
+          = getTitle
+      div.minicard-actions-right
+        if canModifyCard
+          a.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+            i.fa.fa-bars
+        if isMiniScreen
+          if canMoveCard
+            .handle
+              i.fa.fa-arrows
+    hr
+    .minicard-body
+      if cover
+        if allowsCoverAttachmentOnMinicard
+          .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")
 
-    .minicard-custom-fields
-      each customFieldsWD
-        if definition.showOnCard
-          if trueValue
-            .minicard-custom-field
-              // If there is custom field label, show label at left,
-              // and value at right
-              if definition.showLabelOnMiniCard
-                .minicard-custom-field-item
-                  +viewer
-                    = definition.name
-                .minicard-custom-field-item
-                  if $eq definition.type "currency"
-                    +viewer
-                      = formattedCurrencyCustomFieldValue(definition)
-                  else if $eq definition.type "date"
-                    .date
-                      +minicardCustomFieldDate
-                  else if $eq definition.type "checkbox"
-                    .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
-                  else if $eq definition.type "stringtemplate"
-                    +viewer
-                      = formattedStringtemplateCustomFieldValue(definition)
-                  else
-                    +viewer
-                      = trueValue
-              else
-                // If there is no custom field label,
-                // show value full width
-                .minicard-custom-field-item-fullwidth
-                  if $eq definition.type "currency"
-                    +viewer
-                      = formattedCurrencyCustomFieldValue(definition)
-                  else if $eq definition.type "date"
-                    .date
-                      +minicardCustomFieldDate
-                  else if $eq definition.type "checkbox"
-                    .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
-                  else if $eq definition.type "stringtemplate"
-                    +viewer
-                      = formattedStringtemplateCustomFieldValue(definition)
-                  else
-                    +viewer
-                      = trueValue
+      //- 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'}}
 
-    if showAssignee
-      if getAssignees
-        .minicard-assignees.js-minicard-assignees
-          each getAssignees
-            +userAvatar(userId=this)
+      if labels
+        .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
+          each labels
+            unless hiddenMinicardLabelText
+              span.js-card-label.card-label(class="card-label-{{color}}" title=name)
+                +viewer
+                  = name
+            if hiddenMinicardLabelText
+              .minicard-label(class="card-label-{{color}}" title="{{name}}")
 
-    if showMembers
-      if getMembers
-        .minicard-members.js-minicard-members
-          each getMembers
-            +userAvatar(userId=this)
+      .minicard-custom-fields
+        each customFieldsWD
+          if definition.showOnCard
+            if trueValue
+              .minicard-custom-field
+                // If there is custom field label, show label at left,
+                // and value at right
+                if definition.showLabelOnMiniCard
+                  .minicard-custom-field-item
+                    +viewer
+                      = definition.name
+                  .minicard-custom-field-item
+                    if $eq definition.type "currency"
+                      +viewer
+                        = formattedCurrencyCustomFieldValue(definition)
+                    else if $eq definition.type "date"
+                      .date
+                        +minicardCustomFieldDate
+                    else if $eq definition.type "checkbox"
+                      .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
+                    else if $eq definition.type "stringtemplate"
+                      +viewer
+                        = formattedStringtemplateCustomFieldValue(definition)
+                    else
+                      +viewer
+                        = trueValue
+                else
+                  // If there is no custom field label,
+                  // show value full width
+                  .minicard-custom-field-item-fullwidth
+                    if $eq definition.type "currency"
+                      +viewer
+                        = formattedCurrencyCustomFieldValue(definition)
+                    else if $eq definition.type "date"
+                      .date
+                        +minicardCustomFieldDate
+                    else if $eq definition.type "checkbox"
+                      .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
+                    else if $eq definition.type "stringtemplate"
+                      +viewer
+                        = formattedStringtemplateCustomFieldValue(definition)
+                    else
+                      +viewer
+                        = trueValue
+      .minicard-people-grid
+        if allowsAssignee
+          if getAssignees
+            .minicard-people-wrapper
+              .minicard-assignees.js-minicard-assignees
+                each getAssignees
+                  +userAvatar(userId=this)
 
-    if showCreatorOnMinicard
-      .minicard-creator
-        +userAvatar(userId=this.userId noRemove=true)
+        if allowsMembers
+          if getMembers
+            .minicard-people-wrapper
+              .minicard-members.js-minicard-members
+                each getMembers
+                  +userAvatar(userId=this)
 
-    .badges
-      if canModifyCard
-        if comments.length
-          .badge(title="{{_ 'card-comments-title' comments.length }}")
-            span.badge-icon.fa.fa-comment-o.badge-comment.badge-text
-              = ' '
-              = comments.length
-            //span.badge-comment.badge-text
-            //|  {{_ 'comment'}}
-      if getDescription
-        unless currentBoard.allowsDescriptionTextOnMinicard
-          .badge.badge-state-image-only(title=getDescription)
-            span.badge-icon.fa.fa-align-left
-      if getVoteQuestion
-        .badge.badge-state-image-only(title=getVoteQuestion)
-          span.badge-icon.fa.fa-thumbs-up(class="{{#if voteState}}text-green{{/if}}")
-          span.badge-text {{ voteCountPositive }}
-          span.badge-icon.fa.fa-thumbs-down(class="{{#if $eq voteState false}}text-red{{/if}}")
-          span.badge-text {{ voteCountNegative }}
-      if getPokerQuestion
-        .badge.badge-state-image-only(title=getPokerQuestion)
-          span.badge-icon.fa.fa-check(class="{{#if pokerState}}text-green{{/if}}")
-          if expiredPoker
-            span.badge-text {{ getPokerEstimation }}
-      if attachments.length
-        if currentBoard.allowsBadgeAttachmentOnMinicard
-          .badge
-            span.badge-icon.fa.fa-paperclip
-            span.badge-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-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-text.check-list-sort {{ sort }}
-    if currentBoard.allowsDescriptionTextOnMinicard
+      .minicard-badges-and-creator
+        if allowsCreatorOnMinicard
+          .minicard-creator
+            +userAvatar(userId=this.userId noRemove=true)
+
+        .badges
+          if canModifyCard
+            if allowsComments
+              if comments.length
+                .badge(title="{{_ 'card-comments-title' comments.length }}")
+                  span.badge-icon.badge-comment.badge-text
+                    i.fa.fa-comment-o
+                      = ' '
+                      = comments.length
+                  //span.badge-comment.badge-text
+                  //|  {{_ 'comment'}}
+          if getDescription
+            unless allowsDescriptionTextOnMinicard
+              .badge.badge-state-image-only(title=getDescription)
+                span.badge-icon
+                  i.fa.fa-file-text-o
+          if getVoteQuestion
+            .badge.badge-state-image-only(title=getVoteQuestion)
+              span.badge-icon(class="{{#if voteState}}text-green{{/if}}")
+                i.fa.fa-thumbs-up
+              span.badge-text {{ voteCountPositive }}
+              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(class="{{#if pokerState}}text-green{{/if}}")
+                i.fa.fa-check-square
+              if expiredPoker
+                span.badge-text {{ getPokerEstimation }}
+          if attachments.length
+            if allowsBadgeAttachmentOnMinicard
+              .badge
+                span.badge-icon
+                  i.fa.fa-paperclip
+                span.badge-text= attachments.length
+          if checklists.length
+            if allowsChecklists
+              .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
+                span.badge-icon
+                  i.fa.fa-check
+                span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
+          if allSubtasks.count
+            if allowsSubtasks
+              .badge
+                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 allowsCardSortingByNumber
+            if allowsCardSortingByNumberOnMinicard
+              .badge
+                span.badge-icon
+                  i.fa.fa-sort-numeric-asc
+                span.badge-text.check-list-sort {{ sort }}
+          if shouldShowListOnMinicard
+            .minicard-list-name
+              span
+                i.fa.fa-list
+              span
+                | {{ listName }}
+          if $eq 'subtext-with-full-path' presentParentTask
+            .parent-subtext
+              | {{ parentString ' > ' }}
+          if $eq 'subtext-with-parent' presentParentTask
+            .parent-subtext
+              | {{ parentCardName }}
+    if allowsDescriptionTextOnMinicard
       if getDescription
         .minicard-description
           +viewer
             | {{ getDescription }}
 
 template(name="editCardSortOrderPopup")
-  input.js-edit-card-sort-popup(type='text' autofocus value=sort dir="auto")
+  input.js-edit-card-sort-popup(type='text' 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'}}
+    button.primary.confirm.js-submit-edit-card-sort-popup(type="submit") {{_ 'save'}}

client/components/cards/minicard.js

@@ -1,6 +1,8 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
-import { CustomFieldStringTemplate } from '/client/lib/customFields'
+import { CustomFieldStringTemplate } from '/client/lib/customFields';
+import { handleFileUpload } from './attachments';
+import uploadProgressManager from '../../lib/uploadProgressManager';
 
 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
@@ -11,6 +13,24 @@ BlazeComponent.extendComponent({
     return 'minicard';
   },
 
+  onRendered() {
+    // cannot be done with CSS because newlines
+    // rendered by the JADE engine count as non empty
+    // and some "empty" divs are nested
+    // this is not very robust and could probably be
+    // done with a helper, but it could be in fact worse
+    // because we would need to to if (allowsX() && X() && ...)
+    const body = $(this.find('.minicard-body'));
+    if (!body) {return}
+    let emptyChildren;
+    do  {
+      emptyChildren = body.find('*').filter((_, e) => !e.classList.contains('fa') && $(e).html().trim().length === 0).remove();
+    } while (emptyChildren.length > 0)
+    if (body.html().trim().length === 0) {
+      body.parent().find('hr:has(+ .minicard-body)').remove();
+    }
+  },
+
   formattedCurrencyCustomFieldValue(definition) {
     const customField = this.data()
       .customFieldsWD()
@@ -37,42 +57,14 @@ BlazeComponent.extendComponent({
     return ret;
   },
 
-  showCreatorOnMinicard() {
-    // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
-    let ret = false;
-    if (board) {
-      ret = board.allowsCreatorOnMinicard ?? false;
-    }
-    return ret;
+  isWatching() {
+    const card = this.currentData();
+    return card.findWatcher(Meteor.userId());
   },
 
-  showMembers() {
-    // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
-    let ret = false;
-    if (board) {
-      ret =
-        board.allowsMembers === null ||
-        board.allowsMembers === undefined ||
-        board.allowsMembers
-      ;
-    }
-    return ret;
-  },
-
-  showAssignee() {
-    // cache "board" to reduce the mini-mongodb access
-    const board = this.data().board();
-    let ret = false;
-    if (board) {
-      ret =
-        board.allowsAssignee === null ||
-        board.allowsAssignee === undefined ||
-        board.allowsAssignee
-      ;
-    }
-    return ret;
+  isSelected() {
+    const card = this.currentData();
+    return Session.get('currentCard') === card._id;
   },
 
   /** opens the card label popup only if clicked onto a label
@@ -81,10 +73,19 @@ BlazeComponent.extendComponent({
    */
   cardLabelsPopup(event) {
     if (this.find('.js-card-label:hover')) {
+      event.preventDefault();
+      event.stopPropagation();
       Popup.open("cardLabels")(event, {dataContextIfCurrentDataIsUndefined: this.currentData()});
     }
   },
 
+  async toggleChecklistItem() {
+    const item = this.currentData();
+    if (item && item._id) {
+      await item.toggleItem();
+    }
+  },
+
   events() {
     return [
       {
@@ -102,12 +103,109 @@ BlazeComponent.extendComponent({
         },
         'click span.badge-icon.fa.fa-sort, click span.badge-text.check-list-sort' : Popup.open("editCardSortOrder"),
         'click .minicard-labels' : this.cardLabelsPopup,
-        'click .js-open-minicard-details-menu': Popup.open('minicardDetailsActions'),
+        'click .js-open-minicard-details-menu'(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          Popup.open('cardDetailsActions').call(this, event);
+        },
+        // Drag and drop file upload handlers
+        'dragover .minicard'(event) {
+          // Only prevent default for file drags to avoid interfering with sortable
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        'dragenter .minicard'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            const card = this.data();
+            const board = card.board();
+            // Only allow drag-and-drop if user can modify card and board allows attachments
+            if (Utils.canModifyCard() && board && board.allowsAttachments) {
+              $(event.currentTarget).addClass('is-dragging-over');
+            }
+          }
+        },
+        'dragleave .minicard'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.currentTarget).removeClass('is-dragging-over');
+          }
+        },
+        'drop .minicard'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.currentTarget).removeClass('is-dragging-over');
+
+            const card = this.data();
+            const board = card.board();
+
+            // Check permissions
+            if (!Utils.canModifyCard() || !board || !board.allowsAttachments) {
+              return;
+            }
+
+            // Check if this is a file drop (not a card reorder)
+            if (!dataTransfer.files || dataTransfer.files.length === 0) {
+              return;
+            }
+
+            const files = dataTransfer.files;
+            if (files && files.length > 0) {
+              handleFileUpload(card, files);
+            }
+          }
+        },
       }
     ];
   },
 }).register('minicard');
 
+BlazeComponent.extendComponent({
+  template() {
+    return 'minicardChecklist';
+  },
+
+  events() {
+    return [
+      {
+        'click .js-open-checklist-menu'(event) {
+          const data = this.currentData();
+          const checklist = data.checklist || data;
+          const card = data.card || this.data();
+          const context = { currentData: () => ({ checklist, card }) };
+          Popup.open('checklistActions').call(context, event);
+        },
+      },
+    ];
+  },
+
+  visibleItems() {
+    const checklist = this.currentData().checklist || this.currentData();
+    const items = checklist.items();
+
+    return items.filter(item => {
+      // Hide finished items if hideCheckedChecklistItems is true
+      if (item.isFinished && checklist.hideCheckedChecklistItems) {
+        return false;
+      }
+      // Hide all items if hideAllChecklistItems is true
+      if (checklist.hideAllChecklistItems) {
+        return false;
+      }
+      return true;
+    });
+  },
+}).register('minicardChecklist');
+
 Template.minicard.helpers({
   hiddenMinicardLabelText() {
     const currentUser = ReactiveCache.getCurrentUser();
@@ -125,6 +223,27 @@ Template.minicard.helpers({
       ? Meteor.connection._lastSessionId
       : null;
   },
+  isWatching() {
+    return this.findWatcher(Meteor.userId());
+  },
+  // Upload progress helpers
+  hasActiveUploads() {
+    return uploadProgressManager.hasActiveUploads(this._id);
+  },
+  uploads() {
+    return uploadProgressManager.getUploadsForCard(this._id);
+  },
+  uploadCount() {
+    return uploadProgressManager.getUploadCountForCard(this._id);
+  },
+  listName() {
+    const list = this.list();
+    return list ? list.title : '';
+  },
+
+  shouldShowListOnMinicard() {
+    return Utils.allowsShowLists();
+  },
 });
 
 BlazeComponent.extendComponent({
@@ -154,28 +273,3 @@ BlazeComponent.extendComponent({
   }
 }).register('editCardSortOrderPopup');
 
-Template.minicardDetailsActionsPopup.events({
-  'click .js-due-date': Popup.open('editCardDueDate'),
-  'click .js-move-card': Popup.open('moveCard'),
-  'click .js-copy-card': Popup.open('copyCard'),
-  'click .js-set-card-color': Popup.open('setCardColor'),
-  'click .js-add-labels': Popup.open('cardLabels'),
-  'click .js-link': Popup.open('linkCard'),
-  'click .js-move-card-to-top'(event) {
-    event.preventDefault();
-    const minOrder = this.getMinSort();
-    this.move(this.boardId, this.swimlaneId, this.listId, minOrder - 1);
-    Popup.back();
-  },
-  'click .js-move-card-to-bottom'(event) {
-    event.preventDefault();
-    const maxOrder = this.getMaxSort();
-    this.move(this.boardId, this.swimlaneId, this.listId, maxOrder + 1);
-    Popup.back();
-  },
-  'click .js-archive': Popup.afterConfirm('cardArchive', function () {
-    Popup.close();
-    this.archive();
-    Utils.goBoardId(this.boardId);
-  }),
-});

client/components/cards/resultCard.css

@@ -18,7 +18,8 @@
   font-weight: bold;
 }
 .result-card-context-list {
-  margin-bottom: 0.7rem;
+  display: flex;
+  gap: 0.2ch;
 }
 .result-card-block-wrapper {
   display: inline-block;

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

@@ -14,17 +14,10 @@ BlazeComponent.extendComponent({
       onReady() {
         Session.set('popupCardId', cardId);
         Session.set('popupCardBoardId', boardId);
-        this_.cardDetailsPopup(evt);
       },
     });
   },
 
-  cardDetailsPopup(event) {
-    if (!Popup.isOpen()) {
-      Popup.open("cardDetails")(event);
-    }
-  },
-
   events() {
     return [
       {

client/components/cards/subtasks.css

@@ -4,19 +4,14 @@
 textarea.js-add-subtask-item,
 textarea.js-edit-subtask-item {
   overflow: hidden;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   resize: none;
-  height: 34px;
 }
 .delete-text,
 .subtask-title .js-delete-subtask,
 .subtask-title .js-view-subtask,
 .js-delete-subtask-item {
   color: #8c8c8c;
-  text-decoration: underline;
-  word-wrap: break-word;
-  float: right;
-  padding-top: 6px;
 }
 .delete-text:hover,
 .subtask-title .js-delete-subtask:hover,
@@ -28,11 +23,11 @@ textarea.js-edit-subtask-item {
   float: left;
   width: 30px;
   height: 30px;
-  font-size: 18px;
+
   line-height: 30px;
 }
 .subtask-title .title {
-  font-size: 18px;
+
   line-height: 25px;
 }
 .subtask-title .subtasks-stat {
@@ -87,6 +82,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;
@@ -124,9 +128,28 @@ textarea.js-edit-subtask-item {
   margin: 0.1em 0 0 0;
 }
 .subtasks-item .check-box.is-checked {
-  border-bottom: 2px solid #3cb500;
+  border-bottom: 0.2ch 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;
@@ -137,16 +160,4 @@ textarea.js-edit-subtask-item {
 }
 .subtasks-item .item-title .viewer p {
   margin-bottom: 2px;
-}
-.js-delete-subtask-item {
-  margin: 0 0 0.5em 1.33em;
-  padding: 12px 0 0 0;
-}
-.add-subtask-item {
-  margin: 0.2em 0 0.5em 1.33em;
-  display: inline-block;
-}
-.subtask-details-menu {
-  float: right;
-  padding: 6px 10px 6px 10px;
-}
+}

client/components/cards/subtasks.jade

@@ -1,15 +1,23 @@
 template(name="subtasks")
   h3.card-details-item-title
-    i.fa.fa-sitemap
+    i.fa.fa-globe
     | {{_ 'subtasks'}}
   if currentUser.isBoardAdmin
     if toggleDeleteDialog.get
-      .board-overlay#card-details-overlay
       +subtaskDeleteDialog(subtask = subtaskToDelete)
 
-  .card-subtasks-items
-    each subtask in currentCard.subtasks
-      +subtaskDetail(subtask = subtask)
+  if currentCard.subtasks
+    .card-subtasks-items
+      each subtask in currentCard.subtasks
+        .subtask-container
+          +subtaskDetail(subtask = subtask)
+          if canModifyCard
+            a.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
+              | ☰
+            if currentUser.isBoardAdmin
+              a.js-delete-subtask-item
+                | ❌
+
 
   if canModifyCard
     +inlinedForm(autoclose=false classNames="js-add-subtask" cardId = cardId)
@@ -24,9 +32,6 @@ template(name="subtaskDetail")
       +editSubtaskItemForm(subtask = subtask)
     else
       .subtask-title
-        span
-        if canModifyCard
-          a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
         if canModifyCard
           h2.title.js-open-inlined-form.is-editable
             +viewer
@@ -37,24 +42,21 @@ template(name="subtaskDetail")
                 = subtask.title
 
 template(name="addSubtaskItemForm")
-  textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
+  textarea.js-add-subtask-item(rows='1' dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editSubtaskItemForm")
-  textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
+  textarea.js-edit-subtask-item(rows='1' dir="auto")
     if $eq type 'item'
       = item.title
     else
       = subtask.title
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
     span(title=createdAt) {{ moment createdAt }}
-    if canModifyCard
-      if currentUser.isBoardAdmin
-        a.js-delete-subtask-item {{_ "delete"}}...
 
 template(name="subtasksItems")
   .subtasks-items.js-subtasks-items
@@ -74,12 +76,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
@@ -98,4 +102,3 @@ template(name="subtaskActionsPopup")
         a.js-delete-subtask.delete-subtask
           i.fa.fa-trash
           | {{_ "delete"}} ...
-

client/components/cards/subtasks.js

@@ -1,4 +1,5 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
 
 BlazeComponent.extendComponent({
   addSubtask(event) {
@@ -61,10 +62,10 @@ BlazeComponent.extendComponent({
     textarea.focus();
   },
 
-  deleteSubtask() {
+  async deleteSubtask() {
     const subtask = this.currentData().subtask;
     if (subtask && subtask._id) {
-      subtask.archive();
+      await subtask.archive();
     }
   },
 
@@ -72,12 +73,12 @@ BlazeComponent.extendComponent({
     return ReactiveCache.getCurrentUser().isBoardAdmin();
   },
 
-  editSubtask(event) {
+  async editSubtask(event) {
     event.preventDefault();
     const textarea = this.find('textarea.js-edit-subtask-item');
     const title = textarea.value.trim();
     const subtask = this.currentData().subtask;
-    subtask.setTitle(title);
+    await subtask.setTitle(title);
   },
 
   pressKey(event) {
@@ -104,7 +105,19 @@ BlazeComponent.extendComponent({
 }).register('subtasks');
 
 BlazeComponent.extendComponent({
-  // ...
+  async toggleItem() {
+    const item = this.currentData().item;
+    if (item && item._id) {
+      await item.toggleItem();
+    }
+  },
+  events() {
+    return [
+      {
+        'click .js-subtasks-item .check-box-unicode': this.toggleItem,
+      },
+    ];
+  },
 }).register('subtaskItemDetail');
 
 BlazeComponent.extendComponent({
@@ -125,11 +138,11 @@ BlazeComponent.extendComponent({
             });
           }
         },
-        'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', function () {
+        'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', async function () {
           Popup.back(2);
           const subtask = this.subtask;
           if (subtask && subtask._id) {
-            subtask.archive();
+            await subtask.archive();
           }
         }),
       }

client/components/common/originalPosition.css

@@ -0,0 +1,123 @@
+/* Original Position Component Styles */
+.original-position-info {
+  margin: 5px 0;
+  padding: 8px;
+  border-radius: 0.4ch;
+
+  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;
+
+  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 {
+
+    padding: 6px;
+  }
+
+  .original-position-details {
+    padding: 4px 6px;
+  }
+
+  .original-position-moved,
+  .original-position-unchanged {
+    padding: 3px 5px;
+  }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .original-position-details {
+    background-color: #2d3748;
+    border-color: #4a5568;
+    color: #e2e8f0;
+  }
+
+  .original-position-moved {
+    background-color: #744210;
+    border-color: #b7791f;
+    color: #fbd38d;
+  }
+
+  .original-position-unchanged {
+    background-color: #22543d;
+    border-color: #38a169;
+    color: #9ae6b4;
+  }
+
+  .original-title {
+    color: #a0aec0;
+    border-color: #4a5568;
+  }
+
+  .original-title strong {
+    color: #e2e8f0;
+  }
+}

client/components/common/originalPosition.html

@@ -0,0 +1,27 @@
+<template name="originalPosition">
+  <div class="original-position-info">
+    {{#if isLoading}}
+      <div class="original-position-loading">
+        ⏳ Loading original position...
+      </div>
+    {{else if showOriginalPosition}}
+      <div class="original-position-details">
+        {{#if hasMovedFromOriginal}}
+          <div class="original-position-moved">
+            <span class="original-position-text">ℹ️ {{getOriginalPositionDescription}}</span>
+          </div>
+        {{else}}
+          <div class="original-position-unchanged">
+            <span class="original-position-text">✅ In original position</span>
+          </div>
+        {{/if}}
+        
+        {{#if getOriginalTitle}}
+          <div class="original-title">
+            <strong>Original title:</strong> {{getOriginalTitle}}
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+</template>

client/components/common/originalPosition.js

@@ -0,0 +1,98 @@
+import { BlazeComponent } from 'meteor/peerlibrary:blaze-components';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import './originalPosition.html';
+
+/**
+ * Component to display original position information for swimlanes, lists, and cards
+ */
+class OriginalPositionComponent extends BlazeComponent {
+  onCreated() {
+    super.onCreated();
+    this.originalPosition = new ReactiveVar(null);
+    this.isLoading = new ReactiveVar(false);
+    this.hasMoved = new ReactiveVar(false);
+    
+    this.autorun(() => {
+      const data = this.data();
+      if (data && data.entityId && data.entityType) {
+        this.loadOriginalPosition(data.entityId, data.entityType);
+      }
+    });
+  }
+
+  loadOriginalPosition(entityId, entityType) {
+    this.isLoading.set(true);
+    
+    const methodName = `positionHistory.get${entityType.charAt(0).toUpperCase() + entityType.slice(1)}OriginalPosition`;
+    
+    Meteor.call(methodName, entityId, (error, result) => {
+      this.isLoading.set(false);
+      if (error) {
+        console.error('Error loading original position:', error);
+        this.originalPosition.set(null);
+      } else {
+        this.originalPosition.set(result);
+        
+        // Check if the entity has moved
+        const movedMethodName = `positionHistory.has${entityType.charAt(0).toUpperCase() + entityType.slice(1)}Moved`;
+        Meteor.call(movedMethodName, entityId, (movedError, movedResult) => {
+          if (!movedError) {
+            this.hasMoved.set(movedResult);
+          }
+        });
+      }
+    });
+  }
+
+  getOriginalPosition() {
+    return this.originalPosition.get();
+  }
+
+  isLoading() {
+    return this.isLoading.get();
+  }
+
+  hasMovedFromOriginal() {
+    return this.hasMoved.get();
+  }
+
+  getOriginalPositionDescription() {
+    const position = this.getOriginalPosition();
+    if (!position) return 'No original position data';
+    
+    if (position.originalPosition) {
+      const entityType = this.data().entityType;
+      let description = `Original position: ${position.originalPosition.sort || 0}`;
+      
+      if (entityType === 'list' && position.originalSwimlaneId) {
+        description += ` in swimlane ${position.originalSwimlaneId}`;
+      } else if (entityType === 'card') {
+        if (position.originalSwimlaneId) {
+          description += ` in swimlane ${position.originalSwimlaneId}`;
+        }
+        if (position.originalListId) {
+          description += ` in list ${position.originalListId}`;
+        }
+      }
+      
+      return description;
+    }
+    
+    return 'No original position data';
+  }
+
+  getOriginalTitle() {
+    const position = this.getOriginalPosition();
+    return position ? position.originalTitle : '';
+  }
+
+  showOriginalPosition() {
+    return this.getOriginalPosition() !== null;
+  }
+}
+
+OriginalPositionComponent.register('originalPosition');
+
+export default OriginalPositionComponent;

client/components/forms/datepicker.css

@@ -1,22 +1,18 @@
-.datepicker-container .fields .left {
-  width: 56%;
-}
-.datepicker-container .fields .right {
-  width: 38%;
-}
-.datepicker-container .datepicker {
-  width: 100%;
-}
-.datepicker-container .datepicker table {
-  width: 100%;
-  border: none;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-.datepicker-container .datepicker table thead {
-  background: none;
-}
-.datepicker-container .datepicker table td,
-.datepicker-container .datepicker table th {
-  box-sizing: border-box;
-}
+.datepicker-container {
+  form {
+    display: flex;
+    gap: 0.3lh;
+    padding: 0.3lh 1ch;
+  }
+  .fields {
+    display: flex;
+    justify-content: stretch;
+    gap: 1ch;
+    .left, .right {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+}

client/components/forms/datepicker.jade

@@ -4,11 +4,10 @@ template(name="datepicker")
             .fields
                 .left
                     label(for="date") {{_ 'date'}}
-                    input.js-date-field#date(type="text" name="date" value=showDate placeholder=dateFormat autofocus)
+                    input.js-date-field#date(type="date" name="date" value=showDate autofocus)
                 .right
                     label(for="time") {{_ 'time'}}
-                    input.js-time-field#time(type="text" name="time" value=showTime placeholder=timeFormat)
-            .js-datepicker
+                    input.js-time-field#time(type="time" name="time" value=showTime)
             if error.get
                 .warning {{_ error.get}}
             button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}

client/components/forms/forms.css

@@ -1,3 +1,16 @@
+select, button, input {
+  font-size: 1rem !important;
+}
+
+form {
+  /* 🛑 remove me if it causes a significant issue.
+  this can be overidden and otherwise allow forms to
+  scale with their parent. */
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 select,
 textarea,
 input:not([type=file]),
@@ -5,11 +18,10 @@ 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;
+  padding: 0.3lh 1ch;
+  max-width: clamp(30vw, 100%, 800px);
 }
 select.full,
 textarea.full,
@@ -31,28 +43,17 @@ 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;
-}
-input[type="text"].inline-input,
-input[type="password"].inline-input,
-input[type="email"].inline-input {
-  background: none;
-  border: 0;
-  margin: 0;
-  padding: 2px;
-  min-height: 0;
-  height: 18px;
-  width: 200px;
 }
 input[type="text"].full-line,
 input[type="password"].full-line,
@@ -96,30 +97,23 @@ 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;
-}
 select.inline {
   width: 100%;
 }
 option[disabled] {
-  color: #8c8c8c;
+  color: #222;
 }
 textarea {
-  height: 150px;
   transition: background 85ms ease-in, border-color 85ms ease-in;
   resize: vertical;
-  width: 100%;
-}
-textarea.editor {
-  resize: none;
-  padding-bottom: 22px;
+  width: auto;
+  font-size: 0.9em;
+  min-height: 3lh;
 }
 .button {
   border-radius: 3px;
@@ -128,33 +122,43 @@ 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;
+  /* in flex layouts, padding often disturbs computations. rather rarely have
+  two lines, so setting relative-unit min-height works better */
+  min-height: 1.8lh;
+  padding: 0 2ch;
   text-align: center;
+  color: #fff;
+  z-index: 1;
+  :not(.password-toggle-btn) {
+    margin-top: 0.1lh;
+  }
 }
 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 +185,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,59 +225,81 @@ 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;
 }
 .radio-div,
 .check-div {
-  display: block;
-  margin: 0 0 4px 20px;
-  min-height: 20px;
+  display: flex;
+  align-items: center;
+  gap: 0.2lh;
   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 {
   font-weight: 400;
 }
 label {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   font-weight: 700;
-  margin-bottom: 4px;
 }
 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 {
+.add-controls,
+.links-controls {
   display: flex;
   align-items: center;
-  margin-top: 0px;
-  margin-bottom: 12px;
+  gap: 1ch;
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.edit-controls {
+  grid-area: main-controls;
+}
+
+.add-controls {
+  grid-area: main-controls;
+}
+
+.links-controls {
+  grid-area: links-controls
+}
+
+.links-controls span.quiet {
+  margin: auto;
 }
 @media print {
   .add-controls {
@@ -278,14 +310,7 @@ textarea::-moz-placeholder {
 .add-controls button[type=submit],
 .edit-controls input[type=button],
 .add-controls input[type=button] {
-  float: left;
-  height: 32px;
-  margin-bottom: 0px;
-}
-.edit-controls .fa-times-thin,
-.add-controls .fa-times-thin {
-  font-size: 26px;
-  margin: 3px 10px;
+  margin: 0;
 }
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
@@ -295,6 +320,18 @@ textarea::-moz-placeholder {
   display: none;
 }
 .materialCheckBox {
+  position: relative;
+  width: 0.5lh;
+  height: 0.5lh;
+  z-index: 0;
+  border: 0.2ch solid #5a5a5a;
+  border-radius: 1px;
+  transition: 0.2s;
+  margin: 0;
+  margin-left: 0px;
+  cursor: pointer;
+}
+.materialCheckBox:is(.active) {
   position: relative;
   width: 13px;
   height: 13px;
@@ -306,22 +343,45 @@ textarea::-moz-placeholder {
   cursor: pointer;
 }
 .materialCheckBox.is-checked {
-  top: -4px;
-  left: -3px;
-  width: 7px;
-  height: 15px;
-  margin-right: 6px;
-  border-top: 2px solid transparent;
-  border-left: 2px solid transparent;
-  transform: rotate(40deg);
+  top: 0.3lh;
+  left: 0.25lh;
+  width: 0.25lh;
+  height: 0.5lh;
+  margin-right: 0.6lh;
+  border-top: 0 solid transparent;
+  border-left: 0 solid transparent;
+  border-bottom: 0.3ch solid #3cb500;
+  border-right: 0.3ch solid #3cb500;
   -webkit-backface-visibility: hidden;
-  transform-origin: 100% 100%;
+  backface-visibility: hidden;
+  transform: rotate(50deg);
+  backface-visibility: hidden;
+  transform-origin: 0.5lh 0;
+}
+
+form .form-buttons {
+  display: flex;
+  flex: 1;
+  align-self: stretch;
+  justify-content: stretch;
+  gap: 0.5ch;
+  &>button {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+  }
+}
+/* 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;
@@ -342,7 +402,7 @@ textarea::-moz-placeholder {
   border-radius: 3px;
   color: #fff;
   display: none;
-  font-size: 12px;
+
   font-weight: 700;
   height: 17px;
   line-height: 17px;
@@ -374,14 +434,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,17 +449,17 @@ 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;
   margin-bottom: 0;
 }
@@ -408,7 +468,7 @@ textarea::-moz-placeholder {
 }
 .button-link.setting .value {
   display: block;
-  font-size: 18px;
+
   line-height: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -505,8 +565,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;
@@ -551,7 +612,7 @@ button.loud-text-button:hover {
   padding: 11px;
   position: relative;
   text-decoration: none;
-  font-size: 16px;
+
   line-height: 20px;
 }
 .big-link .text {
@@ -571,7 +632,7 @@ button.loud-text-button:hover {
   top: 6px;
 }
 .big-link.none {
-  color: #8c8c8c;
+  color: #222;
   text-decoration: none;
 }
 .big-link.none:hover {
@@ -594,14 +655,14 @@ button.loud-text-button:hover {
   width: 40px;
 }
 .big-link.avatar-changer .member .member-initials {
-  font-size: 16px;
+
   height: 40px;
   line-height: 40px;
   max-height: 40px;
 }
 .show-more {
   border-radius: 3px;
-  color: #8c8c8c;
+  color: #222;
   display: block;
   padding: 16px 8px 16px 40px;
   margin: 8px 0;
@@ -634,7 +695,7 @@ button.loud-text-button:hover {
   left: 0;
   width: 100%;
   z-index: 2;
-  font-size: 23px;
+
 }
 .uploader .realfile input[type="file"] {
   cursor: pointer;
@@ -645,7 +706,7 @@ button.loud-text-button:hover {
   padding: 0;
   width: 100%;
   z-index: 2;
-  font-size: 23px;
+
 }
 .uploader:hover .fakefile {
   background: #318ec4;
@@ -684,13 +745,13 @@ button.loud-text-button:hover {
   color: #fff;
 }
 .material-toggle-switch {
-  display: flex;
+  padding: 0.2rlh 1ch;
+  align-self: center;
 }
 .toggle-label {
+  height: 0.6rlh;
+  width: 1.3rlh;
   position: relative;
-  display: block;
-  height: 20px;
-  width: 44px;
   background-color: #a6a6a6;
   border-radius: 100px;
   cursor: pointer;
@@ -698,11 +759,13 @@ button.loud-text-button:hover {
 }
 .toggle-label:after {
   position: absolute;
-  left: -2px;
-  top: -3px;
-  display: block;
-  width: 26px;
-  height: 26px;
+  /* ensure vertical centering */
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: -0.2rlh;
+  width: .8rlh;
+  height: .8rlh;
   border-radius: 100px;
   background-color: #fff;
   box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
@@ -716,7 +779,7 @@ button.loud-text-button:hover {
   background-color: #6fbeb5;
 }
 .toggle-switch:checked ~ .toggle-label:after {
-  left: 20px;
+  left: 1.5ch;
   background-color: #179588;
 }
 .toggle-switch:checked:disabled ~ .toggle-label {

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;
+
+  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;
+
+  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-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-weight: bold !important;
+  padding: 2px !important;
+  border-radius: 2px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .gantt-container table {
+
+  }
+
+  .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;
+
+  }
+}
+
+/* Print styles */
+@media print {
+  .gantt-container {
+    overflow: visible;
+  }
+
+  .gantt-container table {
+    page-break-inside: avoid;
+  }
+}

client/components/gantt/gantt.jade

@@ -0,0 +1,27 @@
+//- Gantt Chart View Template
+template(name="ganttView")
+  link(rel="stylesheet" href="/client/components/gantt/gantt.css")
+  link(rel="stylesheet" href="/client/components/gantt/ganttCard.css")
+  .gantt-view
+    h2 {{_ 'board-view-gantt'}}
+    if hasSelectedCard
+      +ganttCard(selectedCard)
+    each weeks
+      table.gantt-table
+        thead
+          tr
+            th {{_ 'task'}} {{_ 'predicate-week'}} {{week}}
+            each weekDays this
+              th
+                | {{formattedDate .}} {{weekdayLabel .}}
+        tbody
+          each cardsInWeek this
+            tr(data-card-id="{{cardId .}}")
+              td.js-gantt-task-cell
+                a.js-gantt-card-title(href="#")
+                  +viewer
+                    | {{cardTitle .}}
+              each weekDays ..
+                td(class="{{cellClasses .. .}}" data-card-id="{{cardId ..}}" data-date-type="{{cellContentClass .. .}}")
+                  | {{cellContent .. .}}
+

client/components/gantt/gantt.js

@@ -0,0 +1,219 @@
+import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
+
+// Add click handler to ganttView for card titles
+Template.ganttView.events({
+  'click .js-gantt-card-title'(event, template) {
+    event.preventDefault();
+    // Get card ID from the closest row's data attribute
+    const $row = template.$(event.currentTarget).closest('tr');
+    const cardId = $row.data('card-id');
+
+    if (cardId) {
+      template.selectedCardId.set(cardId);
+    }
+  },
+});
+import { Template } from 'meteor/templating';
+
+// Blaze template helpers for ganttView
+function getISOWeekInfo(d) {
+	const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+	const dayNum = date.getUTCDay() || 7;
+	date.setUTCDate(date.getUTCDate() + 4 - dayNum);
+	const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+	const week = Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
+	return { year: date.getUTCFullYear(), week };
+}
+function startOfISOWeek(d) {
+	const date = new Date(d);
+	const day = date.getDay() || 7;
+	if (day !== 1) date.setDate(date.getDate() - (day - 1));
+	date.setHours(0,0,0,0);
+	return date;
+}
+
+Template.ganttView.helpers({
+	weeks() {
+		const board = Utils.getCurrentBoard();
+		if (!board) return [];
+		const cards = Cards.find({ boardId: board._id }, { sort: { startAt: 1, dueAt: 1 } }).fetch();
+		const weeksMap = new Map();
+		const relevantCards = cards.filter(c => c.receivedAt || c.startAt || c.dueAt || c.endAt);
+		relevantCards.forEach(card => {
+			['receivedAt','startAt','dueAt','endAt'].forEach(field => {
+				if (card[field]) {
+					const dt = new Date(card[field]);
+					const info = getISOWeekInfo(dt);
+					const key = `${info.year}-W${info.week}`;
+					if (!weeksMap.has(key)) {
+						weeksMap.set(key, { year: info.year, week: info.week, start: startOfISOWeek(dt) });
+					}
+				}
+			});
+		});
+		return Array.from(weeksMap.values()).sort((a,b) => a.start - b.start);
+	},
+	weekDays(week) {
+		const weekStart = new Date(week.start);
+		return Array.from({length:7}, (_,i) => {
+			const d = new Date(weekStart);
+			d.setDate(d.getDate() + i);
+			d.setHours(0,0,0,0);
+			return d;
+		});
+	},
+	weekdayLabel(day) {
+		const weekdayKeys = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday'];
+		return TAPi18n.__(weekdayKeys[day.getDay() === 0 ? 6 : day.getDay() - 1]);
+	},
+	formattedDate(day) {
+		const currentUser = ReactiveCache.getCurrentUser && ReactiveCache.getCurrentUser();
+		const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+		return formatDateByUserPreference(day, dateFormat, false);
+	},
+	cardsInWeek(week) {
+		const board = Utils.getCurrentBoard();
+		if (!board) return [];
+		const cards = Cards.find({ boardId: board._id }).fetch();
+		return cards.filter(card => {
+			return ['receivedAt','startAt','dueAt','endAt'].some(field => {
+				if (card[field]) {
+					const dt = new Date(card[field]);
+					const info = getISOWeekInfo(dt);
+					return info.week === week.week && info.year === week.year;
+				}
+				return false;
+			});
+		});
+	},
+	cardTitle(card) {
+		return card.title;
+	},
+	cardId(card) {
+		return card._id;
+	},
+	cardUrl(card) {
+		if (!card) return '#';
+		const board = ReactiveCache.getBoard(card.boardId);
+		if (!board) return '#';
+		return FlowRouter.path('card', {
+			boardId: card.boardId,
+			slug: board.slug,
+			cardId: card._id,
+		});
+	},
+	 cellContentClass(card, day) {
+		 const cardDates = {
+			 receivedAt: card.receivedAt ? new Date(card.receivedAt) : null,
+			 startAt: card.startAt ? new Date(card.startAt) : null,
+			 dueAt: card.dueAt ? new Date(card.dueAt) : null,
+			 endAt: card.endAt ? new Date(card.endAt) : null,
+		 };
+		 if (cardDates.receivedAt && cardDates.receivedAt.toDateString() === day.toDateString()) return 'ganttview-received';
+		 if (cardDates.startAt && cardDates.startAt.toDateString() === day.toDateString()) return 'ganttview-start';
+		 if (cardDates.dueAt && cardDates.dueAt.toDateString() === day.toDateString()) return 'ganttview-due';
+		 if (cardDates.endAt && cardDates.endAt.toDateString() === day.toDateString()) return 'ganttview-end';
+		 return '';
+	 },
+	 cellContent(card, day) {
+		 const cardDates = {
+			 receivedAt: card.receivedAt ? new Date(card.receivedAt) : null,
+			 startAt: card.startAt ? new Date(card.startAt) : null,
+			 dueAt: card.dueAt ? new Date(card.dueAt) : null,
+			 endAt: card.endAt ? new Date(card.endAt) : null,
+		 };
+		 if (cardDates.receivedAt && cardDates.receivedAt.toDateString() === day.toDateString()) return '📥';
+		 if (cardDates.startAt && cardDates.startAt.toDateString() === day.toDateString()) return '🚀';
+		 if (cardDates.dueAt && cardDates.dueAt.toDateString() === day.toDateString()) return '⏰';
+		 if (cardDates.endAt && cardDates.endAt.toDateString() === day.toDateString()) return '🏁';
+		 return '';
+	 },
+	isToday(day) {
+		const today = new Date();
+		return day.toDateString() === today.toDateString();
+	},
+	isWeekend(day) {
+		const idx = day.getDay();
+		return idx === 0 || idx === 6;
+	},
+	hasSelectedCard() {
+		return Template.instance().selectedCardId.get() !== null;
+	},
+	selectedCard() {
+		const cardId = Template.instance().selectedCardId.get();
+		return cardId ? ReactiveCache.getCard(cardId) : null;
+	},
+	cellClasses(card, day) {
+		// Get the base class from cellContentClass logic
+		const cardDates = {
+			receivedAt: card.receivedAt ? new Date(card.receivedAt) : null,
+			startAt: card.startAt ? new Date(card.startAt) : null,
+			dueAt: card.dueAt ? new Date(card.dueAt) : null,
+			endAt: card.endAt ? new Date(card.endAt) : null,
+		};
+		let classes = '';
+		if (cardDates.receivedAt && cardDates.receivedAt.toDateString() === day.toDateString()) classes = 'ganttview-received';
+		else if (cardDates.startAt && cardDates.startAt.toDateString() === day.toDateString()) classes = 'ganttview-start';
+		else if (cardDates.dueAt && cardDates.dueAt.toDateString() === day.toDateString()) classes = 'ganttview-due';
+		else if (cardDates.endAt && cardDates.endAt.toDateString() === day.toDateString()) classes = 'ganttview-end';
+
+		// Add conditional classes
+		const today = new Date();
+		if (day.toDateString() === today.toDateString()) classes += ' ganttview-today';
+		const idx = day.getDay();
+		if (idx === 0 || idx === 6) classes += ' ganttview-weekend';
+		if (classes.trim()) classes += ' js-gantt-date-icon';
+
+		return classes.trim();
+	}
+});
+
+Template.ganttView.onCreated(function() {
+	this.selectedCardId = new ReactiveVar(null);
+	// Provide properties expected by cardDetails component
+	this.showOverlay = new ReactiveVar(false);
+	this.mouseHasEnterCardDetails = false;
+});
+
+// Blaze onRendered logic for ganttView
+Template.ganttView.onRendered(function() {
+	const self = this;
+	this.autorun(() => {
+		// If you have legacy imperative rendering, keep it here
+		if (typeof renderGanttChart === 'function') {
+			renderGanttChart();
+		}
+	});
+	// Add click handler for date cells (Received, Start, Due, End)
+	this.$('.gantt-table').on('click', '.js-gantt-date-icon', function(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		const $cell = self.$(this);
+		const cardId = $cell.data('card-id');
+		let dateType = $cell.data('date-type');
+		// Remove 'ganttview-' prefix to match popup map
+		if (typeof dateType === 'string' && dateType.startsWith('ganttview-')) {
+			dateType = dateType.replace('ganttview-', '');
+		}
+		const popupMap = {
+			received: 'editCardReceivedDate',
+			start: 'editCardStartDate',
+			due: 'editCardDueDate',
+			end: 'editCardEndDate',
+		};
+		const popupName = popupMap[dateType];
+		if (!popupName || typeof Popup === 'undefined' || typeof Popup.open !== 'function') return;
+		const card = ReactiveCache.getCard(cardId);
+		if (!card) return;
+		const openFn = Popup.open(popupName);
+		openFn.call({ currentData: () => card }, e, { dataContextIfCurrentDataIsUndefined: card });
+	});
+
+});
+
+import markdownit from 'markdown-it';
+import { TAPi18n } from '/imports/i18n';
+import { formatDateByUserPreference } from '/imports/lib/dateUtils';
+import { ReactiveCache } from '/imports/reactiveCache';
+
+const md = markdownit({ breaks: true, linkify: true });

client/components/gantt/ganttCard.css

@@ -0,0 +1,47 @@
+.gantt-card-wrapper {
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin: 1rem 0;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.gantt-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 0.5rem;
+}
+
+.gantt-card-header h3 {
+  margin: 0;
+  color: #333;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #666;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-button:hover {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.gantt-card-content {
+  max-height: 400px;
+  overflow-y: auto;
+}

client/components/gantt/ganttCard.jade

@@ -0,0 +1,2 @@
+template(name="ganttCard")
+  +cardDetails(selectedCard)

client/components/gantt/ganttCard.js

@@ -0,0 +1,45 @@
+BlazeComponent.extendComponent({
+  onCreated() {
+    // Provide the expected parent component properties for cardDetails
+    this.showOverlay = new ReactiveVar(false);
+    this.mouseHasEnterCardDetails = false;
+  },
+
+  selectedCard() {
+    // The selected card is now passed as a parameter to the component
+    return this.currentData();
+  },
+
+  events() {
+    return [
+      {
+        'click .js-close-card-details'(event) {
+          event.preventDefault();
+          // Find the ganttView template instance and clear selectedCardId
+          let view = Blaze.currentView;
+          while (view) {
+            if (view.templateInstance && view.templateInstance().selectedCardId) {
+              view.templateInstance().selectedCardId.set(null);
+              break;
+            }
+            view = view.parentView;
+          }
+        },
+      },
+    ];
+  },
+}).register('ganttCard');
+
+// Add click handler to ganttView for card titles
+Template.ganttView.events({
+  'click .js-gantt-card-title'(event, template) {
+    event.preventDefault();
+    // Get card ID from the closest row's data attribute
+    const $row = template.$(event.currentTarget).closest('tr');
+    const cardId = $row.data('card-id');
+
+    if (cardId) {
+      template.selectedCardId.set(cardId);
+    }
+  },
+});

client/components/import/import.css

@@ -5,17 +5,17 @@
 .map-members .mapping-list {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -4px;
+  margin: 0 -0.5vw;
 }
 .map-members .mapping-list .mapping-item {
-  max-width: 300px;
-  min-width: 200px;
-  padding: 6px;
-  margin: 5px;
+  max-width: min(300px, 40vw);
+  min-width: min(200px, 26vw);
+  padding: 0.8vh 0.8vw;
+  margin: 0.7vh;
   flex: 1;
   background: #fff;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  border-radius: 0.4vw;
+  box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
 }
 .map-members .mapping-list .mapping-item:hover {
   background: #f2f2f2;
@@ -37,7 +37,7 @@
 }
 .map-members .mapping-list .wekan {
   display: inline-block;
-  width: 35px;
+  width: 4.5vw;
 }
 .map-members .mapping-list .wekan .member {
   float: none;