v2.96

boards](https://github.com/wekan/wekan/issues/1149#issuecomment-507255114).
At some later Wekan release they will be added back as separate themes
that can be selected, without changing existing boards.

Thanks to chirrut2 and xet7 !

.babelrc

@@ -1,12 +0,0 @@
-{ 
-  "presets": [ 
-    "@babel/preset-stage-3" 
-  ],
-  "env": {
-    "COVERAGE": {
-      "plugins": [
-        "istanbul"
-      ]
-    }
-  }
-}

.devcontainer/Dockerfile

@@ -1,291 +0,0 @@
-FROM ubuntu:24.04
-LABEL maintainer="wekan"
-LABEL org.opencontainers.image.ref.name="ubuntu"
-LABEL org.opencontainers.image.version="24.04"
-LABEL org.opencontainers.image.source="https://github.com/wekan/wekan"
-
-# 2022-04-25:
-# - gyp does not yet work with Ubuntu 22.04 ubuntu:rolling,
-#   so changing to 21.10. https://github.com/wekan/wekan/issues/4488
-
-ENV BUILD_DEPS="apt-utils gnupg gosu wget bzip2 g++ iproute2 apt-transport-https libarchive-tools"
-ENV DEV_DEPS="curl python3 ca-certificates build-essential git"
-ARG DEBIAN_FRONTEND=noninteractive
-
-ENV \
-    DEBUG=false \
-    NODE_VERSION=v14.21.4 \
-    METEOR_RELEASE=METEOR@2.14 \
-    USE_EDGE=false \
-    METEOR_EDGE=1.5-beta.17 \
-    NPM_VERSION=6.14.17 \
-    FIBERS_VERSION=4.0.1 \
-    ARCHITECTURE=linux-x64 \
-    SRC_PATH=./ \
-    WITH_API=true \
-    RESULTS_PER_PAGE="" \
-    DEFAULT_BOARD_ID="" \
-    ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
-    ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
-    ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
-    ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURES_BERORE=3 \
-    ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD=60 \
-    ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW=15 \
-    ACCOUNTS_COMMON_LOGIN_EXPIRATION_IN_DAYS=90 \
-    ATTACHMENTS_UPLOAD_EXTERNAL_PROGRAM="" \
-    ATTACHMENTS_UPLOAD_MIME_TYPES="" \
-    ATTACHMENTS_UPLOAD_MAX_SIZE=0 \
-    AVATARS_UPLOAD_EXTERNAL_PROGRAM="" \
-    AVATARS_UPLOAD_MIME_TYPES="" \
-    AVATARS_UPLOAD_MAX_SIZE=0 \
-    RICHER_CARD_COMMENT_EDITOR=false \
-    CARD_OPENED_WEBHOOK_ENABLED=false \
-    MAX_IMAGE_PIXEL="" \
-    IMAGE_COMPRESS_RATIO="" \
-    NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
-    BIGEVENTS_PATTERN=NONE \
-    NOTIFY_DUE_DAYS_BEFORE_AND_AFTER="" \
-    NOTIFY_DUE_AT_HOUR_OF_DAY="" \
-    EMAIL_NOTIFICATION_TIMEOUT=30000 \
-    MATOMO_ADDRESS="" \
-    MATOMO_SITE_ID="" \
-    MATOMO_DO_NOT_TRACK=true \
-    MATOMO_WITH_USERNAME=false \
-    METRICS_ALLOWED_IP_ADDRESSES="" \
-    BROWSER_POLICY_ENABLED=true \
-    TRUSTED_URL="" \
-    WEBHOOKS_ATTRIBUTES="" \
-    OAUTH2_ENABLED=false \
-    OIDC_REDIRECTION_ENABLED=false \
-    OAUTH2_CA_CERT="" \
-    OAUTH2_ADFS_ENABLED=false \
-    OAUTH2_B2C_ENABLED=false \
-    OAUTH2_LOGIN_STYLE=redirect \
-    OAUTH2_CLIENT_ID="" \
-    OAUTH2_SECRET="" \
-    OAUTH2_SERVER_URL="" \
-    OAUTH2_AUTH_ENDPOINT="" \
-    OAUTH2_USERINFO_ENDPOINT="" \
-    OAUTH2_TOKEN_ENDPOINT="" \
-    OAUTH2_ID_MAP="" \
-    OAUTH2_USERNAME_MAP="" \
-    OAUTH2_FULLNAME_MAP="" \
-    OAUTH2_ID_TOKEN_WHITELIST_FIELDS="" \
-    OAUTH2_REQUEST_PERMISSIONS='openid profile email' \
-    OAUTH2_EMAIL_MAP="" \
-    LDAP_ENABLE=false \
-    LDAP_PORT=389 \
-    LDAP_HOST="" \
-    LDAP_AD_SIMPLE_AUTH="" \
-    LDAP_USER_AUTHENTICATION=false \
-    LDAP_USER_AUTHENTICATION_FIELD=uid \
-    LDAP_BASEDN="" \
-    LDAP_LOGIN_FALLBACK=false \
-    LDAP_RECONNECT=true \
-    LDAP_TIMEOUT=10000 \
-    LDAP_IDLE_TIMEOUT=10000 \
-    LDAP_CONNECT_TIMEOUT=10000 \
-    LDAP_AUTHENTIFICATION=false \
-    LDAP_AUTHENTIFICATION_USERDN="" \
-    LDAP_AUTHENTIFICATION_PASSWORD="" \
-    LDAP_LOG_ENABLED=false \
-    LDAP_BACKGROUND_SYNC=false \
-    LDAP_BACKGROUND_SYNC_INTERVAL="" \
-    LDAP_BACKGROUND_SYNC_KEEP_EXISTANT_USERS_UPDATED=false \
-    LDAP_BACKGROUND_SYNC_IMPORT_NEW_USERS=false \
-    LDAP_ENCRYPTION=false \
-    LDAP_CA_CERT="" \
-    LDAP_REJECT_UNAUTHORIZED=false \
-    LDAP_USER_SEARCH_FILTER="" \
-    LDAP_USER_SEARCH_SCOPE="" \
-    LDAP_USER_SEARCH_FIELD="" \
-    LDAP_SEARCH_PAGE_SIZE=0 \
-    LDAP_SEARCH_SIZE_LIMIT=0 \
-    LDAP_GROUP_FILTER_ENABLE=false \
-    LDAP_GROUP_FILTER_OBJECTCLASS="" \
-    LDAP_GROUP_FILTER_GROUP_ID_ATTRIBUTE="" \
-    LDAP_GROUP_FILTER_GROUP_MEMBER_ATTRIBUTE="" \
-    LDAP_GROUP_FILTER_GROUP_MEMBER_FORMAT="" \
-    LDAP_GROUP_FILTER_GROUP_NAME="" \
-    LDAP_UNIQUE_IDENTIFIER_FIELD="" \
-    LDAP_UTF8_NAMES_SLUGIFY=true \
-    LDAP_USERNAME_FIELD="" \
-    LDAP_FULLNAME_FIELD="" \
-    LDAP_MERGE_EXISTING_USERS=false \
-    LDAP_EMAIL_FIELD="" \
-    LDAP_EMAIL_MATCH_ENABLE=false \
-    LDAP_EMAIL_MATCH_REQUIRE=false \
-    LDAP_EMAIL_MATCH_VERIFIED=false \
-    LDAP_SYNC_USER_DATA=false \
-    LDAP_SYNC_USER_DATA_FIELDMAP="" \
-    LDAP_SYNC_GROUP_ROLES="" \
-    LDAP_DEFAULT_DOMAIN="" \
-    LDAP_SYNC_ADMIN_STATUS="" \
-    LDAP_SYNC_ADMIN_GROUPS="" \
-    HEADER_LOGIN_ID="" \
-    HEADER_LOGIN_FIRSTNAME="" \
-    HEADER_LOGIN_LASTNAME="" \
-    HEADER_LOGIN_EMAIL="" \
-    LOGOUT_WITH_TIMER=false \
-    LOGOUT_IN="" \
-    LOGOUT_ON_HOURS="" \
-    LOGOUT_ON_MINUTES="" \
-    CORS="" \
-    CORS_ALLOW_HEADERS="" \
-    CORS_EXPOSE_HEADERS="" \
-    DEFAULT_AUTHENTICATION_METHOD="" \
-    PASSWORD_LOGIN_ENABLED=true \
-    CAS_ENABLED=false \
-    CAS_BASE_URL="" \
-    CAS_LOGIN_URL="" \
-    CAS_VALIDATE_URL="" \
-    SAML_ENABLED=false \
-    SAML_PROVIDER="" \
-    SAML_ENTRYPOINT="" \
-    SAML_ISSUER="" \
-    SAML_CERT="" \
-    SAML_IDPSLO_REDIRECTURL="" \
-    SAML_PRIVATE_KEYFILE="" \
-    SAML_PUBLIC_CERTFILE="" \
-    SAML_IDENTIFIER_FORMAT="" \
-    SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
-    SAML_ATTRIBUTES="" \
-    ORACLE_OIM_ENABLED=false \
-    WAIT_SPINNER="" \
-    WRITABLE_PATH=/data \
-    S3=""
-
-#   NODE_OPTIONS="--max_old_space_size=4096"
-
-#---------------------------------------------
-# == at docker-compose.yml: AUTOLOGIN WITH OIDC/OAUTH2 ====
-# https://github.com/wekan/wekan/wiki/autologin
-#- OIDC_REDIRECTION_ENABLED=true
-#---------------------------------------------------------------------
-
-ENV PATH=$PATH:/home/wekan/.meteor/
-
-RUN <<EOR
-echo "export PATH=$PATH" >> /etc/environment
-EOR
-
-# Copy source dir
-RUN <<EOR
-set -o xtrace
-
-mkdir -p /home/wekan/app/.meteor
-mkdir -p /home/wekan/app/packages
-EOR
-
-COPY \
-    .meteor/.finished-upgraders \
-    .meteor/.id \
-    .meteor/cordova-plugins \
-    .meteor/packages \
-    .meteor/platforms \
-    .meteor/release \
-    .meteor/versions \
-    /home/wekan/app/.meteor/
-
-COPY \
-    package.json \
-    settings.json \
-    /home/wekan/app/
-
-COPY \
-    tests \
-    /home/wekan/app/tests/
-
-COPY \
-    packages \
-    /home/wekan/app/packages/
-
-# Install OS
-RUN <<EOR
-set -o xtrace
-
-# Add non-root user wekan
-useradd --user-group --system --home-dir /home/wekan wekan
-# OS dependencies
-apt-get update --assume-yes
-apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS} ${DEV_DEPS}
-
-# Meteor installer doesn't work with the default tar binary, so using bsdtar while installing.
-# https://github.com/coreos/bugs/issues/1095#issuecomment-350574389
-cp $(which tar) $(which tar)~
-ln -sf $(which bsdtar) $(which tar)
-
-# Install NodeJS
-cd /tmp
-
-# Download nodejs
-wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz"
-wget "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt"
-
-# Verify nodejs authenticity
-grep "node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz" "SHASUMS256.txt" | shasum -a 256 -c -
-rm -f "SHASUMS256.txt"
-
-# Install Node
-tar xzf "node-$NODE_VERSION-$ARCHITECTURE.tar.gz" -C /usr/local --strip-components=1 --no-same-owner
-rm "node-$NODE_VERSION-$ARCHITECTURE.tar.gz" "SHASUMS256.txt"
-ln -s "/usr/local/bin/node" "/usr/local/bin/nodejs"
-mkdir -p "/opt/nodejs/lib/node_modules/fibers/.node-gyp" "/root/.node-gyp/${NODE_VERSION} /home/wekan/.config"
-
-# Install node dependencies
-npm install -g npm@${NPM_VERSION}
-chown --recursive wekan:wekan /home/wekan/.config
-
-# Install Meteor
-cd /home/wekan
-chown --recursive wekan:wekan /home/wekan
-echo "Starting meteor ${METEOR_RELEASE} installation...   \n"
-gosu wekan:wekan curl https://install.meteor.com/ | /bin/sh
-mv /root/.meteor /home/wekan/
-chown --recursive wekan:wekan /home/wekan/.meteor
-
-# sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js
-cd /home/wekan/.meteor
-gosu wekan:wekan /home/wekan/.meteor/meteor -- help
-
-# Build app (Development)
-cd /home/wekan/app
-gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js
-gosu wekan:wekan /home/wekan/.meteor/meteor npm install --no-audit
-
-# Put back the original tar
-mv $(which tar)~ $(which tar)
-
-# Cleanup
-apt-get remove --purge --assume-yes ${BUILD_DEPS}
-apt-get install --assume-yes --no-install-recommends build-essential
-apt-get autoremove --assume-yes
-apt-get clean --assume-yes
-rm -Rf /tmp/*
-rm -Rf /var/lib/apt/lists/*
-rm -Rf /var/cache/apt
-rm -Rf /var/lib/apt/lists
-rm -Rf /home/wekan/app_build
-
-mkdir /data
-chown wekan --recursive /data
-EOR
-
-USER wekan
-
-ENV PORT=3000
-EXPOSE $PORT
-
-STOPSIGNAL SIGKILL
-WORKDIR /home/wekan/app
-
-#---------------------------------------------------------------------
-# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
-# Add more Node heap:
-#   NODE_OPTIONS="--max_old_space_size=4096"
-# Add more stack:
-#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
-#---------------------------------------------------------------------
-#
-
-CMD ["/home/wekan/.meteor/meteor", "run", "--verbose", "--settings", "settings.json"]

.devcontainer/build.sh

@@ -1,14 +0,0 @@
-#!/bin/bash
-
-cd /home/wekan/app
-rm -rf node_modules
-/home/wekan/.meteor/meteor npm install
-rm -rf .build
-/home/wekan/.meteor/meteor build .build --directory
-cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/packages/cfs_access-point.js
-cd .build/bundle/programs/server
-rm -rf node_modules
-/home/wekan/.meteor/meteor npm install
-cd node_modules/fibers
-node build.js
-cd /home/wekan/app

.devcontainer/devcontainer.json

@@ -1,17 +0,0 @@
-// See https://aka.ms/vscode-remote/devcontainer.json for format details.
-{
-  "dockerComposeFile": ["docker-compose.yml", "docker-compose.extend.yml"],
-  "service": "wekan-dev",
-  "workspaceFolder": "/home/wekan/app",
-  "extensions": [
-    "mutantdino.resourcemonitor",
-    "editorconfig.editorconfig",
-    "dbaeumer.vscode-eslint",
-    "codezombiech.gitignore",
-    "eamodio.gitlens",
-    "gruntfuggly.todo-tree",
-    "dotjoshjohnson.xml",
-    "redhat.vscode-yaml",
-    "vuhrmeister.vscode-meteor"
-  ]
-}

.devcontainer/docker-compose.yml

@@ -1,51 +0,0 @@
-version: '3.7'
-
-services:
-
-  wekandb-dev:
-    image: mongo:6
-    container_name: wekan-dev-db
-    restart: unless-stopped
-    command: mongod --oplogSize 128
-    networks:
-      - wekan-dev-tier
-    expose:
-      - 27017
-    volumes:
-      - /etc/localtime:/etc/localtime:ro
-      - ./volumes/wekan-db:/data/db
-      - ./volumes/wekan-db-dump:/dump
-
-  wekan-dev:
-    container_name: wekan-dev-app
-    restart: always
-    networks:
-      - wekan-dev-tier
-    build:
-      context: ..
-      dockerfile: .devcontainer/Dockerfile
-    ports:
-      - 3000:3000
-      - 9229:9229
-    environment:
-      - MONGO_URL=mongodb://wekandb-dev:27017/wekan
-      - ROOT_URL=http://localhost:3000
-      - WITH_API=true
-      - RICHER_CARD_COMMENT_EDITOR=true
-      - BROWSER_POLICY_ENABLED=true
-      - WRITABLE_PATH=/data
-    depends_on:
-      - wekandb-dev
-    volumes:
-      - /etc/localtime:/etc/localtime:ro
-      - ./volumes/data:/data
-      - ../client:/home/wekan/app/client
-      - ../models:/home/wekan/app/models
-      - ../config:/home/wekan/app/config
-      - ../imports:/home/wekan/app/imports
-      - ../server:/home/wekan/app/server
-      - ../public:/home/wekan/app/public
-
-networks:
-  wekan-dev-tier:
-    driver: bridge

.dockerignore

@@ -1,36 +0,0 @@
-*~
-*.swp
-.meteor-spk
-*.sublime-workspace
-tmp/
-node_modules/
-npm-debug.log
-.gitmodules
-.vscode/
-.idea/
-.build/*
-**/parts/
-**/stage
-**/prime
-**/*.snap
-snap/.snapcraft/
-.idea
-.DS_Store
-.DS_Store?
-.build*
-*.browserify.js.cached
-*.browserify.js.map
-.build*
-versions.json
-.versions
-.npm
-.build*
-._*
-.Trashes
-Thumbs.db
-ehthumbs.db
-.eslintcache
-.meteor/local
-.devcontainer/docker-compose.extend.yml
-.devcontainer/volumes*/
-.git

.editorconfig

@@ -8,20 +8,3 @@ end_of_line = lf
 insert_final_newline = true
 indent_style = space
 indent_size = 2
-
-[*.{js,html}]
-
-charset = utf-8
-end_of_line = lf
-indent_brace_style = 1TBS
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-max_line_length = 80
-quote_type = auto
-spaces_around_operators = true
-trim_trailing_whitespace = true
-
-[*.md]
-
-trim_trailing_whitespace = false

.eslintignore

@@ -1,2 +0,0 @@
-packages/*
-.snap-meteor-1.8/*

.eslintrc.json

@@ -1,20 +1,16 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "plugin:meteor/recommended",
-    "prettier",
-    "prettier/standard"
-  ],
+  "extends": "eslint:recommended",
   "env": {
     "es6": true,
     "node": true,
-    "browser": true,
-    "meteor": true
+    "browser": true
   },
-  "parser": "babel-eslint",
   "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module"
+    "ecmaVersion": 2017,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
   },
   "rules": {
     "strict": 0,
@@ -24,7 +20,7 @@
     "consistent-return": 2,
     "dot-notation": 2,
     "eqeqeq": 2,
-    "indent": 0,
+    "indent": [2, 2],
     "no-cond-assign": 2,
     "no-constant-condition": 2,
     "no-eval": 2,
@@ -32,12 +28,11 @@
     "no-unneeded-ternary": 2,
     "radix": 2,
     "semi": [2, "always"],
-    "camelcase": [2, { "properties": "never" }],
+    "camelcase": [2, {"properties": "never"}],
     "comma-spacing": 2,
     "comma-style": 2,
     "eol-last": 2,
     "linebreak-style": [2, "unix"],
-    "meteor/audit-argument-checks": 0,
     "new-parens": 2,
     "no-lonely-if": 2,
     "no-multiple-empty-lines": 2,
@@ -45,9 +40,10 @@
     "no-spaced-func": 2,
     "no-trailing-spaces": 2,
     "operator-linebreak": 2,
-    "quotes": [2, "single", { "avoidEscape": true }],
+    "quotes": [2, "single"],
     "semi-spacing": 2,
     "space-unary-ops": 2,
+    "arrow-parens": 2,
     "arrow-spacing": 2,
     "no-class-assign": 2,
     "no-dupe-class-members": 2,
@@ -56,27 +52,8 @@
     "prefer-const": 2,
     "prefer-spread": 2,
     "prefer-template": 2,
-    "no-unused-vars": "warn",
-    "prettier/prettier": [
-      "error",
-      {
-        "printWidth": 80,
-        "tabWidth": 2,
-        "useTabs": false,
-        "singleQuote": true,
-        "trailingComma": "all"
-      }
-    ],
-    "meteor/no-session": 0
+    "no-unused-vars" : "warn"
   },
-  "settings": {
-    "import/resolver": {
-      "meteor": {
-        "extensions": [".js", ".jsx"]
-      }
-    }
-  },
-  "plugins": ["prettier", "meteor"],
   "globals": {
     "Meteor": false,
     "Session": false,
@@ -93,32 +70,37 @@
     "Template": false,
     "$": false,
     "_": false,
+    "autosize": false,
     "Avatar": true,
     "Avatars": true,
-
+    "BlazeComponent": false,
+    "BlazeLayout": false,
     "CollectionHooks": false,
+    "DocHead": false,
     "ESSearchResults": false,
     "FastRender": false,
     "FlowRouter": false,
     "FS": false,
     "getSlug": false,
     "Migrations": false,
+    "moment": false,
     "Mousetrap": false,
     "Picker": false,
     "Presence": true,
     "presences": true,
     "Ps": true,
+    "ReactiveTabs": false,
     "Restivus": false,
     "SimpleSchema": false,
-"T9n": false,
+    "SubsManager": false,
+    "T9n": false,
     "TAPi18n": false,
     "AccountsTemplates": true,
     "Activities": true,
     "Attachments": true,
     "Boards": true,
-    "CardCommentReactions": true,
     "CardComments": true,
-    "DatePicker": true,
+    "DatePicker" : true,
     "Cards": true,
     "CustomFields": true,
     "Lists": true,
@@ -127,11 +109,13 @@
     "CSSEvents": true,
     "EscapeActions": true,
     "Filter": true,
+    "Mixins": true,
     "Modal": true,
     "MultiSelection": true,
     "Popup": true,
     "Sidebar": true,
     "Utils": true,
+    "InlinedForm": true,
     "UnsavedEdits": true,
     "Notifications": true,
     "allowIsBoardAdmin": true,
@@ -139,16 +123,15 @@
     "allowIsBoardMemberByCard": true,
     "allowIsBoardMemberCommentOnly": true,
     "allowIsBoardMemberNoComments": true,
-    "allowIsBoardMemberWorker": true,
     "Emoji": true,
     "Checklists": true,
     "Settings": true,
     "InvitationCodes": true,
+    "JsonRoutes": true,
     "Authentication": true,
     "Integrations": true,
     "HTTP": true,
     "AccountSettings": true,
-    "TableVisibilityModeSettings": true,
     "Announcements": true,
     "Swimlanes": true,
     "ChecklistItems": true,

.gitattributes

@@ -1,3 +0,0 @@
-* text=auto eol=lf
-*.{cmd,[cC][mM][dD]} text eol=crlf
-*.{bat,[bB][aA][tT]} text eol=crlf

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,27 @@
+## Issue
+
+Add these issues to elsewhere:
+- Snap: https://github.com/wekan/wekan-snap/issues
+
+Other Wekan issues can be added here.
+
+**Server Setup Information**:
+
+* Did you test in newest Wekan?:
+* For new Wekan install, did you configure root-url correctly https://github.com/wekan/wekan/wiki/Settings ?
+* Wekan version:
+* If this is about old version of Wekan, what upgrade problem you have?:
+* Operating System:
+* Deployment Method(snap/docker/sandstorm/mongodb bundle/source):
+* Http frontend if any (Caddy, Nginx, Apache, see config examples from Wekan GitHub wiki first):
+* Node Version:
+* MongoDB Version:
+* ROOT_URL environment variable http(s)://(subdomain).example.com(/suburl):
+
+**Problem description**:
+- *REQUIRED: Add recorded animated gif about how it works currently, and screenshot mockups how it should work. Use peek to record animgif in Linux https://github.com/phw/peek*
+- *Explain steps how to reproduce*
+- *In webbrowser, what does show Right Click / Inspect / Console ? Chrome shows more detailed info than Firefox.*
+- *If using Snap, what does show command `sudo snap logs wekan.wekan` ?*
+- *If using Docker, what does show command `sudo docker logs wekan-app` ?*
+- *If logs are very long, attach them in .zip file*

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,31 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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/dependabot.yml

@@ -1,6 +0,0 @@
-version: 2
-updates:
-- package-ecosystem: "github-actions"
-  directory: "/"
-  schedule:
-      interval: "weekly"

.github/workflows/depsreview.yaml

@@ -1,14 +0,0 @@
-name: 'Dependency Review'
-on: [pull_request]
-
-permissions:
-  contents: read
-
-jobs:
-  dependency-review:
-    runs-on: ubuntu-latest
-    steps:
-      - name: 'Checkout Repository'
-        uses: actions/checkout@v6
-      - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v4

.github/workflows/docker-publish.yml

@@ -1,63 +0,0 @@
-name: Docker
-
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-on:
-  schedule:
-    - cron: '28 23 * * *'
-  push:
-    branches: [ main ]
-    # Publish semver tags as releases.
-    tags: [ 'v*.*.*' ]
-  pull_request:
-    branches: [ main ]
-
-env:
-  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}
-
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - name: Checkout repository
-        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@b45d80f862d83dbcd57f89517bcf500b2ab88fb2
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
-      - name: Build and push Docker image
-        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/dockerimage.yml

@@ -1,20 +0,0 @@
-name: Docker Image CI
-
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: read
-
-jobs:
-
-  build:
-
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v6
-    - name: Build the Docker image
-      run: docker build . --file Dockerfile --tag wekan:$(date +%s)

.github/workflows/release-all.yml

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

.github/workflows/release.yml

@@ -1,30 +0,0 @@
-name: Release Charts
-
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: read
-
-jobs:
-  release:
-    permissions:
-      contents: write  # for helm/chart-releaser-action to push chart release and create a release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-
-      - name: Configure Git
-        run: |
-          git config user.name "$GITHUB_ACTOR"
-          git config user.email "$GITHUB_ACTOR@users.noreply.github.com"
-
-      - name: Run chart-releaser
-        uses: helm/chart-releaser-action@v1.7.0
-        env:
-          CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/test_suite.yml

@@ -1,168 +0,0 @@
-name: Test suite
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-permissions:
-  contents: read # to fetch code (actions/checkout)
-
-jobs:
-# the following are optional jobs and need to be configured according
-# to this project's settings:
-#
-#  lintcode:
-#    name: Javascript lint
-#    runs-on: ubuntu-latest
-#    steps:
-#    - name: checkout
-#      uses: actions/checkout@v6
-#
-#    - name: setup node
-#      uses: actions/setup-node@v1
-#      with:
-#        node-version: '12.x'
-#
-#    - name: cache dependencies
-#      uses: actions/cache@v1
-#      with:
-#        path: ~/.npm
-#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-#        restore-keys: |
-#          ${{ runner.os }}-node-
-#
-#    - run: npm install
-#    - run: npm run lint:code
-#
-#  lintstyle:
-#    name: SCSS lint
-#    runs-on: ubuntu-latest
-#    needs: [lintcode]
-#    steps:
-#    - name: checkout
-#      uses: actions/checkout@v6
-#
-#    - name: setup node
-#      uses: actions/setup-node@v1
-#      with:
-#        node-version: '12.x'
-#
-#    - name: cache dependencies
-#      uses: actions/cache@v1
-#      with:
-#        path: ~/.npm
-#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-#        restore-keys: |
-#          ${{ runner.os }}-node-
-#    - run: npm install
-#    - run: npm run lint:style
-#
-#  lintdocs:
-#    name: documentation lint
-#    runs-on: ubuntu-latest
-#    needs: [lintcode,lintstyle]
-#    steps:
-#    - name: checkout
-#      uses: actions/checkout@v6
-#
-#    - name: setup node
-#      uses: actions/setup-node@v1
-#      with:
-#        node-version: '12.x'
-#
-#    - name: cache dependencies
-#      uses: actions/cache@v1
-#      with:
-#        path: ~/.npm
-#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-#        restore-keys: |
-#          ${{ runner.os }}-node-
-#
-#    - run: npm install
-#    - run: npm run lint:markdown
-
-  tests:
-    name: Meteor ${{ matrix.meteor }} tests
-    runs-on: ubuntu-latest
-    steps:
-
-      # CHECKOUTS
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      # CACHING
-      - name: Install Meteor
-        id: cache-meteor-install
-        uses: actions/cache@v5
-        with:
-          path: ~/.meteor
-          key: v1-meteor-${{ hashFiles('.meteor/versions') }}
-          restore-keys: |
-                v1-meteor-
-
-      - name: Cache NPM dependencies
-        id: cache-meteor-npm
-        uses: actions/cache@v5
-        with:
-          path: ~/.npm
-          key: v1-npm-${{ hashFiles('package-lock.json') }}
-          restore-keys: |
-                v1-npm-
-
-      - name: Cache Meteor build
-        id: cache-meteor-build
-        uses: actions/cache@v5
-        with:
-          path: |
-            .meteor/local/resolver-result-cache.json
-            .meteor/local/plugin-cache
-            .meteor/local/isopacks
-            .meteor/local/bundler-cache/scanner
-          key: v1-meteor_build_cache-${{ github.ref }}-${{ github.sha }}
-          restore-keys: |
-            v1-meteor_build_cache-
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: '22.22.2'
-
-      - name: Setup meteor
-        uses: meteorengineer/setup-meteor@v3
-        with:
-          meteor-release: '3.4'
-
-      - name: Install NPM Dependencies
-        run: meteor npm install --no-audit
-
-      - name: Run Tests
-        run: sh ./test-wekan.sh -cv
-
-      - name: Upload coverage
-        uses: actions/upload-artifact@v7
-        with:
-          name: coverage-folder
-          path: .coverage/
-
-  coverage:
-    name: Coverage report
-    runs-on: ubuntu-latest
-    needs: [tests]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      - name: Download coverage
-        uses: actions/download-artifact@v8
-        with:
-          name: coverage-folder
-          path: .coverage/
-
-
-      - name: Coverage Report
-        uses: VeryGoodOpenSource/very_good_coverage@v3.0.0
-        with:
-          path: ".coverage/lcov.info"
-          min_coverage: 1 # TODO add tests and increase to 95!

.gitignore

@@ -1,14 +1,14 @@
 *~
-*.sw*
+*.swp
 .meteor-spk
 *.sublime-workspace
 tmp/
 node_modules/
 npm-debug.log
-.gitmodules
 .vscode/
 .idea/
 .build/*
+package-lock.json
 **/parts/
 **/stage
 **/prime
@@ -29,27 +29,3 @@ versions.json
 .Trashes
 Thumbs.db
 ehthumbs.db
-.eslintcache
-.meteor/local
-.devcontainer/docker-compose.extend.yml
-.devcontainer/volumes*/
-.coverage
-
-# Rspack build artifacts
-_build/
-public/build-assets/
-public/build-chunks/
-private/build-assets/
-private/build-chunks/
-public/client-rspack.js.map
-
-# Helm chart
-# Chart dependencies
-/helm/wekan/**/*.tgz
-/helm/wekan/charts
-
-# Meteor Modern-Tools build context directories
-_build
-*/build-assets
-*/build-chunks
-.rsdoctor

.gitpod.Dockerfile

@@ -1,10 +0,0 @@
-FROM gitpod/workspace-mongodb
-                    
-USER gitpod
-
-# Install custom tools, runtime, etc. using apt-get
-# For example, the command below would install "bastet" - a command line tetris clone:
-#
-# RUN sudo apt-get -q update && #     sudo apt-get install -yq bastet && #     sudo rm -rf /var/lib/apt/lists/*
-#
-# More information: https://www.gitpod.io/docs/config-docker/

.gitpod.yml

@@ -1,4 +0,0 @@
-tasks:
-  - init: npm install
-image:
-  file: .gitpod.Dockerfile

.meteor/.finished-upgraders

@@ -16,5 +16,3 @@ notices-for-facebook-graph-api-2
 1.4.1-add-shell-server-package
 1.4.3-split-account-service-packages
 1.5-add-dynamic-import-package
-1.7-split-underscore-from-meteor-base
-1.8.3-split-jquery-from-blaze

.meteor/packages

@@ -3,67 +3,92 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base
+meteor-base@1.2.0
 
 # Build system
 ecmascript
-standard-minifier-js
-rspack
+stylus@2.513.13
+standard-minifier-css@1.3.5
+standard-minifier-js@2.2.0
+mquandalle:jade
 
-blaze@3.0.2
+# Polyfills
+es5-shim@4.6.15
 
 # Collections
 aldeed:collection2
-aldeed:schema-index@4.0.0-beta.5
-reywood:publish-composite
-mongo
-
-# The holy trifecta - this is a replacement for subs-manager
-# for IndexedDB persistence and auto-sync
-jam:offline 
-# for optimistic methods with offline queuing
-jam:method 
-# global subscription caching
-jam:pub-sub
+cfs:standard-packages
+cottz:publish-relations
+dburles:collection-helpers
+idmontie:migrations
+matb33:collection-hooks
+matteodem:easy-search
+mongo@1.3.1
+mquandalle:collection-mutations
 
 # Account system
-accounts-password
-communitypackages:core
-communitypackages:unstyled
-communitypackages:flow-routing
-# Routing
-ostrio:flow-router-extra
+kenton:accounts-sandstorm
+service-configuration@1.0.11
+useraccounts:unstyled
+useraccounts:flow-routing
 wekan-ldap
 wekan-accounts-cas
-wekan-accounts-sandstorm
-wekan-accounts-lockout
-wekan-oidc
 wekan-accounts-oidc
 
 # Utilities
-check
-random
-reactive-dict
-session
-tracker
-audit-argument-checks
+check@1.2.5
+jquery@1.11.10
+random@1.0.10
+reactive-dict@1.2.0
+session@1.1.7
+tracker@1.1.3
+underscore@1.0.10
+3stack:presence
+alethes:pages
+arillo:flow-router-helpers
+audit-argument-checks@1.0.7
+kadira:blaze-layout
+kadira:dochead
+meteorhacks:picker
+meteorhacks:subs-manager
+mquandalle:autofocus
+ongoworks:speakingurl
+raix:handlebar-helpers
+tap:i18n
+http@1.3.0
 
 # UI components
-ostrio:i18n
-reactive-var
-shell-server
-email
-dynamic-import
+blaze
+reactive-var@1.0.11
+fortawesome:fontawesome
+mousetrap:mousetrap
+mquandalle:jquery-textcomplete
+mquandalle:jquery-ui-drag-drop-sort
+mquandalle:mousetrap-bindglobal
+peerlibrary:blaze-components@=0.15.1
+templates:tabs
+verron:autosize
+simple:json-routes
+rajit:bootstrap3-datepicker
+shell-server@0.3.0
+simple:rest-accounts-password
+useraccounts:core
+email@1.2.3
+horka:swipebox
+dynamic-import@0.2.0
+staringatlights:fast-render
+
+mixmax:smart-disconnect
+accounts-password@1.5.0
+cfs:gridfs
+rzymek:fullcalendar
+momentjs:moment@2.22.2
+browser-policy-framing
+mquandalle:moment
+msavin:usercache
+wekan-scrollbar
+mquandalle:perfect-scrollbar
+mdg:meteor-apm-agent
+meteorhacks:unblock
+lucasantoniassi:accounts-lockout
 wekan-markdown
-quave:synced-cron
-ostrio:cookies
-ostrio:files
-# lmieulet:meteor-coverage
-meteortesting:mocha
-matb33:collection-hooks
-service-configuration
-minifier-css
-ejson
-logging
-wekan-fullcalendar
-wekan-fontawesome

.meteor/release

@@ -1 +1 @@
-METEOR@3.4
+METEOR@1.6.0.1

.meteor/versions

@@ -1,121 +1,188 @@
-accounts-base@3.2.0
-accounts-oauth@1.4.6
-accounts-password@3.2.2
-aldeed:collection2@4.1.5
-aldeed:schema-index@4.0.0
-aldeed:simple-schema@1.13.1
-allow-deny@2.1.0
-audit-argument-checks@1.0.8
-autoupdate@2.0.1
-babel-compiler@7.13.0
-babel-runtime@1.5.2
-base64@1.0.13
-binary-heap@1.0.12
-blaze@3.0.2
-blaze-tools@2.0.0
-boilerplate-generator@2.1.0
-caching-compiler@2.0.1
-caching-html-compiler@2.0.0
-callback-hook@1.6.1
-check@1.5.0
-communitypackages:core@2.0.3
-communitypackages:flow-routing@2.1.0
-communitypackages:unstyled@2.0.1
-core-runtime@1.0.0
-ddp@1.4.2
-ddp-client@3.1.1
-ddp-common@1.4.4
-ddp-rate-limiter@1.2.2
-ddp-server@3.1.2
-diff-sequence@1.1.3
-dynamic-import@0.7.4
-ecmascript@0.17.0
-ecmascript-runtime@0.8.3
-ecmascript-runtime-client@0.12.3
-ecmascript-runtime-server@0.11.1
-ejson@1.1.5
-email@3.1.2
-es5-shim@4.8.1
-facts-base@1.0.2
-fetch@0.1.6
-geojson-utils@1.0.12
-hot-code-push@1.0.5
-html-tools@2.0.0
-htmljs@2.0.1
-http@1.4.4
-id-map@1.2.0
-inter-process-messaging@0.1.2
-jam:method@1.9.1
-jam:offline@0.4.1
-jam:pub-sub@0.5.1
-jquery@3.0.2
-lai:collection-extensions@1.0.0
-localstorage@1.2.1
-logging@1.3.6
-matb33:collection-hooks@2.1.0
-meteor@2.2.0
-meteor-base@1.5.2
-meteortesting:browser-tests@1.4.2
-meteortesting:mocha@2.1.0
-meteortesting:mocha-core@8.0.1
-minifier-css@2.0.1
-minifier-js@3.1.0
-minimongo@2.0.5
-modern-browsers@0.2.3
-modules@0.20.3
-modules-runtime@0.13.2
-mongo@2.2.0
-mongo-decimal@0.2.0
-mongo-dev-server@1.1.1
-mongo-id@1.0.9
-npm-mongo@6.16.1
-oauth@3.0.2
-oauth2@1.3.3
-observe-sequence@2.0.0
-ordered-dict@1.2.0
-ostrio:cookies@2.9.1
-ostrio:cstorage@4.0.1
-ostrio:files@3.0.1
-ostrio:flow-router-extra@3.12.1
-ostrio:i18n@3.2.1
-promise@1.0.0
-quave:synced-cron@2.4.0
-raix:eventemitter@1.0.0
-random@1.2.2
-rate-limit@1.1.2
-react-fast-refresh@0.3.0
-reactive-dict@1.3.2
-reactive-var@1.0.13
-reload@1.3.2
-retry@1.1.1
-reywood:publish-composite@1.9.0
-routepolicy@1.1.2
-rspack@1.0.0
-service-configuration@1.3.5
-session@1.2.2
-sha@1.0.10
-shell-server@0.7.0
-socket-stream-client@0.6.1
-spacebars@2.0.0
-spacebars-compiler@2.0.0
-standard-minifier-js@3.2.0
-templating@1.4.4
-templating-compiler@2.0.0
-templating-runtime@2.0.1
-templating-tools@2.0.0
-tools-core@1.0.0
-tracker@1.3.4
-typescript@5.9.3
-url@1.3.5
-webapp@2.1.0
-webapp-hashing@1.1.2
-wekan-accounts-cas@0.2.0
-wekan-accounts-lockout@1.1.0
+3stack:presence@1.1.2
+accounts-base@1.4.0
+accounts-oauth@1.1.15
+accounts-password@1.5.0
+aldeed:collection2@2.10.0
+aldeed:collection2-core@1.2.0
+aldeed:schema-deny@1.1.0
+aldeed:schema-index@1.1.1
+aldeed:simple-schema@1.5.3
+alethes:pages@1.8.6
+allow-deny@1.1.0
+arillo:flow-router-helpers@0.5.2
+audit-argument-checks@1.0.7
+autoupdate@1.3.12
+babel-compiler@6.24.7
+babel-runtime@1.1.1
+base64@1.0.10
+binary-heap@1.0.10
+blaze@2.3.2
+blaze-tools@1.0.10
+boilerplate-generator@1.3.1
+browser-policy-common@1.0.11
+browser-policy-framing@1.1.0
+caching-compiler@1.1.9
+caching-html-compiler@1.1.2
+callback-hook@1.0.10
+cfs:access-point@0.1.49
+cfs:base-package@0.0.30
+cfs:collection@0.5.5
+cfs:collection-filters@0.2.4
+cfs:data-man@0.0.6
+cfs:file@0.1.17
+cfs:gridfs@0.0.34
+cfs:http-methods@0.0.32
+cfs:http-publish@0.0.13
+cfs:power-queue@0.9.11
+cfs:reactive-list@0.0.9
+cfs:reactive-property@0.0.4
+cfs:standard-packages@0.5.9
+cfs:storage-adapter@0.2.3
+cfs:tempstore@0.1.5
+cfs:upload-http@0.0.20
+cfs:worker@0.1.4
+check@1.2.5
+chuangbo:cookie@1.1.0
+coffeescript@1.12.7_3
+coffeescript-compiler@1.12.7_3
+cottz:publish-relations@2.0.8
+dburles:collection-helpers@1.1.0
+ddp@1.4.0
+ddp-client@2.2.0
+ddp-common@1.3.0
+ddp-rate-limiter@1.0.7
+ddp-server@2.1.1
+deps@1.0.12
+diff-sequence@1.0.7
+dynamic-import@0.2.1
+ecmascript@0.9.0
+ecmascript-runtime@0.5.0
+ecmascript-runtime-client@0.5.0
+ecmascript-runtime-server@0.5.0
+ejson@1.1.0
+email@1.2.3
+es5-shim@4.6.15
+fastclick@1.0.13
+fortawesome:fontawesome@4.7.0
+geojson-utils@1.0.10
+horka:swipebox@1.0.2
+hot-code-push@1.0.4
+html-tools@1.0.11
+htmljs@1.0.11
+http@1.3.0
+id-map@1.0.9
+idmontie:migrations@1.0.3
+jquery@1.11.10
+kadira:blaze-layout@2.3.0
+kadira:dochead@1.5.0
+kadira:flow-router@2.12.1
+kenton:accounts-sandstorm@0.7.0
+launch-screen@1.1.1
+livedata@1.0.18
+localstorage@1.2.0
+logging@1.1.19
+lucasantoniassi:accounts-lockout@1.0.0
+matb33:collection-hooks@0.8.4
+matteodem:easy-search@1.6.4
+mdg:meteor-apm-agent@3.1.2
+mdg:validation-error@0.5.1
+meteor@1.8.2
+meteor-base@1.2.0
+meteor-platform@1.2.6
+meteorhacks:aggregate@1.3.0
+meteorhacks:collection-utils@1.2.0
+meteorhacks:meteorx@1.4.1
+meteorhacks:picker@1.0.3
+meteorhacks:subs-manager@1.6.4
+meteorhacks:unblock@1.1.0
+meteorspark:util@0.2.0
+minifier-css@1.2.16
+minifier-js@2.2.2
+minifiers@1.1.8-faster-rebuild.0
+minimongo@1.4.3
+mixmax:smart-disconnect@0.0.4
+mobile-status-bar@1.0.14
+modules@0.11.0
+modules-runtime@0.9.1
+momentjs:moment@2.22.2
+mongo@1.3.1
+mongo-dev-server@1.1.0
+mongo-id@1.0.6
+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:jquery-ui-drag-drop-sort@0.2.0
+mquandalle:moment@1.0.1
+mquandalle:mousetrap-bindglobal@0.0.1
+mquandalle:perfect-scrollbar@0.6.5_2
+msavin:usercache@1.0.0
+npm-bcrypt@0.9.3
+npm-mongo@2.2.33
+oauth@1.2.1
+oauth2@1.2.0
+observe-sequence@1.0.16
+ongoworks:speakingurl@1.1.0
+ordered-dict@1.0.9
+peerlibrary:assert@0.2.5
+peerlibrary:base-component@0.16.0
+peerlibrary:blaze-components@0.15.1
+peerlibrary:computed-field@0.7.0
+peerlibrary:reactive-field@0.3.0
+promise@0.10.0
+raix:eventemitter@0.1.3
+raix:handlebar-helpers@0.2.5
+rajit:bootstrap3-datepicker@1.7.1
+random@1.0.10
+rate-limit@1.0.8
+reactive-dict@1.2.0
+reactive-var@1.0.11
+reload@1.1.11
+retry@1.0.9
+routepolicy@1.0.12
+rzymek:fullcalendar@3.8.0
+service-configuration@1.0.11
+session@1.1.7
+sha@1.0.9
+shell-server@0.3.1
+simple:authenticate-user-by-token@1.0.1
+simple:json-routes@2.1.0
+simple:rest-accounts-password@1.1.2
+simple:rest-bearer-token-parser@1.0.1
+simple:rest-json-error-handler@1.0.1
+softwarerero:accounts-t9n@1.3.11
+spacebars@1.0.15
+spacebars-compiler@1.1.3
+srp@1.0.10
+standard-minifier-css@1.3.5
+standard-minifier-js@2.2.3
+staringatlights:fast-render@2.16.5
+staringatlights:inject-data@2.0.5
+stylus@2.513.13
+tap:i18n@1.8.2
+templates:tabs@2.3.0
+templating@1.3.2
+templating-compiler@1.3.3
+templating-runtime@1.3.2
+templating-tools@1.1.2
+tracker@1.1.3
+ui@1.0.13
+underscore@1.0.10
+url@1.1.0
+useraccounts:core@1.14.2
+useraccounts:flow-routing@1.14.2
+useraccounts:unstyled@1.14.2
+verron:autosize@3.0.8
+webapp@1.4.0
+webapp-hashing@1.0.9
 wekan-accounts-oidc@1.0.10
-wekan-accounts-sandstorm@0.9.0
-wekan-fontawesome@6.4.2
-wekan-fullcalendar@5.11.5
-wekan-ldap@0.1.0
-wekan-markdown@1.0.9
-wekan-oidc@1.1.0
-zodern:types@1.0.13
+wekan-markdown@1.0.7
+wekan-oidc@1.0.12
+wekan-scrollbar@3.1.3
+wekan-accounts-cas@0.1.0
+wekan-ldap@0.0.2
+yasaricli:slugify@0.0.7
+zimme:active-route@2.3.2

.meteorignore

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

.pkgr.yml

@@ -1,13 +0,0 @@
-dependencies:
-  - libreadline-dev
-  - libssl-dev
-  - bsdtar
-targets:
-  ubuntu-18.04:
-  ubuntu-16.04:
-  ubuntu-14.04:
-  centos-6:
-  centos-7:
-  debian-10:
-  sles-12:
-  sles-11:

.prettierignore

@@ -1,8 +0,0 @@
-packages/
-node_modules/
-.build/
-.meteor/
-.vscode/
-.tx/
-.github/
-.snap-meteor-1.8/

.prettierrc

@@ -1,8 +0,0 @@
-{
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "all"
-}

.travis.yml

@@ -1,10 +1,10 @@
-dist: focal
+dist: trusty
 sudo: required
 
 env:
-  TRAVIS_DOCKER_COMPOSE_VERSION: 1.24.0
-  TRAVIS_NODE_VERSION: 14.21.3
-  TRAVIS_NPM_VERSION: latest
+  TRAVIS_DOCKER_COMPOSE_VERSION: 1.17.0
+  TRAVIS_NODE_VERSION: 8.9.3
+  TRAVIS_NPM_VERSION: 5.5.1
 
 before_install:
   - sudo apt-get update -y

.tx/config

@@ -1,9 +1,55 @@
-[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, 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
+# This is the configuration of the Transifex tool that we use to manage the
+# translations on Wekan. Documentation at: http://docs.transifex.com/client.
+#
+# Push
+# ====
+#
+# It is recommended that contributors use the Transifex web UI to create and
+# edit translated strings. However in case a contributor has directly jumped
+# into the code and made its translations in the corresponding i18n.json file
+# we can push it using
+#
+# > tx push -t -l ar
+#
+# Where `ar` is the language identifier. In addition, the project maintainer
+# should push the English source file to Transifex at least before each release
+# candidate using:
+#
+# > tx push -s
+#
+# Pull
+# ====
+#
+# The set of accepted language is directly managed in Transifex, the only
+# restriction we define to bundle a new language in the application, is that its
+# completion is at least at 75%.
+#
+# We use:
+#
+# > tx pull
+#
+# to download new versions of existing translations, and
+#
+# > tx pull -a --minimum-perc=75
+#
+# to download new sufficiently advanced translations.
 
-[o:wekan:p:wekan:r:application]
-file_filter = imports/i18n/data/<lang>.i18n.json
-source_file = imports/i18n/data/en.i18n.json
+[main]
+host = https://www.transifex.com
+# tap:i18n requires us to use `-` separator in the language identifiers whereas
+# Transifex uses a `_` separator, without an option to customize it on one side
+# or the other, so we need to do a Manual mapping.
+lang_map = bg_BG:bg, en_GB:en-GB, es_AR:es-AR, el_GR:el, fi_FI:fi, hu_HU:hu, id_ID:id, mn_MN:mn, no:nb, lv_LV:lv, pt_BR:pt-BR, ro_RO:ro, zh_CN:zh-CN, zh_TW:zh-TW, zh_HK:zh-HK
+
+[wekan.application]
+file_filter = i18n/<lang>.i18n.json
 source_lang = en
-type        = KEYVALUEJSON
+type = KEYVALUEJSON
+
+# We might have a dedicated second resource later to translate the “Welcome
+# Board” data.
+#
+# [wekan.welcomeBoard]
+# file_filter = private/welcomeBoard/<lang>.json
+# source_lang = en
+# type = KEYVALUEJSON

.vscode/launch.json

@@ -1,57 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Meteor: Node",
-      "runtimeExecutable": "meteor",
-      "runtimeArgs": [
-        "--port=4000",
-        "--exclude-archs=web.browser.legacy,web.cordova",
-        "--raw-logs"
-      ],
-      "env": {
-        "WRITABLE_PATH": "/tmp/uploads",
-      },
-      "outputCapture": "std",
-      "restart": true,
-      "timeout": 60000
-    },
-    {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Meteor: Chrome",
-      "url": "http://localhost:4000",
-      "sourceMapPathOverrides": {
-        "meteor://💻app/*": "${workspaceFolder}/*"
-      },
-      "userDataDir": "${env:HOME}/.vscode/chrome"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Test: Node",
-      "runtimeExecutable": "meteor",
-      "runtimeArgs": [
-        "test",
-        "--port=4040",
-        "--exclude-archs=web.browser.legacy,web.cordova",
-        "--driver-package=meteortesting:mocha",
-        "--settings=settings.json",
-        "--raw-logs"
-      ],
-      "env": {
-        "TEST_WATCH": "1"
-      },
-      "outputCapture": "std",
-      "timeout": 60000
-    }
-  ],
-  "compounds": [
-    {
-      "name": "Meteor: All",
-      "configurations": ["Meteor: Node", "Meteor: Chrome"]
-    }
-  ]
-}

.vscode/settings.json

@@ -1,16 +1,12 @@
 {
-  "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
-}
+  "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
+  }
+}

CODE_OF_CONDUCT.md

@@ -1,22 +0,0 @@
-# Code of Conduct
-
-For all code at WeKan GitHub Organization https://github.com/wekan
-
-- All code in pull requests need to have permission already to add it to WeKan with MIT license, and will become MIT license.
-- All code xet7 add is MIT license.
-- For any dependencies, permissive licenses like https://copyfree.org are preferred
-- For anything currently that is non-permissive (like GPL, AGPL, SSPL), those will be replaced with permissive-licensed alternatives
-
-# Reporting about violations or something else
-
-## Private reports
-
-- Email support@wekan.fi
-- Security issues: [SECURITY.md](SECURITY.md)
-- License violations
-- Anything private, sensitive or negative
-
-## Public
-
-- Feature Requests and Bug Reports https://github.com/wekan/wekan/issues
-- Anything happy, positive, encouraging, helping, at friendly WeKan Global FOSS Community

CONTRIBUTING.md

@@ -1,88 +1,4 @@
-## About money
+To get started, [please sign the Contributor License Agreement](https://www.clahub.com/agreements/wekan/wekan).
 
-Not paid:
+[Then, please read documentation at wiki](https://github.com/wekan/wekan/wiki).
 
-- Money is not paid for these, everyone uses their own time at their own cost:
-  - Security reports, see [SECURITY.md](SECURITY.md)
-  - Pull requests
-  - xet7 checking pull requests
-  - This is because full-featured WeKan FLOSS kanban with MIT license is free to use
-    also for Commercial Use without any payment, with full source code at
-    https://github.com/wekan/wekan for all platforms at https://wekan.fi/install/ .
-    There is nothing proprietary. WeKan is NOT Big Tech.
-    WeKan is maintained by https://github.com/xet7 at Finland https://wekan.fi .     
-- Public FLOSS Developer Community Support:
-  - https://github.com/wekan/wekan/issues
-
-Paid by customers of WeKan to WeKan:
-
-- Optional Private Paid Commercial Support at https://wekan.fi/commercial-support/
-  - Optional Paid Support/Features/Fixes/PrivateChat . All Paid Features and Fixes are added directly to FLOSS WeKan https://github.com/wekan/wekan
-  - Optional Paid Official SaaS Hosting https://wekan.fi/saas/ , if you need full-featured hosting, that is more than free app https://wekan.fi/app/
-
-## Contributing Security related
-
-For responsible security disclosure, please follow this process: [SECURITY.md](SECURITY.md)
-
-CVE Hall of Fame is at https://wekan.fi/hall-of-fame/
-
-## Contributing to Documentation Wiki
-
-Fork WeKan repo https://github.com/wekan/wekan ,
-edit `docs` directory content at GitHub web interface,
-and click send PR.
-
-## Contributing code
-
-[Building WeKan and sending PR](https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Build-and-Create-Pull-Request.md).
-
-WeKan code contributors Hall of Fame is at ChangeLog, where
-GitHub usernames are mentioned with changes added:
-
-https://github.com/wekan/wekan/blob/main/CHANGELOG.md
-
-Changes can be like typo fixes, bugfixes, features, or anything else
-like for example at open GitHub issues https://github.com/wekan/wekan/issues .
-Closed issues are already fixed or implemented.
-
-Also see other docs:
-
-https://github.com/wekan/wekan/tree/main/docs/DeveloperDocs
-
-Do not use code formatting or linting like eslist or prettier.
-
-Only send minimal changed code lines, that are related to feature or fix.
-
-WeKan code has MIT license.
-
-About 300 persons have contributed to WeKan, stats at:
-
-https://www.openhub.net/p/wekan
-
-WeKan maintainer xet7 reviews PR for typos etc before accepting to WeKan,
-so that WeKan code will still work OK.
-
-## Contributing translations
-
-Non-English translations are contributed only at
-https://app.transifex.com/wekan/wekan
-
-When adding new features, in your PR to
-https://github.com/wekan/wekan/pulls
-only add new English source language strings
-to https://github.com/wekan/wekan/blob/main/imports/i18n/data/en.i18n.json
-
-Maintainer of WeKan xet7 downloads all newest
-translations from Transifex and adds
-them to WeKan repo before making
-new release.
-
-## About WeKan Organization https://github.com/wekan
-
-Only xet7 has write access to WeKan Organization.
-
-xet7 reviews all PRs before merging.
-
-There has been over 300 contributors to WeKan, newest stats at:
-
-https://www.openhub.net/p/wekan

Dockerfile

@@ -1,68 +1,38 @@
-FROM ubuntu:24.04
+FROM ubuntu:disco
 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"
 
-# TARGETARCH and TARGETVARIANT are automatically provided by Docker Buildx
-ARG TARGETARCH
-ARG TARGETVARIANT
-ARG VERSION=8.65
-ARG DEBIAN_FRONTEND=noninteractive
-
-ENV BUILD_DEPS="apt-utils gnupg wget bzip2 g++ curl libarchive-tools build-essential git ca-certificates python3 unzip"
-
-ENV \
+# Set the environment variables (defaults where required)
+# DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
+# ENV BUILD_DEPS="paxctl"
+ENV BUILD_DEPS="apt-utils bsdtar gnupg gosu wget curl bzip2 build-essential python3 python3-pip git ca-certificates gcc-8" \
     DEBUG=false \
-    NODE_VERSION=v22.22.2 \
-    METEOR_RELEASE=METEOR@3.4 \
+    NODE_VERSION=v8.16.0 \
+    METEOR_RELEASE=1.6.0.1 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \
-    NPM_VERSION=10.9.2 \
+    NPM_VERSION=latest \
+    FIBERS_VERSION=2.0.0 \
+    ARCHITECTURE=linux-x64 \
     SRC_PATH=./ \
     WITH_API=true \
-    MONGO_OPLOG_URL="" \
-    RESULTS_PER_PAGE="" \
-    DEFAULT_BOARD_ID="" \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURES_BERORE=3 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD=60 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW=15 \
-    ACCOUNTS_COMMON_LOGIN_EXPIRATION_IN_DAYS=90 \
-    ATTACHMENTS_UPLOAD_EXTERNAL_PROGRAM="" \
-    ATTACHMENTS_UPLOAD_MIME_TYPES="" \
-    ATTACHMENTS_UPLOAD_MAX_SIZE=0 \
-    AVATARS_UPLOAD_EXTERNAL_PROGRAM="" \
-    AVATARS_UPLOAD_MIME_TYPES="" \
-    AVATARS_UPLOAD_MAX_SIZE=72000 \
-    RICHER_CARD_COMMENT_EDITOR=false \
-    CARD_OPENED_WEBHOOK_ENABLED=false \
-    MAX_IMAGE_PIXEL="" \
-    IMAGE_COMPRESS_RATIO="" \
-    NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
-    BIGEVENTS_PATTERN=NONE \
-    NOTIFY_DUE_DAYS_BEFORE_AND_AFTER="" \
-    NOTIFY_DUE_AT_HOUR_OF_DAY="" \
     EMAIL_NOTIFICATION_TIMEOUT=30000 \
     MATOMO_ADDRESS="" \
     MATOMO_SITE_ID="" \
     MATOMO_DO_NOT_TRACK=true \
     MATOMO_WITH_USERNAME=false \
-    METRICS_ALLOWED_IP_ADDRESSES="" \
     BROWSER_POLICY_ENABLED=true \
     TRUSTED_URL="" \
     WEBHOOKS_ATTRIBUTES="" \
     OAUTH2_ENABLED=false \
-    OIDC_REDIRECTION_ENABLED=false \
-    OAUTH2_CA_CERT="" \
-    OAUTH2_ADFS_ENABLED=false \
-    OAUTH2_B2C_ENABLED=false \
     OAUTH2_LOGIN_STYLE=redirect \
     OAUTH2_CLIENT_ID="" \
     OAUTH2_SECRET="" \
-    OAUTH2_SECRET_FILE="" \
     OAUTH2_SERVER_URL="" \
     OAUTH2_AUTH_ENDPOINT="" \
     OAUTH2_USERINFO_ENDPOINT="" \
@@ -76,9 +46,6 @@ ENV \
     LDAP_ENABLE=false \
     LDAP_PORT=389 \
     LDAP_HOST="" \
-    LDAP_AD_SIMPLE_AUTH="" \
-    LDAP_USER_AUTHENTICATION=false \
-    LDAP_USER_AUTHENTICATION_FIELD=uid \
     LDAP_BASEDN="" \
     LDAP_LOGIN_FALLBACK=false \
     LDAP_RECONNECT=true \
@@ -88,15 +55,15 @@ ENV \
     LDAP_AUTHENTIFICATION=false \
     LDAP_AUTHENTIFICATION_USERDN="" \
     LDAP_AUTHENTIFICATION_PASSWORD="" \
-    LDAP_AUTHENTIFICATION_PASSWORD_FILE="" \
     LDAP_LOG_ENABLED=false \
     LDAP_BACKGROUND_SYNC=false \
-    LDAP_BACKGROUND_SYNC_INTERVAL="" \
+    LDAP_BACKGROUND_SYNC_INTERVAL=100 \
     LDAP_BACKGROUND_SYNC_KEEP_EXISTANT_USERS_UPDATED=false \
     LDAP_BACKGROUND_SYNC_IMPORT_NEW_USERS=false \
     LDAP_ENCRYPTION=false \
     LDAP_CA_CERT="" \
     LDAP_REJECT_UNAUTHORIZED=false \
+    LDAP_USER_AUTHENTICATION=false \
     LDAP_USER_SEARCH_FILTER="" \
     LDAP_USER_SEARCH_SCOPE="" \
     LDAP_USER_SEARCH_FIELD="" \
@@ -134,98 +101,168 @@ ENV \
     CORS="" \
     CORS_ALLOW_HEADERS="" \
     CORS_EXPOSE_HEADERS="" \
-    DEFAULT_AUTHENTICATION_METHOD="" \
-    PASSWORD_LOGIN_ENABLED=true \
-    CAS_ENABLED=false \
-    CAS_BASE_URL="" \
-    CAS_LOGIN_URL="" \
-    CAS_VALIDATE_URL="" \
-    SAML_ENABLED=false \
-    SAML_PROVIDER="" \
-    SAML_ENTRYPOINT="" \
-    SAML_ISSUER="" \
-    SAML_CERT="" \
-    SAML_IDPSLO_REDIRECTURL="" \
-    SAML_PRIVATE_KEYFILE="" \
-    SAML_PUBLIC_CERTFILE="" \
-    SAML_IDENTIFIER_FORMAT="" \
-    SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
-    SAML_ATTRIBUTES="" \
-    ORACLE_OIM_ENABLED=false \
-    WAIT_SPINNER="" \
-    WRITABLE_PATH=/data \
-    S3="" \
-    MAIL_SERVICE_PASSWORD_FILE="" \
-    MONGO_PASSWORD_FILE="" \
-    S3_SECRET_FILE=""
+    DEFAULT_AUTHENTICATION_METHOD=""
 
-RUN <<EOR
-set -o xtrace
+# Copy the app to the image
+COPY ${SRC_PATH} /home/wekan/app
 
-# Create Wekan user
-useradd --user-group --system --home-dir /home/wekan wekan
+RUN \
+    set -o xtrace && \
+    # Add non-root user wekan
+    useradd --user-group --system --home-dir /home/wekan wekan && \
+    \
+    # OS dependencies
+    apt-get update -y && apt-get install -y --no-install-recommends ${BUILD_DEPS} && \
+    pip3 install -U pip setuptools wheel && \
+    \
+    # Meteor installer doesn't work with the default tar binary, so using bsdtar while installing.
+    # https://github.com/coreos/bugs/issues/1095#issuecomment-350574389
+    cp $(which tar) $(which tar)~ && \
+    ln -sf $(which bsdtar) $(which tar) && \
+    \
+    # Download nodejs
+    wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
+    wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    #---------------------------------------------------------------------------------------------
+    # 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 that has fix included, => Official 8.12.0 has been released
+    # Description at https://releases.wekan.team/node.txt
+    #wget https://releases.wekan.team/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
+    #echo "1ed54adb8497ad8967075a0b5d03dd5d0a502be43d4a4d84e5af489c613d7795  node-v8.12.0-linux-x64.tar.gz" >> SHASUMS256.txt.asc && \
+    \
+    # Verify nodejs authenticity
+    grep ${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | shasum -a 256 -c - && \
+    #export GNUPGHOME="$(mktemp -d)" && \
+    #\
+    # Try other key servers if ha.pool.sks-keyservers.net is unreachable
+    # Code from https://github.com/chorrell/docker-node/commit/2b673e17547c34f17f24553db02beefbac98d23c
+    # gpg keys listed at https://github.com/nodejs/node#release-team
+    # and keys listed here from previous version of this Dockerfile
+    #for key in \
+    #9554F04D7259F04124DE6B476D5A82AC7E37093B \
+    #94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
+    #FD3A5288F042B6850C66B31F09FE44734EB7990E \
+    #71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
+    #DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
+    #C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
+    #B9AE9905FFD7803F25714661B63B535A4C206CA9 \
+    #; do \
+    #gpg --keyserver ha.pool.sks-keyservers.net --recv-keys "$key" || \
+    #gpg --keyserver pgp.mit.edu --recv-keys "$key" || \
+    #gpg --keyserver keyserver.pgp.com --recv-keys "$key" ; \
+    #done && \
+    #gpg --verify SHASUMS256.txt.asc && \
+    # Ignore socket files then delete files then delete directories
+    #find "$GNUPGHOME" -type f | xargs rm -f && \
+    #find "$GNUPGHOME" -type d | xargs rm -fR && \
+    rm -f SHASUMS256.txt.asc && \
+    \
+    # Install Node
+    tar xvzf node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
+    rm node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
+    mv node-${NODE_VERSION}-${ARCHITECTURE} /opt/nodejs && \
+    ln -s /opt/nodejs/bin/node /usr/bin/node && \
+    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
+    \
+    #DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
+    #paxctl -mC `which node` && \
+    \
+    # Install Node dependencies
+    npm install -g npm@${NPM_VERSION} && \
+    npm install -g node-gyp && \
+    npm install -g fibers@${FIBERS_VERSION} && \
+    \
+    # Change user to wekan and install meteor
+    cd /home/wekan/ && \
+    chown wekan:wekan --recursive /home/wekan && \
+    curl "https://install.meteor.com" -o /home/wekan/install_meteor.sh && \
+    #curl "https://install.meteor.com/?release=${METEOR_RELEASE}" -o /home/wekan/install_meteor.sh && \
+    # OLD: sed -i "s|RELEASE=.*|RELEASE=${METEOR_RELEASE}\"\"|g" ./install_meteor.sh && \
+    # Install Meteor forcing its progress
+    sed -i 's/VERBOSITY="--silent"/VERBOSITY="--progress-bar"/' ./install_meteor.sh && \
+    echo "Starting meteor ${METEOR_RELEASE} installation...   \n" && \
+    chown wekan:wekan /home/wekan/install_meteor.sh && \
+    \
+    # Check if opting for a release candidate instead of major release
+    if [ "$USE_EDGE" = false ]; then \
+      gosu wekan:wekan sh /home/wekan/install_meteor.sh; \
+    else \
+      gosu wekan:wekan git clone --recursive --depth 1 -b release/METEOR@${METEOR_EDGE} git://github.com/meteor/meteor.git /home/wekan/.meteor; \
+    fi; \
+    \
+    # Get additional packages
+    #mkdir -p /home/wekan/app/packages && \
+    #chown wekan:wekan --recursive /home/wekan && \
+    # REPOS BELOW ARE INCLUDED TO WEKAN REPO
+    #cd /home/wekan/app/packages && \
+    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/flow-router.git kadira-flow-router && \
+    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/meteor-useraccounts/core.git meteor-useraccounts-core && \
+    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-cas.git && \
+    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/wekan-ldap.git && \
+    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/wekan-scrollbar.git && \
+    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-oidc.git && \
+    #gosu wekan:wekan git clone --depth 1 -b master --recurse-submodules https://github.com/wekan/markdown.git && \
+    #gosu wekan:wekan mv meteor-accounts-oidc/packages/switch_accounts-oidc wekan-accounts-oidc && \
+    #gosu wekan:wekan mv meteor-accounts-oidc/packages/switch_oidc wekan-oidc && \
+    #gosu wekan:wekan rm -rf meteor-accounts-oidc && \
+    sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js && \
+    cd /home/wekan/.meteor && \
+    gosu wekan:wekan /home/wekan/.meteor/meteor -- help; \
+    \
+    # extract the OpenAPI specification
+    npm install -g api2html@0.3.3 && \
+    mkdir -p /home/wekan/python && \
+    chown wekan:wekan --recursive /home/wekan/python && \
+    cd /home/wekan/python && \
+    gosu wekan:wekan git clone --depth 1 -b master https://github.com/Kronuz/esprima-python && \
+    cd /home/wekan/python/esprima-python && \
+    python3 setup.py install --record files.txt && \
+    cd /home/wekan/app &&\
+    gosu wekan:wekan mkdir -p ./public/api && \
+    gosu wekan:wekan python3 ./openapi/generate_openapi.py --release $(git describe --tags --abbrev=0) > ./public/api/wekan.yml && \
+    gosu wekan:wekan /opt/nodejs/bin/api2html -c ./public/logo-header.png -o ./public/api/wekan.html ./public/api/wekan.yml; \
+    # Build app
+    cd /home/wekan/app && \
+    gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js && \
+    gosu wekan:wekan /home/wekan/.meteor/meteor npm install && \
+    gosu wekan:wekan /home/wekan/.meteor/meteor build --directory /home/wekan/app_build && \
+    cp /home/wekan/app/fix-download-unicode/cfs_access-point.txt /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
+    rm /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs && \
+    chown wekan:wekan /home/wekan/app_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 /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/npm-bcrypt && \
+    #gosu wekan:wekan rm -rf node_modules/bcrypt && \
+    #gosu wekan:wekan npm install bcrypt && \
+    cd /home/wekan/app_build/bundle/programs/server/ && \
+    gosu wekan:wekan npm install && \
+    #gosu wekan:wekan npm install bcrypt && \
+    mv /home/wekan/app_build/bundle /build && \
+    \
+    # Put back the original tar
+    mv $(which tar)~ $(which tar) && \
+    \
+    # Cleanup
+    apt-get remove --purge -y ${BUILD_DEPS} && \
+    apt-get autoremove -y && \
+    npm uninstall -g api2html &&\
+    rm -R /var/lib/apt/lists/* && \
+    rm -R /home/wekan/.meteor && \
+    rm -R /home/wekan/app && \
+    rm -R /home/wekan/app_build && \
+    cat /home/wekan/python/esprima-python/files.txt | xargs rm -R && \
+    rm -R /home/wekan/python && \
+    rm /home/wekan/install_meteor.sh
 
-# OS Updates
-apt-get update --assume-yes
-apt-get upgrade --assume-yes
-apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}
-
-# Multi-arch mapping: Docker TARGETARCH -> Node.js arch name + WeKan bundle name
-# arm/v7 uses TARGETARCH=arm; armhf has no MongoDB Community -> uses FerretDB
-case "${TARGETARCH}" in
-    "amd64")   NODE_ARCH="x64"     WEKAN_ARCH="amd64"   ;;
-    "arm64")   NODE_ARCH="arm64"   WEKAN_ARCH="arm64"   ;;
-    "arm")     NODE_ARCH="armv7l"  WEKAN_ARCH="armhf"   ;;
-    "ppc64le") NODE_ARCH="ppc64le" WEKAN_ARCH="ppc64le" ;;
-    "s390x")   NODE_ARCH="s390x"   WEKAN_ARCH="s390x"   ;;
-    *) echo "Unsupported architecture: ${TARGETARCH}"; exit 1 ;;
-esac
-
-# Node.js Installation (official nodejs.org builds for Node 22)
-cd /tmp
-wget "https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz"
-wget "https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc"
-grep "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt.asc | shasum -a 256 -c -
-tar xzf "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" -C /usr/local --strip-components=1 --no-same-owner
-rm -f "node-${NODE_VERSION}-linux-${NODE_ARCH}.tar.gz" SHASUMS256.txt.asc
-ln -s "/usr/local/bin/node" "/usr/local/bin/nodejs"
-
-# NPM configuration
-npm install -g npm@${NPM_VERSION} --production
-chown --recursive wekan:wekan /home/wekan/
-
-# Temporary Tar swap for Meteor bundle
-cp $(which tar) $(which tar)~
-ln -sf $(which bsdtar) $(which tar)
-
-# WeKan Bundle Installation
-mkdir -p /home/wekan/app
-cd /home/wekan/app
-wget "https://github.com/wekan/wekan/releases/download/v${VERSION}/wekan-${VERSION}-${WEKAN_ARCH}.zip"
-unzip "wekan-${VERSION}-${WEKAN_ARCH}.zip"
-rm "wekan-${VERSION}-${WEKAN_ARCH}.zip"
-npm install --production --no-audit --prefix ./bundle/programs/server
-mv /home/wekan/app/bundle /build
-
-# Restore original tar
-mv $(which tar)~ $(which tar)
-
-# Cleanup
-apt-get remove --purge --assume-yes ${BUILD_DEPS}
-apt-get autoremove --assume-yes
-apt-get clean --assume-yes
-rm -Rf /tmp/*
-rm -Rf /var/lib/apt/lists/*
-rm -Rf /home/wekan/app
-
-mkdir -p /data
-chown wekan:wekan --recursive /data
-EOR
-
-USER wekan
 ENV PORT=8080
 EXPOSE $PORT
-STOPSIGNAL SIGKILL
-WORKDIR /build
+USER wekan
 
-CMD ["bash", "-c", "ulimit -s 65500; exec node main.js"]
+CMD ["node", "/build/main.js"]

FUTURE.md

@@ -1,40 +0,0 @@
-# Future
-
-## Moved Import/Export/Sync issues to Big Picture Roadmap wiki page
-
-This change is limited to only Import/Export/Sync issues, while those are In Progress of being fixed.
-
-2023-11-21 xet7 closed 261 issues that are linked at https://github.com/wekan/wekan/wiki/Sync ,
-that is Roadmap of Import/Export/Sync in WeKan. It means, that those issues progress will be
-updated at that wiki page, when xet7 and other WeKan contributors fix those.
-Many of those issues are In Progress of being fixed and added.
-
-## Platform Updates
-
-Issues related to platforms are being closed, because only list of working platforms is mentioned now
-at WeKan website https://wekan.github.io Install section and at [ChangeLog](https://github.com/wekan/wekan/blob/main/CHANGELOG.md)
-where is this new text:
-
-> Newest WeKan at amd64 platforms: Linux bundle, Snap Candidate, Docker, Kubernetes. Fixing other platforms In Progress. 
-
-Platform support changes often, because:
-
-- There are many dependencies, that update or break or change often
-- Node.js segfaults at some CPU/OS
-- Some platforms have build errors
-
-Roadmap is to update all existing platforms, and add more platforms.
-
-Upcoming platform upgrades:
-
-- Fix migrations, so that newest WeKan can be released to Snap Stable. (Currently newest is at Snap Candidate).
-
-## WeKan features
-
-Most Meteor WeKan features are listed here:
-
-https://github.com/wekan/wekan/wiki/Deep-Dive-Into-WeKan
-
-Remaining features and all changes are listed here:
-
-https://github.com/wekan/wekan/blob/main/CHANGELOG.md

GOVERNANCE.md

@@ -1,10 +0,0 @@
-# Governance
-
-Anyone can send pull request to https://github.com/wekan/wekan/wiki/pulls ,
-if there is permission to add code to WeKan with MIT license.
-
-As maintainer, xet7 checks all pull requests and merges them.
-
-Only xet7 has write access to repo https://github.com/wekan/wekan
-
-

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) Lauri Ojansivu
+Copyright (c) 2014-2019 The Wekan Team
 
 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,58 +1,42 @@
-# WeKan ® - Open Source kanban
+# Wekan - Open Source kanban
 
-## Downloads
+[![Contributors](https://img.shields.io/github/contributors/wekan/wekan.svg "Contributors")](https://github.com/wekan/wekan/graphs/contributors)
+[![Docker Repository on Quay](https://quay.io/repository/wekan/wekan/status "Docker Repository on Quay")](https://quay.io/repository/wekan/wekan)
+[![Docker Hub container status](https://img.shields.io/docker/build/wekanteam/wekan.svg "Docker Hub container status")](https://hub.docker.com/r/wekanteam/wekan)
+[![Docker Hub pulls](https://img.shields.io/docker/pulls/wekanteam/wekan.svg "Docker Hub Pulls")](https://hub.docker.com/r/wekanteam/wekan)
+[![Wekan Build Status][travis_badge]][travis_status]
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/02137ecec4e34c5aa303f57637196a93 "Codacy Badge")](https://www.codacy.com/app/xet7/wekan?utm_source=github.com&utm_medium=referral&utm_content=wekan/wekan&utm_campaign=Badge_Grade)
+[![Code Climate](https://codeclimate.com/github/wekan/wekan/badges/gpa.svg "Code Climate")](https://codeclimate.com/github/wekan/wekan)
+[![Project Dependencies](https://david-dm.org/wekan/wekan.svg "Project Dependencies")](https://david-dm.org/wekan/wekan)
+[![Code analysis at Open Hub](https://img.shields.io/badge/code%20analysis-at%20Open%20Hub-brightgreen.svg "Code analysis at Open Hub")](https://www.openhub.net/p/wekan)
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwekan%2Fwekan.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwekan%2Fwekan?ref=badge_shield)
 
-https://wekan.fi/install/
+## [Translate Wekan at Transifex](https://transifex.com/wekan/wekan)
 
-## Docker Containers
+Translations to non-English languages are accepted only at [Transifex](https://transifex.com/wekan/wekan) using webbrowser.
+New English strings of new features can be added as PRs to edge branch file wekan/i18n/en.i18n.json .
 
-- [GitHub](https://github.com/wekan/wekan/pkgs/container/wekan)
-- [Quay](https://quay.io/repository/wekan/wekan)
-- [Docker Hub](https://hub.docker.com/r/wekanteam/wekan)
+## [Wekan feature requests and bugs](https://github.com/wekan/wekan/issues)
 
-docker-compose.yml at https://github.com/wekan/wekan/blob/main/docker-compose.yml
-
-## Standards
-
-- [WeKan and Standard for Public Code](https://wekan.fi/standard-for-public-code/) assessment was made at 2023-11.
-  Currently Wekan meets 8 out of 16 criteria out of the box.
-  Some others could be met with small changes.
-
-## Code stats
-
-- [CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/4619)
-- [Code Climate](https://codeclimate.com/github/wekan/wekan)
-- [Open Hub](https://www.openhub.net/p/wekan)
-- [OSS Insight](https://ossinsight.io/analyze/wekan/wekan)
-
-## 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
-
-Please add most of your questions as GitHub issue: [WeKan ® Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
+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.
 
-## Discussions
+## Chat
 
-[IRC](https://github.com/wekan/wekan/blob/main/docs/FAQ/IRC-FAQ.md)
+[![Wekan Chat][vanila_badge]][wekan_chat] - Most Wekan community and developers are here. Works on webbrowser
+and PWA app that can be added as icon on Android and bookmark on iOS, used like native app.
 
-## Docker: Latest tag has newest release
-
-You can use latest tag to get newest release tag.
-See bottom of https://github.com/wekan/wekan/issues/3874
+[Wekan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)
 
 ## FAQ
 
-**NOTE**:
-- 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 :)
+**NOTE**: 
+- Please read the [FAQ](https://github.com/wekan/wekan/wiki/FAQ) first
+- Please don't feed the trolls and spammers that are mentioned in the FAQ :)
 
-## About WeKan ®
+## About Wekan
 
-WeKan ® is an completely [Open Source][open_source] and [Free software][free_software]
+Wekan is an completely [Open Source][open_source] and [Free software][free_software]
 collaborative kanban board application with MIT license.
 
 Whether you’re maintaining a personal todo list, planning your holidays with some friends,
@@ -60,71 +44,96 @@ or working in a team on your next revolutionary idea, Kanban boards are an unbea
 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.
 
-Since WeKan ® is a free software, you don’t have to trust us with your data and can
+Since Wekan is a free software, you don’t have to trust us with your data and can
 install Wekan on your own computer or server. In fact we encourage you to do
 that by providing one-click installation on various platforms.
 
-- WeKan ® is used in [most countries of the world](https://snapcraft.io/wekan).
-- WeKan ® largest user has 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](https://wekan.fi/install/): WeKan ® supports many platforms.
-  WeKan ® is critical part of new platforms Wekan is currently being integrated to.
+- Wekan is used in [most countries of the world](https://snapcraft.io/wekan).
+- Wekan largest user has 13k users using Wekan in their company.
+- Wekan has been [translated](https://transifex.com/wekan/wekan) to about 50 languages.
+- [Features][features]: Wekan has real-time user interface.
+- [Platforms][platforms]: Wekan supports many platforms.
+  Wekan is critical part of new platforms Wekan is currently being integrated to.
+- [Integrations][integrations]: Current possible integrations and future plans.
 
 ## Requirements
 
-- 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.
+- 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). [ARM progress](https://github.com/wekan/wekan/issues/1053#issuecomment-410919264).
+- 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/devel/docker-compose.yml): 3 frontend servers,
+  each having 2 CPU and 2 wekan-app containers. One backend wekan-db server with many CPUs.  
 - Enough disk space and alerts about low disk space. If you run out disk space, MongoDB database gets corrupted.
-- SECURITY: Updating to newest WeKan ® version very often. Please check you do not have automatic updates of Sandstorm or Snap turned off.
-  Old versions have security issues because of old versions Node.js etc. Only newest WeKan ® is supported.
-  WeKan ® on Sandstorm is not usually affected by any Standalone WeKan ® (Snap/Docker/Source) security issues.
+- SECURITY: Updating to newest Wekan version very often. Please check you do not have automatic updates of Sandstorm or Snap turned off.
+  Old versions have security issues because of old versions Node.js etc. Only newest Wekan is supported.
+  Wekan on Sandstorm is not usually affected by any Standalone Wekan (Snap/Docker/Source) security issues.
 - [Reporting all new bugs immediately](https://github.com/wekan/wekan/issues).
-  New features and fixes are added to WeKan ® [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
-- [Backups](https://github.com/wekan/wekan/blob/main/docs/Backup/Backup.md) of WeKan ® database once a day miminum.
+  New features and fixes are added to Wekan [many times a day](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md).
+- [Backups](https://github.com/wekan/wekan/wiki/Backup) 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.
+  Some bug can cause Wekan board to not load at all, requiring manual fixing of database content.
 
-## Roadmap and Demo
+## Roadmap
 
-[Roadmap][roadmap_wekan] - Public read-only board at WeKan ® demo.
+[Roadmap Milestones](https://github.com/wekan/wekan/milestones)
 
 [Developer Documentation][dev_docs]
 
-- There is many companies and individuals contributing code to WeKan ®, to add features and bugfixes
-  [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
+- 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/devel/CHANGELOG.md).
 - [Please add Add new Feature Requests and Bug Reports immediately](https://github.com/wekan/wekan/issues).
-- [Commercial Support](https://wekan.fi/commercial-support/).
+- [Commercial Support](https://wekan.team).
+- [Bounties](https://wekan.team/bounties/index.html).
 
 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.
+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
+## Demo
 
-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.
+[Wekan demo][roadmap_wefork]
 
 ## Screenshot
 
-[More screenshots at Features page](https://github.com/wekan/wekan/tree/main/docs/Features)
+[More screenshots at Features page](https://github.com/wekan/wekan/wiki/Features)
 
-[![Screenshot of WeKan ®][screenshot_wekan]][roadmap_wekan]
+[![Screenshot of Wekan][screenshot_wefork]][roadmap_wefork]
+
+## Stable
+
+- master+devel branch. At release, devel is merged to master.
+- Receives fixes and features that have been tested at edge that they work.
+- If you want automatic updates, [use Snap](https://github.com/wekan/wekan-snap/wiki/Install).
+- If you want to test before update, [use Docker quay.io release tags](https://github.com/wekan/wekan/wiki/Docker).
+
+## Edge
+
+- edge branch. All new fixes and features are added to here first. [Testing Edge](https://github.com/wekan/wekan-snap/wiki/Snap-Developer-Docs).
 
 ## License
 
-WeKan ® is released under the very permissive [MIT license](LICENSE), and made
+Wekan is released under the very permissive [MIT license](LICENSE), and made
 with [Meteor](https://www.meteor.com).
 
-[dev_docs]: https://github.com/wekan/wekan/blob/main/docs/DeveloperDocs/Developer-Documentation.md
-[screenshot_wekan]: https://wekan.fi/wekan-dark-mode.png
+[platforms]: https://github.com/wekan/wekan/wiki/Platforms
+[dev_docs]: https://github.com/wekan/wekan/wiki/Developer-Documentation
+[screenshot_wekan]: http://i.imgur.com/cI4jW2h.png
+[screenshot_wefork]: https://wekan.github.io/wekan-markdown.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
+[integrations]: https://github.com/wekan/wekan/wiki/Integrations
+[roadmap_wekan]: http://try.wekan.io/b/MeSsFJaSqeuo9M6bs/wekan-roadmap
+[roadmap_wefork]: https://wekan.indie.host/b/t2YaGmyXgNkppcFBq/wekan-fork-roadmap
 [wekan_issues]: https://github.com/wekan/wekan/issues
+[wefork_issues]: https://github.com/wefork/wekan/issues
 [docker_image]: https://hub.docker.com/r/wekanteam/wekan/
-[translate_wekan]: https://app.transifex.com/wekan/wekan/
+[travis_badge]: https://travis-ci.org/wekan/wekan.svg?branch=devel
+[travis_status]: https://travis-ci.org/wekan/wekan
+[wekan_wiki]: https://github.com/wekan/wekan/wiki
+[translate_wekan]: https://www.transifex.com/wekan/wekan/
 [open_source]: https://en.wikipedia.org/wiki/Open-source_software
 [free_software]: https://en.wikipedia.org/wiki/Free_software
+[vanila_badge]: https://vanila.io/img/join-chat-button2.png
+[wekan_chat]: https://community.vanila.io/wekan
+
+
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwekan%2Fwekan.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwekan%2Fwekan?ref=badge_large)

READMELoginSignUp.md

@@ -1,113 +0,0 @@
-# 🔐 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,36 +1,10 @@
-## About money
+Security is very important to us. If you discover any issue regarding security, please disclose
+the information responsibly by sending an email to security (at) wekan.team and not by
+creating a GitHub issue. We will respond swiftly to fix verifiable security issues.
 
-See [CONTRIBUTING](CONTRIBUTING.md)
-
-## Responsible Security Disclosure
-
-1. To send email, if possible, use PGP key [security-at-wekan.fi.asc](security-at-wekan.fi.asc)
-2. Send info about security issue ONLY to security@wekan.fi . NOT TO ANYWHERE ELSE. NO CC, NO BCC.
-3. Wait for new WeKan release that fixes security issue to appear to top of
-   https://github.com/wekan/wekan/blob/main/CHANGELOG.md
-4. We will thank you by adding you to Hall of Fame: https://wekan.fi/hall-of-fame/
-5. All vulnerability details will be private to security@wekan.fi ,
-   unless you help all WeKan platforms to have a way to upgrade, like sending
-   database migrations code to security@wekan.fi or PRs to https://github.com/wekan/wekan/pulls .
-   There is no benefit to Wordwide Security Community to have more details about vulnerabilities,
-   if Worldwide Security Community does not help to make upgrades possible.
-6. If there some day becomes available a way to upgrade all WeKan platforms,
-   this page will be updated to add permission for security researchers
-   to request new GHSA or CVE ID and publish your vulnerability details at your blog, talks, etc,
-   and send that info also to security@wekan.fi to be added to
-   Hall of Fame: https://wekan.fi/hall-of-fame/ to get Upgrade Bonus Point Stars.
-   In that case, it will become possible for security@wekan.fi to publish all
-   remaining private security details, and publicly thank Worldwide Security Community.
-
-## Bonus Points
-
-- If you include code for fixing security issue
-
-## Losing Points
-
-- If you ask about [bounty](CONTRIBUTING.md). There is no bounty. WeKan is NOT Big Tech. WeKan is FLOSS.
-- If you forget to include vulnerability details.
-- If you send info about security issue to somewhere else than security@wekan.fi
+We thank you with a place at our hall of fame page, that is
+at https://wekan.github.io/hall-of-fame . Others have just posted public GitHub issue,
+so they are not at that hall-of-fame page.
 
 ## How should reports be formatted?
 
@@ -50,12 +24,12 @@ 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 https://wekan.fi/hall-of-fame/
+added to the Wekan Hall of Fame.
 
 ## Which domains are in scope?
 
 No public domains, because all those are donated to Wekan Open Source project,
-and we don't have any permissions to do security scans on those donated servers.
+and we don't have any permissions to do security scans on those donated servers
 
 Please don't perform research that could impact other users. Secondly, please keep
 the reports short and succinct. If we fail to understand the logics of your bug, we will tell you.
@@ -74,178 +48,31 @@ like Snap and Docker have their own specific sandboxing etc features.
 
 Standalone Wekan by default does not load any files from Internet, like fonts, CSS, etc.
 This also means all Standalone Wekan functionality works in offline local networks.
-WeKan is used at most countries of the world https://snapcraft.io/wekan
-and by by companies that have 30k users.
+Wekan is used by companies that have [thousands of users](https://github.com/wekan/wekan/wiki/AWS) and at healthcare.
 
-- Wekan private board attachments are not accessible without logging in.
-- There is feature to set board public, so that board is visible without logging in in readonly mode, with realtime updates.
-- Admin Panel has feature to disable all public boards, so all boards are private.
+Wekan uses xss package for input fields like cards, as you can see from
+[package.json](https://github.com/wekan/wekan/blob/devel/package.json). Other used versions can be seen from
+[Meteor versions file](https://github.com/wekan/wekan/blob/devel/.meteor/versions).
+Forms can include markdown links, html, image tags etc like you see at https://wekan.github.io .
+It's possible to add attachments to cards, and markdown/html links to files.
 
-## SSL/TLS
+Wekan attachments are not accessible without logging in. Import from Trello works by copying
+Trello export JSON to Wekan Trello import page, and in Trello JSON file there is direct links to all publicly
+accessible Trello attachment files, that Standalone Wekan downloads directly to Wekan MongoDB database in
+[CollectionFS](https://github.com/wekan/wekan/pull/875) format. When Wekan board is exported in
+Wekan JSON format, all board attachments are included in Wekan JSON file as base64 encoded text.
+That Wekan JSON format file can be imported to Sandstorm Wekan with all the attachments, when we get
+latest Wekan version working on Sandstorm, only couple of bugs are left before that. In Sandstorm it's not
+possible yet to import from Trello with attachments, because Wekan does not implement Sandstorm-compatible
+access to outside of Wekan grain.
 
-- SSL/TLS encrypts traffic between webbrowser and webserver.
-- If you are thinking about TLS MITM, look at https://github.com/caddyserver/caddy/issues/2530
-- Let's Encrypt TLS requires publicly accessible webserver, that Let's Encrypt TLS validation servers check.
-- If firewall limits to only allowed IP addresses, you may need non-Let's Encrypt TLS cert.
+Standalone Wekan only has password auth currently, there is work in progress to add
+[oauth2](https://github.com/wekan/wekan/pull/1578), [Openid](https://github.com/wekan/wekan/issues/538),
+[LDAP](https://github.com/wekan/wekan/issues/119) etc. If you need more login security for Standalone Wekan now,
+it's possible add additional [Google Auth proxybouncer](https://github.com/wekan/wekan/wiki/Let's-Encrypt-and-Google-Auth) in front of password auth, and then use Google Authenticator for Google Auth. Standalone Wekan does have [brute force protection with eluck:accounts-lockout and browser-policy clickjacking protection](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md#v080-2018-04-04-wekan-release). You can also optionally use some [WAF](https://en.wikipedia.org/wiki/Web_application_firewall)
+like for example [AWS WAF](https://aws.amazon.com/waf/).
 
-## XSS
-
-- Dompurify https://www.npmjs.com/package/dompurify
-  - WeKan uses dompurify npm package to filter for XSS at fields like cards, as you can see from
-    [package.json](https://github.com/wekan/wekan/blob/main/package.json). Other used versions can be seen from
-    [Meteor versions file](https://github.com/wekan/wekan/blob/main/.meteor/versions).
-  - Forms can include markdown links, html, image tags etc like you see at https://wekan.github.io .
-  - It's possible to add attachments to cards, and markdown/html links to files.
-  - Dompurify cleans up viewed code, so Javascript in input fields does not execute
-    - https://wekan.github.io/hall-of-fame/fieldbleed/
-- Reaction in comment is now checked, that it does not have extra added code
-  - https://wekan.github.io/hall-of-fame/reactionbleed/
-- https://github.com/wekan/wekan/blob/main/packages/markdown/src/template-integration.js#L76
-
-## QA about PubSub
-
-Q:
-
-Hello,
-I have just seen the Meteor DevTools Evolved extension and was wondering if anyone had asked themselves the question of security.
-Insofar as all data is shown in the minimongo tab in plain text.
-How can data be hidden from this extension?
-
-A:
-
-## PubSub
-
-- It is not security issue to show some text or image, that user has permission to see. It is a security issue, if browserside is some text or image that user should not see.
-- Meteor has browserside minimongo database, made with Javascript, updated with Publish/Subscribe, PubSub.
-- Publish/Subscribe means, that realtime web framework reads database changes stream, and then immediately updates webpage,
-  like like dashboards, chat, kanban. That is the point in any realtime web framework in any programming language.
-- Yes, you should check with Meteor DevTools Evolved Chromium/Firefox extension that at minimongo is only text that user has permission to see.
-- Do checking as logged in user, and logged out user.
-- Check permissions and sanitize before allowing some change, because someone could modify content of input field,
-  PubSub/websocket data (for example with Burp Suite Community Edition), etc.
-- If you have REST API, also check that only those that have login token, and have permission, can view or edit text
-- You should not include any data user is not allowed to see. Not to webpage text, not to websockets/PubSub, etc.
-- Minimongo should not have password hashes PubSub https://wekan.github.io/hall-of-fame/userbleed/
-- PubSub uses Websockets, so you need those to be enabled at webserver like Caddy/Nginx/Apache etc, examples of settings
-  at right menu of https://github.com/wekan/wekan/wiki
-- Clientside https://github.com/wekan/wekan/tree/main/client/components subscribes to 
-  PubSub https://github.com/wekan/wekan/tree/main/server/publications or calls meteor methods at https://github.com/wekan/wekan/tree/main/models
-- For Admin:
-  - You can have input field for password https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
-  - You can save password to database https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
-  - Check that only current user or Admin can change password https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
-    - Note that currentUser uses code like Meteor.user() in .js file
-  - Do not have password hashes in PubSub https://github.com/wekan/wekan/blob/main/server/publications/users.js
-  - Only show Admin Panel to Admin https://github.com/wekan/wekan/blob/main/client/components/settings/settingBody.jade#L3
-- If there is a lot of data, use pagination https://github.com/wekan/wekan/blob/main/client/components/settings/peopleBody.js
-- Only have limited amount of data published in PubSub. Limit in MongoDB query in publications how much is published. Too much could make browser too slow.
-- Use Environment variables for any email etc passwords.
-- But what if you would like to remove minimongo? And only use Meteor methods for saving? In that case, you don't have realtime updates,
-  and you need to write much more code to load and save data yourself, handle any multi user data saving conflicts yourself,
-  and many Meteor Atmospherejs.com PubSub using packages would not work anymore https://github.com/wekan/we
-
-## PubSub: Fix that user can not change to Admin
-
-- With PubSub, there is checking, that someone modifying Websockets content, like permission isAdmin, can not change to Admin.
-- https://github.com/wekan/wekan/commit/cbad4cf5943d47b916f64b4582f8ca76a9dfd743
-- https://wekan.github.io/hall-of-fame/adminbleed/
-
-## Permissions and Roles
-
-- For any user permissions, it's best to use Meteor package package https://github.com/Meteor-Community-Packages/meteor-roles .
-- Currently WeKan has custom hardcoded permissions, WeKan does not yet use that meteor-roles package.
-  - Using permissions at WeKan sidebar https://github.com/wekan/wekan/blob/main/client/components/sidebar/sidebar.js#L1854-L1875
-  - List of roles https://github.com/wekan/wekan/wiki/REST-API-Role . Change at board or Admin Panel. Also Organizations/Teams.
-  - Worker role: https://github.com/wekan/wekan/issues/2788
-  - Not implemented yet: Granular Roles https://github.com/wekan/wekan/issues/3022
-- Check is user logged in, with `if (Meteor.user()) {`
-- Check is code running at server `if (Meteor.isServer()) {` or client `if Meteor.isClient()) {` .
-- Here is some authentication code https://github.com/wekan/wekan/blob/main/server/authentication.js
-
-## Environment variables
-
-- For any passwords, use environment variables, those are serverside
-- Do not copy environment variable to public variable that is visible browserside https://github.com/wekan/wekan/blob/main/server/max-size.js
-
-```
-Meteor.startup(() => {
-  if (process.env.HEADER_LOGIN_ID) {
-    Meteor.settings.public.attachmentsUploadMaxSize   = process.env.ATTACHMENTS_UPLOAD_MAX_SIZE;
-    Meteor.settings.public.attachmentsUploadMimeTypes = process.env.ATTACHMENTS_UPLOAD_MIME_TYPES;
-    Meteor.settings.public.avatarsUploadMaxSize       = process.env.AVATARS_UPLOAD_MAX_SIZE;
-```
-
-- For serverside, you can set Meteor.settings.variablename, without text public
-- For WeKan kanban, there is feature for setting board public, it can be viewed by anyone, there is realtime updates. But 
-- Some of those permissions are checked at users.js models at https://github.com/wekan/wekan/tree/main/models
-- Environment variables are used for email server passwords, etc, at all platforms https://github.com/wekan/wekan/commit/a781c0e7dcfdbe34c1483ee83cec12455b7026f7
-
-## Escape HTML comment tags so that HTML comments are visible
-
-- Someone reported, that it is problem that content of HTML comments in edit mode, are not visible at at view mode, so this makes HTML comments visible.
-- https://github.com/wekan/wekan/commit/167863d95711249e69bb3511175d73b34acbbdb3
-- https://wekan.github.io/hall-of-fame/invisiblebleed/
-
-## Attachments: XSS in filename is sanitized
-
-- https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
-- https://wekan.github.io/hall-of-fame/filebleed/
-
-### 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
-- https://github.com/wekan/wekan/tree/main/packages/wekan-accounts-lockout
+[All Wekan Platforms](https://github.com/wekan/wekan/wiki/Platforms)
 
 ### Sandstorm Wekan Security
 
@@ -278,6 +105,12 @@ a security issue, we'd like to know about it, and also how to fix it:
 
 Typical already known or "no impact" bugs such as:
 
+- Brute force password guessign. Currently there is
+  [brute force protection with eluck:accounts-lockout](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md#v080-2018-04-04-wekan-release).
+- Security issues related to that Wekan uses Meteor 1.6.0.1 related packages, and upgrading to newer
+  Meteor 1.6.1 is complicated process that requires lots of changes to many dependency packages.
+  Upgrading [has been tried many times, spending a lot of time](https://github.com/meteor/meteor/issues/9609)
+  but there still is issues. Helping with package upgrades is very welcome.
 - [Wekan API old tokens not replaced correctly](https://github.com/wekan/wekan/issues/1437)
 - Missing Cookie flags on non-session cookies or 3rd party cookies
 - Logout CSRF
@@ -288,4 +121,9 @@ 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.fi
+We welcome all fixes to improve security by email to security (at) 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).

Stackerfile.yml

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

client/00-startup.js

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

client/components/activities/activities.css

@@ -1,64 +0,0 @@
-.activity-title {
-  margin: 0 0.7vw 1vh;
-  display: flex;
-  justify-content: space-between;
-}
-.reactions-popup .add-comment-reaction {
-  display: inline-block;
-  cursor: pointer;
-  border-radius: 0.7vw;
-  font-size: clamp(18px, 4vw, 22px);
-  text-align: center;
-  line-height: 1.3;
-  width: 5vw;
-}
-.reactions-popup .add-comment-reaction:hover {
-  background-color: #b0c4de;
-}
-.activities {
-  clear: both;
-}
-.activities .activity {
-  margin: 0.1vh 0;
-  padding: 0.8vh 0;
-  display: flex;
-}
-.activities .activity .member {
-  width: 4vw;
-  height: 4vw;
-}
-.activities .activity .activity-member {
-  font-weight: 700;
-}
-.activities .activity .activity-desc {
-  word-wrap: break-word;
-  overflow: hidden;
-  flex: 1;
-  align-self: center;
-  margin: 0;
-  margin-left: 0.4vw;
-  overflow: hidden;
-  word-break: break-word;
-}
-.activities .activity .activity-desc .activity-comment {
-  display: block;
-  border-radius: 0.4vw;
-  background: #fff;
-  text-decoration: none;
-  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;
-  border-radius: 3px;
-  background: #fff;
-  text-decoration: none;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;
-}
-.activities .activity .activity-desc .activity-meta {
-  font-size: 0.8em;
-  color: #999;
-}

client/components/activities/activities.jade

@@ -1,203 +1,223 @@
 template(name="activities")
-  if showActivities
-    .activities.js-sidebar-activities
-      //- We should use Template.dynamic here but there is a bug with
-      //- blaze-components: https://github.com/peerlibrary/meteor-blaze-components/issues/30
-      if $eq mode "board"
-        +boardActivities
-      else
-        +cardActivities
+  .activities.js-sidebar-activities
+    //- We should use Template.dynamic here but there is a bug with
+    //- blaze-components: https://github.com/peerlibrary/meteor-blaze-components/issues/30
+    if $eq mode "board"
+      +boardActivities
+    else
+      +cardActivities
 
 template(name="boardActivities")
-  each activityData in currentBoard.activities
-    +activity(activity=activityData card=card mode=mode)
+  each currentBoard.activities
+    .activity
+      +userAvatar(userId=user._id)
+      p.activity-desc
+        +memberName(user=user)
+
+        if($eq activityType 'deleteAttachment')
+          | {{{_ 'activity-delete-attach' cardLink}}}.
+
+        if($eq activityType 'addAttachment')
+          | {{{_ 'activity-attached' attachmentLink cardLink}}}.
+
+        if($eq activityType 'addBoardMember')
+          | {{{_ 'activity-added' memberLink boardLabel}}}.
+
+        if($eq activityType 'addComment')
+          | {{{_ 'activity-on' cardLink}}}
+          a.activity-comment(href="{{ card.absoluteUrl }}")
+            +viewer
+              = comment.text
+
+        if($eq activityType 'addChecklist')
+          | {{{_ 'activity-checklist-added' cardLink}}}.
+          .activity-checklist(href="{{ card.absoluteUrl }}")
+            +viewer
+              = checklist.title
+        if($eq activityType 'removeChecklist')
+          | {{{_ 'activity-checklist-removed' cardLink}}}.
+
+        if($eq activityType 'checkedItem')
+          | {{{_ 'activity-checked-item' checkItem checklist.title cardLink}}}.
+
+        if($eq activityType 'uncheckedItem')
+          | {{{_ 'activity-unchecked-item' checkItem checklist.title cardLink}}}.
+
+        if($eq activityType 'checklistCompleted')
+          | {{{_ 'activity-checklist-completed' checklist.title cardLink}}}.
+
+        if($eq activityType 'checklistUncompleted')
+          | {{{_ 'activity-checklist-uncompleted' checklist.title cardLink}}}.
+
+        if($eq activityType 'addChecklistItem')
+          | {{{_ 'activity-checklist-item-added' checklist.title cardLink}}}.
+          .activity-checklist(href="{{ card.absoluteUrl }}")
+            +viewer
+              = checklistItem.title
+        if($eq activityType 'removedChecklistItem')
+          | {{{_ 'activity-checklist-item-removed' checklist.title cardLink}}}.
+
+        if($eq activityType 'archivedCard')
+          | {{{_ 'activity-archived' cardLink}}}.
+
+        if($eq activityType 'archivedList')
+          | {{_ 'activity-archived' list.title}}.
+
+        if($eq activityType 'archivedSwimlane')
+          | {{_ 'activity-archived' swimlane.title}}.
+
+        if($eq activityType 'createBoard')
+          | {{_ 'activity-created' boardLabel}}.
+
+        if($eq activityType 'createCard')
+          | {{{_ 'activity-added' cardLink boardLabel}}}.
+
+        if($eq activityType 'createCustomField')
+          | {{_ 'activity-customfield-created' customField}}.
+
+        if($eq activityType 'createList')
+          | {{_ 'activity-added' list.title boardLabel}}.
+
+        if($eq activityType 'createSwimlane')
+          | {{_ 'activity-added' swimlane.title boardLabel}}.
+
+        if($eq activityType 'removeList')
+          | {{_ 'activity-removed' title boardLabel}}.
+
+        if($eq activityType 'importBoard')
+          | {{{_ 'activity-imported-board' boardLabel sourceLink}}}.
+
+        if($eq activityType 'importCard')
+          | {{{_ 'activity-imported' cardLink boardLabel sourceLink}}}.
+
+        if($eq activityType 'importList')
+          | {{{_ 'activity-imported' listLabel boardLabel sourceLink}}}.
+
+        if($eq activityType 'joinMember')
+          if($eq user._id member._id)
+            | {{{_ 'activity-joined' cardLink}}}.
+          else
+            | {{{_ 'activity-added' memberLink cardLink}}}.
+
+        if($eq activityType 'moveCardBoard')
+          | {{{_ 'activity-moved' cardLink oldBoardName boardName}}}.
+
+        if($eq activityType 'moveCard')
+          | {{{_ 'activity-moved' cardLink oldList.title list.title}}}.
+
+        if($eq activityType 'removeBoardMember')
+          | {{{_ 'activity-excluded' memberLink boardLabel}}}.
+
+        if($eq activityType 'restoredCard')
+          | {{{_ 'activity-sent' cardLink boardLabel}}}.
+
+        if($eq activityType 'addedLabel')
+          | {{{_ 'activity-added-label' lastLabel cardLink}}}.
+
+        if($eq activityType 'removedLabel')
+          | {{{_ 'activity-removed-label' lastLabel cardLink}}}.
+
+        if($eq activityType 'setCustomField')
+          | {{{_ 'activity-set-customfield' lastCustomField lastCustomFieldValue cardLink}}}.
+
+        if($eq activityType 'unsetCustomField')
+          | {{{_ 'activity-unset-customfield' lastCustomField cardLink}}}.
+
+        if($eq activityType 'unjoinMember')
+          if($eq user._id member._id)
+            | {{{_ 'activity-unjoined' cardLink}}}.
+          else
+            | {{{_ 'activity-removed' memberLink cardLink}}}.
+
+        span(title=createdAt).activity-meta {{ moment createdAt }}
 
 template(name="cardActivities")
-  each activityData in activities
-    +activity(activity=activityData card=card mode=mode)
+  each currentCard.activities
+    .activity
+      +userAvatar(userId=user._id)
+      p.activity-desc
+        +memberName(user=user)
+        if($eq activityType 'createCard')
+          | {{_ 'activity-added' cardLabel listName}}.
+        if($eq activityType 'importCard')
+          | {{{_ 'activity-imported' cardLabel list.title sourceLink}}}.
+        if($eq activityType 'joinMember')
+          if($eq user._id member._id)
+            | {{_ 'activity-joined' cardLabel}}.
+          else
+            | {{{_ 'activity-added' memberLink cardLabel}}}.
+        if($eq activityType 'unjoinMember')
+          if($eq user._id member._id)
+            | {{_ 'activity-unjoined' cardLabel}}.
+          else
+            | {{{_ 'activity-removed' cardLabel memberLink}}}.
+        if($eq activityType 'archivedCard')
+          | {{_ 'activity-archived' cardLabel}}.
 
-template(name="activity")
-  .activity(data-id=activity._id)
-    +userAvatar(userId=activity.user._id)
-    p.activity-desc
-      span.activity-member
-        +memberName(user=activity.user)
+        if($eq activityType 'addedLabel')
+          | {{{_ 'activity-added-label-card' lastLabel }}}.
 
-      //- attachment activity -------------------------------------------------
-      if($eq activity.activityType 'deleteAttachment')
-        | {{{_ 'activity-delete-attach' cardLink}}}.
+        if($eq activityType 'removedLabel')
+          | {{{_ 'activity-removed-label-card' lastLabel }}}.
 
-      if($eq activity.activityType 'addAttachment')
-        | {{{_ 'activity-attached' attachmentLink cardLink}}}.
-        if($neq mode 'board')
-          if activity.attachment.isImage
-            img.attachment-image-preview(src=activity.attachment.url)
+        if($eq activityType 'removeChecklist')
+          | {{{_ 'activity-checklist-removed' cardLabel}}}.
 
-      //- board activity ------------------------------------------------------
-      if($eq activity.activityType 'createBoard')
-        | {{{_ 'activity-created' boardLabelLink}}}.
+        if($eq activityType 'checkedItem')
+          | {{{_ 'activity-checked-item-card' checkItem checklist.title }}}.
 
-      if($eq activity.activityType 'importBoard')
-        | {{{_ 'activity-imported-board' boardLabelLink sourceLink}}}.
+        if($eq activityType 'uncheckedItem')
+          | {{{_ 'activity-unchecked-item-card' checkItem checklist.title }}}.
 
-      if($eq activity.activityType 'addBoardMember')
-        | {{{_ 'activity-added' memberLink boardLabelLink}}}.
+        if($eq activityType 'checklistCompleted')
+          | {{{_ 'activity-checklist-completed-card' checklist.title }}}.
 
-      if($eq activity.activityType 'removeBoardMember')
-        | {{{_ 'activity-excluded' memberLink boardLabelLink}}}.
+        if($eq activityType 'checklistUncompleted')
+          | {{{_ 'activity-checklist-uncompleted-card' checklist.title }}}.
 
-      //- card activity -------------------------------------------------------
-      if($eq activity.activityType 'createCard')
-        if($eq mode 'card')
-          | {{{_ 'activity-added' cardLabelLink (sanitize activity.listName)}}}.
-        else
-          | {{{_ 'activity-added' cardLabelLink boardLabelLink}}}.
+        if($eq activityType 'restoredCard')
+          | {{_ 'activity-sent' cardLabel boardLabel}}.
+        if($eq activityType 'moveCard')
+          | {{_ 'activity-moved' cardLabel oldList.title list.title}}.
 
-      if($eq activity.activityType 'importCard')
-        | {{{_ 'activity-imported' cardLink boardLabelLink sourceLink}}}.
+        if($eq activityType 'moveCardBoard')
+          | {{{_ 'activity-moved' cardLink oldBoardName boardName}}}.
 
-      if($eq activity.activityType 'moveCard')
-        | {{{_ 'activity-moved' cardLabelLink (sanitize activity.oldList.title) (sanitize activity.list.title)}}}.
-
-      if($eq activity.activityType 'moveCardBoard')
-        | {{{_ 'activity-moved' cardLink (sanitize activity.oldBoardName) (sanitize activity.boardName)}}}.
-
-      if($eq activity.activityType 'archivedCard')
-        | {{{_ 'activity-archived' cardLink}}}.
-
-      if($eq activity.activityType 'restoredCard')
-        | {{{_ 'activity-sent' cardLink boardLabelLink}}}.
-
-      //- checklist activity --------------------------------------------------
-      if($eq activity.activityType 'addChecklist')
-        | {{{_ 'activity-checklist-added' cardLink}}}.
-        if($eq mode 'card')
+        if($eq activityType 'addAttachment')
+          | {{{_ 'activity-attached' attachmentLink cardLabel}}}.
+          if attachment.isImage
+            img.attachment-image-preview(src=attachment.url)
+        if($eq activityType 'deleteAttachment')
+          | {{{_ 'activity-delete-attach'  cardLabel}}}.
+        if($eq activityType 'removedChecklist')
+          | {{{_ 'activity-checklist-removed' cardLabel}}}.
+        if($eq activityType 'addChecklist')
+          | {{{_ 'activity-checklist-added' cardLabel}}}.
           .activity-checklist
             +viewer
-              = activity.checklist.title
-        else
-          a.activity-checklist(href="{{ activity.card.originRelativeUrl }}")
+              = checklist.title
+        if($eq activityType 'addChecklistItem')
+          | {{{_ 'activity-checklist-item-added' checklist.title cardLink}}}.
+          .activity-checklist(href="{{ card.absoluteUrl }}")
             +viewer
-              = activity.checklist.title
+              = checklistItem.title
 
-      if($eq activity.activityType 'removedChecklist')
-        | {{{_ 'activity-checklist-removed' cardLink}}}.
+        if($eq activityType 'addComment')
+          +inlinedForm(classNames='js-edit-comment')
+            +editor(autofocus=true)
+              = comment.text
+            .edit-controls
+              button.primary(type="submit") {{_ 'edit'}}
+          else
+            .activity-comment
+              +viewer
+                = comment.text
+            span(title=createdAt).activity-meta {{ moment createdAt }}
+              if ($eq currentUser._id comment.userId)
+                = ' - '
+                a.js-open-inlined-form {{_ "edit"}}
+                = ' - '
+                a.js-delete-comment {{_ "delete"}}
 
-      if($eq activity.activityType 'completeChecklist')
-        | {{{_ 'activity-checklist-completed' (sanitize activity.checklist.title) cardLink}}}.
-
-      if($eq activity.activityType 'uncompleteChecklist')
-        | {{{_ 'activity-checklist-uncompleted' (sanitize activity.checklist.title) cardLink}}}.
-
-      if($eq activity.activityType 'checkedItem')
-        | {{{_ 'activity-checked-item' (sanitize checkItem) (sanitize activity.checklist.title) cardLink}}}.
-
-      if($eq activity.activityType 'uncheckedItem')
-        | {{{_ 'activity-unchecked-item' (sanitize checkItem) (sanitize activity.checklist.title) cardLink}}}.
-
-      if($eq activity.activityType 'addChecklistItem')
-        | {{{_ 'activity-checklist-item-added' (sanitize activity.checklist.title) cardLink}}}.
-        .activity-checklist(href="{{ activity.card.originRelativeUrl }}")
-          +viewer
-            = activity.checklistItem.title
-
-      if($eq activity.activityType 'removedChecklistItem')
-        | {{{_ 'activity-checklist-item-removed' (sanitize activity.checklist.title) cardLink}}}.
-
-      //- comment activity ----------------------------------------------------
-      if($eq activity.activityType 'deleteComment')
-        | {{{_ 'activity-deleteComment' activity.commentId}}}.
-
-      if($eq activity.activityType 'editComment')
-        | {{{_ 'activity-editComment' activity.commentId}}}.
-
-      if($eq activity.activityType 'addComment')
-        | {{{_ 'activity-on' cardLink}}}
-        a.activity-comment(href="{{ activity.card.originRelativeUrl }}")
-          +viewer
-            = activity.comment.text
-
-      //- date activity ------------------------------------------------
-      if($eq activity.activityType 'a-receivedAt')
-        | {{{_ 'activity-receivedDate' (sanitize receivedDate) cardLink}}}.
-
-      if($eq activity.activityType 'a-startAt')
-        | {{{_ 'activity-startDate' (sanitize startDate) cardLink}}}.
-
-      if($eq activity.activityType 'a-dueAt')
-        | {{{_ 'activity-dueDate' (sanitize dueDate) cardLink}}}.
-
-      if($eq activity.activityType 'a-endAt')
-        | {{{_ 'activity-endDate' (sanitize endDate) cardLink}}}.
-
-      //- customField activity ------------------------------------------------
-      if($eq activity.activityType 'createCustomField')
-        | {{_ 'activity-customfield-created' customField}}.
-
-      if($eq activity.activityType 'setCustomField')
-        | {{{_ 'activity-set-customfield' (sanitize lastCustomField) (sanitize lastCustomFieldValue) cardLink}}}.
-
-      if($eq activity.activityType 'unsetCustomField')
-        | {{{_ 'activity-unset-customfield' (sanitize lastCustomField) cardLink}}}.
-
-      //- label activity ------------------------------------------------------
-      if($eq activity.activityType 'addedLabel')
-        | {{{_ 'activity-added-label' (sanitize lastLabel) cardLink}}}.
-
-      if($eq activity.activityType 'removedLabel')
-        | {{{_ 'activity-removed-label' (sanitize lastLabel) cardLink}}}.
-
-      //- list activity -------------------------------------------------------
-      if($neq mode 'card')
-        if($eq activity.activityType 'createList')
-          | {{{_ 'activity-added' (sanitize listLabel) boardLabelLink}}}.
-
-        if($eq activity.activityType 'importList')
-          | {{{_ 'activity-imported' (sanitize listLabel) boardLabelLink sourceLink}}}.
-
-        if($eq activity.activityType 'removeList')
-          | {{{_ 'activity-removed' (sanitize activity.title) boardLabelLink}}}.
-
-        if($eq activity.activityType 'archivedList')
-          | {{_ 'activity-archived' (sanitize listLabel)}}.
-
-        if($eq activity.activityType 'changedListTitle')
-          | {{_ 'activity-changedListTitle' (sanitize listLabel) boardLabelLink}}
-
-      //- member activity ----------------------------------------------------
-      if($eq activity.activityType 'joinMember')
-        if($eq user._id activity.member._id)
-          | {{{_ 'activity-joined' cardLink}}}.
         else
-          | {{{_ 'activity-added' memberLink cardLink}}}.
-
-      if($eq activity.activityType 'unjoinMember')
-        if($eq user._id activity.member._id)
-          | {{{_ 'activity-unjoined' cardLink}}}.
-        else
-          | {{{_ 'activity-removed' memberLink cardLink}}}.
-
-      //- swimlane activity --------------------------------------------------
-      if($eq activity.activityType 'createSwimlane')
-        | {{{_ 'activity-added' (sanitize activity.swimlane.title) boardLabelLink}}}.
-
-      if($eq activity.activityType 'archivedSwimlane')
-        | {{{_ 'activity-archived' (sanitize activity.swimlane.title)}}}.
-
-
-      //- I don't understand this part ----------------------------------------
-      if(currentData.timeKey)
-        | {{_ activity.activityType }}
-        = ' '
-        i(title=currentData.timeValue).activity-meta {{ displayDate currentData.timeValue 'LLL' }}
-        if (currentData.timeOldValue)
-          = ' '
-            | {{{_ "previous_as" }}}
-            = ' '
-            i(title=currentData.timeOldValue).activity-meta {{ displayDate currentData.timeOldValue 'LLL' }}
-        = ' @'
-      else if(currentData.timeValue)
-        | {{_ activity.activityType currentData.timeValue}}
-
-      if($neq mode 'none')
-        div(title=activity.createdAt).activity-meta {{ displayDate activity.createdAt }}
+          span(title=createdAt).activity-meta {{ moment createdAt }}

client/components/activities/activities.js

@@ -1,225 +1,124 @@
-import { ReactiveCache } from '/imports/reactiveCache';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { Template } from 'meteor/templating';
-import DOMPurify from 'dompurify';
-import { sanitizeHTML, sanitizeText } from '/imports/lib/secureDOMPurify';
-import { TAPi18n } from '/imports/i18n';
-import { Utils } from '/client/lib/utils';
-import { getSidebarInstance } from '/client/features/sidebar/service';
+const activitiesPerPage = 20;
 
-const activitiesPerPage = 500;
+BlazeComponent.extendComponent({
+  onCreated() {
+    // XXX Should we use ReactiveNumber?
+    this.page = new ReactiveVar(1);
+    this.loadNextPageLocked = false;
+    const sidebar = this.parentComponent(); // XXX for some reason not working
+    sidebar.callFirstWith(null, 'resetNextPeak');
+    this.autorun(() => {
+      let mode = this.data().mode;
+      const capitalizedMode = Utils.capitalize(mode);
+      let thisId, searchId;
+      if (mode === 'linkedcard' || mode === 'linkedboard') {
+        thisId = Session.get('currentCard');
+        searchId = Cards.findOne({_id: thisId}).linkedId;
+        mode = mode.replace('linked', '');
+      } else {
+        thisId = Session.get(`current${capitalizedMode}`);
+        searchId = thisId;
+      }
+      const limit = this.page.get() * activitiesPerPage;
+      const user = Meteor.user();
+      const hideSystem = user ? user.hasHiddenSystemMessages() : false;
+      if (searchId === null)
+        return;
 
-Template.activities.onCreated(function () {
-  // Register with sidebar so it can call loadNextPage on us
-  const Sidebar = getSidebarInstance();
-  if (Sidebar) {
-    Sidebar.activitiesInstance = this;
-  }
+      this.subscribe('activities', mode, searchId, limit, hideSystem, () => {
+        this.loadNextPageLocked = false;
 
-  // XXX Should we use ReactiveNumber?
-  this.page = new ReactiveVar(1);
-  this.loadNextPageLocked = false;
-  this.loadNextPage = () => {
+        // If the sibear peak hasn't increased, that mean that there are no more
+        // activities, and we can stop calling new subscriptions.
+        // XXX This is hacky! We need to know excatly and reactively how many
+        // activities there are, we probably want to denormalize this number
+        // dirrectly into card and board documents.
+        const nextPeakBefore = sidebar.callFirstWith(null, 'getNextPeak');
+        sidebar.calculateNextPeak();
+        const nextPeakAfter = sidebar.callFirstWith(null, 'getNextPeak');
+        if (nextPeakBefore === nextPeakAfter) {
+          sidebar.callFirstWith(null, 'resetNextPeak');
+        }
+      });
+    });
+  },
+
+  loadNextPage() {
     if (this.loadNextPageLocked === false) {
       this.page.set(this.page.get() + 1);
       this.loadNextPageLocked = true;
     }
-  };
-
-  // TODO is sidebar always available? E.g. on small screens/mobile devices
-  const sidebar = getSidebarInstance();
-  if (sidebar && sidebar.infiniteScrolling) {
-    sidebar.infiniteScrolling.resetNextPeak();
-  }
-  this.autorun(() => {
-    const data = Template.currentData();
-    let mode = data?.mode;
-    if (mode) {
-      const capitalizedMode = Utils.capitalize(mode);
-      let searchId;
-      const showActivities = _showActivities(data);
-      if (mode === 'linkedcard' || mode === 'linkedboard') {
-        const currentCard = Utils.getCurrentCard();
-        searchId = currentCard.linkedId;
-        mode = mode.replace('linked', '');
-      } else if (mode === 'card') {
-        searchId = Utils.getCurrentCardId();
-      } else {
-        searchId = Session.get(`current${capitalizedMode}`);
-      }
-      const limit = this.page.get() * activitiesPerPage;
-      if (searchId === null) return;
-
-      this.subscribe('activities', mode, searchId, limit, showActivities, () => {
-        this.loadNextPageLocked = false;
-
-        // TODO the guard can be removed as soon as the TODO above is resolved
-        if (!sidebar || !sidebar.infiniteScrolling) return;
-        // If the sidebar peak hasn't increased, that means that there are no more
-        // activities, and we can stop calling new subscriptions.
-        const nextPeakBefore = sidebar.infiniteScrolling.getNextPeak();
-        sidebar.calculateNextPeak();
-        const nextPeakAfter = sidebar.infiniteScrolling.getNextPeak();
-        if (nextPeakBefore === nextPeakAfter) {
-          sidebar.infiniteScrolling.resetNextPeak();
-        }
-      });
-    }
-  });
-});
-
-function _showActivities(data) {
-  let ret = false;
-  let mode = data?.mode;
-  if (mode) {
-    if (mode === 'linkedcard' || mode === 'linkedboard') {
-      const currentCard = Utils.getCurrentCard();
-      ret = currentCard.showActivities ?? false;
-    } else if (mode === 'card') {
-      ret = data?.card?.showActivities ?? false;
-    } else {
-      ret = Utils.getCurrentBoard().showActivities ?? false;
-    }
-  }
-  return ret;
-}
-
-Template.activities.helpers({
-  activities() {
-    return this.card.activities();
-  },
-});
-
-Template.activity.helpers({
-  checkItem() {
-    const checkItemId = this.activity.checklistItemId;
-    const checkItem = ReactiveCache.getChecklistItem(checkItemId);
-    return checkItem && checkItem.title;
   },
 
-  boardLabelLink() {
-    const currentBoardId = Session.get('currentBoard');
-    if (this.mode !== 'board') {
-      return createBoardLink(this.activity.board(), this.activity.listName ? this.activity.listName : null);
-    }
-    else if (currentBoardId != this.activity.boardId) {
-      return createBoardLink(this.activity.board(), this.activity.listName ? this.activity.listName : null);
-    }
+  checkItem(){
+    const checkItemId = this.currentData().checklistItemId;
+    const checkItem = ChecklistItems.findOne({_id:checkItemId});
+    return checkItem.title;
+  },
+
+  boardLabel() {
     return TAPi18n.__('this-board');
   },
 
-  cardLabelLink() {
-    const currentBoardId = Session.get('currentBoard');
-    if (this.mode == 'card') {
-      return TAPi18n.__('this-card');
-    }
-    else if (this.mode !== 'board') {
-      return createCardLink(this.activity.card(), null);
-    }
-    else if (currentBoardId != this.activity.boardId) {
-      return createCardLink(this.activity.card(), this.activity.board().title);
-    }
-    return createCardLink(this.activity.card(), null);
+  cardLabel() {
+    return TAPi18n.__('this-card');
   },
 
   cardLink() {
-    const currentBoardId = Session.get('currentBoard');
-    if (this.mode !== 'board') {
-      return createCardLink(this.activity.card(), null);
-    }
-    else if (currentBoardId != this.activity.boardId) {
-      return createCardLink(this.activity.card(), this.activity.board().title);
-    }
-    return createCardLink(this.activity.card(), null);
+    const card = this.currentData().card();
+    return card && Blaze.toHTML(HTML.A({
+      href: card.absoluteUrl(),
+      'class': 'action-card',
+    }, card.title));
   },
 
-  receivedDate() {
-    const card = this.activity.card();
-    if (!card) return null;
-    return card.receivedAt;
-  },
-
-  startDate() {
-    const card = this.activity.card();
-    if (!card) return null;
-    return card.startAt;
-  },
-
-  dueDate() {
-    const card = this.activity.card();
-    if (!card) return null;
-    return card.dueAt;
-  },
-
-  endDate() {
-    const card = this.activity.card();
-    if (!card) return null;
-    return card.endAt;
-  },
-
-  lastLabel() {
-    const lastLabelId = this.activity.labelId;
-    if (!lastLabelId) return null;
-    const lastLabel = ReactiveCache.getBoard(
-      this.activity.boardId,
-    ).getLabelById(lastLabelId);
-    if (lastLabel && (lastLabel.name === undefined || lastLabel.name === '')) {
-      return lastLabel.color;
-    } else if (lastLabel.name !== undefined && lastLabel.name !== '') {
-      return lastLabel.name;
-    } else {
+  lastLabel(){
+    const lastLabelId = this.currentData().labelId;
+    if (!lastLabelId)
       return null;
+    const lastLabel = Boards.findOne(Session.get('currentBoard')).getLabelById(lastLabelId);
+    if(lastLabel.name === undefined || lastLabel.name === ''){
+      return lastLabel.color;
+    }else{
+      return lastLabel.name;
     }
   },
 
-  lastCustomField() {
-    const lastCustomField = ReactiveCache.getCustomField(
-      this.activity.customFieldId,
-    );
-    if (!lastCustomField) return null;
+  lastCustomField(){
+    const lastCustomField = CustomFields.findOne(this.currentData().customFieldId);
+    if (!lastCustomField)
+      return null;
     return lastCustomField.name;
   },
 
-  lastCustomFieldValue() {
-    const lastCustomField = ReactiveCache.getCustomField(
-      this.activity.customFieldId,
-    );
-    if (!lastCustomField) return null;
-    const value = this.activity.value;
-    if (
-      lastCustomField.settings.dropdownItems &&
-      lastCustomField.settings.dropdownItems.length > 0
-    ) {
-      const dropDownValue = lastCustomField.settings.dropdownItems.find(
-        item => {
-          return item._id === value;
-        },
-      );
-      if (dropDownValue) return dropDownValue.name;
+  lastCustomFieldValue(){
+    const lastCustomField = CustomFields.findOne(this.currentData().customFieldId);
+    if (!lastCustomField)
+      return null;
+    const value = this.currentData().value;
+    if (lastCustomField.settings.dropdownItems && lastCustomField.settings.dropdownItems.length > 0) {
+      const dropDownValue = _.find(lastCustomField.settings.dropdownItems, (item) => {
+        return item._id === value;
+      });
+      if (dropDownValue)
+        return dropDownValue.name;
     }
     return value;
   },
 
   listLabel() {
-    const activity = this.activity;
-    const list = activity.list();
-    return (list && list.title) || activity.title;
+    return this.currentData().list().title;
   },
 
   sourceLink() {
-    const source = this.activity.source;
-    if (source) {
-      if (source.url) {
-        return Blaze.toHTML(
-          HTML.A(
-            {
-              href: source.url,
-            },
-            sanitizeHTML(source.system),
-          ),
-        );
+    const source = this.currentData().source;
+    if(source) {
+      if(source.url) {
+        return Blaze.toHTML(HTML.A({
+          href: source.url,
+        }, source.system));
       } else {
-        return sanitizeHTML(source.system);
+        return source.system;
       }
     }
     return null;
@@ -227,128 +126,45 @@ Template.activity.helpers({
 
   memberLink() {
     return Blaze.toHTMLWithData(Template.memberName, {
-      user: this.activity.member(),
+      user: this.currentData().member(),
     });
   },
 
   attachmentLink() {
-    const attachment = this.activity.attachment();
+    const attachment = this.currentData().attachment();
     // trying to display url before file is stored generates js errors
-    return (
-      (attachment &&
-        attachment.path &&
-        Blaze.toHTML(
-          HTML.A(
-            {
-              href: `${attachment.link()}?download=true`,
-              target: '_blank',
-            },
-            sanitizeText(attachment.name),
-          ),
-        )) ||
-      sanitizeText(this.activity.attachmentName)
-    );
+    return attachment && attachment.url({ download: true }) && Blaze.toHTML(HTML.A({
+      href: attachment.url({ download: true }),
+      target: '_blank',
+    }, attachment.name()));
   },
 
   customField() {
-    const customField = this.activity.customField();
-    if (!customField) return null;
+    const customField = this.currentData().customField();
+    if (!customField)
+      return null;
     return customField.name;
   },
-});
 
-Template.activity.helpers({
-  sanitize(value) {
-    return sanitizeHTML(value);
+  events() {
+    return [{
+      // XXX We should use Popup.afterConfirmation here
+      'click .js-delete-comment'() {
+        const commentId = this.currentData().commentId;
+        CardComments.remove(commentId);
+      },
+      'submit .js-edit-comment'(evt) {
+        evt.preventDefault();
+        const commentText = this.currentComponent().getValue().trim();
+        const commentId = Template.parentData().commentId;
+        if (commentText) {
+          CardComments.update(commentId, {
+            $set: {
+              text: commentText,
+            },
+          });
+        }
+      },
+    }];
   },
-});
-
-Template.commentReactions.events({
-  'click .reaction'(event) {
-    if (ReactiveCache.getCurrentUser().isBoardMember()) {
-      const codepoint = event.currentTarget.dataset['codepoint'];
-      const commentId = Template.instance().data.commentId;
-      const cardComment = ReactiveCache.getCardComment(commentId);
-      cardComment.toggleReaction(codepoint);
-    }
-  },
-  'click .open-comment-reaction-popup': Popup.open('addReaction'),
-})
-
-Template.addReactionPopup.events({
-  'click .add-comment-reaction'(event) {
-    if (ReactiveCache.getCurrentUser().isBoardMember()) {
-      const codepoint = event.currentTarget.dataset['codepoint'];
-      const commentId = Template.instance().data.commentId;
-      const cardComment = ReactiveCache.getCardComment(commentId);
-      cardComment.toggleReaction(codepoint);
-    }
-    Popup.back();
-  },
-})
-
-Template.addReactionPopup.helpers({
-  codepoints() {
-    // Starting set of unicode codepoints as comment reactions
-    return [
-      '👍',
-      '👎',
-      '👀',
-      '✅',
-      '❌',
-      '🙏',
-      '👏',
-      '🎉',
-      '🚀',
-      '😊',
-      '🤔',
-      '😔'];
-  }
-})
-
-Template.commentReactions.helpers({
-  isSelected(userIds) {
-    return Meteor.userId() && userIds.includes(Meteor.userId());
-  },
-  userNames(userIds) {
-    const ret = ReactiveCache.getUsers({_id: {$in: userIds}})
-      .map(user => user.profile.fullname)
-      .join(', ');
-    return ret;
-  }
-})
-
-function createCardLink(card, board) {
-  if (!card) return '';
-  let text = card.title;
-  if (board) text = `${board} > ` + text;
-  return (
-    card &&
-    Blaze.toHTML(
-      HTML.A(
-        {
-          href: card.originRelativeUrl(),
-          class: 'action-card',
-        },
-        sanitizeHTML(text),
-      ),
-    )
-  );
-}
-
-function createBoardLink(board, list) {
-  let text = board.title;
-  if (list) text += `: ${list}`;
-  return (
-    board &&
-    Blaze.toHTML(
-      HTML.A(
-        {
-          href: board.originRelativeUrl(),
-          class: 'action-board',
-        },
-        sanitizeHTML(text),
-      ),
-    )
-  );
-}
+}).register('activities');

client/components/activities/activities.styl

@@ -0,0 +1,48 @@
+@import 'nib'
+
+.activity-title
+  margin: 0 0.5em 0.8em
+  display: flex
+  justify-content:space-between
+
+.activities
+  clear: both
+
+  .activity
+    margin: 10px 0
+    display: flex
+
+    .member
+      width: 24px
+      height: @width
+
+    .activity-desc
+      word-wrap: break-word
+      overflow: hidden
+      flex: 1
+      align-self: center
+      margin: 0
+      margin-left: 3px
+      overflow: hidden;
+      word-break: break-word;
+
+      .activity-comment
+        display: block
+        border-radius: 3px
+        background: white
+        text-decoration: none
+        box-shadow: 0 1px 2px rgba(0,0,0,.2)
+        margin-top: 5px
+        padding: 5px
+
+      .activity-checklist
+        display: block
+        border-radius: 3px
+        background: white
+        text-decoration: none
+        box-shadow: 0 1px 2px rgba(0,0,0,.2)
+        margin-top: 5px
+        padding: 5px
+      .activity-meta
+        font-size: 0.8em
+        color: darken(white, 40%)

client/components/activities/comments.css

@@ -1,137 +0,0 @@
-.new-comment {
-  position: relative;
-  margin: 0 0 20px 38px;
-}
-.new-comment .member {
-  opacity: 0.7;
-  position: absolute;
-  top: 1px;
-  left: -38px;
-}
-.new-comment.is-open .member {
-  opacity: 1;
-}
-.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 .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;
-}
-.comment-item {
-  background-color: #fff;
-  border: 0;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
-  color: #8c8c8c;
-  height: 36px;
-  margin: 4px 4px 6px 0;
-  width: 92%;
-}
-.comment-item:hover {
-  background: #e0e0e0;
-}
-.comment-item.add-comment {
-  display: flex;
-  margin: 5px;
-}
-.comment-item.add-comment a {
-  display: block;
-  margin: auto;
-}
-.comments {
-  clear: both;
-}
-.comments .comment {
-  margin: 0.5px 0;
-  padding: 6px 0;
-  display: flex;
-}
-.comments .comment .member {
-  width: 32px;
-  height: 32px;
-}
-.comments .comment .comment-member {
-  font-weight: 700;
-}
-.comments .comment .comment-desc {
-  word-wrap: break-word;
-  overflow: hidden;
-  flex: 1;
-  align-self: center;
-  margin: 0;
-  margin-left: 3px;
-  overflow: hidden;
-  word-break: break-word;
-}
-.comments .comment .comment-desc .comment-text {
-  display: block;
-  border-radius: 3px;
-  background: #fff;
-  text-decoration: none;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;
-}
-.comments .comment .comment-desc .reactions {
-  display: flex;
-  margin-top: 5px;
-  gap: 5px;
-}
-.comments .comment .comment-desc .reactions .open-comment-reaction-popup {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  height: 24px;
-}
-.comments .comment .comment-desc .reactions .open-comment-reaction-popup span {
-  display: inline-block;
-  font-size: clamp(14px, 2vw, 18px);
-  font-weight: 500;
-  line-height: 1;
-  margin-left: 4px;
-}
-.comments .comment .comment-desc .reactions .reaction {
-  cursor: pointer;
-  border: 1px solid #808080;
-  border-radius: 15px;
-  display: flex;
-  padding: 2px 5px;
-}
-.comments .comment .comment-desc .reactions .reaction.selected {
-  background-color: #b0c4de;
-}
-.comments .comment .comment-desc .reactions .reaction:hover {
-  background-color: #b0c4de;
-}
-.comments .comment .comment-desc .reactions .reaction .reaction-count {
-  font-size: 12px;
-}
-.comments .comment .comment-desc .comment-meta {
-  font-size: 0.8em;
-  color: #999;
-}

client/components/activities/comments.jade

@@ -1,68 +1,9 @@
 template(name="commentForm")
   .new-comment.js-new-comment(
     class="{{#if commentFormIsOpen}}is-open{{/if}}")
-    +userAvatar(userId=currentUser._id noRemove=true)
+    +userAvatar(userId=currentUser._id)
     form.js-new-comment-form
       +editor(class="js-new-comment-input")
         | {{getUnsavedValue 'cardComment' currentCard._id}}
       .add-controls
         button.primary.confirm.clear.js-add-comment(type="submit") {{_ 'comment'}}
-
-template(name="comments")
-  .comments
-    each commentData in getComments
-      +comment(commentData)
-
-template(name="comment")
-  .comment
-    +userAvatar(userId=userId)
-    p.comment-desc
-      span.comment-member
-        +memberName(user=user)
-
-      +inlinedForm(classNames='js-edit-comment')
-        +editor(autofocus=true)
-          = text
-        .edit-controls
-          button.primary(type="submit") {{_ 'edit'}}
-          a.js-close-inlined-form(title="{{_ 'close' }}")
-            i.fa.fa-times-thin
-      else
-        .comment-text
-          +viewer
-            = text
-        +commentReactions(reactions=reactions commentId=_id)
-        span(title=createdAt).comment-meta {{ displayDate createdAt }}
-          if($eq currentUser._id userId)
-            +editOrDeleteComment
-          else if currentUser.isBoardAdmin
-            +editOrDeleteComment
-
-template(name="editOrDeleteComment")
-  = ' - '
-  a.js-open-inlined-form {{_ "edit"}}
-  = ' - '
-  a.js-delete-comment {{_ "delete"}}
-
-template(name="deleteCommentPopup")
-  p {{_ "comment-delete"}}
-  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
-
-template(name="commentReactions")
-  .reactions
-    each reaction in reactions
-      span.reaction(class="{{#if isSelected reaction.userIds}}selected{{/if}}" data-codepoint="#{reaction.reactionCodepoint}" title="{{userNames reaction.userIds}}")
-        span.reaction-codepoint !{reaction.reactionCodepoint}
-        span.reaction-count #{reaction.userIds.length}
-    if (currentUser.isBoardMember)
-      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}
-

client/components/activities/comments.js

@@ -1,89 +1,58 @@
-import { ReactiveCache } from '/imports/reactiveCache';
-import CardComments from '/models/cardComments';
-import { UnsavedEdits } from '/client/lib/unsavedEdits';
-import { EscapeActions } from '/client/lib/escapeActions';
-import { Utils } from '/client/lib/utils';
-import autosize from 'autosize';
-
 const commentFormIsOpen = new ReactiveVar(false);
 
-Template.commentForm.onDestroyed(function () {
-  commentFormIsOpen.set(false);
-  $('.note-popover').hide();
-});
+BlazeComponent.extendComponent({
+  onDestroyed() {
+    commentFormIsOpen.set(false);
+  },
 
-Template.commentForm.helpers({
   commentFormIsOpen() {
     return commentFormIsOpen.get();
   },
-});
 
-Template.commentForm.events({
-  'submit .js-new-comment-form'(evt, tpl) {
-    const input = tpl.$('.js-new-comment-input');
-    const text = input.val().trim();
-    const card = Template.currentData();
-    let boardId = card.boardId;
-    let cardId = card._id;
-    if (card.isLinkedCard()) {
-      boardId = ReactiveCache.getCard(card.linkedId).boardId;
-      cardId = card.linkedId;
-    } else if (card.isLinkedBoard()) {
-      boardId = card.linkedId;
-    }
-    if (text) {
-      CardComments.insert({
-        text,
-        boardId,
-        cardId,
-      });
-      resetCommentInput(input);
-      Tracker.flush();
-      autosize.update(input);
-      input.trigger('submitted');
-    }
-    evt.preventDefault();
+  getInput() {
+    return this.$('.js-new-comment-input');
   },
-  // Pressing Ctrl+Enter should submit the form
-  'keydown form textarea'(evt, tpl) {
-    if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
-      tpl.find('button[type=submit]').click();
-    }
-  },
-});
 
-Template.comments.helpers({
-  getComments() {
-    const data = Template.currentData();
-    if (!data || typeof data.comments !== 'function') return [];
-    return data.comments();
+  events() {
+    return [{
+      'click .js-new-comment:not(.focus)'() {
+        commentFormIsOpen.set(true);
+      },
+      'submit .js-new-comment-form'(evt) {
+        const input = this.getInput();
+        const text = input.val().trim();
+        const card = this.currentData();
+        let boardId = card.boardId;
+        let cardId = card._id;
+        if (card.isLinkedCard()) {
+          boardId = Cards.findOne(card.linkedId).boardId;
+          cardId = card.linkedId;
+        }
+        if (text) {
+          CardComments.insert({
+            text,
+            boardId,
+            cardId,
+          });
+          resetCommentInput(input);
+          Tracker.flush();
+          autosize.update(input);
+        }
+        evt.preventDefault();
+      },
+      // Pressing Ctrl+Enter should submit the form
+      'keydown form textarea'(evt) {
+        if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+          this.find('button[type=submit]').click();
+        }
+      },
+    }];
   },
-});
-
-Template.comment.events({
-  'click .js-delete-comment': Popup.afterConfirm('deleteComment', function () {
-    const commentId = this._id;
-    CardComments.remove(commentId);
-    Popup.back();
-  }),
-  'submit .js-edit-comment'(evt, tpl) {
-    evt.preventDefault();
-    const textarea = tpl.find('.js-edit-comment textarea,input[type=text]');
-    const commentText = textarea && textarea.value ? textarea.value.trim() : '';
-    const commentId = this._id;
-    if (commentText) {
-      CardComments.update(commentId, {
-        $set: {
-          text: commentText,
-        },
-      });
-    }
-  },
-});
+}).register('commentForm');
 
 // XXX This should be a static method of the `commentForm` component
 function resetCommentInput(input) {
-  input.val(''); // without manually trigger, input event won't be fired
+  input.val('');
   input.blur();
   commentFormIsOpen.set(false);
 }
@@ -94,18 +63,17 @@ function resetCommentInput(input) {
 // Tracker.autorun to register the component dependencies, and re-run when these
 // dependencies are invalidated. A better component API would remove this hack.
 Tracker.autorun(() => {
-  Utils.getCurrentCardId();
+  Session.get('currentCard');
   Tracker.afterFlush(() => {
     autosize.update($('.js-new-comment-input'));
   });
 });
 
-EscapeActions.register(
-  'inlinedForm',
+EscapeActions.register('inlinedForm',
   () => {
     const draftKey = {
       fieldName: 'cardComment',
-      docId: Utils.getCurrentCardId(),
+      docId: Session.get('currentCard'),
     };
     const commentInput = $('.js-new-comment-input');
     const draft = commentInput.val().trim();
@@ -116,10 +84,7 @@ EscapeActions.register(
     }
     resetCommentInput(commentInput);
   },
-  () => {
-    return commentFormIsOpen.get();
-  },
-  {
+  () => { return commentFormIsOpen.get(); }, {
     noClickEscapeOn: '.js-new-comment',
-  },
+  }
 );

client/components/activities/comments.styl

@@ -0,0 +1,48 @@
+@import 'nib'
+
+.new-comment
+  position: relative
+  margin: 0 0 20px 38px
+
+  .member
+    opacity: .7
+    position: absolute
+    top: 1px
+    left: -38px
+
+  &.is-open
+    .member
+      opacity: 1
+
+    .helper
+      display: inline-block
+
+    textarea
+      min-height: 100px
+      color: #4d4d4d
+      cursor: auto
+      overflow: hidden
+      word-wrap: break-word
+
+  .too-long
+    margin-top: 8px
+
+  textarea
+    background-color: #fff
+    border: 0
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
+    color: #8c8c8c
+    height: 36px
+    margin: 4px 4px 6px 0
+    padding: 9px 11px
+    width: 100%
+
+    &:hover,
+    &:is-open
+      background-color: #fff
+      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
+      border: 0
+      cursor: pointer
+
+    &:is-open
+      cursor: auto

client/components/boardConversionProgress.css

@@ -1,184 +0,0 @@
-/* Board Conversion Progress Styles */
-.board-conversion-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 9999;
-  display: none;
-  align-items: center;
-  justify-content: center;
-}
-
-.board-conversion-overlay.active {
-  display: flex;
-}
-
-.board-conversion-modal {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-  max-width: 500px;
-  width: 90%;
-  max-height: 80vh;
-  overflow: hidden;
-  animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.board-conversion-header {
-  padding: 20px 24px 16px;
-  border-bottom: 1px solid #e0e0e0;
-  text-align: center;
-}
-
-.board-conversion-header h3 {
-  margin: 0 0 8px 0;
-  color: #333;
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.board-conversion-header h3 i {
-  margin-right: 8px;
-  color: #2196F3;
-}
-
-.board-conversion-header p {
-  margin: 0;
-  color: #666;
-  font-size: 14px;
-}
-
-.board-conversion-content {
-  padding: 24px;
-}
-
-.conversion-progress {
-  margin-bottom: 20px;
-}
-
-.progress-bar {
-  width: 100%;
-  height: 8px;
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #2196F3, #21CBF3);
-  border-radius: 4px;
-  transition: width 0.3s ease;
-  position: relative;
-}
-
-.progress-fill::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.3),
-    transparent
-  );
-  animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-.progress-text {
-  text-align: center;
-  font-weight: 600;
-  color: #2196F3;
-  font-size: 16px;
-}
-
-.conversion-status {
-  text-align: center;
-  margin-bottom: 16px;
-  color: #333;
-  font-size: 16px;
-}
-
-.conversion-status i {
-  margin-right: 8px;
-  color: #2196F3;
-}
-
-.conversion-time {
-  text-align: center;
-  color: #666;
-  font-size: 14px;
-  background-color: #f5f5f5;
-  padding: 8px 12px;
-  border-radius: 4px;
-  margin-bottom: 16px;
-}
-
-.conversion-time i {
-  margin-right: 6px;
-  color: #FF9800;
-}
-
-.board-conversion-footer {
-  padding: 16px 24px 20px;
-  border-top: 1px solid #e0e0e0;
-  background-color: #f9f9f9;
-}
-
-.conversion-info {
-  text-align: center;
-  color: #666;
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.conversion-info i {
-  margin-right: 6px;
-  color: #2196F3;
-}
-
-/* Responsive design */
-@media (max-width: 600px) {
-  .board-conversion-modal {
-    width: 95%;
-    margin: 20px;
-  }
-
-  .board-conversion-header,
-  .board-conversion-content,
-  .board-conversion-footer {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-
-  .board-conversion-header h3 {
-    font-size: 18px;
-  }
-}

client/components/boardConversionProgress.jade

@@ -1,27 +0,0 @@
-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

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

client/components/boards/boardArchive.js

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

client/components/boards/boardBody.css

@@ -1,573 +0,0 @@
-.board-wrapper {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  width: 100%;
-  min-width: 100%;
-}
-
-/* When zoom is 50% or lower, ensure full width like content */
-.board-wrapper[style*="transform: scale(0.5)"] {
-  width: 100% !important;
-  max-width: 100% !important;
-  margin: 0 !important;
-}
-
-.board-wrapper[style*="transform: scale(0.4)"] {
-  width: 100% !important;
-  max-width: 100% !important;
-  margin: 0 !important;
-}
-
-.board-wrapper[style*="transform: scale(0.3)"] {
-  width: 100% !important;
-  max-width: 100% !important;
-  margin: 0 !important;
-}
-.board-wrapper .board-canvas {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  transition: margin 0.1s;
-  overflow-y: auto;
-  width: 100%;
-  min-width: 100%;
-}
-
-/* Ensure horizontal scrollbar is visible for high zoom levels */
-.board-wrapper .board-canvas[style*="overflow-x: auto"] {
-  overflow-x: auto !important;
-  overflow-y: auto !important;
-}
-
-/* Style the scrollbar for better visibility */
-.board-wrapper .board-canvas::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-
-.board-wrapper .board-canvas::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 6px;
-}
-
-.board-wrapper .board-canvas::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 6px;
-}
-
-.board-wrapper .board-canvas::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-/* Ensure content area can scroll horizontally for high zoom levels */
-#content[style*="overflow-x: auto"] {
-  overflow-x: auto !important;
-  overflow-y: auto !important;
-}
-
-/* Style content area scrollbar */
-#content::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-
-#content::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 6px;
-}
-
-#content::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 6px;
-}
-
-#content::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-/* Ensure scrollbars are always visible for high zoom levels */
-#content[style*="overflow-x: auto"] {
-  position: relative;
-}
-
-#content[style*="overflow-x: auto"]::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-
-    /* Force vertical scrollbar to always be visible */
-    #content[style*="overflow-y: auto"] {
-      overflow-y: scroll !important;
-    }
-
-    /* Mobile - make all text 2x bigger inside #content by default (icons stay same size) */
-    @media screen and (max-width: 800px),
-           screen and (max-device-width: 800px),
-           screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
-           screen and (max-width: 800px) and (orientation: portrait),
-           screen and (max-width: 800px) and (orientation: landscape) {
-      #content {
-        font-size: 2em !important; /* 2x bigger base font size for content area */
-      }
-
-      /* Make all text elements 2x bigger */
-      #content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
-      #content p, #content span, #content div, #content a, #content button,
-      #content .minicard, #content .list-header-name, #content .board-header-btn,
-      #content .card-title, #content .card-details, #content .card-description,
-      #content .swimlane-header, #content .list-title, #content .card-text,
-      #content .member, #content .member-name, #content .member-initials,
-      #content .checklist-item, #content .checklist-title, #content .comment,
-      #content .activity, #content .activity-text, #content .activity-time,
-      #content .board-title, #content .board-description, #content .list-name,
-      #content .card-text, #content .card-title, #content .card-description,
-      #content .swimlane-title, #content .swimlane-description,
-      #content .board-header-title, #content .board-header-description,
-      #content .card-detail-title, #content .card-detail-description,
-      #content .list-header-title, #content .list-header-description,
-      #content .swimlane-header-title, #content .swimlane-header-description,
-      #content .minicard-title, #content .minicard-description,
-      #content .card-comment, #content .card-comment-text,
-      #content .checklist-item-text, #content .checklist-item-title,
-      #content .activity-item, #content .activity-item-text,
-      #content .board-member, #content .board-member-name,
-      #content .team-member, #content .team-member-name,
-      #content .org-member, #content .org-member-name,
-      #content .template-member, #content .template-member-name,
-      #content .user-name, #content .user-email, #content .user-role,
-      #content .setting-title, #content .setting-description,
-      #content .popup-title, #content .popup-description,
-      #content .modal-title, #content .modal-description,
-      #content .notification-title, #content .notification-text,
-      #content .announcement-title, #content .announcement-text,
-      #content .offline-warning-title, #content .offline-warning-text,
-      #content .error-title, #content .error-text,
-      #content .success-title, #content .success-text,
-      #content .info-title, #content .info-text,
-      #content .warning-title, #content .warning-text {
-        font-size: 1em !important; /* Use inherited 2x scaling */
-      }
-
-      /* Keep icons the same size (don't scale them) */
-      #content .fa, #content .icon, #content i {
-        font-size: 1em !important; /* Keep original icon size */
-      }
-
-      /* Reset specific icon sizes to prevent double scaling */
-      #content .fa-home, #content .fa-bars, #content .fa-search,
-      #content .fa-bell, #content .fa-user, #content .fa-cog,
-      #content .fa-plus, #content .fa-minus, #content .fa-edit,
-      #content .fa-trash, #content .fa-save, #content .fa-cancel,
-      #content .fa-arrow-left, #content .fa-arrow-right,
-      #content .fa-arrow-up, #content .fa-arrow-down,
-      #content .fa-check, #content .fa-times, #content .fa-close,
-      #content .fa-star, #content .fa-heart, #content .fa-thumbs-up,
-      #content .fa-thumbs-down, #content .fa-comment, #content .fa-reply,
-      #content .fa-share, #content .fa-download, #content .fa-upload,
-      #content .fa-copy, #content .fa-paste, #content .fa-cut,
-      #content .fa-undo, #content .fa-redo, #content .fa-refresh,
-      #content .fa-sync, #content .fa-spinner, #content .fa-loading,
-      #content .fa-info, #content .fa-question, #content .fa-exclamation,
-      #content .fa-warning, #content .fa-error, #content .fa-success,
-      #content .fa-check-circle, #content .fa-times-circle,
-      #content .fa-exclamation-circle, #content .fa-question-circle,
-      #content .fa-info-circle, #content .fa-warning-circle,
-      #content .fa-error-circle, #content .fa-success-circle {
-        font-size: 1em !important; /* Keep original icon size */
-      }
-    }
-
-    /* Fallback for iPhone devices using JavaScript detection */
-    .iphone-device #content {
-      font-size: 2em !important; /* 2x bigger base font size for content area */
-    }
-
-    .iphone-device #content h1, .iphone-device #content h2, .iphone-device #content h3, .iphone-device #content h4, .iphone-device #content h5, .iphone-device #content h6,
-    .iphone-device #content p, .iphone-device #content span, .iphone-device #content div, .iphone-device #content a, .iphone-device #content button,
-    .iphone-device #content .minicard, .iphone-device #content .list-header-name, .iphone-device #content .board-header-btn,
-    .iphone-device #content .card-title, .iphone-device #content .card-details, .iphone-device #content .card-description,
-    .iphone-device #content .swimlane-header, .iphone-device #content .list-title, .iphone-device #content .card-text,
-    .iphone-device #content .member, .iphone-device #content .member-name, .iphone-device #content .member-initials,
-    .iphone-device #content .checklist-item, .iphone-device #content .checklist-title, .iphone-device #content .comment,
-    .iphone-device #content .activity, .iphone-device #content .activity-text, .iphone-device #content .activity-time,
-    .iphone-device #content .board-title, .iphone-device #content .board-description, .iphone-device #content .list-name,
-    .iphone-device #content .card-text, .iphone-device #content .card-title, .iphone-device #content .card-description,
-    .iphone-device #content .swimlane-title, .iphone-device #content .swimlane-description,
-    .iphone-device #content .board-header-title, .iphone-device #content .board-header-description,
-    .iphone-device #content .card-detail-title, .iphone-device #content .card-detail-description,
-    .iphone-device #content .list-header-title, .iphone-device #content .list-header-description,
-    .iphone-device #content .swimlane-header-title, .iphone-device #content .swimlane-header-description,
-    .iphone-device #content .minicard-title, .iphone-device #content .minicard-description,
-    .iphone-device #content .card-comment, .iphone-device #content .card-comment-text,
-    .iphone-device #content .checklist-item-text, .iphone-device #content .checklist-item-title,
-    .iphone-device #content .activity-item, .iphone-device #content .activity-item-text,
-    .iphone-device #content .board-member, .iphone-device #content .board-member-name,
-    .iphone-device #content .team-member, .iphone-device #content .team-member-name,
-    .iphone-device #content .org-member, .iphone-device #content .org-member-name,
-    .iphone-device #content .template-member, .iphone-device #content .template-member-name,
-    .iphone-device #content .user-name, .iphone-device #content .user-email, .iphone-device #content .user-role,
-    .iphone-device #content .setting-title, .iphone-device #content .setting-description,
-    .iphone-device #content .popup-title, .iphone-device #content .popup-description,
-    .iphone-device #content .modal-title, .iphone-device #content .modal-description,
-    .iphone-device #content .notification-title, .iphone-device #content .notification-text,
-    .iphone-device #content .announcement-title, .iphone-device #content .announcement-text,
-    .iphone-device #content .offline-warning-title, .iphone-device #content .offline-warning-text,
-    .iphone-device #content .error-title, .iphone-device #content .error-text,
-    .iphone-device #content .success-title, .iphone-device #content .success-text,
-    .iphone-device #content .info-title, .iphone-device #content .info-text,
-    .iphone-device #content .warning-title, .iphone-device #content .warning-text {
-      font-size: 1em !important; /* Use inherited 2x scaling */
-    }
-
-    /* Keep icons the same size for iPhone devices */
-    .iphone-device #content .fa, .iphone-device #content .icon, .iphone-device #content i {
-      font-size: 1em !important; /* Keep original icon size */
-    }
-
-/* Mobile iPhone: scale card details text and icons to 2x */
-body.mobile-mode.iphone-device .card-details {
-  font-size: 2em !important;
-}
-body.mobile-mode.iphone-device .card-details .fa,
-body.mobile-mode.iphone-device .card-details .icon,
-body.mobile-mode.iphone-device .card-details i,
-body.mobile-mode.iphone-device .card-details .emoji-icon,
-body.mobile-mode.iphone-device .card-details a,
-body.mobile-mode.iphone-device .card-details p,
-body.mobile-mode.iphone-device .card-details span,
-body.mobile-mode.iphone-device .card-details div,
-body.mobile-mode.iphone-device .card-details button,
-body.mobile-mode.iphone-device .card-details input,
-body.mobile-mode.iphone-device .card-details select,
-body.mobile-mode.iphone-device .card-details textarea {
-  font-size: inherit !important;
-}
-/* Section titles slightly larger than content but not as big as card title */
-body.mobile-mode.iphone-device .card-details .card-details-item-title {
-  font-size: 1.1em !important;
-  font-weight: bold;
-}
-
-/* Ensure scrollbars are positioned correctly */
-#content[style*="overflow-x: auto"]::-webkit-scrollbar:vertical {
-  width: 12px;
-}
-
-#content[style*="overflow-x: auto"]::-webkit-scrollbar:horizontal {
-  height: 12px;
-}
-
-/* Force both scrollbars to always be visible for high zoom levels */
-#content[style*="overflow-x: auto"][style*="overflow-y: auto"] {
-  overflow-x: scroll !important;
-  overflow-y: scroll !important;
-}
-
-/* Ensure the right scrollbar is always visible on the inner right edge */
-#content[style*="overflow-y: auto"] {
-  scrollbar-gutter: stable;
-}
-.board-wrapper .board-canvas .board-overlay {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  top: -100px;
-  right: -400px;
-  background: #000;
-  opacity: 0.33;
-  animation: fadeIn 0.2s;
-  z-index: 16;
-}
-
-/* Fix for mobile Safari: ensure overlay stays behind card details */
-@media screen and (max-width: 800px) {
-  .board-wrapper .board-canvas .board-overlay {
-    z-index: 17 !important;
-  }
-
-  /* In desktop mode on small screens, still keep overlay behind card */
-  body.desktop-mode .board-wrapper .board-canvas .board-overlay {
-    z-index: 17 !important;
-  }
-}
-
-/* In mobile mode, lower the overlay z-index to stay behind card details */
-body.mobile-mode .board-wrapper .board-canvas .board-overlay {
-  z-index: 17 !important;
-}
-
-/* iPhone in desktop mode: remove overlay to avoid blocking card */
-body.desktop-mode.iphone-device .board-wrapper .board-canvas .board-overlay {
-  display: none !important;
-  pointer-events: none !important;
-}
-
-/* Desktop mode: hide overlay to allow multiple cards and board interaction */
-body.desktop-mode .board-wrapper .board-canvas .board-overlay {
-  display: none !important;
-  pointer-events: none !important;
-}
-.board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
-.board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
-  display: none;
-}
-/* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
-.board-wrapper.mobile-view {
-  width: 100vw !important;
-  max-width: 100vw !important;
-  min-width: 100vw !important;
-  left: 0 !important;
-  right: 0 !important;
-  overflow-x: hidden !important;
-  overflow-y: auto !important;
-}
-
-.board-wrapper.mobile-view .board-canvas {
-  width: 100vw !important;
-  max-width: 100vw !important;
-  min-width: 100vw !important;
-  left: 0 !important;
-  right: 0 !important;
-  overflow-x: hidden !important;
-  overflow-y: auto !important;
-}
-
-.board-wrapper.mobile-view .board-canvas.mobile-view .swimlane {
-  border-bottom: 1px solid #ccc;
-  display: block !important;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden !important;
-  overflow-y: auto;
-  width: 100vw !important;
-  max-width: 100vw !important;
-  min-width: 100vw !important;
-}
-
-@media screen and (max-width: 800px),
-       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
-  .board-wrapper {
-    width: 100vw !important;
-    max-width: 100vw !important;
-    min-width: 100vw !important;
-    left: 0 !important;
-    right: 0 !important;
-    overflow-x: hidden !important;
-    overflow-y: auto !important;
-  }
-
-  .board-wrapper .board-canvas {
-    width: 100vw !important;
-    max-width: 100vw !important;
-    min-width: 100vw !important;
-    left: 0 !important;
-    right: 0 !important;
-    overflow-x: hidden !important;
-    overflow-y: auto !important;
-  }
-
-  .board-wrapper .board-canvas .swimlane {
-    border-bottom: 1px solid #ccc;
-    display: block !important;
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden !important;
-    overflow-y: auto;
-    width: 100vw !important;
-    max-width: 100vw !important;
-    min-width: 100vw !important;
-  }
-}
-.calendar-event-green {
-  background: #3cb500 !important;
-  border-color: #2a8000;
-  color: #fff !important;
-}
-.calendar-event-yellow {
-  background: #fad900 !important;
-  border-color: #c7ac00;
-  color: #000 !important;
-}
-.calendar-event-orange {
-  background: #ff9f19 !important;
-  border-color: #cc7c14;
-  color: #000 !important;
-}
-.calendar-event-red {
-  background: #eb4646 !important;
-  border-color: #b83737;
-  color: #fff !important;
-}
-.calendar-event-purple {
-  background: #a632db !important;
-  border-color: #7d26a6;
-  color: #fff !important;
-}
-.calendar-event-blue {
-  background: #0079bf !important;
-  border-color: #005a8a;
-  color: #fff !important;
-}
-.calendar-event-pink {
-  background: #ff78cb !important;
-  border-color: #cc62a3;
-  color: #000 !important;
-}
-.calendar-event-sky {
-  background: #00c2e0 !important;
-  border-color: #0094ab;
-  color: #fff !important;
-}
-.calendar-event-black {
-  background: #4d4d4d !important;
-  border-color: #1a1a1a;
-  color: #fff !important;
-}
-.calendar-event-lime {
-  background: #51e898 !important;
-  border-color: #3eb375;
-  color: #000 !important;
-}
-.calendar-event-silver {
-  background: #c0c0c0 !important;
-  border-color: #8c8c8c;
-  color: #000 !important;
-}
-.calendar-event-peachpuff {
-  background: #ffdab9 !important;
-  border-color: #ccaf95;
-  color: #000 !important;
-}
-.calendar-event-crimson {
-  background: #dc143c !important;
-  border-color: #a8112f;
-  color: #fff !important;
-}
-.calendar-event-plum {
-  background: #dda0dd !important;
-  border-color: #a87ba8;
-  color: #000 !important;
-}
-.calendar-event-darkgreen {
-  background: #006400 !important;
-  border-color: #003000;
-  color: #fff !important;
-}
-.calendar-event-slateblue {
-  background: #6a5acd !important;
-  border-color: #4f4399;
-  color: #fff !important;
-}
-.calendar-event-magenta {
-  background: #f0f !important;
-  border-color: #c0c;
-  color: #fff !important;
-}
-.calendar-event-gold {
-  background: #ffd700 !important;
-  border-color: #ca0;
-  color: #000 !important;
-}
-.calendar-event-navy {
-  background: #000080 !important;
-  border-color: #003;
-  color: #fff !important;
-}
-.calendar-event-gray {
-  background: #808080 !important;
-  border-color: #333;
-  color: #fff !important;
-}
-.calendar-event-saddlebrown {
-  background: #8b4513 !important;
-  border-color: #572b0c;
-  color: #fff !important;
-}
-.calendar-event-paleturquoise {
-  background: #afeeee !important;
-  border-color: #8ababa;
-  color: #000 !important;
-}
-.calendar-event-mistyrose {
-  background: #ffe4e1 !important;
-  border-color: #ccb8b6;
-  color: #000 !important;
-}
-.calendar-event-indigo {
-  background: #4b0082 !important;
-  border-color: #2b004d;
-  color: #fff !important;
-}
-/* Modal Styles */
-.modal {
-  display: none;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 9999;
-  background-color: rgba(0, 0, 0, 0.5);
-  width: 100%;
-  height: 100%;
-}
-.modal-dialog {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 25%; /* Adjust the height to make it smaller */
-  position: relative;
-  margin: 10% auto; /* This margin will help center the modal vertically */
-  max-width: 400px; /* Adjust the max-width to make it smaller */
-  background-color: #fff;
-  border-radius: 5px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-}
-.modal-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-bottom: 1px;
-  border-bottom: 1px solid #ccc;
-}
-.modal-title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0;
-  font-size: 18px;
-}
-.modal-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 4px;
-  border-top: 1px solid #ccc;
-}
-.close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  font-size: 25px;
-  cursor: pointer;
-}
-
-/* Global file drag over state for board canvas */
-.board-canvas.file-drag-over {
-  background-color: rgba(0, 123, 255, 0.05) !important;
-  border: 2px dashed #007bff !important;
-  transition: all 0.2s ease;
-}

client/components/boards/boardBody.jade

@@ -1,70 +1,42 @@
 template(name="board")
-
-  if isConverting
-    +boardConversionProgress
-  else if isBoardReady
+  if isBoardReady.get
     if currentBoard
       if onlyShowCurrentCard
         +cardDetails(currentCard)
       else
         +boardBody
     else
-      //-- XXX We need a better error message in case the board has been archived
-      +message(label="board-not-found")
-      //-- | {{goHome}}
+      //- XXX We need a better error message in case the board has been archived
+      //+message(label="board-not-found")
+      {{goHome}}
   else
     +spinner
 
 template(name="boardBody")
-  if notDisplayThisBoard
-   | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
-  else
-    // Debug information (remove in production)
-    if debugBoardState
-      .debug-info(style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); color: white; padding: 10px; z-index: 9999; font-size: 12px;")
-        | {{_ 'board'}}: {{currentBoard.title}} | {{_ 'view'}}: {{boardView}} | {{_ 'has-swimlanes'}}: {{hasSwimlanes}} | {{_ 'swimlanes'}}: {{currentBoard.swimlanes.length}}
-    .board-wrapper(class=currentBoard.colorClass class="{{#if isMiniScreen}}mobile-view{{/if}}")
-      .board-canvas.js-swimlanes(
-        class="{{#if hasSwimlanes}}dragscroll{{/if}}"
-        class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
-        class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
-        class="{{#if draggingActive}}is-dragging-active{{/if}}"
-        class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}"
-        class="{{#if isMiniScreen}}mobile-view{{/if}}")
-        if showOverlay
-          .board-overlay
-        if currentBoard.isTemplatesBoard
-          each currentBoard.swimlanes
-            +swimlane(this)
-        else if isViewSwimlanes
-          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
-          // Default view - show swimlanes if they exist, otherwise show lists
-          if hasSwimlanes
-            each currentBoard.swimlanes
-              +swimlane(this)
-          else
-            +listsGroup(currentBoard)
-      //- Render multiple open cards in desktop mode
-      unless isMiniScreen
-        each openCards
-          +cardDetails(this cardIndex=@index)
-      +sidebar
+  .board-wrapper(class=currentBoard.colorClass)
+    +sidebar
+    .board-canvas.js-swimlanes.js-perfect-scrollbar(
+      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}}")
+      if showOverlay.get
+        .board-overlay
+      if currentBoard.isTemplatesBoard
+        each currentBoard.swimlanes
+          +swimlane(this)
+      else if isViewSwimlanes
+        each currentBoard.swimlanes
+          +swimlane(this)
+      else if isViewLists
+        +listsGroup(currentBoard)
+      else if isViewCalendar
+        +calendarView
+      else
+        +listsGroup(currentBoard)
 
 template(name="calendarView")
   if isViewCalendar
     .calendar-view.swimlane
       if currentCard
         +cardDetails(currentCard)
-      +fullcalendar(calendarOptions)
+      +fullcalendar(calendarOptions)

client/components/boards/boardBody.styl

@@ -0,0 +1,55 @@
+@import 'nib'
+
+position()
+  if arguments[0] == cover || arguments[0] == fixed-cover
+    if arguments[0] == cover
+      position: absolute
+    else
+      position: fixed
+    left: 0
+    right: 0
+    top: 0
+    bottom: 0
+  else
+    position: arguments
+
+.board-wrapper
+  position: cover
+  overflow-x: hidden
+  overflow-y: hidden
+
+  .board-canvas
+    position: cover
+    transition: margin .1s
+    overflow-y: auto
+
+    &.is-sibling-sidebar-open
+      margin-right: 248px
+
+    .board-overlay
+      position: fixed-cover
+      top: -100px
+      right: -400px
+      background: black
+      opacity: 0.33
+      animation: fadeIn 0.2s
+      z-index: 16
+
+    &.is-dragging-active
+      .open-minicard-composer,
+      .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

client/components/boards/boardColors.styl

@@ -0,0 +1,89 @@
+// We define a set of six board colors that we took from the FlatUI palette.
+// http://flatuicolors.com
+//
+// XXX Centralizing all these properties in a single file just because their
+// value is derived from the same color, doesn't make any sense. We should
+// create a mixin/macro that would generate 6 versions of a given property and
+// dispatch this list in the other stylus files.
+setBoardColor(color)
+  &#header,
+  &.sk-spinner div,
+  .board-backgrounds-list &.background-box,
+  .board-list & a
+    background-color: color
+
+  .is-selected .minicard
+    border-left: 3px solid color
+
+  button[type=submit].primary, input[type=submit].primary
+    background-color: darken(color, 20%)
+
+  &.pop-over .pop-over-list li a:not(.disabled):hover,
+  .sidebar .sidebar-content .sidebar-btn:hover,
+  .sidebar-list li a:hover
+    background-color: lighten(color, 10%)
+
+  &#header ul li.current, &#header-quick-access ul li.current
+    border-bottom: 2px solid lighten(color, 10%)
+
+  &#header-quick-access
+    background: darken(color, 10%)
+    color: white
+
+  &#header #header-main-bar .board-header-btn.emphasis
+    background: complement(color)
+
+    &:hover,
+    .board-header-btn-close
+      background: darken(complement(color), 10%)
+
+    &:hover .board-header-btn-close
+      background: darken(complement(color), 20%)
+
+  .materialCheckBox.is-checked
+    border-bottom: 2px solid color
+    border-right: 2px solid color
+
+  .is-multiselection-active .multi-selection-checkbox
+    &.is-checked + .minicard
+      background: lighten(color, 90%)
+
+    &:not(.is-checked) + .minicard:hover:not(.minicard-composer)
+      background: lighten(color, 97%)
+
+  .toggle-label
+
+    &:after
+      background-color: darken(color, 20%)
+
+  .toggle-switch:checked ~ .toggle-label
+    background-color: lighten(color, 20%)
+
+    &:after
+      background-color: darken(color, 20%)
+
+  @media screen and (max-width: 800px)
+    &.pop-over .header
+      background: color
+      color: white
+
+   &#header ul li.current, &#header-quick-access ul li.current
+      border-bottom: 4px solid lighten(color, 20%)
+
+.board-color-nephritis
+  setBoardColor(#27AE60)
+
+.board-color-pomegranate
+  setBoardColor(#C0392B)
+
+.board-color-belize
+  setBoardColor(#2980B9)
+
+.board-color-wisteria
+  setBoardColor(#8E44AD)
+
+.board-color-midnight
+  setBoardColor(#2C3E50)
+
+.board-color-pumpkin
+  setBoardColor(#E67E22)

client/components/boards/boardHeader.css

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

client/components/boards/boardHeader.jade

@@ -1,9 +1,7 @@
 template(name="boardHeaderBar")
   h1.header-board-menu
     with currentBoard
-      if $eq title 'Templates'
-        | {{_ 'templates'}}
-      else
+      a(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}")
         +viewer
           = title
 
@@ -11,37 +9,28 @@ template(name="boardHeaderBar")
     unless isMiniScreen
       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
+          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+            title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+            if showStarCounter
+              span
+                = currentBoard.stars
 
-            a.board-header-btn(
-              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-              title="{{_ currentBoard.permission}}")
-              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-              span {{_ currentBoard.permission}}
+          a.board-header-btn(
+            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+            title="{{_ currentBoard.permission}}")
+            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+            span {{_ currentBoard.permission}}
 
-            a.board-header-btn.js-watch-board(
-              title="{{_ watchLevel }}")
-              if $eq watchLevel "watching"
-                i.fa.fa-eye
-              if $eq watchLevel "tracking"
-                i.fa.fa-bell
-              if $eq watchLevel "muted"
-                i.fa.fa-bell-slash
-              span {{_ watchLevel}}
-            a.board-header-btn.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
+          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}}
 
         else
           a.board-header-btn.js-log-in(
@@ -49,90 +38,73 @@ template(name="boardHeaderBar")
             i.fa.fa-sign-in
             span {{_ 'log-in'}}
 
-  .board-header-btns.center
-
   .board-header-btns.right
     if currentBoard
       if isMiniScreen
         if currentUser
-          with currentBoard
-            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
-              i.fa.fa-pencil-square-o
+          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+            title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+            if showStarCounter
+              span
+                = currentBoard.stars
 
-            a.board-header-btn(
-              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-              title="{{_ currentBoard.permission}}")
-              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+          a.board-header-btn(
+            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+            title="{{_ currentBoard.permission}}")
+            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+            span {{_ currentBoard.permission}}
 
-            a.board-header-btn.js-watch-board(
-              title="{{_ watchLevel }}")
-              if $eq watchLevel "watching"
-                i.fa.fa-eye
-              if $eq watchLevel "tracking"
-                i.fa.fa-bell
-              if $eq watchLevel "muted"
-                i.fa.fa-bell-slash
-            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
-              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
-            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-              i.fa.fa-sort
-              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
-            if isSortActive
-              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
-                i.fa.fa-times-thin
+          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}}
 
         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
-
-      //if showSort
-      //
-        a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
-      //
-          i.fa(class="{{directionClass}}")
-      //
-          span {{_ 'sort'}}{{_ listSortShortDesc}}
+            span {{_ 'archives'}}
 
       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}}")
+          class="{{#if Filter.isActive}}emphasis{{/if}}")
         i.fa.fa-filter
-        span {{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}
+        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
+            
+      if currentUser.isAdmin
+        a.board-header-btn.js-open-rules-view(title="{{_ 'rules'}}")
+          i.fa.fa-magic
+          span {{_ 'rules'}}
+      else if currentUser.isBoardAdmin
+        a.board-header-btn.js-open-rules-view(title="{{_ 'rules'}}")
+          i.fa.fa-magic
+          span {{_ 'rules'}}
 
       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
-          i.fa.fa-caret-down
-          if $eq boardView 'board-view-swimlanes'
-            i.fa.fa-th-large
-          if $eq boardView 'board-view-lists'
-            i.fa.fa-trello
-          if $eq boardView 'board-view-cal'
-            i.fa.fa-calendar
-          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'}}
+        a.board-header-btn.js-toggle-board-view(
+          title="{{_ 'board-view'}}")
+          i.fa.fa-th-large
+          span {{#if currentUser.profile.boardView}}{{_ currentUser.profile.boardView}}{{else}}{{_ 'board-view-lists'}}{{/if}}
+
       if canModifyBoard
         a.board-header-btn.js-multiselection-activate(
             title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
@@ -144,28 +116,27 @@ template(name="boardHeaderBar")
               i.fa.fa-times-thin
 
       .separator
-      a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
-        i.fa.fa-bars
+      a.board-header-btn.js-toggle-sidebar
+        i.fa.fa-navicon
 
 template(name="boardVisibilityList")
   ul.pop-over-list
     li
       with "private"
         a.js-select-visibility
-          i.fa.fa-lock
+          i.fa.fa-lock.colorful
           | {{_ 'private'}}
           if visibilityCheck
             i.fa.fa-check
           span.sub-name {{_ 'private-desc'}}
-    if notAllowPrivateVisibilityOnly
-      li
-        with "public"
-          a.js-select-visibility
-            i.fa.fa-globe
-            | {{_ 'public'}}
-            if visibilityCheck
-              i.fa.fa-check
-            span.sub-name {{_ 'public-desc'}}
+    li
+      with "public"
+        a.js-select-visibility
+          i.fa.fa-globe.colorful
+          | {{_ 'public'}}
+          if visibilityCheck
+            i.fa.fa-check
+          span.sub-name {{_ 'public-desc'}}
 
 template(name="boardChangeVisibilityPopup")
   +boardVisibilityList
@@ -175,7 +146,7 @@ template(name="boardChangeWatchPopup")
     li
       with "watching"
         a.js-select-watch
-          i.fa.fa-eye
+          i.fa.fa-eye.colorful
           | {{_ 'watching'}}
           if watchCheck
             i.fa.fa-check
@@ -183,7 +154,7 @@ template(name="boardChangeWatchPopup")
     li
       with "tracking"
         a.js-select-watch
-          i.fa.fa-bell
+          i.fa.fa-bell.colorful
           | {{_ 'tracking'}}
           if watchCheck
             i.fa.fa-check
@@ -191,53 +162,22 @@ template(name="boardChangeWatchPopup")
     li
       with "muted"
         a.js-select-watch
-          i.fa.fa-bell-slash
+          i.fa.fa-bell-slash.colorful
           | {{_ 'muted'}}
           if watchCheck
             i.fa.fa-check
           span.sub-name {{_ 'muted-info'}}
 
-template(name="boardChangeViewPopup")
-  ul.pop-over-list
-    li
-      with "board-view-swimlanes"
-        a.js-open-swimlanes-view
-          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
-          | {{_ '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
-          | {{_ 'board-view-cal'}}
-          if $eq Utils.boardView "board-view-cal"
-            i.fa.fa-check
-    li
-      with "board-view-gantt"
-        a.js-open-gantt-view
-          i.fa.fa-bar-chart
-          | {{_ 'board-view-gantt'}}
-          if $eq Utils.boardView "board-view-gantt"
-            i.fa.fa-check
-
 template(name="createBoard")
   form
     label
       | {{_ 'title'}}
       input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen
+    if visibilityMenuIsOpen.get
       +boardVisibilityList
     else
       p.quiet
-        if $eq visibility 'public'
+        if $eq visibility.get 'public'
           span.fa.fa-globe.colorful
           = " "
           | {{{_ 'board-public-info'}}}
@@ -246,9 +186,6 @@ template(name="createBoard")
           = " "
           | {{{_ 'board-private-info'}}}
         a.js-change-visibility {{_ 'change'}}.
-    a.flex.js-toggle-add-template-container
-      .materialCheckBox#add-template-container
-      span {{_ 'add-template-container'}}
     input.primary.wide(type="submit" value="{{_ 'create'}}")
     span.quiet
       | {{_ 'or'}}
@@ -257,119 +194,6 @@ template(name="createBoard")
       | /
       a.js-board-template {{_ 'template'}}
 
-template(name="createBoardPopup")
-  form
-    label
-      | {{_ 'title'}}
-      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen
-      +boardVisibilityList
-    else
-      p.quiet
-        if $eq visibility 'public'
-          span.fa.fa-globe.colorful
-          = " "
-          | {{{_ 'board-public-info'}}}
-        else
-          span.fa.fa-lock.colorful
-          = " "
-          | {{{_ 'board-private-info'}}}
-        a.js-change-visibility {{_ 'change'}}.
-    a.flex.js-toggle-add-template-container
-      .materialCheckBox#add-template-container
-      span {{_ 'add-template-container'}}
-    input.primary.wide(type="submit" value="{{_ 'create'}}")
-    span.quiet
-      | {{_ 'or'}}
-      a.js-import-board {{_ 'import'}}
-    span.quiet
-      | /
-      a.js-board-template {{_ 'template'}}
-
-template(name="headerBarCreateBoardPopup")
-  form
-    label
-      | {{_ 'title'}}
-      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen
-      +boardVisibilityList
-    else
-      p.quiet
-        if $eq visibility 'public'
-          span.fa.fa-globe.colorful
-          = " "
-          | {{{_ 'board-public-info'}}}
-        else
-          span.fa.fa-lock.colorful
-          = " "
-          | {{{_ 'board-private-info'}}}
-        a.js-change-visibility {{_ 'change'}}.
-    a.flex.js-toggle-add-template-container
-      .materialCheckBox#add-template-container
-      span {{_ 'add-template-container'}}
-    input.primary.wide(type="submit" value="{{_ 'create'}}")
-    span.quiet
-      | {{_ 'or'}}
-      a.js-import-board {{_ 'import'}}
-    span.quiet
-      | /
-      a.js-board-template {{_ 'template'}}
-
-// New popup for Template Container creation; shares the same form content
-template(name="createTemplateContainerPopup")
-  form
-    label
-      | {{_ 'title'}}
-      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen
-      +boardVisibilityList
-    else
-      p.quiet
-        if $eq visibility 'public'
-          span.fa.fa-globe.colorful
-          = " "
-          | {{{_ 'board-public-info'}}}
-        else
-          span.fa.fa-lock.colorful
-          = " "
-          | {{{_ 'board-private-info'}}}
-        a.js-change-visibility {{_ 'change'}}.
-    a.flex.js-toggle-add-template-container
-      .materialCheckBox#add-template-container
-      span {{_ 'add-template-container'}}
-    input.primary.wide(type="submit" value="{{_ 'create'}}")
-    span.quiet
-      | {{_ 'or'}}
-      a.js-import-board {{_ 'import'}}
-    span.quiet
-      | /
-      a.js-board-template {{_ 'template'}}
-
-//template(name="listsortPopup")
-//
-  h2
-//
-   | {{_ 'list-sort-by'}}
-//
-  hr
-//
-  ul.pop-over-list
-//
-    each value in allowedSortValues
-//
-     li
-//
-      a.js-sort-by(name="{{value.name}}")
-//
-        if $eq sortby value.name
-//
-           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
-//
-        | {{_ value.label }}{{_ value.shortLabel}}
-//
-        if $eq sortby value.name
-//
-           i.fa.fa-check
 template(name="boardChangeTitlePopup")
   form
     label
@@ -383,27 +207,3 @@ template(name="boardChangeTitlePopup")
 template(name="boardCreateRulePopup")
   p {{_ 'close-board-pop'}}
   button.js-confirm.negate.full(type="submit") {{_ 'archive'}}
-
-
-template(name="cardsSortPopup")
-  ul.pop-over-list
-    li
-      a.js-sort-due
-        i.fa.fa-calendar
-        | {{_ 'due-date'}}
-      hr
-    li
-      a.js-sort-title
-        i.fa.fa-sort-alpha-asc
-        | {{_ 'title-alphabetically'}}
-      hr
-    li
-      a.js-sort-created-desc
-        i.fa.fa-arrow-down
-        | {{_ 'created-at-newest-first'}}
-      hr
-    li
-      a.js-sort-created-asc
-        i.fa.fa-arrow-up
-        | {{_ 'created-at-oldest-first'}}
-

client/components/boards/boardHeader.js

@@ -1,530 +1,247 @@
-import { ReactiveCache } from '/imports/reactiveCache';
-import { TAPi18n } from '/imports/i18n';
-import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
-import dragscroll from '@wekanteam/dragscroll';
-import getSlug from 'limax';
-import Boards from '/models/boards';
-import Swimlanes from '/models/swimlanes';
-import TableVisibilityModeSettings from '/models/tableVisibilityModeSettings';
-import { Filter } from '/client/lib/filter';
-import { MultiSelection } from '/client/lib/multiSelection';
-import { getSidebarInstance } from '/client/features/sidebar/service';
-import { Utils } from '/client/lib/utils';
+Template.boardMenuPopup.events({
+  'click .js-rename-board': Popup.open('boardChangeTitle'),
+  'click .js-custom-fields'() {
+    Sidebar.setView('customFields');
+    Popup.close();
+  },
+  'click .js-open-archives'() {
+    Sidebar.setView('archives');
+    Popup.close();
+  },
+  'click .js-change-board-color': Popup.open('boardChangeColor'),
+  'click .js-change-language': Popup.open('changeLanguage'),
+  'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    currentBoard.archive();
+    // XXX We should have some kind of notification on top of the page to
+    // confirm that the board was successfully archived.
+    FlowRouter.go('home');
+  }),
+  'click .js-delete-board': Popup.afterConfirm('deleteBoard', function() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    Popup.close();
+    Boards.remove(currentBoard._id);
+    FlowRouter.go('home');
+  }),
+  'click .js-outgoing-webhooks': Popup.open('outgoingWebhooks'),
+  'click .js-import-board': Popup.open('chooseBoardSource'),
+  'click .js-subtask-settings': Popup.open('boardSubtaskSettings'),
+});
 
-/*
-const DOWNCLS = 'fa-sort-down';
-const UPCLS = 'fa-sort-up';
-*/
-const sortCardsBy = new ReactiveVar('');
-
-Template.boardChangeTitlePopup.events({
-  async submit(event, templateInstance) {
-    event.preventDefault();
-    const newTitle = templateInstance
-      .$('.js-board-name')
-      .val()
-      .trim();
-    const newDesc = templateInstance
-      .$('.js-board-desc')
-      .val()
-      .trim();
-    if (newTitle) {
-      const board = Utils.getCurrentBoard();
-      if (board) {
-        await board.rename(newTitle);
-        await board.setDescription(newDesc);
-      }
-      Popup.back();
-    }
+Template.boardMenuPopup.helpers({
+  exportUrl() {
+    const params = {
+      boardId: Session.get('currentBoard'),
+    };
+    const queryParams = {
+      authToken: Accounts._storedLoginToken(),
+    };
+    return FlowRouter.path('/api/boards/:boardId/export', params, queryParams);
+  },
+  exportFilename() {
+    const boardId = Session.get('currentBoard');
+    return `wekan-export-board-${boardId}.json`;
   },
 });
 
-Template.boardHeaderBar.helpers({
+Template.boardChangeTitlePopup.events({
+  submit(evt, tpl) {
+    const newTitle = tpl.$('.js-board-name').val().trim();
+    const newDesc = tpl.$('.js-board-desc').val().trim();
+    if (newTitle) {
+      this.rename(newTitle);
+      this.setDescription(newDesc);
+      Popup.close();
+    }
+    evt.preventDefault();
+  },
+});
+
+BlazeComponent.extendComponent({
   watchLevel() {
-    const currentBoard = Utils.getCurrentBoard();
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
     return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
   },
 
   isStarred() {
     const boardId = Session.get('currentBoard');
-    const user = ReactiveCache.getCurrentUser();
+    const user = Meteor.user();
     return user && user.hasStarred(boardId);
   },
 
   // Only show the star counter if the number of star is greater than 2
   showStarCounter() {
-    const currentBoard = Utils.getCurrentBoard();
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
     return currentBoard && currentBoard.stars >= 2;
   },
 
-  boardView() {
-    return Utils.boardView();
-  },
-  isSortActive() {
-    return Session.get('sortBy') ? true : false;
-  },
-  sortCardsIcon() {
-    const sortBy = Session.get('sortBy');
-    if (!sortBy) {
-      return '🃏'; // Card icon when nothing is selected
-    }
-
-    // Determine which sort option is active based on sortBy object
-    if (sortBy.dueAt) {
-      return '📅'; // Due date icon
-    } else if (sortBy.title) {
-      return '🔤'; // Alphabet icon
-    } else if (sortBy.createdAt) {
-      return sortBy.createdAt === 1 ? '⬆️' : '⬇️'; // Up/down arrow based on direction
-    }
-
-    return '🃏'; // Default card icon
-  },
-});
-
-Template.boardHeaderBar.events({
-  'click .js-edit-board-title': Popup.open('boardChangeTitle'),
-  'click .js-star-board'() {
-    const boardId = Session.get('currentBoard');
-    if (boardId) {
-      Meteor.call('toggleBoardStar', boardId);
-    }
-  },
-  'click .js-open-board-menu': Popup.open('boardMenu'),
-  'click .js-change-visibility': Popup.open('boardChangeVisibility'),
-  'click .js-watch-board': Popup.open('boardChangeWatch'),
-  'click .js-open-archived-board'() {
-    Modal.open('archivedBoards');
-  },
-  'click .js-toggle-board-view': Popup.open('boardChangeView'),
-  'click .js-toggle-sidebar'() {
-    if (process.env.DEBUG === 'true') {
-      console.log('Hamburger menu clicked');
-    }
-    // Use the same approach as keyboard shortcuts
-    const sidebar = getSidebarInstance();
-    if (sidebar && typeof sidebar.toggle === 'function') {
-      if (process.env.DEBUG === 'true') {
-        console.log('Using Sidebar.toggle()');
-      }
-      sidebar.toggle();
-    } else {
-      if (process.env.DEBUG === 'true') {
-        console.warn('Sidebar not available, trying alternative approach');
-      }
-      // Try to trigger the sidebar through the global Blaze helper
-      if (typeof Blaze !== 'undefined' && Blaze._globalHelpers && Blaze._globalHelpers.Sidebar) {
-        const blazeSidebar = Blaze._globalHelpers.Sidebar();
-        if (blazeSidebar && typeof blazeSidebar.toggle === 'function') {
-          if (process.env.DEBUG === 'true') {
-            console.log('Using Blaze helper Sidebar.toggle()');
-          }
-          blazeSidebar.toggle();
+  events() {
+    return [{
+      'click .js-edit-board-title': Popup.open('boardChangeTitle'),
+      'click .js-star-board'() {
+        Meteor.user().toggleBoardStar(Session.get('currentBoard'));
+      },
+      'click .js-open-board-menu': Popup.open('boardMenu'),
+      'click .js-change-visibility': Popup.open('boardChangeVisibility'),
+      'click .js-watch-board': Popup.open('boardChangeWatch'),
+      'click .js-open-archived-board'() {
+        Modal.open('archivedBoards');
+      },
+      'click .js-toggle-board-view'() {
+        const currentUser = Meteor.user();
+        if ((currentUser.profile || {}).boardView === 'board-view-swimlanes') {
+          currentUser.setBoardView('board-view-cal');
+        } else if ((currentUser.profile || {}).boardView === 'board-view-lists') {
+          currentUser.setBoardView('board-view-swimlanes');
+        } else if ((currentUser.profile || {}).boardView === 'board-view-cal') {
+          currentUser.setBoardView('board-view-lists');
+        } else {
+          currentUser.setBoardView('board-view-swimlanes');
         }
-      }
-    }
+      },
+      'click .js-toggle-sidebar'() {
+        Sidebar.toggle();
+      },
+      'click .js-open-filter-view'() {
+        Sidebar.setView('filter');
+      },
+      'click .js-filter-reset'(evt) {
+        evt.stopPropagation();
+        Sidebar.setView();
+        Filter.reset();
+      },
+      'click .js-open-search-view'() {
+        Sidebar.setView('search');
+      },
+      'click .js-open-rules-view'() {
+        Modal.openWide('rulesMain');
+      },
+      'click .js-multiselection-activate'() {
+        const currentCard = Session.get('currentCard');
+        MultiSelection.activate();
+        if (currentCard) {
+          MultiSelection.add(currentCard);
+        }
+      },
+      'click .js-multiselection-reset'(evt) {
+        evt.stopPropagation();
+        MultiSelection.disable();
+      },
+      'click .js-log-in'() {
+        FlowRouter.go('atSignIn');
+      },
+    }];
   },
-  'click .js-open-filter-view'() {
-    const sidebar = getSidebarInstance();
-    if (sidebar) {
-      sidebar.setView('filter');
-    } else {
-      console.warn('Sidebar not available for setView');
-    }
-  },
-  'click .js-sort-cards': Popup.open('cardsSort'),
-  /*
-  'click .js-open-sort-view'(evt) {
-    const target = evt.target;
-    if (target.tagName === 'I') {
-      // click on the text, popup choices
-      this.changeDirection();
-    } else {
-      // change the sort order
-      Popup.open('listsort')(evt);
-    }
-  },
-  */
-  'click .js-filter-reset'(event) {
-    event.stopPropagation();
-    const sidebar = getSidebarInstance();
-    if (sidebar) {
-      sidebar.setView();
-    } else {
-      console.warn('Sidebar not available for setView');
-    }
-    Filter.reset();
-  },
-  'click .js-sort-reset'() {
-    Session.set('sortBy', '');
-  },
-  'click .js-open-search-view'() {
-    const sidebar = getSidebarInstance();
-    if (sidebar) {
-      sidebar.setView('search');
-    } else {
-      console.warn('Sidebar not available for setView');
-    }
-  },
-  'click .js-multiselection-activate'() {
-    const currentCard = Utils.getCurrentCardId();
-    MultiSelection.activate();
-    if (currentCard) {
-      MultiSelection.add(currentCard);
-    }
-  },
-  'click .js-multiselection-reset'(event) {
-    event.stopPropagation();
-    MultiSelection.disable();
-  },
-  'click .js-log-in'() {
-    FlowRouter.go('atSignIn');
+}).register('boardHeaderBar');
+
+Template.boardHeaderBar.helpers({
+  canModifyBoard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
   },
 });
 
-Template.boardChangeViewPopup.events({
-  'click .js-open-lists-view'() {
-    Utils.setBoardView('board-view-lists');
-    Popup.back();
+const CreateBoard = BlazeComponent.extendComponent({
+  template() {
+    return 'createBoard';
   },
-  'click .js-open-swimlanes-view'() {
-    Utils.setBoardView('board-view-swimlanes');
-    Popup.back();
+
+  onCreated() {
+    this.visibilityMenuIsOpen = new ReactiveVar(false);
+    this.visibility = new ReactiveVar('private');
+    this.boardId = new ReactiveVar('');
   },
-  'click .js-open-cal-view'() {
-    Utils.setBoardView('board-view-cal');
-    Popup.back();
-  },
-  'click .js-open-gantt-view'() {
-    Utils.setBoardView('board-view-gantt');
-    Popup.back();
-  },
-});
 
-// Shared setup for all create board popups
-function setupCreateBoardState(tpl) {
-  tpl.visibilityMenuIsOpen = new ReactiveVar(false);
-  tpl.visibility = new ReactiveVar('private');
-  tpl.boardId = new ReactiveVar('');
-  Meteor.subscribe('tableVisibilityModeSettings');
-}
-
-function createBoardHelpers() {
-  return {
-    visibilityMenuIsOpen() {
-      return Template.instance().visibilityMenuIsOpen.get();
-    },
-    visibility() {
-      return Template.instance().visibility.get();
-    },
-    notAllowPrivateVisibilityOnly() {
-      return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
-    },
-    visibilityCheck() {
-      return Template.currentData() === Template.instance().visibility.get();
-    },
-  };
-}
-
-async function createBoardSubmit(tpl, event) {
-  event.preventDefault();
-  const title = tpl.find('.js-new-board-title').value;
-  const slug = getSlug(title) || 'board';
-
-  const addTemplateContainer = $('#add-template-container.is-checked').length > 0;
-  if (addTemplateContainer) {
-    tpl.boardId.set(
-      await Meteor.callAsync('createBoardWithInitialSwimlanes', {
-        title,
-        slug,
-        permission: 'private',
-        type: 'template-container',
-        migrationVersion: 1,
-        swimlanes: [
-          { title: 'Card Templates', sort: 1, type: 'template-container' },
-          { title: 'List Templates', sort: 2, type: 'template-container' },
-          { title: 'Board Templates', sort: 3, type: 'template-container' },
-        ],
-      }),
-    );
-
-    // Assign to space if one was selected
-    const spaceId = Session.get('createBoardInWorkspace');
-    if (spaceId) {
-      Meteor.call('assignBoardToWorkspace', tpl.boardId.get(), spaceId, (err) => {
-        if (err) console.error('Error assigning board to space:', err);
-      });
-      Session.set('createBoardInWorkspace', null); // Clear after use
-    }
-
-    FlowRouter.go('board', { id: tpl.boardId.get(), slug });
-
-  } else {
-    const visibility = tpl.visibility.get();
-
-    tpl.boardId.set(
-      await Meteor.callAsync('createBoardWithInitialSwimlanes', {
-        title,
-        slug,
-        permission: visibility,
-        migrationVersion: 1,
-        swimlanes: [{ title: 'Default' }],
-      }),
-    );
-
-    // Assign to space if one was selected
-    const spaceId = Session.get('createBoardInWorkspace');
-    if (spaceId) {
-      Meteor.call('assignBoardToWorkspace', tpl.boardId.get(), spaceId, (err) => {
-        if (err) console.error('Error assigning board to space:', err);
-      });
-      Session.set('createBoardInWorkspace', null); // Clear after use
-    }
-
-    FlowRouter.go('board', { id: tpl.boardId.get(), slug });
-  }
-}
-
-function createBoardEvents() {
-  return {
-    'click .js-select-visibility'(event, tpl) {
-      tpl.visibility.set(Template.currentData());
-      tpl.visibilityMenuIsOpen.set(false);
-    },
-    'click .js-change-visibility'(event, tpl) {
-      tpl.visibilityMenuIsOpen.set(!tpl.visibilityMenuIsOpen.get());
-    },
-    'click .js-import': Popup.open('boardImportBoard'),
-    async 'submit'(event, tpl) {
-      await createBoardSubmit(tpl, event);
-    },
-    'click .js-import-board': Popup.open('chooseBoardSource'),
-    'click .js-board-template': Popup.open('searchElement'),
-    'click .js-toggle-add-template-container'() {
-      $('#add-template-container').toggleClass('is-checked');
-    },
-  };
-}
-
-// createBoard (non-popup version)
-Template.createBoard.onCreated(function () {
-  setupCreateBoardState(this);
-});
-
-Template.createBoard.helpers(createBoardHelpers());
-
-Template.createBoard.events(createBoardEvents());
-
-// createBoardPopup
-Template.createBoardPopup.onCreated(function () {
-  setupCreateBoardState(this);
-});
-
-Template.createBoardPopup.helpers(createBoardHelpers());
-
-Template.createBoardPopup.events(createBoardEvents());
-
-// createTemplateContainerPopup
-Template.createTemplateContainerPopup.onCreated(function () {
-  setupCreateBoardState(this);
-});
-
-Template.createTemplateContainerPopup.onRendered(function () {
-  // Always pre-check the template container checkbox for this popup
-  $('#add-template-container').addClass('is-checked');
-});
-
-Template.createTemplateContainerPopup.helpers(createBoardHelpers());
-
-Template.createTemplateContainerPopup.events(createBoardEvents());
-
-// headerBarCreateBoardPopup
-Template.headerBarCreateBoardPopup.onCreated(function () {
-  setupCreateBoardState(this);
-});
-
-Template.headerBarCreateBoardPopup.helpers(createBoardHelpers());
-
-Template.headerBarCreateBoardPopup.events({
-  'click .js-select-visibility'(event, tpl) {
-    tpl.visibility.set(Template.currentData());
-    tpl.visibilityMenuIsOpen.set(false);
-  },
-  'click .js-change-visibility'(event, tpl) {
-    tpl.visibilityMenuIsOpen.set(!tpl.visibilityMenuIsOpen.get());
-  },
-  'click .js-import': Popup.open('boardImportBoard'),
-  async submit(event, tpl) {
-    await createBoardSubmit(tpl, event);
-    // Immediately star boards created with the headerbar popup.
-    await ReactiveCache.getCurrentUser().toggleBoardStar(tpl.boardId.get());
-  },
-  'click .js-import-board': Popup.open('chooseBoardSource'),
-  'click .js-board-template': Popup.open('searchElement'),
-  'click .js-toggle-add-template-container'() {
-    $('#add-template-container').toggleClass('is-checked');
-  },
-});
-
-Template.boardChangeVisibilityPopup.onCreated(function () {
-  Meteor.subscribe('tableVisibilityModeSettings');
-});
-
-Template.boardChangeVisibilityPopup.helpers({
-  notAllowPrivateVisibilityOnly(){
-    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
-  },
   visibilityCheck() {
-    const currentBoard = Utils.getCurrentBoard();
-    return this === currentBoard.permission;
+    return this.currentData() === this.visibility.get();
   },
-});
 
-Template.boardChangeVisibilityPopup.events({
-  'click .js-select-visibility'() {
-    const currentBoard = Utils.getCurrentBoard();
-    const visibility = Template.currentData();
-    if (typeof visibility === 'string') {
-      currentBoard.setVisibility(visibility);
-      Popup.back();
-    }
+  setVisibility(visibility) {
+    this.visibility.set(visibility);
+    this.visibilityMenuIsOpen.set(false);
   },
-});
 
-Template.boardChangeWatchPopup.helpers({
+  toggleVisibilityMenu() {
+    this.visibilityMenuIsOpen.set(!this.visibilityMenuIsOpen.get());
+  },
+
+  onSubmit(evt) {
+    evt.preventDefault();
+    const title = this.find('.js-new-board-title').value;
+    const visibility = this.visibility.get();
+
+    this.boardId.set(Boards.insert({
+      title,
+      permission: visibility,
+    }));
+
+    Swimlanes.insert({
+      title: 'Default',
+      boardId: this.boardId.get(),
+    });
+
+    Utils.goBoardId(this.boardId.get());
+  },
+
+  events() {
+    return [{
+      'click .js-select-visibility'() {
+        this.setVisibility(this.currentData());
+      },
+      'click .js-change-visibility': this.toggleVisibilityMenu,
+      'click .js-import': Popup.open('boardImportBoard'),
+      submit: this.onSubmit,
+      'click .js-import-board': Popup.open('chooseBoardSource'),
+      'click .js-board-template': Popup.open('searchElement'),
+    }];
+  },
+}).register('createBoardPopup');
+
+(class HeaderBarCreateBoard extends CreateBoard {
+  onSubmit(evt) {
+    super.onSubmit(evt);
+    // Immediately star boards crated with the headerbar popup.
+    Meteor.user().toggleBoardStar(this.boardId.get());
+  }
+}).register('headerBarCreateBoardPopup');
+
+BlazeComponent.extendComponent({
+  visibilityCheck() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return this.currentData() === currentBoard.permission;
+  },
+
+  selectBoardVisibility() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const visibility = this.currentData();
+    currentBoard.setVisibility(visibility);
+    Popup.close();
+  },
+
+  events() {
+    return [{
+      'click .js-select-visibility': this.selectBoardVisibility,
+    }];
+  },
+}).register('boardChangeVisibilityPopup');
+
+BlazeComponent.extendComponent({
   watchLevel() {
-    const currentBoard = Utils.getCurrentBoard();
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
     return currentBoard.getWatchLevel(Meteor.userId());
   },
 
   watchCheck() {
-    const currentBoard = Utils.getCurrentBoard();
-    return this === currentBoard.getWatchLevel(Meteor.userId());
-  },
-});
-
-Template.boardChangeWatchPopup.events({
-  'click .js-select-watch'() {
-    const level = Template.currentData();
-    if (typeof level === 'string') {
-      Meteor.call(
-        'watch',
-        'board',
-        Session.get('currentBoard'),
-        level,
-        (err, ret) => {
-          if (!err && ret) Popup.back();
-        },
-      );
-    }
-  },
-});
-
-/*
-// BlazeComponent.extendComponent was removed - this code is unused.
-// Original listsortPopup component:
-// {
-  onCreated() {
-    //this.sortBy = new ReactiveVar();
-    ////this.sortDirection = new ReactiveVar();
-    //this.setSortBy();
-    this.downClass = DOWNCLS;
-    this.upClass = UPCLS;
-  },
-  allowedSortValues() {
-    const types = [];
-    const pushed = {};
-    ReactiveCache.getCurrentUser()
-      .getListSortTypes()
-      .forEach(type => {
-        const key = type.replace(/^-/, '');
-        if (pushed[key] === undefined) {
-          types.push({
-            name: key,
-            label: `list-label-${key}`,
-            shortLabel: `list-label-short-${key}`,
-          });
-          pushed[key] = 1;
-        }
-      });
-    return types;
-  },
-  Direction() {
-    return ReactiveCache.getCurrentUser().getListSortByDirection() === -1
-      ? this.downClass
-      : this.upClass;
-  },
-  sortby() {
-    return ReactiveCache.getCurrentUser().getListSortBy();
-  },
-
-  setSortBy(type = null) {
-    const user = ReactiveCache.getCurrentUser();
-    if (type === null) {
-      type = user._getListSortBy();
-    } else {
-      let value = '';
-      if (type.map) {
-        // is an array
-        value = (type[1] === -1 ? '-' : '') + type[0];
-      }
-      Meteor.call('setListSortBy', value);
-    }
-    //this.sortBy.set(type[0]);
-    //this.sortDirection.set(type[1]);
+    return this.currentData() === this.watchLevel();
   },
 
   events() {
-    return [
-      {
-        'click .js-sort-by'(evt) {
-          evt.preventDefault();
-          const target = evt.target;
-          const sortby = target.getAttribute('name');
-          const down = !!target.querySelector(`.${this.upClass}`);
-          const direction = down ? -1 : 1;
-          this.setSortBy([sortby, direction]);
-          if (Utils.isMiniScreen) {
-            Popup.back();
-          }
-        },
+    return [{
+      'click .js-select-watch'() {
+        const level = this.currentData();
+        Meteor.call('watch', 'board', Session.get('currentBoard'), level, (err, ret) => {
+          if (!err && ret) Popup.close();
+        });
       },
-    ];
+    }];
   },
-// }.register('listsortPopup');
-*/
-
-Template.cardsSortPopup.events({
-  'click .js-sort-due'() {
-    const sortBy = {
-      dueAt: 1,
-    };
-    Session.set('sortBy', sortBy);
-    sortCardsBy.set(TAPi18n.__('due-date'));
-    Popup.back();
-  },
-  'click .js-sort-title'() {
-    const sortBy = {
-      title: 1,
-    };
-    Session.set('sortBy', sortBy);
-    sortCardsBy.set(TAPi18n.__('title'));
-    Popup.back();
-  },
-  'click .js-sort-created-asc'() {
-    const sortBy = {
-      createdAt: 1,
-    };
-    Session.set('sortBy', sortBy);
-    sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
-    Popup.back();
-  },
-  'click .js-sort-created-desc'() {
-    const sortBy = {
-      createdAt: -1,
-    };
-    Session.set('sortBy', sortBy);
-    sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
-    Popup.back();
-  },
-});
+}).register('boardChangeWatchPopup');

client/components/boards/boardHeader.styl

@@ -0,0 +1,22 @@
+.integration-form
+  padding: 5px
+  border-bottom: 1px solid #ccc
+
+.flex
+  display: -webkit-box
+  display: -moz-box
+  display: -webkit-flex
+  display: -moz-flex
+  display: -ms-flexbox
+  display: flex
+
+.option
+  @extends .flex
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  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;

client/components/boards/boardsList.jade

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

client/components/boards/boardsList.styl

@@ -0,0 +1,197 @@
+@import 'nib'
+
+$spaceBetweenTiles = 16px
+
+.board-list
+  margin: 0 ($spaceBetweenTiles/2)
+
+  li
+    float: left
+    width: 25%
+    box-sizing: border-box
+    position: relative
+
+    &.starred
+      .fa-star,
+      .fa-star-o
+        opacity: 1
+
+  .board-list-item
+    overflow: hidden;
+    background-color: #999
+    color: #f6f6f6
+    height: 90px
+    font-size: 16px
+    line-height: 22px
+    border-radius: 3px
+    display: block
+    font-weight: 700
+    min-height: 18px
+    padding: 8px
+    margin: ($spaceBetweenTiles/2)
+    position: relative
+    text-decoration: none
+
+    &.tile
+      background-size: auto
+      background-repeat: repeat
+
+  .board-list-item-sub-name
+    color: rgba(255, 255, 255, .5)
+    display: block
+    font-size: 14px
+    font-weight: 400
+    line-height: 22px
+
+  .board-list-item-desc
+    color: #fff
+    display: block
+    font-size: 14px
+    font-weight: 400
+    line-height: 18px
+
+  .js-add-board
+    text-align:center
+
+    .label
+      font-weight: normal
+      line-height:90px
+
+    :hover
+      background-color:#939393
+
+  .fa-star,
+  .fa-star-o
+    bottom: 0
+    font-size: 14px
+    height: 18px
+    line-height: 18px
+    opacity: 0
+    padding: 9px 9px
+    position: absolute
+    right: 0
+    top: 0
+    transition-duration: .15s
+    transition-property: color, font-size, background
+
+  .fa-circle
+    bottom: 0;
+    font-size: 10px;
+    height: 10px;
+    line-height: 10px;
+    padding: 9px 9px;
+    position: absolute;
+    right: 0;
+    transition-duration: .15s
+    transition-property: color, font-size, background
+
+  .has-overtime-card-active
+    color: #eb4646 !important
+
+  .no-overtime-card-active
+    color: #3cb500 !important
+
+  .is-star-active
+    color: white
+
+  .fa-clone
+    position: absolute;
+    bottom: 0
+    font-size: 14px
+    height: 18px
+    line-height: 18px
+    opacity: 0
+    right: 0
+    padding: 9px 9px
+    transition-duration: .15s
+    transition-property: color, font-size, background
+
+  .fa-archive
+    position: absolute;
+    bottom: 0
+    font-size: 14px
+    height: 18px
+    line-height: 18px
+    opacity: 0
+    left: 0
+    padding: 9px 9px
+    transition-duration: .15s
+    transition-property: color, font-size, background
+
+  li:hover a
+    &:hover
+      .fa-star,
+      .fa-clone,
+      .fa-archive,
+      .fa-star-o
+        color: white
+
+    .fa-star,
+    .fa-clone,
+    .fa-archive,
+    .fa-star-o
+      color: white
+      opacity: .75
+
+      &:hover
+        font-size: 18px
+        opacity: 1
+
+      &.is-star-active
+        opacity: 1
+
+.board-backgrounds-list
+
+  .board-background-select
+    box-sizing: border-box
+    display: block
+    float: left
+    width: 50%
+    padding-top: 12px
+    position: relative
+    z-index: 1
+
+    &:nth-child(-n + 2)
+      padding-top: 0
+
+    &:nth-child(2n)
+      padding-left: 6px
+
+    &:nth-child(2n+1)
+      padding-right: 6px
+
+    .background-box
+      border-radius: 3px
+      background-size: cover
+      display: block
+      height: 74px
+      position: relative
+      width: 100%
+      cursor: pointer
+      display: flex
+      align-items: center
+      justify-content: center
+
+      i.fa-check
+        font-size: 25px
+        color: white
+
+@media screen and (max-width: 800px)
+  .board-list
+    height: 100%
+    overflow: scroll
+
+    li
+      width: 33.3%
+
+    .board-list-item
+      overflow: hidden
+
+    .board-list-item-sub-name
+      position: relative
+      top: -100px
+      left: -100px
+
+@media screen and (max-width: 360px)
+    li
+      width: 50%

client/components/boards/calendarView.css

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

client/components/boards/miniboard.jade

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

client/components/boards/originalPositionsView.css

@@ -1,263 +0,0 @@
-/* Original Positions View Styles */
-.original-positions-view {
-  margin: 10px 0;
-  padding: 15px;
-  background-color: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 6px;
-}
-
-.original-positions-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 15px;
-}
-
-.original-positions-header .btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.original-positions-content {
-  background-color: white;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  padding: 15px;
-}
-
-.original-positions-loading {
-  text-align: center;
-  padding: 20px;
-  color: #6c757d;
-  font-style: italic;
-}
-
-.original-positions-loading i {
-  margin-right: 8px;
-}
-
-.original-positions-filters {
-  margin-bottom: 20px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #dee2e6;
-}
-
-.original-positions-filters .btn-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-
-.original-positions-filters .btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  white-space: nowrap;
-}
-
-.original-positions-list {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.original-position-item {
-  background-color: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 4px;
-  margin-bottom: 10px;
-  padding: 12px;
-  transition: all 0.2s ease;
-}
-
-.original-position-item:hover {
-  background-color: #e9ecef;
-  border-color: #ced4da;
-}
-
-.original-position-item:last-child {
-  margin-bottom: 0;
-}
-
-.original-position-item-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-weight: 600;
-  color: #495057;
-}
-
-.original-position-item-header i {
-  color: #6c757d;
-  width: 16px;
-  text-align: center;
-}
-
-.entity-type {
-  background-color: #007bff;
-  color: white;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-}
-
-.entity-name {
-  color: #212529;
-  font-weight: 600;
-}
-
-.entity-id {
-  color: #6c757d;
-  font-size: 11px;
-  font-family: monospace;
-}
-
-.original-position-item-details {
-  margin-left: 24px;
-}
-
-.original-position-description {
-  color: #495057;
-  margin-bottom: 6px;
-  font-size: 13px;
-}
-
-.original-title {
-  color: #6c757d;
-  font-size: 12px;
-  margin-bottom: 6px;
-  padding: 4px 6px;
-  background-color: #e9ecef;
-  border-radius: 3px;
-}
-
-.original-title strong {
-  color: #495057;
-}
-
-.original-position-date {
-  color: #6c757d;
-  font-size: 11px;
-}
-
-.no-original-positions {
-  text-align: center;
-  padding: 40px 20px;
-  color: #6c757d;
-  font-style: italic;
-}
-
-.no-original-positions i {
-  font-size: 24px;
-  margin-bottom: 10px;
-  display: block;
-  color: #adb5bd;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .original-positions-view {
-    margin: 5px 0;
-    padding: 10px;
-  }
-
-  .original-positions-header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-  }
-
-  .original-positions-header .btn {
-    justify-content: center;
-  }
-
-  .original-positions-filters .btn-group {
-    justify-content: center;
-  }
-
-  .original-position-item-header {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .entity-name {
-    flex: 1;
-    min-width: 0;
-    word-break: break-word;
-  }
-
-  .original-position-item-details {
-    margin-left: 0;
-    margin-top: 8px;
-  }
-}
-
-/* Dark theme support */
-@media (prefers-color-scheme: dark) {
-  .original-positions-view {
-    background-color: #2d3748;
-    border-color: #4a5568;
-    color: #e2e8f0;
-  }
-
-  .original-positions-content {
-    background-color: #1a202c;
-    border-color: #4a5568;
-  }
-
-  .original-position-item {
-    background-color: #2d3748;
-    border-color: #4a5568;
-    color: #e2e8f0;
-  }
-
-  .original-position-item:hover {
-    background-color: #4a5568;
-    border-color: #718096;
-  }
-
-  .original-position-item-header {
-    color: #e2e8f0;
-  }
-
-  .original-position-item-header i {
-    color: #a0aec0;
-  }
-
-  .entity-name {
-    color: #e2e8f0;
-  }
-
-  .entity-id {
-    color: #a0aec0;
-  }
-
-  .original-position-description {
-    color: #e2e8f0;
-  }
-
-  .original-title {
-    background-color: #4a5568;
-    color: #a0aec0;
-  }
-
-  .original-title strong {
-    color: #e2e8f0;
-  }
-
-  .original-position-date {
-    color: #a0aec0;
-  }
-
-  .no-original-positions {
-    color: #a0aec0;
-  }
-
-  .no-original-positions i {
-    color: #718096;
-  }
-}

client/components/boards/originalPositionsView.jade

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

client/components/boards/originalPositionsView.js

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

client/components/cards/attachments.css

@@ -1,374 +0,0 @@
-.hidden {
-  display: none;
-}
-.attachment-upload {
-  text-align: center;
-  font-weight: bold;
-}
-.attachment-gallery {
-  display: flex;
-  flex-direction: column;
-}
-.attachment-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: 16px;
-}
-.attachment-item:hover {
-  background: #e0e0e0;
-}
-.attachment-thumbnail-container {
-  display: block;
-  width: 150px;
-  min-width: 150px;
-  max-height: 150px;
-  padding-right: 16px;
-}
-.attachment-thumbnail {
-  max-width: 150px;
-  max-height: 150px;
-  min-height: 2em;
-  cursor: pointer;
-}
-.attachment-thumbnail-text {
-  min-height: 2em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-  cursor: pointer;
-  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 */
-}
-.attachment-actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.attachment-actions a {
-  margin-left: 16px;
-}
-.attachment-actions a:first-child {
-  margin-left: 0;
-}
-.add-attachment {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed #555;
-  border-radius: 5px;
-  padding: 10px;
-  cursor: pointer;
-  margin-top: 16px;
-}
-.icon {
-  font-size: 1.5em;
-  cursor: pointer;
-  margin-left: 10px;
-}
-.icon:hover {
-  color: #666;
-}
-#viewer-overlay {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999 !important;
-  background: rgba(13, 13, 13, 0.95);
-}
-#viewer-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 100%;
-}
-#viewer-top-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  padding: 16px;
-}
-#attachment-name {
-  color: white;
-  font-size: 1.5em;
-  max-width: calc(
-    100% - 50px
-  ); /* Make sure the name does not overlap the close button */
-}
-#viewer-close {
-  color: white;
-  cursor: pointer;
-  font-size: 4em;
-  position: absolute;
-  right: 50px;
-  top: 16px;
-}
-
-/* Upload progress indicators for drag-and-drop uploads */
-.minicard-upload-progress,
-.card-details-upload-progress {
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 4px;
-  padding: 12px;
-  margin: 8px 0;
-  font-size: 14px;
-}
-
-.upload-progress-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  font-weight: bold;
-  color: #495057;
-}
-
-.upload-progress-header i {
-  margin-right: 8px;
-  color: #007bff;
-}
-
-.upload-progress-item {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 8px;
-  padding: 8px;
-  background: white;
-  border-radius: 3px;
-  border: 1px solid #dee2e6;
-}
-
-.upload-progress-item.upload-error {
-  border-color: #dc3545;
-  background: #f8d7da;
-}
-
-.upload-progress-filename {
-  font-weight: 500;
-  margin-bottom: 4px;
-  color: #495057;
-  word-break: break-all;
-}
-
-.upload-progress-bar {
-  width: 100%;
-  height: 6px;
-  background: #e9ecef;
-  border-radius: 3px;
-  overflow: hidden;
-  margin-bottom: 4px;
-}
-
-.upload-progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #007bff, #0056b3);
-  transition: width 0.3s ease;
-  border-radius: 3px;
-}
-
-.upload-progress-item.upload-error .upload-progress-fill {
-  background: #dc3545;
-}
-
-.upload-progress-error,
-.upload-progress-success {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.upload-progress-error {
-  color: #dc3545;
-}
-
-.upload-progress-success {
-  color: #28a745;
-}
-
-.upload-progress-error i,
-.upload-progress-success i {
-  margin-right: 4px;
-}
-
-/* Minicard specific styles */
-.minicard-upload-progress {
-  margin: 4px 0;
-  padding: 8px;
-  font-size: 12px;
-}
-
-.minicard-upload-progress .upload-progress-item {
-  padding: 6px;
-  margin-bottom: 6px;
-}
-
-.minicard-upload-progress .upload-progress-filename {
-  font-size: 11px;
-}
-
-/* Card details specific styles */
-.card-details-upload-progress {
-  margin: 12px 0;
-  padding: 16px;
-}
-
-.card-details-upload-progress .upload-progress-header {
-  font-size: 16px;
-  margin-bottom: 12px;
-}
-
-.card-details-upload-progress .upload-progress-item {
-  padding: 12px;
-  margin-bottom: 10px;
-}
-
-.card-details-upload-progress .upload-progress-filename {
-  font-size: 14px;
-}
-
-/* Drag over state for minicards */
-.minicard.is-dragging-over {
-  border: 2px dashed #007bff !important;
-  background: rgba(0, 123, 255, 0.1) !important;
-}
-
-/* Drag over state for card details */
-.js-card-details.is-dragging-over {
-  border: 2px dashed #007bff !important;
-  background: rgba(0, 123, 255, 0.05) !important;
-}
-.attachment-arrow {
-  font-size: 4em;
-  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;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: calc(100% - 50px);
-}
-#image-viewer {
-  background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% /
-    20px 20px; /* Checkerboard background for transparent images */
-  max-width: 100%;
-  max-height: 100%;
-}
-#video-viewer {
-  max-width: 100%;
-  max-height: 100%;
-}
-#audio-viewer {
-  max-width: 100%;
-}
-#pdf-viewer {
-  width: 40vw;
-  height: 100%;
-}
-#txt-viewer {
-  background-color: white;
-  width: 40vw;
-  height: 100%;
-}
-.pdf-preview-error {
-  margin-top: 20vh;
-  display: block;
-  font-size: 2em;
-  color: white;
-}
-
-@media screen and (max-width: 1600px) {
-  #pdf-viewer {
-    width: 60vw;
-  }
-}
-
-@media screen and (max-width: 800px) {
-  #viewer-container {
-    display: block;
-  }
-  .attachment-arrow {
-    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%;
-    height: calc(
-      100vh - 155px
-    ); /* Full height - height of top and bottom bars */
-  }
-  #txt-viewer {
-    width: 100%;
-    height: calc(
-      100vh - 155px
-    ); /* Full height - height of top and bottom bars */
-  }
-  #audio-viewer {
-    margin-top: 20%;
-    width: 100%;
-  }
-  .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

@@ -1,148 +1,53 @@
 template(name="cardAttachmentsPopup")
-  if $gt uploads.length 0
-    .attachment-upload {{_ 'uploading'}}
-      table
-        tr
-          th.upload-file-name-descr {{_ 'name'}}
-          th.upload-progress-descr {{_ 'progress'}}
-          th.upload-remaining-descr {{_ 'remaining_time'}}
-          th.upload-speed-descr {{_ 'speed'}}
-        each upload in uploads
-          tr
-            td.upload-file-name-value {{upload.file.name}}
-            td.upload-progress-value {{upload.progress.get}}%
-            td.upload-remaining-value {{getEstimateTime upload}}
-            td.upload-speed-value {{getEstimateSpeed upload}}
-  else
-    ul.pop-over-list
-      li
-        input.js-attach-file.hide(type="file" name="file" multiple)
-        a.js-computer-upload {{_ 'computer'}}
-      li
-        a.js-upload-clipboard-image {{_ 'clipboard'}}
+  ul.pop-over-list
+    li
+      input.js-attach-file.hide(type="file" name="file" multiple)
+      a.js-computer-upload {{_ 'computer'}}
+    li
+      a.js-upload-clipboard-image {{_ 'clipboard'}}
 
 template(name="previewClipboardImagePopup")
   p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}}
   img.preview-clipboard-image()
   button.primary.js-upload-pasted-image {{_ 'upload'}}
 
+template(name="previewAttachedImagePopup")
+  img.preview-large-image.js-large-image-clicked(src="{{url}}")
+
 template(name="attachmentDeletePopup")
   p {{_ "attachment-delete-pop"}}
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
-template(name="attachmentViewer")
-  #viewer-overlay.hidden
-    #viewer-top-bar
-      span#attachment-name
-      a#viewer-close
-        i.fa.fa-times-thin
-
-    #viewer-container
-      i.fa.fa-caret-left#prev-attachment
-      #viewer-content
-        img#image-viewer.hidden
-        video#video-viewer.hidden(controls="true")
-        audio#audio-viewer.hidden(controls="true")
-        object#pdf-viewer.hidden(type="application/pdf")
-          span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
-        object#txt-viewer.hidden(type="text/plain")
-      i.fa.fa-caret-right#next-attachment
-
-template(name="attachmentGallery")
-
-  .attachment-gallery
-
-    if canModifyCard
-      a.attachment-item.add-attachment.js-add-attachment
-        i.fa.fa-plus
-
+template(name="attachmentsGalery")
+  .attachments-galery
     each attachments
-
-      .attachment-item(class="{{#if isAttachmentMigrating _id}}migrating{{/if}}")
-        .attachment-thumbnail-container.open-preview(data-attachment-id="{{_id}}" data-card-id="{{ meta.cardId }}")
-          if link
-            if(isImage)
-              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}")
-            else if($eq extension 'svg')
-              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml")
-            else if($eq extension 'mp3')
-              video.attachment-thumbnail(title="{{sanitize name}}")
-                source(src="{{link}}" type="audio/mpeg")
-            else if($eq extension 'ogg')
-              video.attachment-thumbnail(title="{{sanitize name}}")
-                source(src="{{link}}" type="video/ogg")
-            else if($eq extension 'webm')
-              video.attachment-thumbnail(title="{{sanitize name}}")
-                source(src="{{link}}" type="video/webm")
-            else if($eq extension 'mp4')
-              video.attachment-thumbnail(title="{{sanitize name}}")
-                source(src="{{link}}" type="video/mp4")
+      .attachment-item
+        a.attachment-thumbnail.swipebox(href="{{url}}" title="{{name}}")
+          if isUploaded
+            if isImage
+              img.attachment-thumbnail-img(src="{{url}}")
             else
-              span.attachment-thumbnail-text= extension
+              span.attachment-thumbnail-ext= extension
+          else
+            +spinner
+        p.attachment-details
+          = name
+          span.attachment-details-actions
+            a.js-download(href="{{url download=true}}")
+              i.fa.fa-download
+              | {{_ 'download'}}
+            if currentUser.isBoardMember
+              if isImage
+                a(class="{{#if $eq ../coverId _id}}js-remove-cover{{else}}js-add-cover{{/if}}")
+                  i.fa.fa-thumb-tack
+                  if($eq ../coverId _id)
+                    | {{_ 'remove-cover'}}
+                  else
+                    | {{_ 'add-cover'}}
+              a.js-confirm-delete
+                i.fa.fa-close
+                | {{_ 'delete'}}
 
-        .attachment-details-container
-          .attachment-details
-            div
-              b
-                = name
-              span.file-size ({{fileSize size}})
-            if uploaderName
-              div.attachment-uploader {{uploaderName}}
-            if uploadedAt
-              div.attachment-uploaded-at {{uploadedAt}}
-            .attachment-actions
-              a.js-download(href="{{link}}?download=true", download="{{name}}", title="{{_ 'download'}}")
-                i.fa.fa-arrow-down
-              if currentUser.isBoardMember
-                unless currentUser.isCommentOnly
-                  unless currentUser.isWorker
-                    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-picture-o
-          | {{#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}}")
-            i.fa.fa-picture-o
-            if isBackgroundImage
-              | {{_ 'remove-background-image'}}
-            else
-              | {{_ 'add-background-image'}}
-
-        if $neq versions.original.storage "fs"
-          a.js-move-storage-fs
-            i.fa.fa-arrow-right
-            | {{_ 'attachment-move-storage-fs'}}
-
-        if $neq versions.original.storage "gridfs"
-          if versions.original.storage
-            a.js-move-storage-gridfs
-              i.fa.fa-arrow-right
-              | {{_ 'attachment-move-storage-gridfs'}}
-
-        if $neq versions.original.storage "s3"
-          if versions.original.storage
-            a.js-move-storage-s3
-              i.fa.fa-arrow-right
-              | {{_ 'attachment-move-storage-s3'}}
-
-template(name="attachmentRenamePopup")
-  input.js-edit-attachment-name(type='text' autofocus value="{{getNameWithoutExtension}}" dir="auto")
-  .edit-controls.clearfix
-    button.primary.confirm.js-submit-edit-attachment-name(type="submit") {{_ 'save'}}
+    if currentUser.isBoardMember
+      li.attachment-item.add-attachment
+        a.js-add-attachment {{_ 'add-attachment' }}

client/components/cards/attachments.js

@@ -1,609 +1,134 @@
-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';
-import Attachments from '/models/attachments';
-import { Utils } from '/client/lib/utils';
-import { formatDateTime } from '/imports/lib/dateUtils';
-
-const { filesize } = require('filesize');
-import prettyMilliseconds from 'pretty-ms';
-
-// We store current card ID and the ID of currently opened attachment in a
-// global var. This is used so that we know what's the next attachment to open
-// when the user clicks on the prev/next button in the attachment viewer.
-let cardId = null;
-let openAttachmentId = null;
-
-// Used to store the start and end coordinates of a touch event for attachment swiping
-let touchStartCoords = null;
-let touchEndCoords = null;
-
-// Stores link to the attachment for which attachment actions popup was opened
-let attachmentActionsLink = null;
-
-Template.attachmentGallery.events({
-  'click .open-preview'(event) {
-
-    openAttachmentId = $(event.currentTarget).attr("data-attachment-id");
-    cardId = $(event.currentTarget).attr("data-card-id");
-
-    openAttachmentViewer(openAttachmentId);
-  },
+Template.attachmentsGalery.events({
   'click .js-add-attachment': Popup.open('cardAttachments'),
+  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete',
+    function() {
+      Attachments.remove(this._id);
+      Popup.close();
+    }
+  ),
   // If we let this event bubble, FlowRouter will handle it and empty the page
   // content, see #101.
   'click .js-download'(event) {
     event.stopPropagation();
   },
-  'click .js-open-attachment-menu': Popup.open('attachmentActions'),
-  'mouseover .js-open-attachment-menu'(event) { // For some reason I cannot combine handlers for "click .js-open-attachment-menu" and "mouseover .js-open-attachment-menu" events so this is a quick workaround.
-    attachmentActionsLink = event.currentTarget.getAttribute("data-attachment-link");
+  'click .js-add-cover'() {
+    Cards.findOne(this.cardId).setCover(this._id);
   },
-  'click .js-rename': Popup.open('attachmentRename'),
-  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', async function() {
-      await Attachments.removeAsync(this._id);
-      Popup.back();
-  }),
-});
-
-function getNextAttachmentId(currentAttachmentId, offset = 0) {
-    const attachments = ReactiveCache.getAttachments({'meta.cardId': cardId});
-
-  let i = 0;
-  for (; i < attachments.length; i++) {
-    if (attachments[i]._id === currentAttachmentId) {
-      break;
-    }
-  }
-  return attachments[(i + offset + 1 + attachments.length) % attachments.length]._id;
-}
-
-function getPrevAttachmentId(currentAttachmentId, offset = 0) {
-  const attachments = ReactiveCache.getAttachments({'meta.cardId': cardId});
-
-  let i = 0;
-  for (; i < attachments.length; i++) {
-    if (attachments[i]._id === currentAttachmentId) {
-      break;
-    }
-  }
-  return attachments[(i + offset - 1 + attachments.length) % attachments.length]._id;
-}
-
-function attachmentCanBeOpened(attachment) {
-  return (
-    attachment.isImage ||
-    attachment.isPDF ||
-    attachment.isText ||
-    attachment.isJSON ||
-    attachment.isVideo ||
-    attachment.isAudio
-  );
-}
-
-function openAttachmentViewer(attachmentId) {
-  const attachment = ReactiveCache.getAttachment(attachmentId);
-
-  // Check if we can open the attachment (if we have a viewer for it) and exit if not
-  if (!attachmentCanBeOpened(attachment)) {
-    return;
-  }
-
-  /*
-  Instructions for adding a new viewer:
-    - add a new case to the switch statement below
-    - implement cleanup in the closeAttachmentViewer() function, if necessary
-    - mark attachment type as openable by adding a new condition to the attachmentCanBeOpened function
-  */
-  switch(true){
-    case (attachment.isImage):
-      $("#image-viewer").attr("src", attachment.link());
-      $("#image-viewer").removeClass("hidden");
-      break;
-    case (attachment.isPDF):
-      $("#pdf-viewer").attr("data", attachment.link());
-      $("#pdf-viewer").removeClass("hidden");
-      break;
-    case (attachment.isVideo):
-      // We have to create a new <source> DOM element and append it to the video
-      // element, otherwise the video won't load
-      let videoSource = document.createElement('source');
-      videoSource.setAttribute('src', attachment.link());
-      $("#video-viewer").append(videoSource);
-
-      $("#video-viewer").removeClass("hidden");
-      break;
-    case (attachment.isAudio):
-      // We have to create a new <source> DOM element and append it to the audio
-      // element, otherwise the audio won't load
-      let audioSource = document.createElement('source');
-      audioSource.setAttribute('src', attachment.link());
-      $("#audio-viewer").append(audioSource);
-
-      $("#audio-viewer").removeClass("hidden");
-      break;
-    case (attachment.isText):
-    case (attachment.isJSON):
-      $("#txt-viewer").attr("data", attachment.link());
-      $("#txt-viewer").removeClass("hidden");
-      break;
-  }
-
-  $('#attachment-name').text(attachment.name);
-  $('#viewer-overlay').removeClass('hidden');
-}
-
-function closeAttachmentViewer() {
-  $("#viewer-overlay").addClass("hidden");
-
-  // We need to reset the viewers to avoid showing previous attachments
-  $("#image-viewer").attr("src", "");
-  $("#image-viewer").addClass("hidden");
-
-  $("#pdf-viewer").attr("data", "");
-  $("#pdf-viewer").addClass("hidden");
-
-  $("#txt-viewer").attr("data", "");
-  $("#txt-viewer").addClass("hidden");
-
-  $("#video-viewer").get(0).pause(); // Stop playback
-  $("#video-viewer").get(0).currentTime = 0;
-  $("#video-viewer").empty();
-  $("#video-viewer").addClass("hidden");
-
-  $("#audio-viewer").get(0).pause(); // Stop playback
-  $("#audio-viewer").get(0).currentTime = 0;
-  $("#audio-viewer").empty();
-  $("#audio-viewer").addClass("hidden");
-}
-
-function openNextAttachment() {
-  closeAttachmentViewer();
-
-    let i = 0;
-    // Find an attachment that can be opened
-    while (true) {
-      const id = getNextAttachmentId(openAttachmentId, i);
-      const attachment = ReactiveCache.getAttachment(id);
-      if (attachmentCanBeOpened(attachment)) {
-        openAttachmentId = id;
-        openAttachmentViewer(id);
-        break;
+  'click .js-remove-cover'() {
+    Cards.findOne(this.cardId).unsetCover();
+  },
+  'click .js-preview-image'(evt) {
+    Popup.open('previewAttachedImage').call(this, evt);
+    // when multiple thumbnails, if click one then another very fast,
+    // we might get a wrong width from previous img.
+    // when popup reused, onRendered() won't be called, so we cannot get there.
+    // here make sure to get correct size when this img fully loaded.
+    const img = $('img.preview-large-image')[0];
+    if (!img) return;
+    const rePosPopup = () => {
+      const w = img.width;
+      const h = img.height;
+      // if the image is too large, we resize & center the popup.
+      if (w > 300) {
+        $('div.pop-over').css({
+          width: (w + 20),
+          position: 'absolute',
+          left: (window.innerWidth - w)/2,
+          top: (window.innerHeight - h)/2,
+        });
       }
-      i++;
-    }
-}
-
-function openPrevAttachment() {
-  closeAttachmentViewer();
-
-    let i = 0;
-    // Find an attachment that can be opened
-    while (true) {
-      const id = getPrevAttachmentId(openAttachmentId, i);
-      const attachment = ReactiveCache.getAttachment(id);
-      if (attachmentCanBeOpened(attachment)) {
-        openAttachmentId = id;
-        openAttachmentViewer(id);
-        break;
-      }
-      i--;
-    }
-}
-
-function processTouch(){
-
-  xDist = touchEndCoords.x - touchStartCoords.x;
-  yDist = touchEndCoords.y - touchStartCoords.y;
-
-  // Left swipe
-  if (Math.abs(xDist) > Math.abs(yDist) && xDist < 0) {
-    openNextAttachment();
-  }
-
-  // Right swipe
-  if (Math.abs(xDist) > Math.abs(yDist) && xDist > 0) {
-    openPrevAttachment();
-  }
-
-  // Up swipe
-  if (Math.abs(yDist) > Math.abs(xDist) && yDist < 0) {
-    closeAttachmentViewer();
-  }
-
-}
-
-Template.attachmentViewer.events({
-  'touchstart #viewer-container'(event) {
-    touchStartCoords = {
-      x: event.changedTouches[0].screenX,
-      y: event.changedTouches[0].screenY
-    }
-  },
-  'touchend #viewer-container'(event) {
-    touchEndCoords = {
-      x: event.changedTouches[0].screenX,
-      y: event.changedTouches[0].screenY
-    }
-    processTouch();
-  },
-  'click #viewer-container'(event) {
-
-    // Make sure the click was on #viewer-container and not on any of its children
-    if(event.target !== event.currentTarget) {
-      event.stopPropagation();
-      return;
-    }
-
-    closeAttachmentViewer();
-  },
-  'click #viewer-content'(event) {
-
-    // Make sure the click was on #viewer-content and not on any of its children
-    if(event.target !== event.currentTarget) {
-      event.stopPropagation();
-      return;
-    }
-
-    closeAttachmentViewer();
-  },
-  'click #viewer-close'() {
-    closeAttachmentViewer();
-  },
-  'click #next-attachment'() {
-    openNextAttachment();
-  },
-  'click #prev-attachment'() {
-    openPrevAttachment();
+    };
+    const url = $(evt.currentTarget).attr('src');
+    if (img.src === url && img.complete)
+      rePosPopup();
+    else
+      img.onload = rePosPopup;
   },
 });
 
-Template.attachmentGallery.helpers({
-  isBoardAdmin() {
-    return ReactiveCache.getCurrentUser().isBoardAdmin();
+Template.previewAttachedImagePopup.events({
+  'click .js-large-image-clicked'(){
+    Popup.close();
   },
-  fileSize(size) {
-    const ret = filesize(size);
-    return ret;
-  },
-  sanitize(value) {
-    return sanitizeHTML(value);
-  },
-  uploaderName() {
-    const uploaderId = this.userId;
-    if (!uploaderId) return '';
-    const uploader = ReactiveCache.getUser(uploaderId);
-    if (!uploader) return '';
-    return uploader.profile && uploader.profile.fullname
-      ? uploader.profile.fullname
-      : uploader.username || '';
-  },
-  uploadedAt() {
-    if (this.uploadedAtOstrio) {
-      return formatDateTime(this.uploadedAtOstrio);
-    }
-    // Fall back to ObjectId timestamp (first 4 bytes = Unix seconds)
-    try {
-      const ts = parseInt(this._id.substring(0, 8), 16) * 1000;
-      if (!isNaN(ts)) return formatDateTime(new Date(ts));
-    } catch (_) {}
-    return '';
-  },
-});
-
-Template.cardAttachmentsPopup.onCreated(function() {
-  this.uploads = new ReactiveVar([]);
-});
-
-Template.cardAttachmentsPopup.helpers({
-  getEstimateTime(upload) {
-    const ret = prettyMilliseconds(upload.estimateTime.get());
-    return ret;
-  },
-  getEstimateSpeed(upload) {
-    const ret = filesize(upload.estimateSpeed.get(), {round: 0}) + "/s";
-    return ret;
-  },
-  uploads() {
-    return Template.instance().uploads.get();
-  }
 });
 
 Template.cardAttachmentsPopup.events({
-  async 'change .js-attach-file'(event, templateInstance) {
+  'change .js-attach-file'(evt) {
     const card = this;
-    const files = event.currentTarget.files;
-    if (files) {
-      let uploads = [];
-      const uploaders = await handleFileUpload(card, files);
+    FS.Utility.eachFile(evt, (f) => {
+      const file = new FS.File(f);
+      if (card.isLinkedCard()) {
+        file.boardId = Cards.findOne(card.linkedId).boardId;
+        file.cardId = card.linkedId;
+      } else {
+        file.boardId = card.boardId;
+        file.swimlaneId = card.swimlaneId;
+        file.listId = card.listId;
+        file.cardId = card._id;
+      }
+      file.userId = Meteor.userId();
 
-      uploaders.forEach(uploader => {
-        uploader.on('start', function() {
-          uploads.push(this);
-          templateInstance.uploads.set(uploads);
-        });
-        uploader.on('end', (error, fileRef) => {
-          uploads = uploads.filter(_upload => _upload.config.fileId != fileRef._id);
-          templateInstance.uploads.set(uploads);
-          if (uploads.length == 0 ) {
-            Popup.back();
-          }
-        });
-      });
-    }
+      const attachment = Attachments.insert(file);
+
+      if (attachment && attachment._id && attachment.isImage()) {
+        card.setCover(attachment._id);
+      }
+
+      Popup.close();
+    });
   },
-  'click .js-computer-upload'(event, templateInstance) {
-    templateInstance.find('.js-attach-file').click();
-    event.preventDefault();
+  'click .js-computer-upload'(evt, tpl) {
+    tpl.find('.js-attach-file').click();
+    evt.preventDefault();
   },
   'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'),
 });
 
-const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
-const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
 let pastedResults = null;
 
-// Shared upload logic for drag-and-drop functionality
-export async function handleFileUpload(card, files) {
-  if (!files || files.length === 0) {
-    return [];
-  }
-
-  // Check if board allows attachments
-  const board = card.board();
-  if (!board || !board.allowsAttachments) {
-    if (process.env.DEBUG === 'true') {
-      console.warn('Attachments not allowed on this board');
-    }
-    return [];
-  }
-
-  // Check if user can modify the card
-  if (!Utils.canModifyCard()) {
-    if (process.env.DEBUG === 'true') {
-      console.warn('User does not have permission to modify this card');
-    }
-    return [];
-  }
-
-  const uploads = [];
-
-  for (const file of files) {
-    // Basic file validation
-    if (!file || !file.name) {
-      if (process.env.DEBUG === 'true') {
-        console.warn('Invalid file object');
-      }
-      continue;
-    }
-
-    const fileId = new ObjectId().toString();
-    let fileName = sanitizeText(file.name);
-
-    // If sanitized filename is not same as original filename,
-    // it could be XSS that is already fixed with sanitize,
-    // or just normal mistake, so it is not a problem.
-    // That is why here is no warning.
-    if (fileName !== file.name) {
-      // If filename is empty, only in that case add some filename
-      if (fileName.length === 0) {
-        fileName = 'Empty-filename-after-sanitize.txt';
-      }
-    }
-
-    const config = {
-      file: file,
-      fileId: fileId,
-      fileName: fileName,
-      meta: Utils.getCommonAttachmentMetaFrom(card),
-      chunkSize: 'dynamic',
-    };
-    config.meta.fileId = fileId;
-
-    try {
-      const uploader = await Attachments.insertAsync(
-        config,
-        false,
-      );
-
-      // Add to progress manager for tracking
-      const uploadId = uploadProgressManager.addUpload(card._id, uploader, file);
-
-      uploader.on('uploaded', (error, fileRef) => {
-        if (!error) {
-          if (fileRef.isImage) {
-            card.setCover(fileRef._id);
-            if (process.env.DEBUG === 'true') {
-              console.log(`Set cover image for card ${card._id}: ${fileRef.name}`);
-            }
-          }
-        } else {
-          if (process.env.DEBUG === 'true') {
-            console.error('Upload error:', error);
-          }
-        }
-      });
-
-      uploader.on('error', (error) => {
-        if (process.env.DEBUG === 'true') {
-          console.error('Upload error:', error);
-        }
-      });
-
-      uploads.push(uploader);
-      uploader.start();
-    } catch (error) {
-      if (process.env.DEBUG === 'true') {
-        console.error('Failed to create uploader:', error);
-      }
-    }
-  }
-
-  return uploads;
-}
-
 Template.previewClipboardImagePopup.onRendered(() => {
   // we can paste image from clipboard
-  const handle = results => {
+  $(document.body).pasteImageReader((results) => {
     if (results.dataURL.startsWith('data:image/')) {
-      const direct = results => {
-        $('img.preview-clipboard-image').attr('src', results.dataURL);
-        pastedResults = results;
-      };
-      if (MAX_IMAGE_PIXEL) {
-        // if has size limitation on image we shrink it before uploading
-        Utils.shrinkImage({
-          dataurl: results.dataURL,
-          maxSize: MAX_IMAGE_PIXEL,
-          ratio: COMPRESS_RATIO,
-          callback(changed) {
-            if (changed !== false && !!changed) {
-              results.dataURL = changed;
-            }
-            direct(results);
-          },
-        });
-      } else {
-        direct(results);
-      }
+      $('img.preview-clipboard-image').attr('src', results.dataURL);
+      pastedResults = results;
     }
-  };
-
-  $(document.body).pasteImageReader(handle);
+  });
 
   // we can also drag & drop image file to it
-  $(document.body).dropImageReader(handle);
+  $(document.body).dropImageReader((results) => {
+    if (results.dataURL.startsWith('data:image/')) {
+      $('img.preview-clipboard-image').attr('src', results.dataURL);
+      pastedResults = results;
+    }
+  });
 });
 
 Template.previewClipboardImagePopup.events({
-  async 'click .js-upload-pasted-image'() {
-    const card = this;
-    if (pastedResults && pastedResults.file) {
-      const file = pastedResults.file;
-      window.oPasted = pastedResults;
-      const fileId = new ObjectId().toString();
-      const config = {
-        file,
-        fileId: fileId,
-        meta: Utils.getCommonAttachmentMetaFrom(card),
-        fileName: file.name || file.type.replace('image/', 'clipboard.'),
-        chunkSize: 'dynamic',
-      };
-      config.meta.fileId = fileId;
-      const uploader = await Attachments.insertAsync(
-        config,
-        false,
-      );
-      uploader.on('uploaded', (error, fileRef) => {
-        if (!error) {
-          if (fileRef.isImage) {
-            card.setCover(fileRef._id);
-          }
+  'click .js-upload-pasted-image'() {
+    const results = pastedResults;
+    if (results && results.file) {
+      const card = this;
+      const file = new FS.File(results.file);
+      if (!results.name) {
+        // if no filename, it's from clipboard. then we give it a name, with ext name from MIME type
+        if (typeof results.file.type === 'string') {
+          file.name(results.file.type.replace('image/', 'clipboard.'));
         }
-      });
-      uploader.on('end', (error, fileRef) => {
-        pastedResults = null;
-        $(document.body).pasteImageReader(() => {});
-        Popup.back();
-      });
-      uploader.start();
+      }
+      file.updatedAt(new Date());
+      file.boardId = card.boardId;
+      file.cardId = card._id;
+      file.userId = Meteor.userId();
+      const attachment = Attachments.insert(file);
+
+      if (attachment && attachment._id && attachment.isImage()) {
+        card.setCover(attachment._id);
+      }
+
+      pastedResults = null;
+      $(document.body).pasteImageReader(() => {});
+      Popup.close();
     }
   },
 });
-
-Template.attachmentActionsPopup.helpers({
-  isCover() {
-    const ret = ReactiveCache.getCard(this.meta.cardId).coverId == this._id;
-    return ret;
-  },
-  isBackgroundImage() {
-    //const currentBoard = Utils.getCurrentBoard();
-    //return currentBoard.backgroundImageURL === $(".attachment-thumbnail-img").attr("src");
-    return false;
-  },
-});
-
-Template.attachmentActionsPopup.events({
-  'click .js-add-cover'() {
-    ReactiveCache.getCard(this.meta.cardId).setCover(this._id);
-    Popup.back();
-  },
-  'click .js-remove-cover'() {
-    ReactiveCache.getCard(this.meta.cardId).unsetCover();
-    Popup.back();
-  },
-  'click .js-add-background-image'(event) {
-    const currentBoard = Utils.getCurrentBoard();
-    currentBoard.setBackgroundImageURL(attachmentActionsLink);
-    Utils.setBackgroundImage(attachmentActionsLink);
-    Popup.back();
-    event.preventDefault();
-  },
-  'click .js-remove-background-image'(event) {
-    const currentBoard = Utils.getCurrentBoard();
-    currentBoard.setBackgroundImageURL("");
-    Utils.setBackgroundImage("");
-    Popup.back();
-    Utils.reload();
-    event.preventDefault();
-  },
-  'click .js-move-storage-fs'() {
-    Meteor.call('moveAttachmentToStorage', this._id, "fs");
-    Popup.back();
-  },
-  'click .js-move-storage-gridfs'() {
-    Meteor.call('moveAttachmentToStorage', this._id, "gridfs");
-    Popup.back();
-  },
-  'click .js-move-storage-s3'() {
-    Meteor.call('moveAttachmentToStorage', this._id, "s3");
-    Popup.back();
-  },
-});
-
-Template.attachmentRenamePopup.helpers({
-  getNameWithoutExtension() {
-    const ret = this.name.replace(new RegExp("\." + this.extension + "$"), "");
-    return ret;
-  },
-});
-
-Template.attachmentRenamePopup.events({
-  'keydown input.js-edit-attachment-name'(evt, tpl) {
-    // enter = save
-    if (evt.keyCode === 13) {
-      tpl.find('button[type=submit]').click();
-    }
-  },
-  'click button.js-submit-edit-attachment-name'(event, tpl) {
-    // save button pressed
-    event.preventDefault();
-    const name = tpl.$('.js-edit-attachment-name')[0]
-      .value
-      .trim() + this.extensionWithDot;
-    if (name === sanitizeText(name)) {
-      Meteor.call('renameAttachment', this._id, name);
-    }
-    Popup.back();
-  },
-});
-
-// Template helpers for attachment migration status
-Template.registerHelper('attachmentMigrationStatus', function(attachmentId) {
-  return attachmentMigrationManager.getAttachmentMigrationStatus(attachmentId);
-});
-
-Template.registerHelper('isAttachmentMigrating', function(attachmentId) {
-  return attachmentMigrationManager.isAttachmentBeingMigrated(attachmentId);
-});
-
-Template.registerHelper('attachmentMigrationProgress', function() {
-  return attachmentMigrationManager.attachmentMigrationProgress.get();
-});
-
-Template.registerHelper('attachmentMigrationStatusText', function() {
-  return attachmentMigrationManager.attachmentMigrationStatus.get();
-});

client/components/cards/attachments.styl

@@ -0,0 +1,85 @@
+@import 'nib'
+
+.attachments-galery
+  display: flex
+  flex-wrap: wrap
+
+  .attachment-item
+    width: 33.33% - 2%
+    margin: 10px 1% 0
+    text-align: center
+    border-radius: 3px
+    overflow: hidden
+    background: darken(white, 7%)
+    min-height: 120px
+
+    &:hover
+      background: darken(white, 12%)
+
+    &.add-attachment
+      display: flex
+      align-items: center
+
+      a
+        display: block
+        margin: auto
+
+    .attachment-thumbnail
+      height: 80px
+      display: flex
+      align-items: center
+      justify-content: center
+      position: relative
+
+      .attachment-thumbnail-img
+        max-height: 100%
+        max-width: 100%
+
+      .attachment-thumbnail-ext
+        text-transform: uppercase
+        font-size: 1.6em
+
+    .attachment-details
+      font-size: 0.75em
+      margin: 3px
+
+      .attachment-details-actions a
+        display: block
+
+.attachment-image-preview
+  max-width: 100px
+  display: block
+  box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
+.preview-large-image
+  max-width: 1000px
+  display: block
+  box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
+.preview-clipboard-image
+  width: 280px
+  max-width: 100%;
+  height: 200px
+  display: block
+  border: 1px solid black
+  box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
+@media screen and (max-width: 800px)
+  .attachments-galery
+    flex-direction
+      row
+    .attachment-item
+      width: 50% - 2%
+
+      .attachment-thumbnail
+        height: 130px
+      .attachment-details
+        font-size: 1.1em
+
+@media screen and (max-width: 360px)
+  .attachments-galery
+    .attachment-item
+      width: 100%
+
+      .attachment-thumbnail
+        height: 200px

client/components/cards/cardCustomFields.jade

@@ -4,7 +4,8 @@ template(name="cardCustomFieldsPopup")
             li.item(class="")
                 a.name.js-select-field(href="#")
                     span.full-name
-                      = name
+                      +viewer
+                        = name
                     if hasCustomField
                       i.fa.fa-check
     hr
@@ -22,7 +23,7 @@ template(name="cardCustomField-text")
                 = value
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
+                a.fa.fa-times-thin.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -30,10 +31,6 @@ template(name="cardCustomField-text")
                         = value
                 else
                     | {{_ 'edit'}}
-    else
-      +viewer
-        = value
-
 
 template(name="cardCustomField-number")
     if canModifyCard
@@ -41,78 +38,23 @@ template(name="cardCustomField-number")
             input(type="number" value=data.value)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
+                a.fa.fa-times-thin.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
                     = value
                 else
                     | {{_ 'edit'}}
-    else
-        if value
-            = value
-
-template(name="cardCustomField-checkbox")
-  .js-checklist-item.checklist-item(class="{{#if data.value }}is-checked{{/if}}")
-    if canModifyCard
-      span.check-box-unicode
-        i.fa(class="{{#if data.value}}fa-check-square{{else}}fa-square-o{{/if}}")
-    else
-      span.check-box-unicode
-        i.fa(class="{{#if data.value}}fa-check-square{{else}}fa-square-o{{/if}}")
-
-template(name="cardCustomField-currency")
-    if canModifyCard
-        +inlinedForm(classNames="js-card-customfield-currency")
-            input(type="text" value=data.value autofocus)
-            .edit-controls.clearfix
-                button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
-        else
-            a.js-open-inlined-form
-                if value
-                    = formattedValue
-                else
-                    | {{_ 'edit'}}
-    else
-        if value
-            = formattedValue
 
 template(name="cardCustomField-date")
     if canModifyCard
-      a.js-edit-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
-        if value
-          div.card-date
-            time(datetime="{{showISODate}}")
-              | {{showDate}}
-              if showWeekOfYear
-                b
-                  | {{showWeek}}
-        else
-          | {{_ 'edit'}}
-    else
-      if value
-        div.card-date
-          time(datetime="{{showISODate}}")
-            | {{showDate}}
-            if showWeekOfYear
-                b
-                | {{showWeek}}
-
-template(name="cardCustomField-datePopup")
-  .datepicker-container
-    form.edit-date
-      .fields
-        .left
-          label(for="date") {{_ 'date'}}
-          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
-        .right
-          label(for="time") {{_ 'time'}}
-          input.js-time-field#time(type="time" name="time" value=showTime)
-      if error.get
-        .warning {{_ error.get}}
-      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
-      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+        a.js-edit-date(title="{{showTitle}}" class="{{classes}}")
+            if value
+                div.card-date
+                    time(datetime="{{showISODate}}")
+                        | {{showDate}}
+            else
+                | {{_ 'edit'}}
 
 template(name="cardCustomField-dropdown")
     if canModifyCard
@@ -129,7 +71,7 @@ template(name="cardCustomField-dropdown")
                             = name
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.js-close-inlined-form
+                a.fa.fa-times-thin.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -137,28 +79,3 @@ template(name="cardCustomField-dropdown")
                         = selectedItem
                 else
                     | {{_ 'edit'}}
-    else
-        if value
-            +viewer
-                = selectedItem
-
-template(name="cardCustomField-stringtemplate")
-    if canModifyCard
-        +inlinedForm(classNames="js-card-customfield-stringtemplate")
-            each item in stringtemplateItems.get
-                input.js-card-customfield-stringtemplate-item(type="text" value=item placeholder="")
-            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.js-close-inlined-form
-        else
-            a.js-open-inlined-form
-                if value
-                    +viewer
-                        = formattedValue
-                else
-                    | {{_ 'edit'}}
-    else
-        if value
-            +viewer
-                = formattedValue

client/components/cards/cardCustomFields.js

@@ -1,339 +1,179 @@
-import { TAPi18n } from '/imports/i18n';
-import {
-  setupDatePicker,
-  datePickerRendered,
-  datePickerHelpers,
-  datePickerEvents,
-} from '/client/lib/datepicker';
-import { ReactiveCache } from '/imports/reactiveCache';
-import {
-  formatDateTime,
-  formatDate,
-  formatDateByUserPreference,
-  formatTime,
-  getISOWeek,
-  isValidDate,
-  isBefore,
-  isAfter,
-  isSame,
-  add,
-  subtract,
-  startOf,
-  endOf,
-  format,
-  parseDate,
-  now,
-  createDate,
-  fromNow,
-  calendar
-} from '/imports/lib/dateUtils';
-import { CustomFieldStringTemplate } from '/client/lib/customFields'
-import { getCurrentCardFromContext } from '/client/lib/currentCard';
-import { EscapeActions } from '/client/lib/escapeActions';
-import { getSidebarInstance } from '/client/features/sidebar/service';
-
 Template.cardCustomFieldsPopup.helpers({
   hasCustomField() {
-    const card = getCurrentCardFromContext();
-    if (!card) return false;
+    const card = Cards.findOne(Session.get('currentCard'));
     const customFieldId = this._id;
     return card.customFieldIndex(customFieldId) > -1;
   },
 });
 
 Template.cardCustomFieldsPopup.events({
-  'click .js-select-field'(event) {
-    const card = getCurrentCardFromContext();
-    if (!card) return;
+  'click .js-select-field'(evt) {
+    const card = Cards.findOne(Session.get('currentCard'));
     const customFieldId = this._id;
     card.toggleCustomField(customFieldId);
-    event.preventDefault();
+    evt.preventDefault();
   },
-  'click .js-settings'(event) {
+  'click .js-settings'(evt) {
     EscapeActions.executeUpTo('detailsPane');
-    const sidebar = getSidebarInstance();
-    if (sidebar) {
-      sidebar.setView('customFields');
-    }
-    event.preventDefault();
+    Sidebar.setView('customFields');
+    evt.preventDefault();
   },
 });
 
 // cardCustomField
-Template.cardCustomField.helpers({
+const CardCustomField = BlazeComponent.extendComponent({
+
   getTemplate() {
-    return `cardCustomField-${this.definition.type}`;
+    return `cardCustomField-${this.data().definition.type}`;
+  },
+
+  onCreated() {
+    const self = this;
+    self.card = Cards.findOne(Session.get('currentCard'));
+    self.customFieldId = this.data()._id;
+  },
+
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
   },
 });
-
-Template.cardCustomField.onCreated(function () {
-  this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-});
+CardCustomField.register('cardCustomField');
 
 // cardCustomField-text
-Template['cardCustomField-text'].onCreated(function () {
-  this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-});
+(class extends CardCustomField {
 
-Template['cardCustomField-text'].events({
-  'submit .js-card-customfield-text'(event, tpl) {
-    event.preventDefault();
-    const value = tpl.currentComponent ? tpl.currentComponent().getValue() : tpl.$('textarea').val();
-    tpl.card.setCustomField(tpl.customFieldId, value);
-  },
-});
+  onCreated() {
+    super.onCreated();
+  }
+
+  events() {
+    return [{
+      'submit .js-card-customfield-text'(evt) {
+        evt.preventDefault();
+        const value = this.currentComponent().getValue();
+        this.card.setCustomField(this.customFieldId, value);
+      },
+    }];
+  }
+
+}).register('cardCustomField-text');
 
 // cardCustomField-number
-Template['cardCustomField-number'].onCreated(function () {
-  this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-});
+(class extends CardCustomField {
 
-Template['cardCustomField-number'].events({
-  'submit .js-card-customfield-number'(event, tpl) {
-    event.preventDefault();
-    const value = parseInt(tpl.find('input').value, 10);
-    tpl.card.setCustomField(tpl.customFieldId, value);
-  },
-});
+  onCreated() {
+    super.onCreated();
+  }
 
-// cardCustomField-checkbox
-Template['cardCustomField-checkbox'].onCreated(function () {
-  this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-});
+  events() {
+    return [{
+      'submit .js-card-customfield-number'(evt) {
+        evt.preventDefault();
+        const value = parseInt(this.find('input').value, 10);
+        this.card.setCustomField(this.customFieldId, value);
+      },
+    }];
+  }
 
-Template['cardCustomField-checkbox'].events({
-  'click .js-checklist-item .check-box-unicode'(event, tpl) {
-    tpl.card.setCustomField(tpl.customFieldId, !Template.currentData().value);
-  },
-  'click .js-checklist-item .check-box-container'(event, tpl) {
-    tpl.card.setCustomField(tpl.customFieldId, !Template.currentData().value);
-  },
-});
-
-// cardCustomField-currency
-Template['cardCustomField-currency'].onCreated(function () {
-  this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-  this.currencyCode = Template.currentData().definition.settings.currencyCode;
-});
-
-Template['cardCustomField-currency'].helpers({
-  formattedValue() {
-    const locale = TAPi18n.getLanguage();
-    const tpl = Template.instance();
-    return new Intl.NumberFormat(locale, {
-      style: 'currency',
-      currency: tpl.currencyCode,
-    }).format(this.value);
-  },
-});
-
-Template['cardCustomField-currency'].events({
-  'submit .js-card-customfield-currency'(event, tpl) {
-    event.preventDefault();
-    // To allow input separated by comma, the comma is replaced by a period.
-    const value = Number(tpl.find('input').value.replace(/,/i, '.'), 10);
-    tpl.card.setCustomField(tpl.customFieldId, value);
-  },
-});
+}).register('cardCustomField-number');
 
 // cardCustomField-date
-Template['cardCustomField-date'].onCreated(function () {
-  this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-  const self = this;
-  self.date = ReactiveVar();
-  self.now = ReactiveVar(now());
-  window.setInterval(() => {
-    self.now.set(now());
-  }, 60000);
+(class extends CardCustomField {
 
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().value));
-  });
-});
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.date = ReactiveVar();
+    self.now = ReactiveVar(moment());
+    window.setInterval(() => {
+      self.now.set(moment());
+    }, 60000);
+
+    self.autorun(() => {
+      self.date.set(moment(self.data().value));
+    });
+  }
 
-Template['cardCustomField-date'].helpers({
-  showWeek() {
-    return getISOWeek(Template.instance().date.get()).toString();
-  },
-  showWeekOfYear() {
-    const user = ReactiveCache.getCurrentUser();
-    if (!user) {
-      return false;
-    }
-    return user.isShowWeekOfYear();
-  },
   showDate() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-  },
+    // this will start working once mquandalle:moment
+    // is updated to at least moment.js 2.10.5
+    // until then, the date is displayed in the "L" format
+    return this.date.get().calendar(null, {
+      sameElse: 'llll',
+    });
+  }
+
   showISODate() {
-    return Template.instance().date.get().toISOString();
-  },
+    return this.date.get().toISOString();
+  }
+
   classes() {
-    const tpl = Template.instance();
-    if (
-      isBefore(tpl.date.get(), tpl.now.get(), 'minute') &&
-      isBefore(tpl.now.get(), this.value, 'minute')
-    ) {
+    if (this.date.get().isBefore(this.now.get(), 'minute') &&
+            this.now.get().isBefore(this.data().value)) {
       return 'current';
     }
     return '';
-  },
-  showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${Template.instance().date.get().toLocaleString()}`;
-  },
-});
+  }
 
-Template['cardCustomField-date'].events({
-  'click .js-edit-date': Popup.open('cardCustomField-date'),
-});
+  showTitle() {
+    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+  }
+
+  events() {
+    return [{
+      'click .js-edit-date': Popup.open('cardCustomField-date'),
+    }];
+  }
+
+}).register('cardCustomField-date');
 
 // cardCustomField-datePopup
-Template['cardCustomField-datePopup'].onCreated(function () {
-  const data = Template.currentData();
-  setupDatePicker(this, {
-    initialDate: data.value ? data.value : undefined,
-  });
-  // Override card and store customFieldId for store/delete callbacks
-  this.datePicker.card = getCurrentCardFromContext();
-  this.customFieldId = data._id;
-});
+(class extends DatePicker {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.card = Cards.findOne(Session.get('currentCard'));
+    self.customFieldId = this.data()._id;
+    this.data().value && this.date.set(moment(this.data().value));
+  }
 
-Template['cardCustomField-datePopup'].onRendered(function () {
-  datePickerRendered(this);
-});
+  _storeDate(date) {
+    this.card.setCustomField(this.customFieldId, date);
+  }
 
-Template['cardCustomField-datePopup'].helpers(datePickerHelpers());
-
-Template['cardCustomField-datePopup'].events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setCustomField(this.customFieldId, date);
-  },
-  deleteDate() {
-    this.datePicker.card.setCustomField(this.customFieldId, '');
-  },
-}));
+  _deleteDate() {
+    this.card.setCustomField(this.customFieldId, '');
+  }
+}).register('cardCustomField-datePopup');
 
 // cardCustomField-dropdown
-Template['cardCustomField-dropdown'].onCreated(function () {
-  this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-  this._items = Template.currentData().definition.settings.dropdownItems;
-  this.items = this._items.slice(0);
-  this.items.unshift({
-    _id: '',
-    name: TAPi18n.__('custom-field-dropdown-none'),
-  });
-});
+(class extends CardCustomField {
 
-Template['cardCustomField-dropdown'].helpers({
-  items() {
-    return Template.instance().items;
-  },
-  selectedItem() {
-    const tpl = Template.instance();
-    const selected = tpl._items.find(item => {
-      return item._id === this.value;
+  onCreated() {
+    super.onCreated();
+    this._items = this.data().definition.settings.dropdownItems;
+    this.items = this._items.slice(0);
+    this.items.unshift({
+      _id: '',
+      name: TAPi18n.__('custom-field-dropdown-none'),
     });
-    return selected
-      ? selected.name
-      : TAPi18n.__('custom-field-dropdown-unknown');
-  },
-});
+  }
 
-Template['cardCustomField-dropdown'].events({
-  'submit .js-card-customfield-dropdown'(event, tpl) {
-    event.preventDefault();
-    const value = tpl.find('select').value;
-    tpl.card.setCustomField(tpl.customFieldId, value);
-  },
-});
+  selectedItem() {
+    const selected = this._items.find((item) => {
+      return item._id === this.data().value;
+    });
+    return (selected) ? selected.name : TAPi18n.__('custom-field-dropdown-unknown');
+  }
 
-// cardCustomField-stringtemplate
-Template['cardCustomField-stringtemplate'].onCreated(function () {
-  this.card = getCurrentCardFromContext();
-  this.customFieldId = Template.currentData()._id;
-  this.customField = new CustomFieldStringTemplate(Template.currentData().definition);
-  this.stringtemplateItems = new ReactiveVar(Template.currentData().value ?? []);
-});
+  events() {
+    return [{
+      'submit .js-card-customfield-dropdown'(evt) {
+        evt.preventDefault();
+        const value = this.find('select').value;
+        this.card.setCustomField(this.customFieldId, value);
+      },
+    }];
+  }
 
-Template['cardCustomField-stringtemplate'].helpers({
-  formattedValue() {
-    const tpl = Template.instance();
-    const ret = tpl.customField.getFormattedValue(this.value);
-    return ret;
-  },
-  stringtemplateItems() {
-    return Template.instance().stringtemplateItems.get();
-  },
-});
-
-Template['cardCustomField-stringtemplate'].events({
-  'submit .js-card-customfield-stringtemplate'(event, tpl) {
-    event.preventDefault();
-    const items = tpl.stringtemplateItems.get();
-    tpl.card.setCustomField(tpl.customFieldId, items);
-  },
-
-  'keydown .js-card-customfield-stringtemplate-item'(event, tpl) {
-    if (event.keyCode === 13) {
-      event.preventDefault();
-
-      if (event.target.value.trim() || event.metaKey || event.ctrlKey) {
-        const inputLast = tpl.find('input.last');
-
-        let items = Array.from(tpl.findAll('input'))
-          .map(input => input.value)
-          .filter(value => !!value.trim());
-
-        if (event.target === inputLast) {
-          inputLast.value = '';
-        } else if (event.target.nextSibling === inputLast) {
-          inputLast.focus();
-        } else {
-          event.target.blur();
-
-          const idx = Array.from(tpl.findAll('input')).indexOf(
-            event.target,
-          );
-          items.splice(idx + 1, 0, '');
-
-          Tracker.afterFlush(() => {
-            const element = tpl.findAll('input')[idx + 1];
-            element.focus();
-            element.value = '';
-          });
-        }
-
-        tpl.stringtemplateItems.set(items);
-      }
-      if (event.metaKey || event.ctrlKey) {
-        tpl.find('button[type=submit]').click();
-      }
-    }
-  },
-
-  'blur .js-card-customfield-stringtemplate-item'(event, tpl) {
-    if (
-      !event.target.value.trim() ||
-      event.target === tpl.find('input.last')
-    ) {
-      const items = Array.from(tpl.findAll('input'))
-        .map(input => input.value)
-        .filter(value => !!value.trim());
-      tpl.stringtemplateItems.set(items);
-      tpl.find('input.last').value = '';
-    }
-  },
-
-  'click .js-close-inlined-form'(event, tpl) {
-    tpl.stringtemplateItems.set(Template.currentData().value ?? []);
-  },
-});
+}).register('cardCustomField-dropdown');

client/components/cards/cardDate.css

@@ -1,144 +0,0 @@
-.card-date {
-  display: block;
-  border-radius: 4px;
-  padding: 1px 3px;
-  background-color: #dbdbdb;
-}
-.card-date:hover,
-.card-date.is-active {
-  background-color: #b3b3b3;
-}
-/* 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; /* Green for current/active */
-  color: #fff;
-}
-.card-date.current:hover,
-.card-date.current.is-active {
-  background-color: #46802c;
-}
-
-.card-date.completed {
-  background-color: #90ee90; /* Light green for completed */
-  color: #000;
-}
-.card-date.completed:hover,
-.card-date.completed.is-active {
-  background-color: #7dd87d;
-}
-
-.card-date.completed-early {
-  background-color: #4caf50; /* Green for completed early */
-  color: #fff;
-}
-.card-date.completed-early:hover,
-.card-date.completed-early.is-active {
-  background-color: #45a049;
-}
-
-.card-date.completed-late {
-  background-color: #ff9800; /* Orange for completed late */
-  color: #fff;
-}
-.card-date.completed-late:hover,
-.card-date.completed-late.is-active {
-  background-color: #f57c00;
-}
-
-.card-date.completed-on-time {
-  background-color: #2196f3; /* Blue for completed on time */
-  color: #fff;
-}
-.card-date.completed-on-time:hover,
-.card-date.completed-on-time.is-active {
-  background-color: #1976d2;
-}
-
-/* Date type specific colors */
-.card-date.received-date {
-  background-color: #dbdbdb; /* Light grey for received */
-}
-
-.card-date.received-date:hover,
-.card-date.received-date.is-active {
-  background-color: #b3b3b3;
-}
-
-.card-date.start-date {
-  background-color: #90ee90; /* Light green for start */
-  color: #000; /* Black text for start */
-}
-
-.card-date.start-date:hover,
-.card-date.start-date.is-active {
-  background-color: #7dd87d;
-}
-
-.card-date.due-date {
-  background-color: #ffd700; /* Yellow for due */
-  color: #000; /* Black text for due */
-}
-
-.card-date.due-date:hover,
-.card-date.due-date.is-active {
-  background-color: #e6c200;
-}
-
-.card-date.end-date {
-  background-color: #ffb3b3; /* Light red for end */
-  color: #000; /* Black text for end */
-}
-
-.card-date.end-date:hover,
-.card-date.end-date.is-active {
-  background-color: #ff9999;
-}
-.card-date.end-date time::before {
-  content: "🏁"; /* Finish flag - represents end/completion */
-}
-.card-date.due-date time::before {
-  content: "⏰"; /* Alarm clock - represents due/deadline */
-}
-.card-date.start-date time::before {
-  content: "🚀"; /* Rocket - represents start/launch */
-}
-.card-date.received-date time::before {
-  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-size: inherit;
-  margin-right: 0.3em;
-  display: inline-block;
-}
-.customfield-date {
-  display: block;
-  border-radius: 4px;
-  padding: 1px 3px;
-}

client/components/cards/cardDate.jade

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

client/components/cards/cardDate.js

@@ -1,644 +1,383 @@
-import { TAPi18n } from '/imports/i18n';
-import { ReactiveCache } from '/imports/reactiveCache';
-import {
-  setupDatePicker,
-  datePickerRendered,
-  datePickerHelpers,
-  datePickerEvents,
-} from '/client/lib/datepicker';
-import {
-  formatDateTime,
-  formatDate,
-  formatDateByUserPreference,
-  formatTime,
-  getISOWeek,
-  isValidDate,
-  isBefore,
-  isAfter,
-  isSame,
-  add,
-  subtract,
-  startOf,
-  endOf,
-  format,
-  parseDate,
-  now,
-  createDate,
-  fromNow,
-  calendar,
-  diff
-} from '/imports/lib/dateUtils';
+// Edit received, start, due & end dates
+BlazeComponent.extendComponent({
+  template() {
+    return 'editCardDate';
+  },
 
-// --- DatePicker popups (edit date forms) ---
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.card = this.data();
+    this.date = new ReactiveVar(moment.invalid());
+  },
+
+  onRendered() {
+    const $picker = this.$('.js-datepicker').datepicker({
+      todayHighlight: true,
+      todayBtn: 'linked',
+      language: TAPi18n.getLanguage(),
+    }).on('changeDate', function(evt) {
+      this.find('#date').value = moment(evt.date).format('L');
+      this.error.set('');
+      this.find('#time').focus();
+    }.bind(this));
+
+    if (this.date.get().isValid()) {
+      $picker.datepicker('update', this.date.get().toDate());
+    }
+  },
+
+  showDate() {
+    if (this.date.get().isValid())
+      return this.date.get().format('L');
+    return '';
+  },
+  showTime() {
+    if (this.date.get().isValid())
+      return this.date.get().format('LT');
+    return '';
+  },
+  dateFormat() {
+    return moment.localeData().longDateFormat('L');
+  },
+  timeFormat() {
+    return moment.localeData().longDateFormat('LT');
+  },
+
+  events() {
+    return [{
+      'keyup .js-date-field'() {
+        // parse for localized date format in strict mode
+        const dateMoment = moment(this.find('#date').value, 'L', true);
+        if (dateMoment.isValid()) {
+          this.error.set('');
+          this.$('.js-datepicker').datepicker('update', dateMoment.toDate());
+        }
+      },
+      'keyup .js-time-field'() {
+        // parse for localized time format in strict mode
+        const dateMoment = moment(this.find('#time').value, 'LT', true);
+        if (dateMoment.isValid()) {
+          this.error.set('');
+        }
+      },
+      'submit .edit-date'(evt) {
+        evt.preventDefault();
+
+        // if no time was given, init with 12:00
+        const time = evt.target.time.value || moment(new Date().setHours(12, 0, 0)).format('LT');
+
+        const dateString = `${evt.target.date.value} ${time}`;
+        const newDate = moment(dateString, 'L LT', true);
+        if (newDate.isValid()) {
+          this._storeDate(newDate.toDate());
+          Popup.close();
+        }
+        else {
+          this.error.set('invalid-date');
+          evt.target.date.focus();
+        }
+      },
+      'click .js-delete-date'(evt) {
+        evt.preventDefault();
+        this._deleteDate();
+        Popup.close();
+      },
+    }];
+  },
+});
+
+Template.dateBadge.helpers({
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+});
 
 // editCardReceivedDatePopup
-Template.editCardReceivedDatePopup.onCreated(function () {
-  const card = Template.currentData();
-  setupDatePicker(this, {
-    defaultTime: formatDateTime(now()),
-    initialDate: card.getReceived() ? card.getReceived() : undefined,
-  });
-});
+(class extends DatePicker {
+  onCreated() {
+    super.onCreated();
+    this.data().getReceived() && this.date.set(moment(this.data().getReceived()));
+  }
 
-Template.editCardReceivedDatePopup.onRendered(function () {
-  datePickerRendered(this);
-});
+  _storeDate(date) {
+    this.card.setReceived(date);
+  }
 
-Template.editCardReceivedDatePopup.helpers(datePickerHelpers());
+  _deleteDate() {
+    this.card.setReceived(null);
+  }
+}).register('editCardReceivedDatePopup');
 
-Template.editCardReceivedDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setReceived(formatDateTime(date));
-  },
-  deleteDate() {
-    this.datePicker.card.unsetReceived();
-  },
-}));
 
 // editCardStartDatePopup
-Template.editCardStartDatePopup.onCreated(function () {
-  const card = Template.currentData();
-  setupDatePicker(this, {
-    defaultTime: formatDateTime(now()),
-    initialDate: card.getStart() ? card.getStart() : undefined,
-  });
-});
+(class extends DatePicker {
+  onCreated() {
+    super.onCreated();
+    this.data().getStart() && this.date.set(moment(this.data().getStart()));
+  }
 
-Template.editCardStartDatePopup.onRendered(function () {
-  datePickerRendered(this);
-});
+  onRendered() {
+    super.onRendered();
+    if (moment.isDate(this.card.getReceived())) {
+      this.$('.js-datepicker').datepicker('setStartDate', this.card.getReceived());
+    }
+  }
 
-Template.editCardStartDatePopup.helpers(datePickerHelpers());
+  _storeDate(date) {
+    this.card.setStart(date);
+  }
 
-Template.editCardStartDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setStart(formatDateTime(date));
-  },
-  deleteDate() {
-    this.datePicker.card.unsetStart();
-  },
-}));
+  _deleteDate() {
+    this.card.setStart(null);
+  }
+}).register('editCardStartDatePopup');
 
 // editCardDueDatePopup
-Template.editCardDueDatePopup.onCreated(function () {
-  const card = Template.currentData();
-  setupDatePicker(this, {
-    defaultTime: '1970-01-01 17:00:00',
-    initialDate: card.getDue() ? card.getDue() : undefined,
-  });
-});
+(class extends DatePicker {
+  onCreated() {
+    super.onCreated();
+    this.data().getDue() && this.date.set(moment(this.data().getDue()));
+  }
 
-Template.editCardDueDatePopup.onRendered(function () {
-  datePickerRendered(this);
-});
+  onRendered() {
+    super.onRendered();
+    if (moment.isDate(this.card.getStart())) {
+      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
+    }
+  }
 
-Template.editCardDueDatePopup.helpers(datePickerHelpers());
+  _storeDate(date) {
+    this.card.setDue(date);
+  }
 
-Template.editCardDueDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setDue(formatDateTime(date));
-  },
-  deleteDate() {
-    this.datePicker.card.unsetDue();
-  },
-}));
+  _deleteDate() {
+    this.card.setDue(null);
+  }
+}).register('editCardDueDatePopup');
 
 // editCardEndDatePopup
-Template.editCardEndDatePopup.onCreated(function () {
-  const card = Template.currentData();
-  setupDatePicker(this, {
-    defaultTime: formatDateTime(now()),
-    initialDate: card.getEnd() ? card.getEnd() : undefined,
-  });
-});
+(class extends DatePicker {
+  onCreated() {
+    super.onCreated();
+    this.data().getEnd() && this.date.set(moment(this.data().getEnd()));
+  }
 
-Template.editCardEndDatePopup.onRendered(function () {
-  datePickerRendered(this);
-});
-
-Template.editCardEndDatePopup.helpers(datePickerHelpers());
-
-Template.editCardEndDatePopup.events(datePickerEvents({
-  storeDate(date) {
-    this.datePicker.card.setEnd(formatDateTime(date));
-  },
-  deleteDate() {
-    this.datePicker.card.unsetEnd();
-  },
-}));
-
-// --- Card date badge display helpers ---
-
-// Shared onCreated logic for card date badge templates
-function cardDateOnCreated(tpl) {
-  tpl.date = new ReactiveVar();
-  tpl.now = new ReactiveVar(now());
-  window.setInterval(() => {
-    tpl.now.set(now());
-  }, 60000);
-}
-
-// Shared helpers for card date badge templates
-function cardDateHelpers(extraHelpers) {
-  const base = {
-    showWeek() {
-      return getISOWeek(Template.instance().date.get()).toString();
-    },
-    showWeekOfYear() {
-      const user = ReactiveCache.getCurrentUser();
-      if (!user) {
-        return false;
-      }
-      return user.isShowWeekOfYear();
-    },
-    showDate() {
-      const currentUser = ReactiveCache.getCurrentUser();
-      const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-      return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-    },
-    showISODate() {
-      return Template.instance().date.get().toISOString();
-    },
-  };
-  return Object.assign(base, extraHelpers);
-}
-
-// cardReceivedDate
-Template.cardReceivedDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getReceived()));
-  });
-});
-
-Template.cardReceivedDate.helpers(cardDateHelpers({
-  classes() {
-    const tpl = Template.instance();
-    let classes = 'received-date ';
-    const data = Template.currentData();
-    const dueAt = data.getDue();
-    const endAt = data.getEnd();
-    const startAt = data.getStart();
-    const theDate = tpl.date.get();
-
-    if (
-      (startAt && isAfter(theDate, startAt)) ||
-      (endAt && isAfter(theDate, endAt)) ||
-      (dueAt && isAfter(theDate, dueAt))
-    ) {
-      classes += 'overdue';
-    } else {
-      classes += 'not-due';
+  onRendered() {
+    super.onRendered();
+    if (moment.isDate(this.card.getStart())) {
+      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
     }
-    return classes;
+  }
+
+  _storeDate(date) {
+    this.card.setEnd(date);
+  }
+
+  _deleteDate() {
+    this.card.setEnd(null);
+  }
+}).register('editCardEndDatePopup');
+
+
+// Display received, start, due & end dates
+const CardDate = BlazeComponent.extendComponent({
+  template() {
+    return 'dateBadge';
   },
-  showTitle() {
-    const tpl = Template.instance();
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
-    return `${TAPi18n.__('card-received-on')} ${formattedDate}`;
+
+  onCreated() {
+    const self = this;
+    self.date = ReactiveVar();
+    self.now = ReactiveVar(moment());
+    window.setInterval(() => {
+      self.now.set(moment());
+    }, 60000);
   },
-}));
 
-Template.cardReceivedDate.events({
-  'click .js-edit-date': Popup.open('editCardReceivedDate'),
-});
-
-// cardStartDate
-Template.cardStartDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getStart()));
-  });
-});
-
-Template.cardStartDate.helpers(cardDateHelpers({
-  classes() {
-    const tpl = Template.instance();
-    let classes = 'start-date ';
-    const data = Template.currentData();
-    const dueAt = data.getDue();
-    const endAt = data.getEnd();
-    const theDate = tpl.date.get();
-    const nowVal = tpl.now.get();
-
-    if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt))) {
-      classes += 'overdue';
-    } else if (isAfter(theDate, nowVal)) {
-      classes += 'not-due';
-    } else {
-      classes += 'current';
-    }
-    return classes;
-  },
-  showTitle() {
-    const tpl = Template.instance();
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
-    return `${TAPi18n.__('card-start-on')} ${formattedDate}`;
-  },
-}));
-
-Template.cardStartDate.events({
-  'click .js-edit-date': Popup.open('editCardStartDate'),
-});
-
-// cardDueDate
-Template.cardDueDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getDue()));
-  });
-});
-
-Template.cardDueDate.helpers(cardDateHelpers({
-  classes() {
-    const tpl = Template.instance();
-    let classes = 'due-date ';
-    const data = Template.currentData();
-    const endAt = data.getEnd();
-    const theDate = tpl.date.get();
-    const nowVal = tpl.now.get();
-
-    if (endAt && isBefore(endAt, theDate)) {
-      classes += 'completed-early';
-    } else if (endAt) {
-      classes += 'completed';
-    } else {
-      const daysDiff = diff(theDate, nowVal, 'days');
-
-      if (daysDiff < 0) {
-        classes += 'overdue';
-      } else if (daysDiff <= 1) {
-        classes += 'due-soon';
-      } else {
-        classes += 'not-due';
-      }
-    }
-
-    return classes;
-  },
-  showTitle() {
-    const tpl = Template.instance();
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
-    return `${TAPi18n.__('card-due-on')} ${formattedDate}`;
-  },
-}));
-
-Template.cardDueDate.events({
-  'click .js-edit-date': Popup.open('editCardDueDate'),
-});
-
-// cardEndDate
-Template.cardEndDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getEnd()));
-  });
-});
-
-Template.cardEndDate.helpers(cardDateHelpers({
-  classes() {
-    const tpl = Template.instance();
-    let classes = 'end-date ';
-    const data = Template.currentData();
-    const dueAt = data.getDue();
-    const theDate = tpl.date.get();
-
-    if (!dueAt) {
-      classes += 'completed';
-    } else if (isBefore(theDate, dueAt)) {
-      classes += 'completed-early';
-    } else if (isAfter(theDate, dueAt)) {
-      classes += 'completed-late';
-    } else {
-      classes += 'completed-on-time';
-    }
-    return classes;
-  },
-  showTitle() {
-    const tpl = Template.instance();
-    return `${TAPi18n.__('card-end-on')} ${format(tpl.date.get(), 'LLLL')}`;
-  },
-}));
-
-Template.cardEndDate.events({
-  'click .js-edit-date': Popup.open('editCardEndDate'),
-});
-
-// cardCustomFieldDate
-Template.cardCustomFieldDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().value));
-  });
-});
-
-Template.cardCustomFieldDate.helpers(cardDateHelpers({
   showDate() {
-    const tpl = Template.instance();
     // this will start working once mquandalle:moment
     // is updated to at least moment.js 2.10.5
     // until then, the date is displayed in the "L" format
-    return tpl.date.get().calendar(null, {
+    return this.date.get().calendar(null, {
       sameElse: 'llll',
     });
   },
-  showTitle() {
-    const tpl = Template.instance();
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
-    return `${formattedDate}`;
-  },
-  classes() {
-    return 'customfield-date';
-  },
-}));
 
-// --- Minicard date templates ---
-
-// minicardReceivedDate
-Template.minicardReceivedDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getReceived()));
-  });
+  showISODate() {
+    return this.date.get().toISOString();
+  },
 });
 
-Template.minicardReceivedDate.helpers(cardDateHelpers({
+class CardReceivedDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().getReceived()));
+    });
+  }
+
   classes() {
-    const tpl = Template.instance();
     let classes = 'received-date ';
-    const data = Template.currentData();
-    const dueAt = data.getDue();
-    const endAt = data.getEnd();
-    const startAt = data.getStart();
-    const theDate = tpl.date.get();
-
-    if (
-      (startAt && isAfter(theDate, startAt)) ||
-      (endAt && isAfter(theDate, endAt)) ||
-      (dueAt && isAfter(theDate, dueAt))
-    ) {
-      classes += 'overdue';
-    } else {
-      classes += 'not-due';
-    }
-    return classes;
-  },
-  showTitle() {
-    const tpl = Template.instance();
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
-    return `${TAPi18n.__('card-received-on')} ${formattedDate}`;
-  },
-  showDate() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-  },
-}));
-
-Template.minicardReceivedDate.events({
-  'click .js-edit-date': Popup.open('editCardReceivedDate'),
-});
-
-// minicardStartDate
-Template.minicardStartDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getStart()));
-  });
-});
-
-Template.minicardStartDate.helpers(cardDateHelpers({
-  classes() {
-    const tpl = Template.instance();
-    let classes = 'start-date ';
-    const data = Template.currentData();
-    const dueAt = data.getDue();
-    const endAt = data.getEnd();
-    const theDate = tpl.date.get();
-    const nowVal = tpl.now.get();
-
-    if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt))) {
-      classes += 'overdue';
-    } else if (isAfter(theDate, nowVal)) {
-      classes += 'not-due';
-    } else {
+    const dueAt = this.data().getDue();
+    const endAt = this.data().getEnd();
+    const startAt = this.data().getStart();
+    const theDate = this.date.get();
+    // if dueAt, endAt and startAt exist & are > receivedAt, receivedAt doesn't need to be flagged
+    if (((startAt) && (theDate.isAfter(dueAt))) ||
+       ((endAt) && (theDate.isAfter(endAt))) ||
+       ((dueAt) && (theDate.isAfter(dueAt))))
+      classes += 'long-overdue';
+    else
       classes += 'current';
-    }
     return classes;
-  },
+  }
+
   showTitle() {
-    const tpl = Template.instance();
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
-    return `${TAPi18n.__('card-start-on')} ${formattedDate}`;
-  },
-  showDate() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-  },
-}));
+    return `${TAPi18n.__('card-received-on')} ${this.date.get().format('LLLL')}`;
+  }
 
-Template.minicardStartDate.events({
-  'click .js-edit-date': Popup.open('editCardStartDate'),
-});
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardReceivedDate'),
+    });
+  }
+}
+CardReceivedDate.register('cardReceivedDate');
 
-// minicardDueDate
-Template.minicardDueDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getDue()));
-  });
-});
+class CardStartDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().getStart()));
+    });
+  }
 
-Template.minicardDueDate.helpers(cardDateHelpers({
   classes() {
-    const tpl = Template.instance();
-    let classes = 'due-date ';
-    const data = Template.currentData();
-    const endAt = data.getEnd();
-    const theDate = tpl.date.get();
-    const nowVal = tpl.now.get();
-
-    if (endAt && isBefore(endAt, theDate)) {
-      classes += 'completed-early';
-    } else if (endAt) {
-      classes += 'completed';
-    } else {
-      const daysDiff = diff(theDate, nowVal, 'days');
-
-      if (daysDiff < 0) {
-        classes += 'overdue';
-      } else if (daysDiff <= 1) {
-        classes += 'due-soon';
-      } else {
-        classes += 'not-due';
-      }
-    }
-
+    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.isBefore(now, 'minute'))
+      classes += 'almost-due';
+    else
+      classes += 'current';
     return classes;
-  },
+  }
+
   showTitle() {
-    const tpl = Template.instance();
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
-    return `${TAPi18n.__('card-due-on')} ${formattedDate}`;
-  },
-  showDate() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-  },
-}));
+    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+  }
 
-Template.minicardDueDate.events({
-  'click .js-edit-date': Popup.open('editCardDueDate'),
-});
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardStartDate'),
+    });
+  }
+}
+CardStartDate.register('cardStartDate');
 
-// minicardEndDate
-Template.minicardEndDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getEnd()));
-  });
-});
+class CardDueDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().getDue()));
+    });
+  }
 
-Template.minicardEndDate.helpers(cardDateHelpers({
   classes() {
-    const tpl = Template.instance();
-    let classes = 'end-date ';
-    const data = Template.currentData();
-    const dueAt = data.getDue();
-    const theDate = tpl.date.get();
-
-    if (!dueAt) {
-      classes += 'completed';
-    } else if (isBefore(theDate, dueAt)) {
-      classes += 'completed-early';
-    } else if (isAfter(theDate, dueAt)) {
-      classes += 'completed-late';
-    } else {
-      classes += 'completed-on-time';
-    }
+    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';
     return classes;
-  },
+  }
+
   showTitle() {
-    const tpl = Template.instance();
-    return `${TAPi18n.__('card-end-on')} ${format(tpl.date.get(), 'LLLL')}`;
-  },
-  showDate() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-  },
-}));
+    return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`;
+  }
 
-Template.minicardEndDate.events({
-  'click .js-edit-date': Popup.open('editCardEndDate'),
-});
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardDueDate'),
+    });
+  }
+}
+CardDueDate.register('cardDueDate');
 
-// minicardCustomFieldDate
-Template.minicardCustomFieldDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().value));
-  });
-});
+class CardEndDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().getEnd()));
+    });
+  }
 
-Template.minicardCustomFieldDate.helpers(cardDateHelpers({
-  showDate() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-  },
-  showTitle() {
-    const tpl = Template.instance();
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    const formattedDate = formatDateByUserPreference(tpl.date.get(), dateFormat, true);
-    return `${formattedDate}`;
-  },
   classes() {
-    return 'customfield-date';
-  },
-}));
+    let classes = 'end-date' + ' ';
+    const dueAt = this.data().getDue();
+    const theDate = this.date.get();
+    if (theDate.diff(dueAt, 'days') >= 2)
+      classes += 'long-overdue';
+    else if (theDate.diff(dueAt, 'days') >= 0)
+      classes += 'due';
+    else if (theDate.diff(dueAt, 'days') >= -2)
+      classes += 'almost-due';
+    return classes;
+  }
 
-// --- Vote and Poker end date badge templates ---
-
-// voteEndDate
-Template.voteEndDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getVoteEnd()));
-  });
-});
-
-Template.voteEndDate.helpers(cardDateHelpers({
-  classes() {
-    return 'end-date ';
-  },
-  showDate() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-  },
   showTitle() {
-    const tpl = Template.instance();
-    return `${TAPi18n.__('card-end-on')} ${tpl.date.get().toLocaleString()}`;
-  },
-}));
+    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+  }
 
-Template.voteEndDate.events({
-  'click .js-edit-date': Popup.open('editVoteEndDate'),
-});
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardEndDate'),
+    });
+  }
+}
+CardEndDate.register('cardEndDate');
 
-// pokerEndDate
-Template.pokerEndDate.onCreated(function () {
-  cardDateOnCreated(this);
-  const self = this;
-  self.autorun(() => {
-    self.date.set(new Date(Template.currentData().getPokerEnd()));
-  });
-});
-
-Template.pokerEndDate.helpers(cardDateHelpers({
-  classes() {
-    return 'end-date ';
-  },
+(class extends CardReceivedDate {
   showDate() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
-    return formatDateByUserPreference(Template.instance().date.get(), dateFormat, true);
-  },
-  showTitle() {
-    const tpl = Template.instance();
-    return `${TAPi18n.__('card-end-on')} ${format(tpl.date.get(), 'LLLL')}`;
-  },
-}));
+    return this.date.get().format('l');
+  }
+}).register('minicardReceivedDate');
 
-Template.pokerEndDate.events({
-  'click .js-edit-date': Popup.open('editPokerEndDate'),
-});
+(class extends CardStartDate {
+  showDate() {
+    return this.date.get().format('l');
+  }
+}).register('minicardStartDate');
+
+(class extends CardDueDate {
+  showDate() {
+    return this.date.get().format('l');
+  }
+}).register('minicardDueDate');
+
+(class extends CardEndDate {
+  showDate() {
+    return this.date.get().format('l');
+  }
+}).register('minicardEndDate');

client/components/cards/cardDate.styl

@@ -0,0 +1,59 @@
+.card-date
+  display: block
+  border-radius: 4px
+  padding: 1px 3px
+  
+  background-color: #dbdbdb
+  &:hover, &.is-active
+    background-color: #b3b3b3
+  
+  &.current, &.almost-due, &.due, &.long-overdue
+    color: #fff
+
+  &.current
+    background-color: #5ba639
+    &:hover, &.is-active
+      background-color: darken(#5ba639, 10)
+  
+  &.almost-due
+    background-color: #edc909
+    &:hover, &.is-active
+      background-color: darken(#edc909, 10)
+  
+  &.due
+    background-color: #fa3f00
+    &:hover, &.is-active
+      background-color: darken(#fa3f00, 10)
+  
+  &.long-overdue
+    background-color: #fd5d47
+    &:hover, &.is-active
+      background-color: darken(#fd5d47, 7)
+
+  &.end-date
+    time
+      &::before
+        content: "\f253"  // symbol: fa-hourglass-end
+
+  &.due-date
+    time
+      &::before
+        content: "\f090"  // symbol: fa-sign-in
+
+  &.start-date
+    time
+      &::before
+        content: "\f251"  // symbol: fa-hourglass-start
+
+  &.received-date
+    time
+      &::before
+        content: "\f08b"  // symbol: fa-sign-out
+
+  time
+    &::before
+      font: normal normal normal 14px/1 FontAwesome
+      font-size: inherit
+      -webkit-font-smoothing: antialiased
+      margin-right: 0.3em
+

client/components/cards/cardDescription.css

@@ -1,56 +0,0 @@
-.new-description {
-  position: relative;
-  margin: 0 0 20px 0;
-}
-.new-description.is-open .helper {
-  display: inline-block;
-}
-.new-description.is-open textarea {
-  min-height: 100px;
-  color: #4d4d4d;
-  cursor: auto;
-  overflow: hidden;
-  word-wrap: break-word;
-}
-.new-description .too-long {
-  margin-top: 8px;
-}
-.new-description 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-description textarea:hover,
-.new-description textarea:is-open {
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
-  border: 0;
-  cursor: pointer;
-}
-.new-description textarea:is-open {
-  cursor: auto;
-}
-.description-item {
-  background-color: #fff;
-  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;
-  margin: auto;
-}

client/components/cards/cardDescription.jade

@@ -1,7 +0,0 @@
-
-template(name="descriptionForm")
-  .new-description.js-new-description(
-    class="{{#if descriptionFormIsOpen}}is-open{{/if}}")
-    form.js-new-description-form
-      +editor(class="js-new-description-input" autofocus="autofocus")
-        | {{getUnsavedValue 'cardDescription' _id getDescription}}

client/components/cards/cardDescription.js

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

client/components/cards/cardDetails.css

@@ -1,892 +0,0 @@
-/* Date Format Selector */
-.card-details-item-date-format {
-  margin-bottom: 12px;
-}
-
-.card-details-item-date-format .card-details-item-title {
-  font-size: 15px;
-  font-weight: bold;
-  margin-bottom: 6px;
-  color: #333;
-  letter-spacing: 0.03em;
-}
-
-.card-details-item-date-format .js-date-format-selector {
-  width: 100%;
-  padding: 9px 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  background-color: #fff;
-  font-size: 15px;
-  cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.card-details-item-date-format .js-date-format-selector:focus {
-  outline: none;
-  border-color: #007cba;
-  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
-}
-
-.assignee {
-  display: block;
-  position: relative;
-  float: left;
-  height: clamp(24px, 3.5vw, 36px);
-  width: clamp(24px, 3.5vw, 36px);
-  margin: 0.3vh;
-  cursor: pointer;
-  user-select: none;
-  z-index: 1;
-  text-decoration: none;
-  border-radius: 50%;
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
-}
-.assignee .avatar {
-  overflow: hidden;
-  border-radius: 50%;
-}
-.assignee .avatar.avatar-assignee-initials {
-  height: 70%;
-  width: 70%;
-  padding: 15%;
-  background-color: #dbdbdb;
-  color: #444;
-  position: absolute;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-}
-.assignee .avatar.avatar-image {
-  object-fit: cover;
-  object-position: center;
-  height: 100%;
-  width: 100%;
-  display: block;
-}
-.assignee .assignee-presence-status {
-  background-color: #b3b3b3;
-  border: 1px solid #fff;
-  border-radius: 50%;
-  height: 7px;
-  width: 7px;
-  position: absolute;
-  right: -1px;
-  bottom: -1px;
-  z-index: 15;
-}
-.assignee .assignee-presence-status.active {
-  background: #64c464;
-  border-color: #daf1da;
-}
-.assignee .assignee-presence-status.idle {
-  background: #e4e467;
-  border-color: #f7f7d4;
-}
-.assignee .assignee-presence-status.disconnected {
-  background: #bdbdbd;
-  border-color: #ededed;
-}
-.assignee .assignee-presence-status.pending {
-  background: #e44242;
-  border-color: #f1dada;
-}
-.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;
-}
-.copied-tooltip {
-  display: none;
-  padding: 0 1.3vw;
-  background-color: rgba(0,0,0,0.875);
-  color: #fff;
-  border-radius: 0.7vw;
-  font-size: 0.98em;
-}
-
-.card-details {
-  padding: 0;
-  flex-shrink: 0;
-  flex-basis: min(600px, 80vw);
-  will-change: flex-basis;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: #f7f7f7;
-  border-radius: 0 0 0.4vw 0.4vw;
-  z-index: 30;
-  animation: flexGrowIn 0.1s;
-  box-shadow: 0 0 0.9vh 0 #b3b3b3;
-  transition: flex-basis 0.1s, box-shadow 0.15s;
-  box-sizing: border-box;
-}
-
-/* Desktop mode: position card below board header */
-body.desktop-mode .card-details:not(.card-details-popup) {
-  position: fixed;
-  width: auto;
-  max-width: 800px;
-  flex-basis: auto;
-  border-radius: 8px;
-  z-index: 2001;
-}
-
-/* Default position for first card or when dragged */
-body.desktop-mode .card-details:not(.card-details-popup):not([style*="left"]):not([style*="top"]) {
-  top: 8px;
-  left: 20px;
-  right: 20px;
-  bottom: 20px;
-}
-
-/* Stagger positions for multiple cards using nth-of-type */
-body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(1) {
-  top: 8px;
-  left: 20px;
-}
-body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(2) {
-  top: 38px;
-  left: 50px;
-}
-body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(3) {
-  top: 68px;
-  left: 80px;
-}
-body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(4) {
-  top: 98px;
-  left: 110px;
-}
-body.desktop-mode .card-details:not(.card-details-popup):nth-of-type(5) {
-  top: 128px;
-  left: 140px;
-}
-
-/* For expanded cards, set dimensions */
-body.desktop-mode .card-details:not(.card-details-popup):not(.card-details-collapsed) {
-  right: 20px;
-  bottom: 20px;
-}
-
-/* Collapsed card state - hide content and set height to title row only */
-.card-details.card-details-collapsed .card-details-canvas > *:not(.card-details-header) {
-  display: none !important;
-}
-.card-details.card-details-collapsed {
-  height: auto !important;
-  bottom: auto !important;
-  overflow: visible;
-}
-body.desktop-mode .card-details.card-details-collapsed {
-  bottom: auto !important;
-}
-.card-details .mCustomScrollBox {
-  padding-left: 0;
-}
-.card-details .card-details-canvas {
-  width: auto;
-  padding: 0 2.5vw;
-}
-.card-details .card-details-header {
-  margin: 0 -20px 5px;
-  padding: 8px 20px;
-  background: #ededed;
-  border-bottom: 1px solid #dbdbdb;
-  position: sticky;
-  top: 0px;
-  z-index: 500;
-  display: flow-root;
-  min-height: 44px;
-}
-.card-details .card-details-header .card-number {
-  color: #b3b3b3;
-  display: inline-block;
-  margin-right: 6px;
-}
-
-/* Collapse toggle triangle */
-.card-details .card-details-header .card-collapse-toggle {
-  float: left;
-  font-size: 20px;
-  padding: 7px 10px;
-  margin-left: -10px;
-  margin-right: 5px;
-  cursor: pointer;
-  user-select: none;
-  color: #000;
-  vertical-align: middle;
-  line-height: 1.2;
-}
-
-.card-details .card-details-header .card-drag-handle {
-  font-size: 20px;
-  padding: 8px 10px;
-  margin-right: 10px;
-  cursor: move;
-  user-select: none;
-  display: inline-block;
-  float: right;
-  vertical-align: middle;
-  line-height: 1.2;
-}
-
-.card-details .card-details-header .close-card-details,
-.card-details .card-details-header .maximize-card-details,
-.card-details .card-details-header .minimize-card-details,
-.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 {
-  float: right;
-}
-.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,
-.card-details .card-details-header .card-mobile-desktop-toggle {
-  font-size: 24px;
-  padding: 5px;
-  margin-right: 5px;
-  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-copy-mobile-button {
-  font-size: 17px;
-  padding: 10px;
-  margin-right: 10px;
-}
-.card-details .card-details-header .card-details-menu {
-  font-size: 17px;
-  padding: 10px;
-  vertical-align: middle;
-  line-height: 1.2;
-}
-.card-details .card-details-header .card-details-menu-mobile-web {
-  font-size: 17px;
-  padding: 10px;
-  margin-right: 30px;
-}
-.card-details .card-details-header .card-mobile-desktop-toggle,
-.card-details .card-details-header .card-zoom-in,
-.card-details .card-details-header .card-zoom-out {
-  font-size: 24px;
-  padding: 5px 10px 5px 10px;
-  margin-right: 5px;
-  cursor: pointer;
-  user-select: none;
-  float: right;
-}
-
-/* Unify all card text to match title size */
-.card-details {
-  font-size: 1em;
-}
-.card-details p,
-.card-details span,
-.card-details div,
-.card-details a,
-.card-details label,
-.card-details input,
-.card-details textarea,
-.card-details select,
-.card-details button,
-.card-details .card-details-item-title,
-.card-details .card-label,
-.card-details .viewer {
-  font-size: inherit;
-  line-height: 1.5;
-}
-.card-details .card-details-header .card-details-watch {
-  font-size: 17px;
-  padding-left: 7px;
-  color: #a6a6a6;
-}
-.card-details .card-details-header .card-details-title {
-  font-weight: bold;
-  font-size: 1.35em;
-  margin: 7px 0 0;
-  padding: 0;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 1.3;
-  letter-spacing: 0.01em;
-}
-.card-details .card-details-header .linked-card-location {
-  font-style: italic;
-  font-size: 1em;
-  margin-bottom: 0;
-}
-.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: 0 10px;
-}
-.card-details .card-details-header .card-details-list {
-  font-size: 0.9em;
-  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: 0 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;
-}
-.card-details .card-details-items {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 15px 0;
-  gap: 0.5em;
-}
-.card-details .card-details-items .card-details-item {
-  margin-right: 0.5em;
-  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;
-}
-.card-details .card-details-item-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #4d4d4d;
-}
-.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;
-  }
-
-  /* Override for mobile mode even on larger screens */
-  body.mobile-mode .card-details {
-    width: 100vw !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    resize: none !important;
-  }
-
-  .card-details-maximized {
-    padding: 0;
-    flex-shrink: 0;
-    flex-basis: calc(100% - 20px);
-    will-change: flex-basis;
-    overflow-y: auto;
-    overflow-x: auto;
-    background: #f7f7f7;
-    border-radius: 0 0 3px 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: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    transition: none;
-    overflow-y: auto;
-    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    z-index: 100 !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-  }
-
-  /* Ensure card details are above everything on mobile */
-  body.mobile-mode .card-details {
-    z-index: 100 !important;
-    width: 100vw !important;
-    left: 0 !important;
-    right: 0 !important;
-  }
-  .card-details .card-details-canvas {
-    width: 100%;
-    padding-left: 0px;
-    padding: 0 15px;
-  }
-  .card-details .card-details-header .close-card-details {
-    margin-right: 0px;
-    display: block !important;
-  }
-  .card-details .card-details-header .close-card-details-mobile-web {
-    display: block !important;
-    margin-right: 5px !important;
-  }
-  .card-details .card-details-header .card-mobile-desktop-toggle {
-    display: block !important;
-    margin-right: 5px !important;
-  }
-  .card-details .card-details-header .card-mobile-desktop-toggle {
-    display: block !important;
-    margin-right: 5px !important;
-  }
-  .card-details .card-details-header .card-details-menu {
-    margin-right: 40px;
-  }
-  .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;
-  }
-  /* iPhone mobile: enlarge header buttons and increase spacing */
-  body.mobile-mode.iphone-device .card-details .card-details-header {
-    padding-right: 16px;
-  }
-  body.mobile-mode.iphone-device .card-details .card-details-header .close-card-details,
-  body.mobile-mode.iphone-device .card-details .card-details-header .maximize-card-details,
-  body.mobile-mode.iphone-device .card-details .card-details-header .minimize-card-details,
-  body.mobile-mode.iphone-device .card-details .card-details-header .card-details-menu-mobile-web,
-  body.mobile-mode.iphone-device .card-details .card-details-header .card-copy-mobile-button,
-  body.mobile-mode.iphone-device .card-details .card-details-header .card-mobile-desktop-toggle,
-  body.mobile-mode.iphone-device .card-details .card-details-header .card-zoom-in,
-  body.mobile-mode.iphone-device .card-details .card-details-header .card-zoom-out {
-    font-size: 2em !important; /* 2x bigger */
-    padding: 0.3em !important;
-    margin-right: 0.75em !important; /* 2x space compared to default */
-    margin-left: 0 !important;
-  }
-  /* Avoid clipping of the close button on the right edge */
-  body.mobile-mode.iphone-device .card-details .card-details-header .close-card-details {
-    margin-right: 0.75em !important;
-  }
-  /* Enlarge the header title too */
-  body.mobile-mode.iphone-device .card-details .card-details-header .card-details-title {
-    font-size: 1.2em !important;
-    font-weight: bold;
-  }
-}
-
-/* Mobile mode styles - apply when body has mobile-mode class regardless of screen size */
-body.mobile-mode .card-details {
-  width: 100vw !important;
-  padding: 0px !important;
-  margin: 0px !important;
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  z-index: 100 !important;
-  height: 100vh !important;
-  max-height: 100vh !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  overflow-y: auto !important;
-  overflow-x: hidden !important;
-  -webkit-overflow-scrolling: touch;
-}
-
-body.mobile-mode .card-details .card-details-canvas {
-  width: 100% !important;
-  padding: 0 15px !important;
-}
-
-body.mobile-mode .card-details .card-details-header .close-card-details,
-body.mobile-mode .card-details .card-details-header .close-card-details-mobile-web {
-  display: block !important;
-}
-.card-details-white {
-  background: #fff !important;
-  color: #000 !important;
-  border: 1px solid #eee;
-}
-.card-details-green {
-  background: #3cb500 !important;
-  color: #fff !important;
-}
-.card-details-yellow {
-  background: #fad900 !important;
-  color: #000 !important;
-}
-.card-details-orange {
-  background: #ff9f19 !important;
-  color: #000 !important;
-}
-.card-details-red {
-  background: #eb4646 !important;
-  color: #fff !important;
-}
-.card-details-purple {
-  background: #a632db !important;
-  color: #fff !important;
-}
-.card-details-blue {
-  background: #0079bf !important;
-  color: #fff !important;
-}
-.card-details-pink {
-  background: #ff78cb !important;
-  color: #000 !important;
-}
-.card-details-sky {
-  background: #00c2e0 !important;
-  color: #fff !important;
-}
-.card-details-black {
-  background: #4d4d4d !important;
-  color: #fff !important;
-}
-.card-details-lime {
-  background: #51e898 !important;
-  color: #000 !important;
-}
-.card-details-silver {
-  background: #c0c0c0 !important;
-  color: #000 !important;
-}
-.card-details-peachpuff {
-  background: #ffdab9 !important;
-  color: #000 !important;
-}
-.card-details-crimson {
-  background: #dc143c !important;
-  color: #fff !important;
-}
-.card-details-plum {
-  background: #dda0dd !important;
-  color: #000 !important;
-}
-.card-details-darkgreen {
-  background: #006400 !important;
-  color: #fff !important;
-}
-.card-details-slateblue {
-  background: #6a5acd !important;
-  color: #fff !important;
-}
-.card-details-magenta {
-  background: #f0f !important;
-  color: #fff !important;
-}
-.card-details-gold {
-  background: #ffd700 !important;
-  color: #000 !important;
-}
-.card-details-navy {
-  background: #000080 !important;
-  color: #fff !important;
-}
-.card-details-gray {
-  background: #808080 !important;
-  color: #fff !important;
-}
-.card-details-saddlebrown {
-  background: #8b4513 !important;
-  color: #fff !important;
-}
-.card-details-paleturquoise {
-  background: #afeeee !important;
-  color: #000 !important;
-}
-.card-details-mistyrose {
-  background: #ffe4e1 !important;
-  color: #000 !important;
-}
-.card-details-indigo {
-  background: #4b0082 !important;
-  color: #fff !important;
-}
-.voted {
-  opacity: 0.7;
-}
-.vote-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.vote-title .js-edit-date {
-  align-self: flex-start;
-  margin-left: 6px;
-}
-.vote-result {
-  display: flex;
-  gap: 6px;
-}
-.js-show-positive-votes {
-  cursor: pointer;
-}
-.poker-voted {
-  opacity: 0.7;
-}
-.poker-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.poker-title .js-edit-date {
-  align-self: flex-start;
-  margin-left: 6px;
-}
-.poker-result {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 7px;
-}
-.js-show-positive-poker-votes {
-  cursor: pointer;
-}
-.poker-deck {
-  display: grid;
-  grid-auto-flow: row;
-  text-align: center;
-  gap: 6px;
-}
-.poker-card-result {
-  width: 34px;
-  font-size: 1em;
-  font-weight: bold;
-  padding: 4px 2px;
-  cursor: default;
-  border-radius: 3px;
-}
-.winner {
-  font-weight: bold;
-  outline: #2d2d2d solid 2px;
-}
-.loser {
-  opacity: 0.5;
-}
-.responsive-table {
-  overflow-x: auto;
-  width: 100%;
-}
-.poker-table {
-  display: table;
-  width: 100%;
-  padding-top: 10px;
-}
-.poker-table-row {
-  display: table-row;
-}
-.poker-table-heading {
-  background-color: #eee;
-  display: table-header-group;
-}
-.poker-table-cell {
-  display: table-cell;
-  padding: 0 0 5px 2px;
-  border-bottom: 1px solid #d2d0d0;
-  text-align: center;
-  min-width: 45px;
-}
-.poker-table-cell-who {
-  width: 150px;
-  vertical-align: middle;
-}
-.poker-table-heading-left,
-.poker-table-heading-right {
-  display: table-header-group;
-  font-weight: bold;
-  border-top: 1px solid #808080;
-}
-@media (max-width: 400px) {
-  .poker-table-heading-right {
-    display: none;
-  }
-}
-.poker-table-body {
-  display: table-row-group;
-}
-.poker-table-side-left,
-.poker-table-side-right {
-  display: inline-block;
-}
-.poker-table-side-right {
-  padding-left: 10px;
-}
-@media (max-width: 400px) {
-  .poker-table-side-right {
-    padding-left: 0px;
-  }
-}
-.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;
-  border-radius: 2px;
-  padding: 3px 6px;
-}
-.estimation-add button {
-  display: inline-block;
-  float: right;
-  margin: auto;
-  border-radius: 2px;
-  padding: 3px 10px;
-}
-.poker-card {
-  width: 48px;
-  height: 72px;
-  float: left;
-  background: #fff;
-  border-radius: 5px;
-  display: table;
-  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;
-  vertical-align: middle;
-  border-radius: 5px;
-  overflow: hidden;
-  background-color: #cecece;
-}
-
-/* Drag and drop file upload visual feedback */
-.js-card-details.is-dragging-over {
-  border: 2px dashed #0079bf;
-  background-color: #e3f2fd !important;
-  transform: scale(1.01);
-  transition: all 0.2s ease;
-}

client/components/cards/cardDetails.styl

@@ -0,0 +1,229 @@
+@import 'nib'
+
+.card-details
+  padding: 0
+  flex-shrink: 0
+  flex-basis: 510px
+  will-change: flex-basis
+  overflow-y: scroll
+  overflow-x: hidden
+  background: darken(white, 3%)
+  border-radius: bottom 3px
+  z-index: 20 !important
+  animation: flexGrowIn 0.1s
+  box-shadow: 0 0 7px 0 darken(white, 30%)
+  transition: flex-basis 0.1s
+
+  .mCustomScrollBox
+    padding-left: 0
+
+  .ps-scrollbar-y-rail
+    pointer-event: all
+    position: absolute;
+
+  .card-details-canvas
+    width: 470px
+    padding-left: 20px;
+
+  .card-details-header
+    margin: 0 -20px 5px
+    padding 7px 16px
+    background: darken(white, 7%)
+    border-bottom: 1px solid darken(white, 14%)
+
+    .close-card-details,
+    .card-details-menu
+      float: right
+
+    .close-card-details
+      font-size: 24px
+      padding: 5px
+      margin-right: -8px
+
+    .card-details-menu
+      font-size: 17px
+      padding: 10px
+
+    .card-details-watch
+      font-size: 17px
+      padding-left: 7px
+      color: #a6a6a6
+
+    .card-details-title
+      font-weight: bold
+      font-size: 1.33em
+      margin: 7px 0 0
+      padding: 0
+
+    .linked-card-location
+      font-style: italic
+      font-size: 1em
+      margin-bottom: 0
+      & p
+        margin-bottom: 0
+
+    form.inlined-form
+      margin-top: 5px
+      margin-bottom: 10px
+
+    .card-details-list
+      font-size: 0.85em
+      margin-bottom: 3px
+
+      a.card-details-list-title
+        font-weight: bold
+
+        &.is-editable
+          display: inline-block
+          background: darken(white, 10%)
+          border-radius: 3px
+          padding: 0px 5px
+
+  .card-description textarea
+    min-height: 100px
+
+  .card-details-items
+    display: flex
+    flex-wrap: wrap
+    margin: 15px 0
+    & ~ .js-open-inlined-form
+        .viewer
+            background-color #ffffff !important
+            padding 15px !important
+            border 1px solid #000000 !important
+
+    .card-details-item
+      margin-right: 0.5em
+      &:last-child
+        margin-right: 0
+      &.card-details-item-labels,
+      &.card-details-item-members,
+      &.card-details-item-received,
+      &.card-details-item-start,
+      &.card-details-item-due,
+      &.card-details-item-end,
+      &.card-details-item-customfield,
+      &.card-details-item-name
+        max-width: 50%
+        flex-grow: 1
+
+  .card-details-item-title
+    font-size: 16px
+    color: #000
+
+  .card-label
+    padding-top: 5px
+    padding-bottom: 5px
+
+  .activities
+    padding-top: 10px
+
+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% - 40px)
+    padding: 0px 20px 0px 20px
+    margin: 0px
+    transition: none
+
+    .card-details-canvas
+      width: 100%
+      padding-left: 0px;
+
+    .card-details-header
+      .close-card-details
+        margin-right: 0px
+
+      .card-details-menu
+        margin-right: 10px
+
+card-details-color(background, color...)
+  background: background !important
+  if color
+    color: color !important //overwrite text for better visibility
+
+.card-details-white
+  card-details-color(unset, #000) //Black text for better visibility
+  border: 1px solid #eee
+
+.card-details-green
+  card-details-color(#3cb500, #ffffff) //White text for better visibility
+
+.card-details-yellow
+  card-details-color(#fad900, #000) //Black text for better visibility
+
+.card-details-orange
+  card-details-color(#ff9f19, #000) //Black text for better visibility
+
+.card-details-red
+  card-details-color(#eb4646, #ffffff) //White text for better visibility
+
+.card-details-purple
+  card-details-color(#a632db, #ffffff) //White text for better visibility
+
+.card-details-blue
+  card-details-color(#0079bf, #ffffff) //White text for better visibility
+
+.card-details-pink
+  card-details-color(#ff78cb, #000) //Black text for better visibility
+
+.card-details-sky
+  card-details-color(#00c2e0, #ffffff) //White text for better visibility
+
+.card-details-black
+  card-details-color(#4d4d4d, #ffffff) //White text for better visibility
+
+.card-details-lime
+  card-details-color(#51e898, #000) //Black text for better visibility
+
+.card-details-silver
+  card-details-color(#c0c0c0, #000) //Black text for better visibility
+
+.card-details-peachpuff
+  card-details-color(#ffdab9, #000) //Black text for better visibility
+
+.card-details-crimson
+  card-details-color(#dc143c, #ffffff) //White text for better visibility
+
+.card-details-plum
+  card-details-color(#dda0dd, #000) //Black text for better visibility
+
+.card-details-darkgreen
+  card-details-color(#006400, #ffffff) //White text for better visibility
+
+.card-details-slateblue
+  card-details-color(#6a5acd, #ffffff) //White text for better visibility
+
+.card-details-magenta
+  card-details-color(#ff00ff, #ffffff) //White text for better visibility
+
+.card-details-gold
+  card-details-color(#ffd700, #000) //Black text for better visibility
+
+.card-details-navy
+  card-details-color(#000080, #ffffff) //White text for better visibility
+
+.card-details-gray
+  card-details-color(#808080, #ffffff) //White text for better visibility
+
+.card-details-saddlebrown
+  card-details-color(#8b4513, #ffffff) //White text for better visibility
+
+.card-details-paleturquoise
+  card-details-color(#afeeee, #000) //Black text for better visibility
+
+.card-details-mistyrose
+  card-details-color(#ffe4e1, #000) //Black text for better visibility
+
+.card-details-indigo
+  card-details-color(#4b0082, #ffffff) //White text for better visibility