v8.09

Thanks to xet7 !

Fixes #5962,
fixes #5952

.meteor/packages

@@ -52,8 +52,8 @@ ongoworks:speakingurl
 raix:handlebar-helpers
 http@2.0.0! # force new http package
 
-# Datepicker
-wekan-bootstrap-datepicker
+# Datepicker (disabled - using native HTML inputs)
+# wekan-bootstrap-datepicker
 
 # UI components
 ostrio:i18n
@@ -93,4 +93,4 @@ ejson@1.1.3
 logging@1.3.3
 wekan-fullcalendar
 momentjs:moment@2.29.3
-wekan-fontawesome
+# wekan-fontawesome

.meteor/versions

@@ -155,8 +155,6 @@ wekan-accounts-cas@0.1.0
 wekan-accounts-lockout@1.0.0
 wekan-accounts-oidc@1.0.10
 wekan-accounts-sandstorm@0.8.0
-wekan-bootstrap-datepicker@1.10.0
-wekan-fontawesome@6.4.2
 wekan-fullcalendar@3.10.5
 wekan-ldap@0.0.2
 wekan-markdown@1.0.9

CHANGELOG.md

@@ -19,6 +19,153 @@ Fixing other platforms In Progress.
 
 [Upgrade WeKan](https://wekan.fi/upgrade/)
 
+WeKan 8.00-8.06 had wrong raw database directory setting /var/snap/wekan/common/wekan and some cards were not visible.
+Those are fixed at WeKan 8.07 where database directory is back to /var/snap/wekan/common and all cards are visible.
+
+# v8.09 2025-10-21 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Fix Admin Panel / People editing and layout](https://github.com/wekan/wekan/commit/7a585a3dfb080af51f88669ea5928f715779cee4).
+  Thanks to xet7.
+- [Fix upgrade to 8.08 duplicates lists](https://github.com/wekan/wekan/commit/c3a405222782a4a91eb8725faaa8309f0926dcc4).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v8.08 2025-10-21 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Fix opening board migration of Shared Lists to Per-Swimlane lists to use ReactiveCache correctly without errors](https://github.com/wekan/wekan/commit/9536e60bd1c77c8a22e89d2eb2968e11da3a28cd).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v8.07 2025-10-20 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Fix Snap Candidate WeKan 8.00-8.06 commit ae01ea5 database directory from /var/snap/wekan/common/wekan back to 8.07 /var/snap/wekan/common](https://github.com/wekan/wekan/commit/98f141d62f3b6d4371d024c72eae6688d0f4e516).
+  Thanks to xet7.
+- [When opening board, add missing lists](https://github.com/wekan/wekan/commit/80777b46638ed15b8194105751499ada4b066d19).
+  Thanks to xet7.
+- [If Snap Candidate MongoDB raw database files were at SNAP_COMMON/wekan, migrate them back to SNAP_COMMON](https://github.com/wekan/wekan/commit/f2019b1059c8d6f4cd9a46c3db7e004c4928cebb).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v8.06 2025-10-20 WeKan ® release
+
+This release adds the following new features:
+
+- [At Public Board, drag resize list width and swimlane height. For logged in users, fix adding labels](https://github.com/wekan/wekan/commit/351433524708e9a7ccb4795d9ca31a78904943ea).
+  Thanks to xet7.
+- [When opening board, migrate from Shared Lists to Per-Swimlane Lists](https://github.com/wekan/wekan/commit/1e6252de7f26f3af14a99fb63b5dac27ba0576f3).
+  Thanks to xet7.
+- [Added Date Format setting to Opened Card](https://github.com/wekan/wekan/commit/2dd3916f7ee3df10bd88643cf2c796cb166b3044).
+  Thanks to xet7.
+
+and fixes the following bugs:
+
+- [Fix add and drag drop attachments to minicards and card](https://github.com/wekan/wekan/commit/b06daff4c7e63453643459f7d8798fde97e3200c).
+  Thanks to xet7.
+- [Fix starred, archive and clone icons](https://github.com/wekan/wekan/pull/5953).
+  Thanks to helioguardabaxo.
+- Fix Due dates to be color coded and have unicode icons.
+  [Part 1](https://github.com/wekan/wekan/commit/d965faa3174dc81636106e6f81435b2750b0625f),
+  [Part 2](https://github.com/wekan/wekan/commit/101048339bdd1e45f876aeb1aa5ec32ceda28139).
+  Thanks to xet7.
+- [Fix unable to see My Due Cards](https://github.com/wekan/wekan/commit/66b444e2b0c9b2ed5f98cd1ff0cd9222b2d0c624).
+  Thanks to xet7.
+- Fix drag drop lists.
+  [Part 1](https://github.com/wekan/wekan/commit/324f3f7794aace800022a24deb5fd5fb36ebd384),
+  [Part 2](https://github.com/wekan/wekan/commit/ff516ec696ef499f11b04b30053eeb9d3f96d8d1).
+  Thanks to xet7.
+- [Removed extra pipe characters](https://github.com/wekan/wekan/commit/caa6e615ff3c3681bf2b470a625eb39c6009b825).
+  Thanks to xet7.
+- [Fix syntax error at migrations](https://github.com/wekan/wekan/commit/eb6b42c4c9f99894fd93e62c9b3fceda3429c96c).
+  Thanks to xet7.
+- [Fix opened card attachments button text to be at tooltip, not at opened card](https://github.com/wekan/wekan/commit/1e53125499ef563ca3c65f786ac3525e5f50274c).
+  Thanks to xet7.
+- [Fix Broken Hyperlinks in Markdown to HTML conversion](https://github.com/wekan/wekan/commit/973a49526fdf22c143468d3d9db64269b1defa7d).
+  Thanks to xet7.
+- [Fix migrations](https://github.com/wekan/wekan/commit/0acbf30b0346f49c0ee8f5161fb00b4eca8e1a0c).
+  Thanks to xet7.
+- [Fix card popup to use HTML date, not anymore JQuery date](https://github.com/wekan/wekan/commit/2d44881619d78e8ef4c5060d17e9035f5babd778).
+  Thanks to xet7.
+- [Fix Bug: Scale of Minicard icons is linked to horizontal screensize](https://github.com/wekan/wekan/commit/b6b0c5fe6d7dbd37926c662f96f2e3653cabd867).
+  Thanks to xet7.
+- [Fix Bug Member settings drops to the second line and overlaps when many boards are starred as favourites](https://github.com/wekan/wekan/commit/46d46e313cbb8d9c3e4a976ec27b5141c266050f).
+  Thanks to xet7.
+- [Some mobile view fixes](https://github.com/wekan/wekan/commit/c4af4d03acc02f3e54e91f2a65bce2f88742b1a6).
+  Thanks to xet7.
+- [Have all iPhone use mobile view by default, while still having possibility to use mobile/desktop switch button for desktop mode](https://github.com/wekan/wekan/commit/5df4efd7ba06e618e454f068df05885306283bb1).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v8.05 2025-10-17 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Show original positions of swimlanes, lists and cards](https://github.com/wekan/wekan/commit/2543df94252c2789fb484ae52b9a6ff298252ceb).
+  Thanks to xet7.
+- Fix popups issues at Edit Avatar, Archive card confirm, etc.
+  [Part 1](https://github.com/wekan/wekan/commit/87ae085e6d0a56a2083eec819cf7d795d3e51e1a),
+  [Part 2](https://github.com/wekan/wekan/commit/386aea7c788d6eaf9d486ead4d81453401adf390).
+  Thanks to xet7.
+- [Changed wekan-boostrap-datepicker to HTML datepicker](https://github.com/wekan/wekan/commit/79b94824efedaa9e256de931fd26398eb2838d6a).
+  Thanks to xet7.
+- [Replaced moment.js with Javascript date](https://github.com/wekan/wekan/commit/cb6afe67a7363af89663ba17392dc5f90a15f703).
+  Thanks to xet7.
+- [Convert Font Awesome to Unicode Icons. Part 1. In Progress](https://github.com/wekan/wekan/commit/2947238a021b6952b56e828d49a8c0094520d89a).
+  Thanks to xet7.
+- [Resize height of swimlane by dragging. Font Awesome to Unicode icons](https://github.com/wekan/wekan/commit/09631d6b0c1b8e3bbc3bf45d4bb65449b46f1288).
+  Thanks to xet7.
+- [Removed not needed visible text from mobile desktop switch button](https://github.com/wekan/wekan/commit/62ede481966107405460f6d5b90f292c98bae254).
+  Thanks to xet7.
+- Font Awesome to Unicode icons.
+  [Part 3](https://github.com/wekan/wekan/commit/3af94c2a9059a399b9f9946c387caff892ace2f9).
+  [Part 4](https://github.com/wekan/wekan/commit/088bc16072ea0dd02aa2dec6a2e3e9aed00a3cc9).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v8.04 2025-10-16 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Make sure that all cards are visible](https://github.com/wekan/wekan/commit/6b848b318d62afe9772218febdb09c7426774f60).
+  Thanks to xet7.
+- [Fix wide screen](https://github.com/wekan/wekan/commit/f08c7702eecf23588f7bc023beefb453edd704c6).
+  Thanks to xet7.
+- Fix popups positioning.
+  [Part 1](https://github.com/wekan/wekan/commit/77eea4d494e5db8e2c0e59732bcea73aa163bc13),
+  [Part 1](https://github.com/wekan/wekan/commit/00ddec75754bbbccc6fb9b3096495b9609246480).
+  Thanks to xet7.
+- [Remove using fork with MongoDB at Snap](https://github.com/wekan/wekan/commit/690481c138f9629054180310dd172295c7f6d34e).
+  Thanks to xet7.
+- [Use only MongoDB 7 at Snap](https://github.com/wekan/wekan/commit/79e83e33ec1dcec4eea81d5fb4a9f7381c176a12).
+  Thanks to xet7.
+- [Removed extra npm packages](https://github.com/wekan/wekan/commit/dd88483ec7526eee4a97bac5f09e03985be5d923).
+  Thanks to xet7.
+- [Try to fix Broken Hyperlinks in Markdown to HTML conversion](https://github.com/wekan/wekan/commit/bbbd3abf06e45a3fa57c4aa987d87f1873eb11d6).
+  Thanks to xet7.
+- [Disable not working minio and s3 support temporarily](https://github.com/wekan/wekan/commit/4283b5b0e330930fff1fa2bb73c355a4ffb4cda0).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v8.03 2025-10-14 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Fix Snap MongoDB to not fork at systemd, so it stays running](https://github.com/wekan/wekan/commit/5792a869594b4c79a93db414b95a13d60013193b).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
 # v8.02 2025-10-14 WeKan ® release
 
 This release adds the following new features:
@@ -141,7 +288,7 @@ and adds the following new features:
 
 - [Mobile one board per row. Board zoom size percent. Board toggle mobile/desktop mode. In Progress](https://github.com/wekan/wekan/commit/752699d1c2fb8ea9ff0f3ec9ae0b2b776443d826).
   Thanks to xet7.
-- [Drag any files from file manager to minicard or opened card.
+- Drag any files from file manager to minicard or opened card.
   [Part 1](https://github.com/wekan/wekan/commit/3e9481c5bd2c02ba501bd0a6ef1d1e6ce82bb1d9),
   [Part 2](https://github.com/wekan/wekan/commit/cdd7d69c660d0b6ac06b7b75d4f59985b8a9322a).
   Thanks to xet7.

Dockerfile

@@ -249,9 +249,9 @@ cd /home/wekan/app
 # Remove legacy webbroser bundle, so that Wekan works also at Android Firefox, iOS Safari, etc.
 #rm -rf /home/wekan/app_build/bundle/programs/web.browser.legacy
 #mv /home/wekan/app_build/bundle /build
-wget "https://github.com/wekan/wekan/releases/download/v8.02/wekan-8.02-amd64.zip"
-unzip wekan-8.02-amd64.zip
-rm wekan-8.02-amd64.zip
+wget "https://github.com/wekan/wekan/releases/download/v8.09/wekan-8.09-amd64.zip"
+unzip wekan-8.09-amd64.zip
+rm wekan-8.09-amd64.zip
 mv /home/wekan/app/bundle /build
 
 # Put back the original tar

Stackerfile.yml

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

client/components/boardConversionProgress.jade

@@ -3,7 +3,7 @@ template(name="boardConversionProgress")
     .board-conversion-modal
       .board-conversion-header
         h3
-          i.fa.fa-cogs
+          | ⚙️
           | {{_ 'converting-board'}}
         p {{_ 'converting-board-description'}}
       
@@ -14,14 +14,14 @@ template(name="boardConversionProgress")
           .progress-text {{conversionProgress}}%
         
         .conversion-status
-          i.fa.fa-spinner.fa-spin
+          | ⚙️
           | {{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/boards/boardBody.css

@@ -294,7 +294,8 @@
   min-width: 100%;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .board-wrapper {
     width: 100% !important;
     min-width: 100% !important;
@@ -496,3 +497,10 @@
   font-size: 25px;
   cursor: pointer;
 }
+
+/* Global file drag over state for board canvas */
+.board-canvas.file-drag-over {
+  background-color: rgba(0, 123, 255, 0.05) !important;
+  border: 2px dashed #007bff !important;
+  transition: all 0.2s ease;
+}

client/components/boards/boardBody.js

@@ -112,6 +112,12 @@ BlazeComponent.extendComponent({
         }
       }
 
+      // Convert shared lists to per-swimlane lists if needed
+      await this.convertSharedListsToPerSwimlane(boardId);
+
+      // Fix missing lists migration (for cards with wrong listId references)
+      await this.fixMissingLists(boardId);
+
       // Start attachment migration in background if needed
       this.startAttachmentMigrationIfNeeded(boardId);
     } catch (error) {
@@ -139,6 +145,163 @@ BlazeComponent.extendComponent({
     }
   },
 
+  async convertSharedListsToPerSwimlane(boardId) {
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) return;
+
+      // Check if board has already been processed for shared lists conversion
+      if (board.hasSharedListsConverted) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has already been processed for shared lists conversion`);
+        }
+        return;
+      }
+
+      // Get all lists for this board
+      const allLists = board.lists();
+      const swimlanes = board.swimlanes();
+      
+      if (swimlanes.length === 0) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has no swimlanes, skipping shared lists conversion`);
+        }
+        return;
+      }
+
+      // Find shared lists (lists with empty swimlaneId or null swimlaneId)
+      const sharedLists = allLists.filter(list => !list.swimlaneId || list.swimlaneId === '');
+      
+      if (sharedLists.length === 0) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has no shared lists to convert`);
+        }
+        // Mark as processed even if no shared lists
+        Meteor.call('boards.update', boardId, { $set: { hasSharedListsConverted: true } });
+        return;
+      }
+
+      if (process.env.DEBUG === 'true') {
+        console.log(`Converting ${sharedLists.length} shared lists to per-swimlane lists for board ${boardId}`);
+      }
+
+      // Convert each shared list to per-swimlane lists
+      for (const sharedList of sharedLists) {
+        // Create a copy of the list for each swimlane
+        for (const swimlane of swimlanes) {
+          // Check if this list already exists in this swimlane
+          const existingList = Lists.findOne({
+            boardId: boardId,
+            swimlaneId: swimlane._id,
+            title: sharedList.title
+          });
+
+          if (!existingList) {
+            // Create a new list in this swimlane
+            const newListData = {
+              title: sharedList.title,
+              boardId: boardId,
+              swimlaneId: swimlane._id,
+              sort: sharedList.sort || 0,
+              archived: sharedList.archived || false, // Preserve archived state from original list
+              createdAt: new Date(),
+              modifiedAt: new Date()
+            };
+
+            // Copy other properties if they exist
+            if (sharedList.color) newListData.color = sharedList.color;
+            if (sharedList.wipLimit) newListData.wipLimit = sharedList.wipLimit;
+            if (sharedList.wipLimitEnabled) newListData.wipLimitEnabled = sharedList.wipLimitEnabled;
+            if (sharedList.wipLimitSoft) newListData.wipLimitSoft = sharedList.wipLimitSoft;
+
+            Lists.insert(newListData);
+            
+            if (process.env.DEBUG === 'true') {
+              const archivedStatus = sharedList.archived ? ' (archived)' : ' (active)';
+              console.log(`Created list "${sharedList.title}"${archivedStatus} for swimlane ${swimlane.title || swimlane._id}`);
+            }
+          } else {
+            if (process.env.DEBUG === 'true') {
+              console.log(`List "${sharedList.title}" already exists in swimlane ${swimlane.title || swimlane._id}, skipping`);
+            }
+          }
+        }
+
+        // Remove the original shared list completely
+        Lists.remove(sharedList._id);
+        
+        if (process.env.DEBUG === 'true') {
+          console.log(`Removed shared list "${sharedList.title}"`);
+        }
+      }
+
+      // Mark board as processed
+      Meteor.call('boards.update', boardId, { $set: { hasSharedListsConverted: true } });
+
+      if (process.env.DEBUG === 'true') {
+        console.log(`Successfully converted ${sharedLists.length} shared lists to per-swimlane lists for board ${boardId}`);
+      }
+
+    } catch (error) {
+      console.error('Error converting shared lists to per-swimlane:', error);
+    }
+  },
+
+  async fixMissingLists(boardId) {
+    try {
+      const board = ReactiveCache.getBoard(boardId);
+      if (!board) return;
+
+      // Check if board has already been processed for missing lists fix
+      if (board.fixMissingListsCompleted) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} has already been processed for missing lists fix`);
+        }
+        return;
+      }
+
+      // Check if migration is needed
+      const needsMigration = await new Promise((resolve, reject) => {
+        Meteor.call('fixMissingListsMigration.needsMigration', boardId, (error, result) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(result);
+          }
+        });
+      });
+
+      if (!needsMigration) {
+        if (process.env.DEBUG === 'true') {
+          console.log(`Board ${boardId} does not need missing lists fix`);
+        }
+        return;
+      }
+
+      if (process.env.DEBUG === 'true') {
+        console.log(`Starting fix missing lists migration for board ${boardId}`);
+      }
+
+      // Execute the migration
+      const result = await new Promise((resolve, reject) => {
+        Meteor.call('fixMissingListsMigration.execute', boardId, (error, result) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(result);
+          }
+        });
+      });
+
+      if (result && result.success) {
+        console.log(`Successfully fixed missing lists for board ${boardId}: created ${result.createdLists} lists, updated ${result.updatedCards} cards`);
+      }
+
+    } catch (error) {
+      console.error('Error fixing missing lists:', error);
+    }
+  },
+
   async startAttachmentMigrationIfNeeded(boardId) {
     try {
       // Check if board has already been migrated
@@ -550,22 +713,20 @@ BlazeComponent.extendComponent({
       // Always reset dragscroll on view switch
       dragscroll.reset();
 
-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $swimlanesDom.sortable({
-          handle: '.js-swimlane-header-handle',
-        });
-      } else {
-        $swimlanesDom.sortable({
-          handle: '.swimlane-header',
-        });
-      }
+      if ($swimlanesDom.data('uiSortable') || $swimlanesDom.data('sortable')) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+          $swimlanesDom.sortable('option', 'handle', '.js-swimlane-header-handle');
+        } else {
+          $swimlanesDom.sortable('option', 'handle', '.swimlane-header');
+        }
 
-      // Disable drag-dropping if the current user is not a board member
-      $swimlanesDom.sortable(
-        'option',
-        'disabled',
-        !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
-      );
+        // Disable drag-dropping if the current user is not a board member
+        $swimlanesDom.sortable(
+          'option',
+          'disabled',
+          !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
+        );
+      }
     });
 
     // If there is no data in the board (ie, no lists) we autofocus the list
@@ -721,6 +882,31 @@ BlazeComponent.extendComponent({
           }
         },
         'click .js-empty-board-add-swimlane': Popup.open('swimlaneAdd'),
+        // Global drag and drop file upload handlers for better visual feedback
+        'dragover .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            // Add visual indicator that files can be dropped
+            $('.board-canvas').addClass('file-drag-over');
+          }
+        },
+        'dragleave .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            // Only remove class if we're leaving the board canvas entirely
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              $('.board-canvas').removeClass('file-drag-over');
+            }
+          }
+        },
+        'drop .board-canvas'(event) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            $('.board-canvas').removeClass('file-drag-over');
+          }
+        },
       },
     ];
   },

client/components/boards/boardHeader.jade

@@ -14,41 +14,41 @@ template(name="boardHeaderBar")
           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}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}" aria-label="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}")
-            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
-            if showStarCounter
-              span
-                = currentBoard.stars
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+              title="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}" aria-label="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}")
+              | {{#if isStarred}}⭐{{else}}☆{{/if}}
+              if showStarCounter
+                span
+                  = currentBoard.stars
 
-          a.board-header-btn(
-            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-            title="{{_ currentBoard.permission}}")
-            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-            span {{_ currentBoard.permission}}
+            a.board-header-btn(
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              title="{{_ currentBoard.permission}}")
+              | {{#if currentBoard.isPublic}}🌐{{else}}🔒{{/if}}
+              span {{_ currentBoard.permission}}
 
-          a.board-header-btn.js-watch-board(
-            title="{{_ watchLevel }}")
-            if $eq watchLevel "watching"
-              i.fa.fa-eye
-            if $eq watchLevel "tracking"
-              i.fa.fa-bell
-            if $eq watchLevel "muted"
-              i.fa.fa-bell-slash
-            span {{_ watchLevel}}
-          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-            i.fa.fa-sort
-            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+            a.board-header-btn.js-watch-board(
+              title="{{_ watchLevel }}")
+              if $eq watchLevel "watching"
+                | 👁️
+              if $eq watchLevel "tracking"
+                | 🔔
+              if $eq watchLevel "muted"
+                | 🔕
+              span {{_ watchLevel}}
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+              | {{sortCardsIcon}}
+              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
             if isSortActive
               a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
-                i.fa.fa-times-thin
+                | ❌
 
         else
           a.board-header-btn.js-log-in(
             title="{{_ 'log-in'}}")
-            i.fa.fa-sign-in
+            | 🚪
             span {{_ 'log-in'}}
 
   .board-header-btns.center
@@ -59,40 +59,40 @@ template(name="boardHeaderBar")
         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}}")
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+              | {{#if isStarred}}⭐{{else}}☆{{/if}}
 
-          a.board-header-btn(
-            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-            title="{{_ currentBoard.permission}}")
-            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+            a.board-header-btn(
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              title="{{_ currentBoard.permission}}")
+              | {{#if currentBoard.isPublic}}🌐{{else}}🔒{{/if}}
 
-          a.board-header-btn.js-watch-board(
-            title="{{_ watchLevel }}")
-            if $eq watchLevel "watching"
-              i.fa.fa-eye
-            if $eq watchLevel "tracking"
-              i.fa.fa-bell
-            if $eq watchLevel "muted"
-              i.fa.fa-bell-slash
-          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-            i.fa.fa-sort
+            a.board-header-btn.js-watch-board(
+              title="{{_ watchLevel }}")
+              if $eq watchLevel "watching"
+                | 👁️
+              if $eq watchLevel "tracking"
+                | 🔔
+              if $eq watchLevel "muted"
+                | 🔕
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+              | {{sortCardsIcon}}
             if isSortActive
               a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
-                i.fa.fa-times-thin
+                | ❌
 
         else
           a.board-header-btn.js-log-in(
             title="{{_ 'log-in'}}")
-            i.fa.fa-sign-in
+            | 🚪
 
       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'}}")
@@ -102,56 +102,56 @@ template(name="boardHeaderBar")
       a.board-header-btn.js-open-filter-view(
           title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
           class="{{#if Filter.isActive}}emphasis{{/if}}")
-        i.fa.fa-filter
+        | 🔽
         if Filter.isActive
           a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
-            i.fa.fa-times-thin
+            | ❌
 
       a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
-        i.fa.fa-search
+        | 🔍
 
       unless currentBoard.isTemplatesBoard
         a.board-header-btn.js-toggle-board-view(
           title="{{_ 'board-view'}}")
-          i.fa.fa-caret-down
+          | ▼
           if $eq boardView 'board-view-swimlanes'
-            i.fa.fa-th-large
+            | 🏊
           if $eq boardView 'board-view-lists'
-            i.fa.fa-trello
+            | 📋
           if $eq boardView 'board-view-cal'
-            i.fa.fa-calendar
+            | 📅
 
       if canModifyBoard
         a.board-header-btn.js-multiselection-activate(
             title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
             class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
-          i.fa.fa-check-square-o
-          if MultiSelection.isActive
-            a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
-              i.fa.fa-times-thin
+          | ☑️
+        if MultiSelection.isActive
+          a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+            | ❌
 
       .separator
       a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
-        i.fa.fa-navicon
+        | ☰
 
 template(name="boardVisibilityList")
   ul.pop-over-list
     li
       with "private"
         a.js-select-visibility
-          i.fa.fa-lock.colorful
+          | 🔒
           | {{_ 'private'}}
           if visibilityCheck
-            i.fa.fa-check
+            | ✅
           span.sub-name {{_ 'private-desc'}}
     if notAllowPrivateVisibilityOnly
       li
         with "public"
           a.js-select-visibility
-            i.fa.fa-globe.colorful
+            | 🌐
             | {{_ 'public'}}
             if visibilityCheck
-              i.fa.fa-check
+              | ✅
             span.sub-name {{_ 'public-desc'}}
 
 template(name="boardChangeVisibilityPopup")
@@ -162,26 +162,26 @@ template(name="boardChangeWatchPopup")
     li
       with "watching"
         a.js-select-watch
-          i.fa.fa-eye.colorful
+          | 👁️
           | {{_ 'watching'}}
           if watchCheck
-            i.fa.fa-check
+            | ✅
           span.sub-name {{_ 'watching-info'}}
     li
       with "tracking"
         a.js-select-watch
-          i.fa.fa-bell.colorful
+          | 🔔
           | {{_ 'tracking'}}
           if watchCheck
-            i.fa.fa-check
+            | ✅
           span.sub-name {{_ 'tracking-info'}}
     li
       with "muted"
         a.js-select-watch
-          i.fa.fa-bell-slash.colorful
+          | 🔕
           | {{_ 'muted'}}
           if watchCheck
-            i.fa.fa-check
+            | ✅
           span.sub-name {{_ 'muted-info'}}
 
 template(name="boardChangeViewPopup")
@@ -189,24 +189,24 @@ template(name="boardChangeViewPopup")
     li
       with "board-view-swimlanes"
         a.js-open-swimlanes-view
-          i.fa.fa-th-large.colorful
+          | 🏊
           | {{_ 'board-view-swimlanes'}}
           if $eq Utils.boardView "board-view-swimlanes"
-            i.fa.fa-check
+            | ✅
     li
       with "board-view-lists"
         a.js-open-lists-view
-          i.fa.fa-trello.colorful
+          | 📋
           | {{_ 'board-view-lists'}}
           if $eq Utils.boardView "board-view-lists"
-            i.fa.fa-check
+            | ✅
     li
       with "board-view-cal"
         a.js-open-cal-view
-          i.fa.fa-calendar.colorful
+          | 📅
           | {{_ 'board-view-cal'}}
           if $eq Utils.boardView "board-view-cal"
-            i.fa.fa-check
+            | ✅
 
 template(name="createBoard")
   form
@@ -218,11 +218,40 @@ template(name="createBoard")
     else
       p.quiet
         if $eq visibility.get 'public'
-          span.fa.fa-globe.colorful
+          span 🌐
           = " "
           | {{{_ 'board-public-info'}}}
         else
-          span.fa.fa-lock.colorful
+          span 🔒
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import'}}
+    span.quiet
+      | /
+      a.js-board-template {{_ 'template'}}
+
+template(name="createBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen.get
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility.get 'public'
+          span 🌐
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span 🔒
           = " "
           | {{{_ 'board-private-info'}}}
         a.js-change-visibility {{_ 'change'}}.
@@ -246,10 +275,10 @@ template(name="createBoard")
 //     li
 //      a.js-sort-by(name="{{value.name}}")
 //        if $eq sortby value.name
-//           i(class="fa {{Direction}}")
+//           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
 //        | {{_ value.label }}{{_ value.shortLabel}}
 //        if $eq sortby value.name
-//           i(class="fa fa-check")
+//           | ✅
 
 template(name="boardChangeTitlePopup")
   form
@@ -269,14 +298,22 @@ template(name="boardCreateRulePopup")
 template(name="cardsSortPopup")
   ul.pop-over-list
     li
-      a.js-sort-due {{_ 'due-date'}}
+      a.js-sort-due
+        | 📅
+        | {{_ 'due-date'}}
       hr
     li
-      a.js-sort-title {{_ 'title-alphabetically'}}
+      a.js-sort-title
+        | 🔤
+        | {{_ 'title-alphabetically'}}
       hr
     li
-      a.js-sort-created-desc {{_ 'created-at-newest-first'}}
+      a.js-sort-created-desc
+        | ⬇️
+        | {{_ 'created-at-newest-first'}}
       hr
     li
-      a.js-sort-created-asc {{_ 'created-at-oldest-first'}}
+      a.js-sort-created-asc
+        | ⬆️
+        | {{_ 'created-at-oldest-first'}}
 

client/components/boards/boardHeader.js

@@ -155,6 +155,7 @@ BlazeComponent.extendComponent({
       },
     ];
   },
+
 }).register('boardHeaderBar');
 
 Template.boardHeaderBar.helpers({
@@ -164,6 +165,23 @@ Template.boardHeaderBar.helpers({
   isSortActive() {
     return Session.get('sortBy') ? true : false;
   },
+  sortCardsIcon() {
+    const sortBy = Session.get('sortBy');
+    if (!sortBy) {
+      return '🃏'; // Card icon when nothing is selected
+    }
+    
+    // Determine which sort option is active based on sortBy object
+    if (sortBy.dueAt) {
+      return '📅'; // Due date icon
+    } else if (sortBy.title) {
+      return '🔤'; // Alphabet icon
+    } else if (sortBy.createdAt) {
+      return sortBy.createdAt === 1 ? '⬆️' : '⬇️'; // Up/down arrow based on direction
+    }
+    
+    return '🃏'; // Default card icon
+  },
 });
 
 Template.boardChangeViewPopup.events({

client/components/boards/boardsList.css

@@ -103,8 +103,8 @@
   transform: rotate(4deg);
   display: block !important;
 }
-.board-list li.starred .fa-star,
-.board-list li.starred .fa-star-o {
+.board-list li.starred .is-star-active,
+.board-list li.starred .is-not-star-active {
   opacity: 1;
 }
 .board-list .board-list-item {
@@ -154,8 +154,8 @@
 .board-list .js-add-board :hover {
   background-color: #939393;
 }
-.board-list .fa-star,
-.board-list .fa-star-o {
+.board-list .is-star-active,
+.board-list .is-not-star-active {
   bottom: 0;
   font-size: 14px;
   height: 18px;
@@ -212,30 +212,30 @@
   transition-duration: 0.15s;
   transition-property: color, font-size, background;
 }
-.board-list li:hover a:hover .fa-star,
+.board-list li:hover a:hover .is-star-active,
 .board-list li:hover a:hover .fa-clone,
 .board-list li:hover a:hover .fa-archive,
-.board-list li:hover a:hover .fa-star-o {
+.board-list li:hover a:hover .is-not-star-active {
   color: #fff;
 }
-.board-list li:hover a .fa-star,
+.board-list li:hover a .is-star-active,
 .board-list li:hover a .fa-clone,
 .board-list li:hover a .fa-archive,
-.board-list li:hover a .fa-star-o {
+.board-list li:hover a .is-not-star-active {
   color: #fff;
   opacity: 0.75;
 }
-.board-list li:hover a .fa-star:hover,
+.board-list li:hover a .is-star-active:hover,
 .board-list li:hover a .fa-clone:hover,
 .board-list li:hover a .fa-archive:hover,
-.board-list li:hover a .fa-star-o:hover {
+.board-list li:hover a .is-not-star-active:hover {
   font-size: 18px;
   opacity: 1;
 }
-.board-list li:hover a .fa-star.is-star-active,
-.board-list li:hover a .fa-clone.is-star-active,
-.board-list li:hover a .fa-archive.is-star-active,
-.board-list li:hover a .fa-star-o.is-star-active {
+.board-list li:hover a .is-star-active,
+.board-list li:hover a .fa-clone,
+.board-list li:hover a .fa-archive,
+.board-list li:hover a .is-not-star-active {
   opacity: 1;
 }
 .board-backgrounds-list .board-background-select {
@@ -361,6 +361,18 @@
   min-height: 100vh; /* Force content to be tall enough to scroll */
 }
 
+/* Hide archive and clone board buttons in mobile view */
+.board-list.mobile-view .js-archive-board,
+.board-list.mobile-view .js-clone-board {
+  display: none !important;
+}
+
+/* Change board drag handle to up-down arrow in mobile view */
+.board-list.mobile-view .board-handle.fa-arrows::before {
+  content: "↕️" !important;
+  font-family: inherit !important;
+}
+
 .board-list.mobile-view::after {
   content: '';
   display: block;
@@ -371,7 +383,8 @@
        screen and (max-device-width: 800px),
        screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
        screen and (max-width: 800px) and (orientation: portrait),
-       screen and (max-width: 800px) and (orientation: landscape) {
+       screen and (max-width: 800px) and (orientation: landscape),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .board-list {
     height: 100%;
     overflow-y: auto;
@@ -457,7 +470,8 @@
        screen and (max-device-width: 800px),
        screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
        screen and (max-width: 800px) and (orientation: portrait),
-       screen and (max-width: 800px) and (orientation: landscape) {
+       screen and (max-width: 800px) and (orientation: landscape),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .wrapper {
     font-size: 2em !important; /* 2x bigger base font size for All Boards page */
   }
@@ -757,7 +771,8 @@
        screen and (max-device-width: 800px),
        screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
        screen and (max-width: 800px) and (orientation: portrait),
-       screen and (max-width: 800px) and (orientation: landscape) {
+       screen and (max-width: 800px) and (orientation: landscape),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .wrapper {
     overflow: hidden;
     height: 100vh;
@@ -824,5 +839,17 @@
   #content {
     overflow: hidden;
   }
+
+  /* Hide archive and clone board buttons in mobile view */
+  .board-list .js-archive-board,
+  .board-list .js-clone-board {
+    display: none !important;
+  }
+
+  /* Change board drag handle to up-down arrow in mobile view */
+  .board-list .board-handle.fa-arrows::before {
+    content: "↕️" !important;
+    font-family: inherit !important;
+  }
 }
 

client/components/boards/boardsList.jade

@@ -64,11 +64,9 @@ template(name="boardList")
                     i.fa.js-has-spenttime-cards(
                       class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
                       title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isTouchScreenOrShowDesktopDragHandles
-                    i.fa.board-handle(
-                        class="fa-arrows"
-                        title="{{_ 'drag-board'}}")
-                  else
+                  i.fa.board-handle(
+                      class="fa-arrows"
+                      title="{{_ 'drag-board'}}")
                     if isSandstorm
                       i.fa.js-clone-board(
                           class="fa-clone"
@@ -108,9 +106,10 @@ template(name="boardList")
                         each list in boardLists _id
                           .item
                             | {{ list }}
-                  i.fa.js-star-board(
-                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                  a.js-star-board(
+                    class="{{#if isStarred}}is-star-active{{else}}is-not-star-active{{/if}}"
                     title="{{_ 'star-board-title'}}")
+                    | {{#if isStarred}}⭐{{else}}☆{{/if}}
                   p.board-list-item-desc
                     +viewer
                       = description
@@ -118,32 +117,36 @@ template(name="boardList")
                     i.fa.js-has-spenttime-cards(
                       class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
                       title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isTouchScreenOrShowDesktopDragHandles
-                    i.fa.board-handle(
-                        class="fa-arrows"
-                        title="{{_ 'drag-board'}}")
-                  else
+                  i.fa.board-handle(
+                      class="fa-arrows"
+                      title="{{_ 'drag-board'}}")
                     if isSandstorm
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
+                      a.js-clone-board(
+                        class="fa-clone"
+                        title="{{_ 'duplicate-board'}}")
+                        | 📋
+                      a.js-archive-board(
+                        class="fa-archive"
+                        title="{{_ 'archive-board'}}")
+                        | 📦
                     else if isAdministrable
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
+                      a.js-clone-board(
+                        class="fa-clone"
+                        title="{{_ 'duplicate-board'}}")
+                        | 📋
+                      a.js-archive-board(
+                        class="fa-archive"
+                        title="{{_ 'archive-board'}}")
+                        | 📦
                     else if currentUser.isAdmin
-                      i.fa.js-clone-board(
-                          class="fa-clone"
-                          title="{{_ 'duplicate-board'}}")
-                      i.fa.js-archive-board(
-                          class="fa-archive"
-                          title="{{_ 'archive-board'}}")
+                      a.js-clone-board(
+                        class="fa-clone"
+                        title="{{_ 'duplicate-board'}}")
+                        | 📋
+                      a.js-archive-board(
+                        class="fa-archive"
+                        title="{{_ 'archive-board'}}")
+                        | 📦
 
 template(name="boardListHeaderBar")
   h1 {{_ title }}

client/components/boards/originalPositionsView.css

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

client/components/boards/originalPositionsView.html

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

client/components/boards/originalPositionsView.js

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

client/components/cards/attachments.jade

@@ -34,10 +34,10 @@ template(name="attachmentViewer")
   #viewer-overlay.hidden
     #viewer-top-bar
       span#attachment-name
-      a#viewer-close.fa.fa-times-thin
+      a#viewer-close ❌
 
     #viewer-container
-      i.fa.fa-chevron-left.attachment-arrow#prev-attachment
+      | ◀️
       #viewer-content
         img#image-viewer.hidden
         video#video-viewer.hidden(controls="true")
@@ -45,7 +45,7 @@ template(name="attachmentViewer")
         object#pdf-viewer.hidden(type="application/pdf")
           span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
         object#txt-viewer.hidden(type="text/plain")
-      i.fa.fa-chevron-right.attachment-arrow#next-attachment
+      | ▶️
 
 template(name="attachmentGallery")
 
@@ -53,7 +53,7 @@ template(name="attachmentGallery")
 
     if canModifyCard
       a.attachment-item.add-attachment.js-add-attachment
-        i.fa.fa-plus.icon
+        | ➕
 
     each attachments
 
@@ -86,22 +86,23 @@ template(name="attachmentGallery")
                 = name
               span.file-size ({{fileSize size}})
             .attachment-actions
-              a.js-download(href="{{link}}?download=true", download="{{name}}")
-                i.fa.fa-download.icon(title="{{_ 'download'}}")
+              a.js-download(href="{{link}}?download=true", download="{{name}}", title="{{_ 'download'}}")
+                | ⬇️
               if currentUser.isBoardMember
                 unless currentUser.isCommentOnly
                   unless currentUser.isWorker
-                    a.js-rename
-                      i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}")
-                    a.js-confirm-delete
-                      i.fa.fa-trash.icon(title="{{_ 'delete'}}")
-                    a.fa.fa-navicon.icon.js-open-attachment-menu(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")
+                    a.js-rename(title="{{_ 'rename'}}")
+                      | ✏️
+                    a.js-confirm-delete(title="{{_ 'delete'}}")
+                      | 🗑️
+                    a.js-open-attachment-menu(data-attachment-link="{{link}}", title="{{_ 'attachmentActionsPopup-title'}}")
+                      | ☰
 
         // Migration spinner overlay
         if isAttachmentMigrating _id
           .attachment-migration-overlay
             .migration-spinner
-              i.fa.fa-cog.fa-spin
+              | ⚙️
             .migration-text {{_ 'migrating-attachment'}}
 
 template(name="attachmentActionsPopup")
@@ -109,8 +110,8 @@ template(name="attachmentActionsPopup")
     li
       if isImage
         a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
-          i.fa.fa-book
-          i.fa.fa-picture-o
+          | 📖
+          | 🖼️
           if isCover
             | {{_ 'remove-cover'}}
           else
@@ -118,7 +119,7 @@ template(name="attachmentActionsPopup")
       if currentUser.isBoardAdmin
         if isImage
           a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
-            i.fa.fa-picture-o
+            | 🖼️
             if isBackgroundImage
               | {{_ 'remove-background-image'}}
             else
@@ -126,19 +127,19 @@ template(name="attachmentActionsPopup")
 
         if $neq versions.original.storage "fs"
           a.js-move-storage-fs
-            i.fa.fa-arrow-right
+            | ▶️
             | {{_ 'attachment-move-storage-fs'}}
 
         if $neq versions.original.storage "gridfs"
           if versions.original.storage
             a.js-move-storage-gridfs
-              i.fa.fa-arrow-right
+              | ▶️
               | {{_ 'attachment-move-storage-gridfs'}}
 
         if $neq versions.original.storage "s3"
           if versions.original.storage
             a.js-move-storage-s3
-              i.fa.fa-arrow-right
+              | ▶️
               | {{_ 'attachment-move-storage-s3'}}
 
 template(name="attachmentRenamePopup")

client/components/cards/attachments.js

@@ -343,7 +343,7 @@ export function handleFileUpload(card, files) {
   }
 
   // Check if user can modify the card
-  if (!card.canModifyCard()) {
+  if (!Utils.canModifyCard()) {
     if (process.env.DEBUG === 'true') {
       console.warn('User does not have permission to modify this card');
     }

client/components/cards/cardCustomFields.jade

@@ -6,10 +6,10 @@ template(name="cardCustomFieldsPopup")
                     span.full-name
                       = name
                     if hasCustomField
-                      i.fa.fa-check
+                      | ✅
     hr
     a.quiet-button.full.js-settings
-        i.fa.fa-cog
+        | ⚙️
         span {{_ 'settings'}}
 
 template(name="cardCustomField")
@@ -22,7 +22,7 @@ template(name="cardCustomField-text")
                 = value
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -41,7 +41,7 @@ template(name="cardCustomField-number")
             input(type="number" value=data.value)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -66,7 +66,7 @@ template(name="cardCustomField-currency")
             input(type="text" value=data.value autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -113,7 +113,7 @@ template(name="cardCustomField-dropdown")
                             = name
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -134,7 +134,7 @@ template(name="cardCustomField-stringtemplate")
             input.js-card-customfield-stringtemplate-item.last(type="text" value="" placeholder="{{_ 'custom-field-stringtemplate-item-placeholder'}}" autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value

client/components/cards/cardCustomFields.js

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

client/components/cards/cardDate.css

@@ -42,23 +42,67 @@
 .card-date.long-overdue.is-active {
   background-color: #fd3e24;
 }
+
+/* Date type specific colors */
+.card-date.received-date {
+  background-color: #dbdbdb; /* Light grey for received */
+}
+
+.card-date.received-date:hover,
+.card-date.received-date.is-active {
+  background-color: #b3b3b3;
+}
+
+.card-date.start-date {
+  background-color: #90ee90; /* Light green for start */
+  color: #000; /* Black text for start */
+}
+
+.card-date.start-date:hover,
+.card-date.start-date.is-active {
+  background-color: #7dd87d;
+}
+
+.card-date.due-date {
+  background-color: #ffd700; /* Yellow for due */
+  color: #000; /* Black text for due */
+}
+
+.card-date.due-date:hover,
+.card-date.due-date.is-active {
+  background-color: #e6c200;
+}
+
+.card-date.end-date {
+  background-color: #ffb3b3; /* Light red for end */
+  color: #000; /* Black text for end */
+}
+
+.card-date.end-date:hover,
+.card-date.end-date.is-active {
+  background-color: #ff9999;
+}
 .card-date.end-date time::before {
-  content: "\f253";
+  content: "🏁"; /* Finish flag - represents end/completion */
 }
 .card-date.due-date time::before {
-  content: "\f090";
+  content: "⏰"; /* Alarm clock - represents due/deadline */
 }
 .card-date.start-date time::before {
-  content: "\f251";
+  content: "🚀"; /* Rocket - represents start/launch */
 }
 .card-date.received-date time::before {
-  content: "\f08b";
+  content: "📥"; /* Inbox tray - represents received/incoming */
+}
+
+/* Generic date badge and custom field date */
+.card-date:not(.received-date):not(.start-date):not(.due-date):not(.end-date) time::before {
+  /*content: "📅"; // Calendar - represents generic date */
 }
 .card-date time::before {
-  font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
-  -webkit-font-smoothing: antialiased;
   margin-right: 0.3em;
+  display: inline-block;
 }
 .customfield-date {
   display: block;

client/components/cards/cardDate.jade

@@ -21,3 +21,111 @@ template(name="dateCustomField")
       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")
+  form.edit-card-received-date
+    .datepicker
+    .clear-date
+      a.js-clear-date {{_ 'clear'}}
+    .datepicker-actions
+      button.primary.wide.left(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right {{_ 'delete'}}
+
+template(name="editCardStartDatePopup")
+  form.edit-card-start-date
+    .datepicker
+    .clear-date
+      a.js-clear-date {{_ 'clear'}}
+    .datepicker-actions
+      button.primary.wide.left(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right {{_ 'delete'}}
+
+template(name="editCardDueDatePopup")
+  form.edit-card-due-date
+    .datepicker
+    .clear-date
+      a.js-clear-date {{_ 'clear'}}
+    .datepicker-actions
+      button.primary.wide.left(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right {{_ 'delete'}}
+
+template(name="editCardEndDatePopup")
+  form.edit-card-end-date
+    .datepicker
+    .clear-date
+      a.js-clear-date {{_ 'clear'}}
+    .datepicker-actions
+      button.primary.wide.left(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right {{_ 'delete'}}

client/components/cards/cardDate.js

@@ -1,17 +1,38 @@
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
+import { 
+  formatDateTime, 
+  formatDate, 
+  formatDateByUserPreference,
+  formatTime, 
+  getISOWeek, 
+  isValidDate, 
+  isBefore, 
+  isAfter, 
+  isSame, 
+  add, 
+  subtract, 
+  startOf, 
+  endOf, 
+  format, 
+  parseDate, 
+  now, 
+  createDate, 
+  fromNow, 
+  calendar,
+  diff
+} from '/imports/lib/dateUtils';
 
 // editCardReceivedDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
+    super.onCreated(formatDateTime(now()));
     this.data().getReceived() &&
-      this.date.set(moment(this.data().getReceived()));
+      this.date.set(new Date(this.data().getReceived()));
   }
 
   _storeDate(date) {
-    this.card.setReceived(moment(date).format('YYYY-MM-DD HH:mm'));
+    this.card.setReceived(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -22,22 +43,17 @@ import { DatePicker } from '/client/lib/datepicker';
 // editCardStartDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getStart() && this.date.set(moment(this.data().getStart()));
+    super.onCreated(formatDateTime(now()));
+    this.data().getStart() && this.date.set(new Date(this.data().getStart()));
   }
 
   onRendered() {
     super.onRendered();
-    if (moment.isDate(this.card.getReceived())) {
-      this.$('.js-datepicker').datepicker(
-        'setStartDate',
-        this.card.getReceived(),
-      );
-    }
+    // DatePicker base class handles initialization with native HTML inputs
   }
 
   _storeDate(date) {
-    this.card.setStart(moment(date).format('YYYY-MM-DD HH:mm'));
+    this.card.setStart(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -49,18 +65,16 @@ import { DatePicker } from '/client/lib/datepicker';
 (class extends DatePicker {
   onCreated() {
     super.onCreated('1970-01-01 17:00:00');
-    this.data().getDue() && this.date.set(moment(this.data().getDue()));
+    this.data().getDue() && this.date.set(new Date(this.data().getDue()));
   }
 
   onRendered() {
     super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
+    // DatePicker base class handles initialization with native HTML inputs
   }
 
   _storeDate(date) {
-    this.card.setDue(moment(date).format('YYYY-MM-DD HH:mm'));
+    this.card.setDue(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -71,19 +85,17 @@ import { DatePicker } from '/client/lib/datepicker';
 // editCardEndDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getEnd() && this.date.set(moment(this.data().getEnd()));
+    super.onCreated(formatDateTime(now()));
+    this.data().getEnd() && this.date.set(new Date(this.data().getEnd()));
   }
 
   onRendered() {
     super.onRendered();
-    if (moment.isDate(this.card.getStart())) {
-      this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
-    }
+    // DatePicker base class handles initialization with native HTML inputs
   }
 
   _storeDate(date) {
-    this.card.setEnd(moment(date).format('YYYY-MM-DD HH:mm'));
+    this.card.setEnd(formatDateTime(date));
   }
 
   _deleteDate() {
@@ -100,27 +112,29 @@ const CardDate = BlazeComponent.extendComponent({
   onCreated() {
     const self = this;
     self.date = ReactiveVar();
-    self.now = ReactiveVar(moment());
+    self.now = ReactiveVar(now());
     window.setInterval(() => {
-      self.now.set(moment());
+      self.now.set(now());
     }, 60000);
   },
 
   showWeek() {
-    return this.date.get().week().toString();
+    return getISOWeek(this.date.get()).toString();
   },
 
   showWeekOfYear() {
-    return ReactiveCache.getCurrentUser().isShowWeekOfYear();
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
   },
 
   showDate() {
-    // this will start working once mquandalle:moment
-    // is updated to at least moment.js 2.10.5
-    // until then, the date is displayed in the "L" format
-    return this.date.get().calendar(null, {
-      sameElse: 'llll',
-    });
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   },
 
   showISODate() {
@@ -133,7 +147,7 @@ class CardReceivedDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getReceived()));
+      self.date.set(new Date(self.data().getReceived()));
     });
   }
 
@@ -145,9 +159,9 @@ class CardReceivedDate extends CardDate {
     const theDate = this.date.get();
     // if dueAt, endAt and startAt exist & are > receivedAt, receivedAt doesn't need to be flagged
     if (
-      (startAt && theDate.isAfter(startAt)) ||
-      (endAt && theDate.isAfter(endAt)) ||
-      (dueAt && theDate.isAfter(dueAt))
+      (startAt && isAfter(theDate, startAt)) ||
+      (endAt && isAfter(theDate, endAt)) ||
+      (dueAt && isAfter(theDate, dueAt))
     )
       classes += 'long-overdue';
     else classes += 'current';
@@ -155,9 +169,10 @@ class CardReceivedDate extends CardDate {
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-received-on')} ${this.date
-      .get()
-      .format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-received-on')} ${formattedDate}`;
   }
 
   events() {
@@ -173,7 +188,7 @@ class CardStartDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getStart()));
+      self.date.set(new Date(self.data().getStart()));
     });
   }
 
@@ -184,15 +199,18 @@ class CardStartDate extends CardDate {
     const theDate = this.date.get();
     const now = this.now.get();
     // if dueAt or endAt exist & are > startAt, startAt doesn't need to be flagged
-    if ((endAt && theDate.isAfter(endAt)) || (dueAt && theDate.isAfter(dueAt)))
+    if ((endAt && isAfter(theDate, endAt)) || (dueAt && isAfter(theDate, dueAt)))
       classes += 'long-overdue';
-    else if (theDate.isAfter(now)) classes += '';
+    else if (isAfter(theDate, now)) classes += '';
     else classes += 'current';
     return classes;
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-start-on')} ${formattedDate}`;
   }
 
   events() {
@@ -208,7 +226,7 @@ class CardDueDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getDue()));
+      self.date.set(new Date(self.data().getDue()));
     });
   }
 
@@ -218,17 +236,20 @@ class CardDueDate extends CardDate {
     const theDate = this.date.get();
     const now = this.now.get();
     // if the due date is after the end date, green - done early
-    if (endAt && theDate.isAfter(endAt)) classes += 'current';
+    if (endAt && isAfter(theDate, endAt)) classes += 'current';
     // if there is an end date, don't need to flag the due date
     else if (endAt) classes += '';
-    else if (now.diff(theDate, 'days') >= 2) classes += 'long-overdue';
-    else if (now.diff(theDate, 'minute') >= 0) classes += 'due';
-    else if (now.diff(theDate, 'days') >= -1) classes += 'almost-due';
+    else if (diff(now, theDate, 'days') >= 2) classes += 'long-overdue';
+    else if (diff(now, theDate, 'minute') >= 0) classes += 'due';
+    else if (diff(now, theDate, 'days') >= -1) classes += 'almost-due';
     return classes;
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${TAPi18n.__('card-due-on')} ${formattedDate}`;
   }
 
   events() {
@@ -244,7 +265,7 @@ class CardEndDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getEnd()));
+      self.date.set(new Date(self.data().getEnd()));
     });
   }
 
@@ -253,13 +274,13 @@ class CardEndDate extends CardDate {
     const dueAt = this.data().getDue();
     const theDate = this.date.get();
     if (!dueAt) classes += '';
-    else if (theDate.isBefore(dueAt)) classes += 'current';
-    else if (theDate.isAfter(dueAt)) classes += 'due';
+    else if (isBefore(theDate, dueAt)) classes += 'current';
+    else if (isAfter(theDate, dueAt)) classes += 'due';
     return classes;
   }
 
   showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${format(this.date.get(), 'LLLL')}`;
   }
 
   events() {
@@ -279,16 +300,21 @@ class CardCustomFieldDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().value));
+      self.date.set(new Date(self.data().value));
     });
   }
 
   showWeek() {
-    return this.date.get().week().toString();
+    return getISOWeek(this.date.get()).toString();
   }
 
   showWeekOfYear() {
-    return ReactiveCache.getCurrentUser().isShowWeekOfYear();
+    const user = ReactiveCache.getCurrentUser();
+    if (!user) {
+      // For non-logged-in users, week of year is not shown
+      return false;
+    }
+    return user.isShowWeekOfYear();
   }
 
   showDate() {
@@ -301,7 +327,10 @@ class CardCustomFieldDate extends CardDate {
   }
 
   showTitle() {
-    return `${this.date.get().format('LLLL')}`;
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    const formattedDate = formatDateByUserPreference(this.date.get(), dateFormat, true);
+    return `${formattedDate}`;
   }
 
   classes() {
@@ -315,32 +344,62 @@ class CardCustomFieldDate extends CardDate {
 CardCustomFieldDate.register('cardCustomFieldDate');
 
 (class extends CardReceivedDate {
+  template() {
+    return 'minicardReceivedDate';
+  }
+  
   showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardReceivedDate'));
 
 (class extends CardStartDate {
+  template() {
+    return 'minicardStartDate';
+  }
+  
   showDate() {
-    return this.date.get().format('YYYY-MM-DD HH:mm');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardStartDate'));
 
 (class extends CardDueDate {
+  template() {
+    return 'minicardDueDate';
+  }
+  
   showDate() {
-    return this.date.get().format('YYYY-MM-DD HH:mm');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardDueDate'));
 
 (class extends CardEndDate {
+  template() {
+    return 'minicardEndDate';
+  }
+  
   showDate() {
-    return this.date.get().format('YYYY-MM-DD HH:mm');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardEndDate'));
 
 (class extends CardCustomFieldDate {
+  template() {
+    return 'minicardCustomFieldDate';
+  }
+  
   showDate() {
-    return this.date.get().format('L');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
 }.register('minicardCustomFieldDate'));
 
@@ -349,7 +408,7 @@ class VoteEndDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getVoteEnd()));
+      self.date.set(new Date(self.data().getVoteEnd()));
     });
   }
   classes() {
@@ -357,10 +416,12 @@ class VoteEndDate extends CardDate {
     return classes;
   }
   showDate() {
-    return this.date.get().format('L LT');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
   showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${this.date.get().toLocaleString()}`;
   }
 
   events() {
@@ -376,7 +437,7 @@ class PokerEndDate extends CardDate {
     super.onCreated();
     const self = this;
     self.autorun(() => {
-      self.date.set(moment(self.data().getPokerEnd()));
+      self.date.set(new Date(self.data().getPokerEnd()));
     });
   }
   classes() {
@@ -384,10 +445,12 @@ class PokerEndDate extends CardDate {
     return classes;
   }
   showDate() {
-    return this.date.get().format('l LT');
+    const currentUser = ReactiveCache.getCurrentUser();
+    const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD';
+    return formatDateByUserPreference(this.date.get(), dateFormat, true);
   }
   showTitle() {
-    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+    return `${TAPi18n.__('card-end-on')} ${format(this.date.get(), 'LLLL')}`;
   }
 
   events() {

client/components/cards/cardDetails.css

@@ -1,11 +1,39 @@
+/* Date Format Selector */
+.card-details-item-date-format {
+  margin-bottom: 10px;
+}
+
+.card-details-item-date-format .card-details-item-title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: #333;
+}
+
+.card-details-item-date-format .js-date-format-selector {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.card-details-item-date-format .js-date-format-selector:focus {
+  outline: none;
+  border-color: #007cba;
+  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
+}
+
 .assignee {
-  border-radius: 0.4vw;
+  border-radius: 3px;
   display: block;
   position: relative;
   float: left;
-  height: 4vw;
-  width: 4vw;
-  margin: 0.4vh;
+  height: 30px;
+  width: 30px;
+  margin: .3vh;
   cursor: pointer;
   user-select: none;
   z-index: 1;
@@ -34,11 +62,11 @@
   background-color: #b3b3b3;
   border: 1px solid #fff;
   border-radius: 50%;
-  height: 1vw;
-  width: 1vw;
+  height: 7px;
+  width: 7px;
   position: absolute;
-  right: -0.1vw;
-  bottom: -0.1vw;
+  right: -1px;
+  bottom: -1px;
   border: 1px solid #fff;
   z-index: 15;
 }

client/components/cards/cardDetails.jade

@@ -12,15 +12,19 @@ template(name="cardDetails")
       else
         unless isMiniScreen
           unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+              | ❌
             if canModifyCard
               if cardMaximized
-                a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+                a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+                  | 🔽
               else
-                a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+                a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+                  | 🔼
           if canModifyCard
-            a.fa.fa-navicon.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-            a.fa.fa-link.card-copy-button.js-copy-link(
+            a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+              | ☰
+            a.card-copy-button.js-copy-link(
               id="cardURL_copy"
               class="fa-link"
               title="{{_ 'copy-card-link-to-clipboard'}}"
@@ -29,10 +33,12 @@ template(name="cardDetails")
             span.copied-tooltip {{_ 'copied'}}
         else
           unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+              | ❌
           if canModifyCard
-            a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-            a.fa.fa-link.card-copy-mobile-button.js-copy-link(
+            a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+              | ☰
+            a.card-copy-mobile-button.js-copy-link(
               id="cardURL_copy"
               class="fa-link"
               title="{{_ 'copy-card-link-to-clipboard'}}"
@@ -47,7 +53,8 @@ template(name="cardDetails")
                   | ##{getCardNumber}
               = getTitle
             if isWatching
-              i.card-details-watch.fa.fa-eye
+              i.card-details-watch
+                | 👁️
         .card-details-path
           each parentList
             |   >  
@@ -69,7 +76,7 @@ template(name="cardDetails")
     if hasActiveUploads
       .card-details-upload-progress
         .upload-progress-header
-          i.fa.fa-upload
+          | 📤
           span {{_ 'uploading-files'}} ({{uploadCount}})
         each uploads
           .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}")
@@ -78,11 +85,11 @@ template(name="cardDetails")
               .upload-progress-fill(style="width: {{progress}}%")
             if $eq status 'error'
               .upload-progress-error
-                i.fa.fa-exclamation-triangle
+                | ⚠️
                 span {{_ 'upload-failed'}}
             else if $eq status 'completed'
               .upload-progress-success
-                i.fa.fa-check
+                | ✅
                 span {{_ 'upload-completed'}}
 
     .card-details-left
@@ -91,7 +98,7 @@ template(name="cardDetails")
         if currentBoard.allowsLabels
           .card-details-item.card-details-item-labels
             h3.card-details-item-title
-              i.fa.fa-tags
+              | 🏷️
               | {{_ 'labels'}}
             a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
               each labels
@@ -101,15 +108,25 @@ template(name="cardDetails")
             if canModifyCard
               unless currentUser.isWorker
                 a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
-                  i.fa.fa-plus
+                  | ➕
 
         if currentBoard.hasAnyAllowsDate
           hr
 
+          .card-details-item.card-details-item-date-format
+            h3.card-details-item-title
+              | 📅
+              | {{_ 'date-format'}}
+            .card-details-item-content
+              select.js-date-format-selector
+                option(value="YYYY-MM-DD" selected="{{#if isDateFormat 'YYYY-MM-DD'}}selected{{/if}}") {{_ 'date-format-yyyy-mm-dd'}}
+                option(value="DD-MM-YYYY" selected="{{#if isDateFormat 'DD-MM-YYYY'}}selected{{/if}}") {{_ 'date-format-dd-mm-yyyy'}}
+                option(value="MM-DD-YYYY" selected="{{#if isDateFormat 'MM-DD-YYYY'}}selected{{/if}}") {{_ 'date-format-mm-dd-yyyy'}}
+
         if currentBoard.allowsReceivedDate
           .card-details-item.card-details-item-received
             h3.card-details-item-title
-              i.fa.fa-sign-out
+              | 📥
               | {{_ 'card-received'}}
             if getReceived
               +cardReceivedDate
@@ -117,12 +134,12 @@ template(name="cardDetails")
               if canModifyCard
                 unless currentUser.isWorker
                   a.card-label.add-label.js-received-date
-                    i.fa.fa-plus
+                    | ➕
 
         if currentBoard.allowsStartDate
           .card-details-item.card-details-item-start
             h3.card-details-item-title
-              i.fa.fa-hourglass-start
+              | 🚀
               | {{_ 'card-start'}}
             if getStart
               +cardStartDate
@@ -130,12 +147,12 @@ template(name="cardDetails")
               if canModifyCard
                 unless currentUser.isWorker
                   a.card-label.add-label.js-start-date
-                    i.fa.fa-plus
+                    | ➕
 
         if currentBoard.allowsDueDate
           .card-details-item.card-details-item-due
             h3.card-details-item-title
-              i.fa.fa-sign-in
+              | ⏰
               | {{_ 'card-due'}}
             if getDue
               +cardDueDate
@@ -143,12 +160,12 @@ template(name="cardDetails")
               if canModifyCard
                 unless currentUser.isWorker
                   a.card-label.add-label.js-due-date
-                    i.fa.fa-plus
+                    | ➕
 
         if currentBoard.allowsEndDate
           .card-details-item.card-details-item-end
             h3.card-details-item-title
-              i.fa.fa-hourglass-end
+              | 🏁
               | {{_ 'card-end'}}
             if getEnd
               +cardEndDate
@@ -156,7 +173,7 @@ template(name="cardDetails")
               if canModifyCard
                 unless currentUser.isWorker
                   a.card-label.add-label.js-end-date
-                    i.fa.fa-plus
+                    | ➕
 
         if currentBoard.hasAnyAllowsUser
           hr
@@ -164,7 +181,7 @@ template(name="cardDetails")
         if currentBoard.allowsCreator
           .card-details-item.card-details-item-creator
             h3.card-details-item-title
-              i.fa.fa-user
+              | 👤
               | {{_ 'creator'}}
 
             +userAvatar(userId=userId noRemove=true)
@@ -174,7 +191,7 @@ template(name="cardDetails")
         if currentBoard.allowsMembers
           .card-details-item.card-details-item-members
             h3.card-details-item-title
-              i.fa.fa-users
+              | 👤s
               | {{_ 'members'}}
             each userId in getMembers
               +userAvatar(userId=userId cardId=_id)
@@ -182,30 +199,30 @@ template(name="cardDetails")
             if canModifyCard
               unless currentUser.isWorker
                 a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
-                  i.fa.fa-plus
+                  | ➕
 
         //if assigneeSelected
         if currentBoard.allowsAssignee
           .card-details-item.card-details-item-assignees
             h3.card-details-item-title
-              i.fa.fa-user
+              | 👤
               | {{_ 'assignee'}}
             each userId in getAssignees
               +userAvatar(userId=userId cardId=_id assignee=true)
               | {{! XXX Hack to hide syntaxic coloration /// }}
             if canModifyCard
               a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
-                i.fa.fa-plus
+                | ➕
             if currentUser.isWorker
               unless assigneeSelected
                 a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
-                  i.fa.fa-plus
+                  | ➕
 
         //.card-details-items
         if currentBoard.allowsRequestedBy
           .card-details-item.card-details-item-name
             h3.card-details-item-title
-              i.fa.fa-shopping-cart
+              | 🛒
               | {{_ 'requested-by'}}
             if canModifyCard
               unless currentUser.isWorker
@@ -225,7 +242,7 @@ template(name="cardDetails")
         if currentBoard.allowsAssignedBy
           .card-details-item.card-details-item-name
             h3.card-details-item-title
-              i.fa.fa-user-plus
+              | 👤-plus
               | {{_ 'assigned-by'}}
             if canModifyCard
               unless currentUser.isWorker
@@ -248,7 +265,7 @@ template(name="cardDetails")
         if currentBoard.allowsCardSortingByNumber
           .card-details-item.card-details-sort-order
             h3.card-details-item-title
-              i.fa.fa-sort
+              | 🔢
               | {{_ 'sort'}}
             if canModifyCard
               +inlinedForm(classNames="js-card-details-sort")
@@ -261,7 +278,7 @@ template(name="cardDetails")
         if currentBoard.allowsShowLists
           .card-details-item.card-details-show-lists
             h3.card-details-item-title
-              i.fa.fa-list
+              | 📋
               | {{_ 'list'}}
             select.js-select-card-details-lists(disabled="{{#unless canModifyCard}}disabled{{/unless}}")
               each currentBoard.lists
@@ -287,7 +304,7 @@ template(name="cardDetails")
               hr
             .card-details-item.card-details-item-customfield
               h3.card-details-item-title
-                i.fa.fa-list-alt
+                | 📋-alt
                 = definition.name
               +cardCustomField
 
@@ -298,14 +315,14 @@ template(name="cardDetails")
               else
                 input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton")
               label.toggle-label(for="toggleCustomFieldsGridButton")
-          a.fa.fa-plus.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
+          a.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
 
       if getVoteQuestion
         hr
         .vote-title
           div.flex
             h3
-              i.fa.fa-thumbs-up
+              | 👍
               | {{_ 'vote-question'}}
             if getVoteEnd
               +voteEndDate
@@ -323,11 +340,11 @@ template(name="cardDetails")
         if showVotingButtons
           button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}")
             if voteState
-              i.fa.fa-thumbs-up
+              | 👍
             | {{_ 'vote-for-it'}}
           button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
             if $eq voteState false
-              i.fa.fa-thumbs-down
+              | 👎
             | {{_ 'vote-against'}}
 
       if getPokerQuestion
@@ -335,7 +352,7 @@ template(name="cardDetails")
         .poker-title
           div.flex
             h3
-              i.fa.fa-thumbs-up
+              | 👍
               | {{_ 'poker-question'}}
             if getPokerEnd
               +pokerEndDate
@@ -350,52 +367,52 @@ template(name="cardDetails")
               .poker-card
                 span.inner.js-poker.js-poker-vote-one(class="{{#if $eq pokerState 'one'}}poker-voted{{/if}}") {{_ 'poker-one'}}
               if $eq pokerState "one"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-two(class="{{#if $eq pokerState 'two'}}poker-voted{{/if}}") {{_ 'poker-two'}}
               if $eq pokerState "two"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-three(class="{{#if $eq pokerState 'three'}}poker-voted{{/if}}") {{_ 'poker-three'}}
               if $eq pokerState "three"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-five(class="{{#if $eq pokerState 'five'}}poker-voted{{/if}}") {{_ 'poker-five'}}
               if $eq pokerState "five"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-eight(class="{{#if $eq pokerState 'eight'}}poker-voted{{/if}}") {{_ 'poker-eight'}}
               if $eq pokerState "eight"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-thirteen(class="{{#if $eq pokerState 'thirteen'}}poker-voted{{/if}}") {{_ 'poker-thirteen'}}
               if $eq pokerState "thirteen"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-twenty(class="{{#if $eq pokerState 'twenty'}}poker-voted{{/if}}") {{_ 'poker-twenty'}}
               if $eq pokerState "twenty"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-forty(class="{{#if $eq pokerState 'forty'}}poker-voted{{/if}}") {{_ 'poker-forty'}}
               if $eq pokerState "forty"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-one-hundred(class="{{#if $eq pokerState 'oneHundred'}}poker-voted{{/if}}") {{_ 'poker-oneHundred'}}
               if $eq pokerState "oneHundred"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-unsure(class="{{#if $eq pokerState 'unsure'}}poker-voted{{/if}}") {{_ 'poker-unsure'}}
               if $eq pokerState "unsure"
-                i.fa.fa-check
+                | ✅
 
           if currentUser.isBoardAdmin
             button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}}
@@ -525,7 +542,7 @@ template(name="cardDetails")
               button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}}
             div.estimation-add
               button.js-poker-estimation
-                i.fa.fa-plus
+                | ➕
                 | {{_ 'set-estimation'}}
               input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation")
 
@@ -535,18 +552,18 @@ template(name="cardDetails")
           if currentBoard.allowsDescriptionTitle
             hr
             h3.card-details-item-title
-              i.fa.fa-align-left
+              | 📝
               | {{_ 'description'}}
           if currentBoard.allowsDescriptionText
             +inlinedCardDescription(classNames="card-description js-card-description")
               +descriptionForm
               .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
             else
               if currentBoard.allowsDescriptionText
                 a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
-                  i.fa.fa-pencil-square-o
+                  | ✏️
                 a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
                   if getDescription
                     +viewer
@@ -576,7 +593,7 @@ template(name="cardDetails")
         if currentBoard.allowsAttachments
           hr
           h3.card-details-item-title
-            i.fa.fa-paperclip
+            | 📎
             | {{_ 'attachments'}}
           if Meteor.settings.public.attachmentsUploadMaxSize
             | {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}}
@@ -592,7 +609,7 @@ template(name="cardDetails")
       unless currentUser.isNoComments
         .comment-title
           h3.card-details-item-title
-            i.fa.fa-comment-o
+            | 💬
             | {{_ 'comments'}}
 
         if currentBoard.allowsComments
@@ -607,7 +624,7 @@ template(name="cardDetails")
       unless currentUser.isNoComments
         .activity-title
           h3.card-details-item-title
-            i.fa.fa-history
+            | 📜
             | {{ _ 'activities'}}
           if currentUser.isBoardMember
             .material-toggle-switch(title="{{_ 'show-activities'}}")
@@ -627,41 +644,41 @@ template(name="cardDetails")
             +activities(card=this mode="card")
 
 template(name="editCardTitleForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
   textarea.js-edit-card-title(rows='1' autofocus dir="auto")
     = getTitle
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-title-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardRequesterForm")
   input.js-edit-card-requester(type='text' autofocus value=getRequestedBy dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-requester-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardAssignerForm")
   input.js-edit-card-assigner(type='text' autofocus value=getAssignedBy dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-assigner-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardSortOrderForm")
   input.js-edit-card-sort(type='text' autofocus value=sort dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-sort-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="cardDetailsActionsPopup")
   ul.pop-over-list
     li
       a.js-toggle-watch-card
         if isWatching
-          i.fa.fa-eye
+          | 👁️
           |  {{_ 'unwatch'}}
         else
-          i.fa.fa-eye-slash
+          | 👁️-slash
           |  {{_ 'watch'}}
   hr
   if canModifyCard
@@ -672,16 +689,16 @@ template(name="cardDetailsActionsPopup")
         //li: a.js-attachments {{_ 'card-edit-attachments'}}
         li
           a.js-start-voting
-            i.fa.fa-thumbs-up
+            | 👍
             | {{_ 'card-edit-voting'}}
         li
           a.js-start-planning-poker
-            i.fa.fa-thumbs-up
+            | 👍
             | {{_ 'card-edit-planning-poker'}}
         if currentUser.isBoardAdmin
           li
             a.js-custom-fields
-              i.fa.fa-list-alt
+              | 📋-alt
               | {{_ 'card-edit-custom-fields'}}
         //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
         //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
@@ -689,75 +706,75 @@ template(name="cardDetailsActionsPopup")
         //li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
         li
           a.js-spent-time
-            i.fa.fa-clock-o
+            | 🕐
             | {{_ 'editCardSpentTimePopup-title'}}
         li
           a.js-set-card-color
-            i.fa.fa-paint-brush
+            | 🎨
             | {{_ 'setCardColorPopup-title'}}
         li
           a.js-toggle-show-list-on-minicard
             if showListOnMinicard
-              i.fa.fa-eye
+              | 👁️
               | {{_ 'hide-list-on-minicard'}}
             else
-              i.fa.fa-eye-slash
+              | 👁️-slash
               | {{_ 'show-list-on-minicard'}}
   hr
   ul.pop-over-list
     li
       a.js-export-card
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-card'}}
   hr
   ul.pop-over-list
     li
       a.js-move-card-to-top
-        i.fa.fa-arrow-up
+        | ⬆️
         | {{_ 'moveCardToTop-title'}}
     li
       a.js-move-card-to-bottom
-        i.fa.fa-arrow-down
+        | ⬇️
         | {{_ 'moveCardToBottom-title'}}
   hr
   ul.pop-over-list
     if currentUser.isBoardAdmin
       li
         a.js-move-card
-          i.fa.fa-arrow-right
+          | ➡️
           | {{_ 'moveCardPopup-title'}}
     unless currentUser.isWorker
       li
         a.js-copy-card
-          i.fa.fa-copy
+          | 📋
           | {{_ 'copyCardPopup-title'}}
   unless currentUser.isWorker
     ul.pop-over-list
       li
         a.js-copy-checklist-cards
-          i.fa.fa-copy
-          i.fa.fa-copy
+          | 📋
+          | 📋
           | {{_ 'copyManyCardsPopup-title'}}
     unless archived
       hr
       ul.pop-over-list
         li
           a.js-archive
-            i.fa.fa-arrow-right
-            i.fa.fa-archive
+            | ➡️
+            | 📦
             | {{_ 'archive-card'}}
     hr
     ul.pop-over-list
       li
         a.js-more
-          i.fa.fa-link
+          | 🔗
           | {{_ 'cardMorePopup-title'}}
 
 template(name="exportCardPopup")
   ul.pop-over-list
     li
       a(href="{{exportUrlCardPDF}}",, download="{{exportFilenameCardPDF}}")
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-card-pdf'}}
 
 template(name="moveCardPopup")
@@ -812,7 +829,7 @@ template(name="cardMembersPopup")
             = user.profile.fullname
             | (<span class="username">{{ user.username }}</span>)
           if isCardMember
-            i.fa.fa-check
+            | ✅
 
 template(name="cardAssigneesPopup")
   input.card-assignees-filter(type="text" placeholder="{{_ 'search'}}")
@@ -826,7 +843,7 @@ template(name="cardAssigneesPopup")
               = user.profile.fullname
               | (<span class="username">{{ user.username }}</span>)
             if isCardAssignee
-              i.fa.fa-check
+              | ✅
   if currentUser.isWorker
     ul.pop-over-list.js-card-assignee-list
       li.item(class="{{#if currentUser.isCardAssignee}}active{{/if}}")
@@ -836,7 +853,7 @@ template(name="cardAssigneesPopup")
             = currentUser.profile.fullname
             | (<span class="username">{{ currentUser.username }}</span>)
           if currentUser.isCardAssignee
-            i.fa.fa-check
+            | ✅
 
 template(name="cardAssigneePopup")
   .board-assignee-menu
@@ -860,7 +877,7 @@ template(name="cardMorePopup")
     span.clearfix
       span {{_ 'link-card'}}
       = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      | {{#if board.isPublic}}🌐{{else}}🔒{{/if}}
       input.inline-input(type="text" id="cardURL" readonly value="{{ originRelativeUrl }}" autofocus="autofocus")
       button.js-copy-card-link-to-clipboard(class="btn" id="clipboard") {{_ 'copy-card-link-to-clipboard'}}
       .copied-tooltip {{_ 'copied'}}
@@ -902,7 +919,7 @@ template(name="setCardColorPopup")
       unless $eq color 'white'
         span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
           if(isSelected color)
-            i.fa.fa-check
+            | ✅
     button.primary.confirm.js-submit {{_ 'save'}}
     button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
 
@@ -936,12 +953,12 @@ template(name="cardStartVotingPopup")
           .materialCheckBox#vote-public(name="vote-public" class="{{#if votePublic}}is-checked{{/if}}")
           span {{_ 'vote-public'}}
       .check-div.flex
-        i.fa.fa-hourglass-end
+        | ⏰
         a.js-end-date
           span
             | {{_ 'card-end'}}
             unless getVoteEnd
-              i.fa.fa-plus
+              | ➕
         if getVoteEnd
           +voteEndDate
 
@@ -982,12 +999,12 @@ template(name="cardStartPlanningPokerPopup")
           .materialCheckBox#poker-allow-non-members(name="poker-allow-non-members" class="{{#if pokerAllowNonBoardMembers}}is-checked{{/if}}")
           span {{_ 'allowNonBoardMembers'}}
       .check-div.flex
-        i.fa.fa-hourglass-end
+        | ⏰
         a.js-end-date
           span
             | {{_ 'card-end'}}
             unless getPokerEnd
-              i.fa.fa-plus
+              | ➕
         if getPokerEnd
           +pokerEndDate
 

client/components/cards/cardDetails.js

@@ -1,7 +1,26 @@
 import { ReactiveCache } from '/imports/reactiveCache';
-import moment from 'moment/min/moment-with-locales';
 import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
+import { 
+  formatDateTime, 
+  formatDate, 
+  formatTime, 
+  getISOWeek, 
+  isValidDate, 
+  isBefore, 
+  isAfter, 
+  isSame, 
+  add, 
+  subtract, 
+  startOf, 
+  endOf, 
+  format, 
+  parseDate, 
+  now, 
+  createDate, 
+  fromNow, 
+  calendar 
+} from '/imports/lib/dateUtils';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
 import Checklists from '/models/checklists';
@@ -287,6 +306,10 @@ BlazeComponent.extendComponent({
           const $tooltip = this.$('.card-details-header .copied-tooltip');
           Utils.showCopied(promise, $tooltip);
         },
+        'change .js-date-format-selector'(event) {
+          const dateFormat = event.target.value;
+          Meteor.call('changeDateFormat', dateFormat);
+        },
         'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
         'submit .js-card-description'(event) {
           event.preventDefault();
@@ -455,7 +478,7 @@ BlazeComponent.extendComponent({
         'click .js-poker-finish'(e) {
           if ($(e.target).hasClass('js-poker-finish')) {
             e.preventDefault();
-            const now = moment().format('YYYY-MM-DD HH:mm');
+            const now = formatDateTime(new Date());
             this.data().setPokerEnd(now);
           }
         },
@@ -485,55 +508,58 @@ BlazeComponent.extendComponent({
         },
         // Drag and drop file upload handlers
         'dragover .js-card-details'(event) {
-          event.preventDefault();
-          event.stopPropagation();
+          // Only prevent default for file drags to avoid interfering with other drag operations
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
         },
         'dragenter .js-card-details'(event) {
-          event.preventDefault();
-          event.stopPropagation();
-          const card = this.data();
-          const board = card.board();
-          // Only allow drag-and-drop if user can modify card and board allows attachments
-          if (card.canModifyCard() && board && board.allowsAttachments) {
-            // Check if the drag contains files
-            const dataTransfer = event.originalEvent.dataTransfer;
-            if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            const card = this.data();
+            const board = card.board();
+            // Only allow drag-and-drop if user can modify card and board allows attachments
+            if (Utils.canModifyCard() && board && board.allowsAttachments) {
               $(event.currentTarget).addClass('is-dragging-over');
             }
           }
         },
         'dragleave .js-card-details'(event) {
-          event.preventDefault();
-          event.stopPropagation();
-          $(event.currentTarget).removeClass('is-dragging-over');
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.currentTarget).removeClass('is-dragging-over');
+          }
         },
         'drop .js-card-details'(event) {
-          event.preventDefault();
-          event.stopPropagation();
-          $(event.currentTarget).removeClass('is-dragging-over');
-
-          const card = this.data();
-          const board = card.board();
-
-          // Check permissions
-          if (!card.canModifyCard() || !board || !board.allowsAttachments) {
-            return;
-          }
-
-          // Check if this is a file drop (not a checklist item reorder)
           const dataTransfer = event.originalEvent.dataTransfer;
-          if (!dataTransfer || !dataTransfer.files || dataTransfer.files.length === 0) {
-            return;
-          }
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.currentTarget).removeClass('is-dragging-over');
 
-          // Check if the drop contains files (not just text/HTML)
-          if (!dataTransfer.types.includes('Files')) {
-            return;
-          }
+            const card = this.data();
+            const board = card.board();
 
-          const files = dataTransfer.files;
-          if (files && files.length > 0) {
-            handleFileUpload(card, files);
+            // Check permissions
+            if (!Utils.canModifyCard() || !board || !board.allowsAttachments) {
+              return;
+            }
+
+            // Check if this is a file drop (not a checklist item reorder)
+            if (!dataTransfer.files || dataTransfer.files.length === 0) {
+              return;
+            }
+
+            const files = dataTransfer.files;
+            if (files && files.length > 0) {
+              handleFileUpload(card, files);
+            }
           }
         },
       },
@@ -546,6 +572,11 @@ Template.cardDetails.helpers({
     let ret = !!Utils.getPopupCardId();
     return ret;
   },
+  isDateFormat(format) {
+    const currentUser = ReactiveCache.getCurrentUser();
+    if (!currentUser) return format === 'YYYY-MM-DD';
+    return currentUser.getDateFormat() === format;
+  },
   // Upload progress helpers
   hasActiveUploads() {
     return uploadProgressManager.hasActiveUploads(this._id);
@@ -1106,8 +1137,8 @@ BlazeComponent.extendComponent({
 // editVoteEndDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
-    this.data().getVoteEnd() && this.date.set(moment(this.data().getVoteEnd()));
+    super.onCreated(formatDateTime(now()));
+    this.data().getVoteEnd() && this.date.set(new Date(this.data().getVoteEnd()));
   }
   events() {
     return [
@@ -1118,12 +1149,12 @@ BlazeComponent.extendComponent({
           // if no time was given, init with 12:00
           const time =
             evt.target.time.value ||
-            moment(new Date().setHours(12, 0, 0)).format('LT');
+            formatTime(new Date().setHours(12, 0, 0));
 
           const dateString = `${evt.target.date.value} ${time}`;
 
           /*
-          const newDate = moment(dateString, 'L LT', true);
+          const newDate = parseDate(dateString, ['L LT'], true);
           if (newDate.isValid()) {
             // if active vote -  store it
             if (this.currentData().getVoteQuestion()) {
@@ -1137,28 +1168,27 @@ BlazeComponent.extendComponent({
 
           */
 
-          // Try to parse different date formats of all languages.
-          // This code is same for vote and planning poker.
-          const usaDate = moment(dateString, 'L LT', true);
-          const euroAmDate = moment(dateString, 'DD.MM.YYYY LT', true);
-          const euro24hDate = moment(dateString, 'DD.MM.YYYY HH.mm', true);
-          const eurodotDate = moment(dateString, 'DD.MM.YYYY HH:mm', true);
-          const minusDate = moment(dateString, 'YYYY-MM-DD HH:mm', true);
-          const slashDate = moment(dateString, 'DD/MM/YYYY HH.mm', true);
-          const dotDate = moment(dateString, 'DD/MM/YYYY HH:mm', true);
-          const brezhonegDate = moment(dateString, 'DD/MM/YYYY h[e]mm A', true);
-          const hrvatskiDate = moment(dateString, 'DD. MM. YYYY H:mm', true);
-          const latviaDate = moment(dateString, 'YYYY.MM.DD. H:mm', true);
-          const nederlandsDate = moment(dateString, 'DD-MM-YYYY HH:mm', true);
-          // greekDate does not work: el Greek Ελληνικά ,
-          // it has date format DD/MM/YYYY h:mm MM like 20/06/2021 11:15 MM
-          // where MM is maybe some text like AM/PM ?
-          // Also some other languages that have non-ascii characters in dates
-          // do not work.
-          const greekDate = moment(dateString, 'DD/MM/YYYY h:mm A', true);
-          const macedonianDate = moment(dateString, 'D.MM.YYYY H:mm', true);
+          // Try to parse different date formats using native Date parsing
+          const formats = [
+            'YYYY-MM-DD HH:mm',
+            'MM/DD/YYYY HH:mm',
+            'DD.MM.YYYY HH:mm',
+            'DD/MM/YYYY HH:mm',
+            'DD-MM-YYYY HH:mm'
+          ];
+          
+          let parsedDate = null;
+          for (const format of formats) {
+            parsedDate = parseDate(dateString, [format], true);
+            if (parsedDate) break;
+          }
+          
+          // Fallback to native Date parsing
+          if (!parsedDate) {
+            parsedDate = new Date(dateString);
+          }
 
-          if (usaDate.isValid()) {
+          if (isValidDate(parsedDate)) {
             // if active poker -  store it
             if (this.currentData().getPokerQuestion()) {
               this._storeDate(usaDate.toDate());
@@ -1337,9 +1367,9 @@ BlazeComponent.extendComponent({
 // editPokerEndDatePopup
 (class extends DatePicker {
   onCreated() {
-    super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
+    super.onCreated(formatDateTime(now()));
     this.data().getPokerEnd() &&
-      this.date.set(moment(this.data().getPokerEnd()));
+      this.date.set(new Date(this.data().getPokerEnd()));
   }
 
   /*
@@ -1357,7 +1387,7 @@ BlazeComponent.extendComponent({
     return moment.localeData().longDateFormat('LT');
   }
 
-  const newDate = moment(dateString, dateformat() + ' ' + timeformat(), true);
+  const newDate = parseDate(dateString, [dateformat() + ' ' + timeformat()], true);
   */
 
   events() {
@@ -1369,7 +1399,7 @@ BlazeComponent.extendComponent({
           // if no time was given, init with 12:00
           const time =
             evt.target.time.value ||
-            moment(new Date().setHours(12, 0, 0)).format('LT');
+            formatTime(new Date().setHours(12, 0, 0));
 
           const dateString = `${evt.target.date.value} ${time}`;
 
@@ -1380,7 +1410,7 @@ BlazeComponent.extendComponent({
           Maybe client/components/lib/datepicker.jade could have hidden input field for
           datepicker format that could be used to detect date format?
 
-          const newDate = moment(dateString, dateformat() + ' ' + timeformat(), true);
+          const newDate = parseDate(dateString, [dateformat() + ' ' + timeformat()], true);
 
           if (newDate.isValid()) {
             // if active poker -  store it
@@ -1393,28 +1423,27 @@ BlazeComponent.extendComponent({
             }
           */
 
-          // Try to parse different date formats of all languages.
-          // This code is same for vote and planning poker.
-          const usaDate = moment(dateString, 'L LT', true);
-          const euroAmDate = moment(dateString, 'DD.MM.YYYY LT', true);
-          const euro24hDate = moment(dateString, 'DD.MM.YYYY HH.mm', true);
-          const eurodotDate = moment(dateString, 'DD.MM.YYYY HH:mm', true);
-          const minusDate = moment(dateString, 'YYYY-MM-DD HH:mm', true);
-          const slashDate = moment(dateString, 'DD/MM/YYYY HH.mm', true);
-          const dotDate = moment(dateString, 'DD/MM/YYYY HH:mm', true);
-          const brezhonegDate = moment(dateString, 'DD/MM/YYYY h[e]mm A', true);
-          const hrvatskiDate = moment(dateString, 'DD. MM. YYYY H:mm', true);
-          const latviaDate = moment(dateString, 'YYYY.MM.DD. H:mm', true);
-          const nederlandsDate = moment(dateString, 'DD-MM-YYYY HH:mm', true);
-          // greekDate does not work: el Greek Ελληνικά ,
-          // it has date format DD/MM/YYYY h:mm MM like 20/06/2021 11:15 MM
-          // where MM is maybe some text like AM/PM ?
-          // Also some other languages that have non-ascii characters in dates
-          // do not work.
-          const greekDate = moment(dateString, 'DD/MM/YYYY h:mm A', true);
-          const macedonianDate = moment(dateString, 'D.MM.YYYY H:mm', true);
+          // Try to parse different date formats using native Date parsing
+          const formats = [
+            'YYYY-MM-DD HH:mm',
+            'MM/DD/YYYY HH:mm',
+            'DD.MM.YYYY HH:mm',
+            'DD/MM/YYYY HH:mm',
+            'DD-MM-YYYY HH:mm'
+          ];
+          
+          let parsedDate = null;
+          for (const format of formats) {
+            parsedDate = parseDate(dateString, [format], true);
+            if (parsedDate) break;
+          }
+          
+          // Fallback to native Date parsing
+          if (!parsedDate) {
+            parsedDate = new Date(dateString);
+          }
 
-          if (usaDate.isValid()) {
+          if (isValidDate(parsedDate)) {
             // if active poker -  store it
             if (this.currentData().getPokerQuestion()) {
               this._storeDate(usaDate.toDate());

client/components/cards/cardTime.jade

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

client/components/cards/checklists.jade

@@ -1,14 +1,14 @@
 template(name="checklists")
   .checklists-title
     h3.card-details-item-title
-      i.fa.fa-check
+      | ✅
       | {{_ 'checklists'}}
       if canModifyCard
         +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
           +addChecklistItemForm
         else
           a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
-            i.fa.fa-plus
+            | ➕
     if currentUser.isBoardMember
       .material-toggle-switch(title="{{_ 'hide-finished-checklist'}}")
         //span.toggle-switch-title
@@ -28,7 +28,7 @@ template(name="checklists")
       +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=false)
     else
       a.add-checklist.js-open-inlined-form(title="{{_ 'add-checklist'}}")
-        i.fa.fa-plus
+        | ➕
 
 template(name="checklistDetail")
   .js-checklist.checklist.nodragscroll
@@ -38,7 +38,7 @@ template(name="checklistDetail")
       .checklist-title
         span
         if canModifyCard
-          a.fa.fa-navicon.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
+          a.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
 
         if canModifyCard
           h4.title.js-open-inlined-form.is-editable
@@ -63,12 +63,12 @@ template(name="checklistDeletePopup")
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
 template(name="addChecklistItemForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
   textarea.js-add-checklist-item(rows='1' autofocus)
   .edit-controls.clearfix
     button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
+    a.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
     if showNewlineBecomesNewChecklistItem
       .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItem'}}")
         input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItem")
@@ -81,7 +81,7 @@ template(name="addChecklistItemForm")
           | {{_ 'originOrder'}}
 
 template(name="editChecklistItemForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
   textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
     if $eq type 'item'
@@ -90,12 +90,12 @@ template(name="editChecklistItemForm")
       = checklist.title
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
+    a.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
     span(title=createdAt) {{ moment createdAt }}
     if canModifyCard
       a.js-delete-checklist-item {{_ "delete"}}...
       a.js-convert-checklist-item-to-card
-        i.fa.fa-copy
+        | 📋
         | {{_ 'convertChecklistItemToCardPopup-title'}}
 
 template(name="checklistItems")
@@ -105,7 +105,7 @@ template(name="checklistItems")
         +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true position="top")
       else
         a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
-          i.fa.fa-plus
+          | ➕
   .checklist-items.js-checklist-items
     each item in checklist.items
       +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
@@ -117,7 +117,7 @@ template(name="checklistItems")
         +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true)
       else
         a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
-          i.fa.fa-plus
+          | ➕
 
 template(name='checklistItemDetail')
   .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if checklist.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}{{#if checklist.hideAllChecklistItems}} is-checked invisible{{/if}}"
@@ -125,8 +125,7 @@ template(name='checklistItemDetail')
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
-      if isTouchScreenOrShowDesktopDragHandles
-        span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
+      span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
         +viewer
           = item.title
@@ -140,16 +139,16 @@ template(name="checklistActionsPopup")
   ul.pop-over-list
     li
       a.js-delete-checklist.delete-checklist
-        i.fa.fa-trash
+        | 🗑️
         | {{_ "delete"}} ...
       a.js-move-checklist.move-checklist
-        i.fa.fa-arrow-right
+        | ➡️
         | {{_ "moveChecklist"}} ...
       a.js-copy-checklist.copy-checklist
-        i.fa.fa-copy
+        | 📋
         | {{_ "copyChecklist"}} ...
       a.js-hide-checked-checklist-items
-        i.fa.fa-eye-slash
+        | 🙈
         | {{_ "hideCheckedChecklistItems"}} ...
         .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
           if checklist.hideCheckedChecklistItems
@@ -158,7 +157,7 @@ template(name="checklistActionsPopup")
             input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}")
           label.toggle-label(for="toggleHideCheckedChecklistItems_{{checklist._id}}")
       a.js-hide-all-checklist-items
-        i.fa.fa-ban
+        | 🚫
         | {{_ "hideAllChecklistItems"}} ...
         .material-toggle-switch(title="{{_ 'hideAllChecklistItems'}}")
           if checklist.hideAllChecklistItems

client/components/cards/labels.jade

@@ -6,7 +6,7 @@ template(name="formLabel")
   .palette-colors: each labels
     span.card-label.palette-color.js-palette-color(class="card-label-{{color}}")
       if(isSelected color)
-        i.fa.fa-check
+        | ✅
 
 template(name="createLabelPopup")
   form.create-label
@@ -28,7 +28,8 @@ template(name="cardLabelsPopup")
   ul.edit-labels-pop-over
     each board.labels
       li.js-card-label-item
-        a.card-label-edit-button.fa.fa-pencil.js-edit-label
+        a.card-label-edit-button.js-edit-label
+          | ✏️
         if isTouchScreenOrShowDesktopDragHandles
           span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
         span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
@@ -36,5 +37,5 @@ template(name="cardLabelsPopup")
             +viewer
               = name
             if(isLabelSelected ../_id)
-              i.card-label-selectable-icon.fa.fa-check
+              | ✅
   a.quiet-button.full.js-add-label {{_ 'label-create'}}

client/components/cards/labels.js

@@ -125,8 +125,19 @@ Template.createLabelPopup.events({
       .$('#labelName')
       .val()
       .trim();
-    const color = Blaze.getData(templateInstance.find('.fa-check')).color;
-    board.addLabel(name, color);
+    
+    // Find the selected color by looking for the palette color that contains the checkmark
+    let selectedColor = null;
+    templateInstance.$('.js-palette-color').each(function() {
+      if ($(this).text().includes('✅')) {
+        selectedColor = Blaze.getData(this).color;
+        return false; // break out of loop
+      }
+    });
+    
+    if (selectedColor) {
+      board.addLabel(name, selectedColor);
+    }
     Popup.back();
   },
 });
@@ -144,8 +155,19 @@ Template.editLabelPopup.events({
       .$('#labelName')
       .val()
       .trim();
-    const color = Blaze.getData(templateInstance.find('.fa-check')).color;
-    board.editLabel(this._id, name, color);
+    
+    // Find the selected color by looking for the palette color that contains the checkmark
+    let selectedColor = null;
+    templateInstance.$('.js-palette-color').each(function() {
+      if ($(this).text().includes('✅')) {
+        selectedColor = Blaze.getData(this).color;
+        return false; // break out of loop
+      }
+    });
+    
+    if (selectedColor) {
+      board.editLabel(this._id, name, selectedColor);
+    }
     Popup.back();
   },
 });

client/components/cards/minicard.css

@@ -99,8 +99,8 @@
   float: none;
 }
 .minicard .minicard-labels .minicard-label {
-  width: 1.5vw;
-  height: 1.5vw;
+  width: clamp(12px, 1.5vw, 16px);
+  height: clamp(12px, 1.5vw, 16px);
   border-radius: 0.3vw;
   margin-right: 0.4vw;
   margin-bottom: 0.4vh;
@@ -130,8 +130,8 @@
   margin-right: 0.5vw;
 }
 .minicard .handle {
-  width: 2.5vw;
-  height: 2.5vw;
+  width: clamp(20px, 2.5vw, 28px);
+  height: clamp(20px, 2.5vw, 28px);
   position: absolute;
   right: 0.7vw;
   top: 0.7vh;
@@ -168,6 +168,80 @@
 .minicard .date {
   margin-right: 0.4vw;
 }
+
+/* Unicode icons for minicard dates - matching cardDate.css */
+.minicard .card-date.end-date time::before {
+  content: "🏁"; /* Finish flag - represents end/completion */
+}
+.minicard .card-date.due-date time::before {
+  content: "⏰"; /* Alarm clock - represents due/deadline */
+}
+.minicard .card-date.start-date time::before {
+  content: "🚀"; /* Rocket - represents start/launch */
+}
+.minicard .card-date.received-date time::before {
+  content: "📥"; /* Inbox tray - represents received/incoming */
+}
+
+.minicard .card-date time::before {
+  font-size: inherit;
+  margin-right: 0.3em;
+  display: inline-block;
+}
+
+/* Date type specific colors for minicards - matching cardDate.css */
+.minicard .card-date.received-date {
+  background-color: #dbdbdb; /* Grey for received - same as base card-date */
+}
+
+.minicard .card-date.received-date:hover,
+.minicard .card-date.received-date.is-active {
+  background-color: #b3b3b3;
+}
+
+.minicard .card-date.start-date {
+  background-color: #90ee90; /* Light green for start */
+  color: #000; /* Black text for start */
+}
+
+.minicard .card-date.start-date:hover,
+.minicard .card-date.start-date.is-active {
+  background-color: #7dd87d;
+}
+
+.minicard .card-date.due-date {
+  background-color: #ffd700; /* Yellow for due */
+  color: #000; /* Black text for due */
+}
+
+.minicard .card-date.due-date:hover,
+.minicard .card-date.due-date.is-active {
+  background-color: #e6c200;
+}
+
+.minicard .card-date.end-date {
+  background-color: #ffb3b3; /* Light red for end */
+  color: #000; /* Black text for end */
+}
+
+.minicard .card-date.end-date:hover,
+.minicard .card-date.end-date.is-active {
+  background-color: #ff9999;
+}
+
+/* Font Awesome icons in minicard dates */
+.minicard .card-date i.fa {
+  margin-right: 0.3vw;
+  font-size: 0.9em;
+  vertical-align: middle;
+}
+
+/* Font Awesome icons in minicard spent time */
+.minicard .card-time i.fa {
+  margin-right: 0.3vw;
+  font-size: 0.9em;
+  vertical-align: middle;
+}
 .minicard .badges {
   float: left;
   margin-top: 1vh;
@@ -220,8 +294,8 @@
 .minicard .minicard-creator .member {
   float: right;
   border-radius: 50%;
-  height: 3.5vw;
-  width: 3.5vw;
+  height: clamp(24px, 3.5vw, 32px);
+  width: clamp(24px, 3.5vw, 32px);
   margin-bottom: 0.5vh;
 }
 .minicard .minicard-members .assignee,
@@ -229,8 +303,8 @@
 .minicard .minicard-creator .assignee {
   float: right;
   border-radius: 50%;
-  height: 3.5vw;
-  width: 3.5vw;
+  height: clamp(24px, 3.5vw, 32px);
+  width: clamp(24px, 3.5vw, 32px);
 }
 .minicard .minicard-members + .badges,
 .minicard .minicard-assignees + .badges,

client/components/cards/minicard.jade

@@ -4,19 +4,13 @@ template(name="minicard")
     class="{{#if isLinkedBoard}}linked-board{{/if}}"
     class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
     if canModifyCard
-      if isTouchScreenOrShowDesktopDragHandles
-        a.fa.fa-navicon.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-        .handle
-          .fa.fa-arrows
-      else
-        a.fa.fa-navicon.minicard-details-menu.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+      a.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}") ☰
+      .handle
+        | ↕️
     .dates
       if getReceived
-        unless getStart
-          unless getDue
-            unless getEnd
-              .date
-                +minicardReceivedDate
+        .date
+          +minicardReceivedDate
       if getStart
         .date
           +minicardStartDate
@@ -36,7 +30,7 @@ template(name="minicard")
     if hasActiveUploads
       .minicard-upload-progress
         .upload-progress-header
-          i.fa.fa-upload
+          | 📤
           span {{_ 'uploading-files'}} ({{uploadCount}})
         each uploads
           .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}")
@@ -45,11 +39,11 @@ template(name="minicard")
               .upload-progress-fill(style="width: {{progress}}%")
             if $eq status 'error'
               .upload-progress-error
-                i.fa.fa-exclamation-triangle
+                | ⚠️
                 span {{_ 'upload-failed'}}
             else if $eq status 'completed'
               .upload-progress-success
-                i.fa.fa-check
+                | ✅
                 span {{_ 'upload-completed'}}
 
     .minicard-title
@@ -61,12 +55,12 @@ template(name="minicard")
           | {{ parentCardName }}
       if isLinkedBoard
         a.js-linked-link
-          span.linked-icon.fa.fa-folder
+          span.linked-icon | 📁
       else if isLinkedCard
         a.js-linked-link
-          span.linked-icon.fa.fa-id-card
+          span.linked-icon | 🃏
       if getArchived
-        span.linked-icon.linked-archived.fa.fa-archive
+        span.linked-icon.linked-archived | 📦
       +viewer
         if currentBoard.allowsCardNumber
           span.card-number
@@ -147,7 +141,7 @@ template(name="minicard")
       if canModifyCard
         if comments.length
           .badge(title="{{_ 'card-comments-title' comments.length }}")
-            span.badge-icon.fa.fa-comment-o.badge-comment.badge-text
+            span.badge-icon.badge-comment.badge-text | 💬
               = ' '
               = comments.length
             //span.badge-comment.badge-text
@@ -155,36 +149,36 @@ template(name="minicard")
       if getDescription
         unless currentBoard.allowsDescriptionTextOnMinicard
           .badge.badge-state-image-only(title=getDescription)
-            span.badge-icon.fa.fa-align-left
+            span.badge-icon | 📝
       if getVoteQuestion
         .badge.badge-state-image-only(title=getVoteQuestion)
-          span.badge-icon.fa.fa-thumbs-up(class="{{#if voteState}}text-green{{/if}}")
+          span.badge-icon(class="{{#if voteState}}text-green{{/if}}") | 👍
           span.badge-text {{ voteCountPositive }}
-          span.badge-icon.fa.fa-thumbs-down(class="{{#if $eq voteState false}}text-red{{/if}}")
+          span.badge-icon(class="{{#if $eq voteState false}}text-red{{/if}}") | 👎
           span.badge-text {{ voteCountNegative }}
       if getPokerQuestion
         .badge.badge-state-image-only(title=getPokerQuestion)
-          span.badge-icon.fa.fa-check(class="{{#if pokerState}}text-green{{/if}}")
+          span.badge-icon(class="{{#if pokerState}}text-green{{/if}}") | ✅
           if expiredPoker
             span.badge-text {{ getPokerEstimation }}
       if attachments.length
         if currentBoard.allowsBadgeAttachmentOnMinicard
           .badge
-            span.badge-icon.fa.fa-paperclip
+            span.badge-icon | 📎
             span.badge-text= attachments.length
       if checklists.length
         .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
-          span.badge-icon.fa.fa-check-square-o
+          span.badge-icon | ☑️
           span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
       if allSubtasks.count
         .badge
-          span.badge-icon.fa.fa-sitemap
+          span.badge-icon | 🌐
           span.badge-text.check-list-text {{subtasksFinishedCount}}/{{allSubtasksCount}}
           //{{subtasksFinishedCount}}/{{subtasksCount}} does not work because when a subtaks is archived, the count goes down
       if currentBoard.allowsCardSortingByNumber
         if currentBoard.allowsCardSortingByNumberOnMinicard
           .badge
-            span.badge-icon.fa.fa-sort
+            span.badge-icon | 🔢
             span.badge-text.check-list-sort {{ sort }}
     if currentBoard.allowsDescriptionTextOnMinicard
       if getDescription
@@ -193,7 +187,7 @@ template(name="minicard")
             | {{ getDescription }}
     if shouldShowListOnMinicard
       .minicard-list-name
-        i.fa.fa-list
+        | 📋
         | {{ listName }}
     if $eq 'subtext-with-full-path' currentBoard.presentParentTask
       .parent-subtext
@@ -212,50 +206,50 @@ template(name="minicardDetailsActionsPopup")
     if canModifyCard
       li
         a.js-move-card
-          i.fa.fa-arrow-right
+          | ➡️
           | {{_ 'moveCardPopup-title'}}
       li
         a.js-copy-card
-          i.fa.fa-copy
+          | 📋
           | {{_ 'copyCardPopup-title'}}
       hr
       li
         a.js-archive
-          i.fa.fa-arrow-right
-          i.fa.fa-archive
+          | ➡️
+          | 📦
           | {{_ 'archive-card'}}
       hr
       li
         a.js-move-card-to-top
-          i.fa.fa-arrow-up
+          | ⬆️
           | {{_ 'moveCardToTop-title'}}
       li
         a.js-move-card-to-bottom
-          i.fa.fa-arrow-down
+          | ⬇️
           | {{_ 'moveCardToBottom-title'}}
       hr
       li
         a.js-add-labels
-          i.fa.fa-tags
+          | 🏷️
           | {{_ 'card-edit-labels'}}
       li
         a.js-due-date
-          i.fa.fa-sign-in
+          | 📥
           | {{_ 'editCardDueDatePopup-title'}}
       li
         a.js-set-card-color
-          i.fa.fa-paint-brush
+          | 🎨
           | {{_ 'setCardColorPopup-title'}}
       li
         a.js-link
-          i.fa.fa-link
+          | 🔗
           | {{_ 'link-card'}}
       li
       a.js-toggle-watch-card
         if isWatching
-          i.fa.fa-eye
+          | 👁️
           |  {{_ 'unwatch'}}
         else
-          i.fa.fa-eye-slash
+          | 👁️-slash
           |  {{_ 'watch'}}
 

client/components/cards/minicard.js

@@ -111,55 +111,58 @@ BlazeComponent.extendComponent({
         'click .js-open-minicard-details-menu': Popup.open('minicardDetailsActions'),
         // Drag and drop file upload handlers
         'dragover .minicard'(event) {
-          event.preventDefault();
-          event.stopPropagation();
+          // Only prevent default for file drags to avoid interfering with sortable
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
         },
         'dragenter .minicard'(event) {
-          event.preventDefault();
-          event.stopPropagation();
-          const card = this.data();
-          const board = card.board();
-          // Only allow drag-and-drop if user can modify card and board allows attachments
-          if (card.canModifyCard() && board && board.allowsAttachments) {
-            // Check if the drag contains files
-            const dataTransfer = event.originalEvent.dataTransfer;
-            if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            const card = this.data();
+            const board = card.board();
+            // Only allow drag-and-drop if user can modify card and board allows attachments
+            if (Utils.canModifyCard() && board && board.allowsAttachments) {
               $(event.currentTarget).addClass('is-dragging-over');
             }
           }
         },
         'dragleave .minicard'(event) {
-          event.preventDefault();
-          event.stopPropagation();
-          $(event.currentTarget).removeClass('is-dragging-over');
+          const dataTransfer = event.originalEvent.dataTransfer;
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.currentTarget).removeClass('is-dragging-over');
+          }
         },
         'drop .minicard'(event) {
-          event.preventDefault();
-          event.stopPropagation();
-          $(event.currentTarget).removeClass('is-dragging-over');
-
-          const card = this.data();
-          const board = card.board();
-
-          // Check permissions
-          if (!card.canModifyCard() || !board || !board.allowsAttachments) {
-            return;
-          }
-
-          // Check if this is a file drop (not a card reorder)
           const dataTransfer = event.originalEvent.dataTransfer;
-          if (!dataTransfer || !dataTransfer.files || dataTransfer.files.length === 0) {
-            return;
-          }
+          if (dataTransfer && dataTransfer.types && dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.currentTarget).removeClass('is-dragging-over');
 
-          // Check if the drop contains files (not just text/HTML)
-          if (!dataTransfer.types.includes('Files')) {
-            return;
-          }
+            const card = this.data();
+            const board = card.board();
 
-          const files = dataTransfer.files;
-          if (files && files.length > 0) {
-            handleFileUpload(card, files);
+            // Check permissions
+            if (!Utils.canModifyCard() || !board || !board.allowsAttachments) {
+              return;
+            }
+
+            // Check if this is a file drop (not a card reorder)
+            if (!dataTransfer.files || dataTransfer.files.length === 0) {
+              return;
+            }
+
+            const files = dataTransfer.files;
+            if (files && files.length > 0) {
+              handleFileUpload(card, files);
+            }
           }
         },
       }

client/components/cards/resultCard.jade

@@ -13,7 +13,7 @@ template(name="resultCard")
             .broken-cards-null
               | NULL
         if getBoard.archived
-          i.fa.fa-archive
+          | 📦
       li.result-card-context.result-card-context-separator
         = ' '
         | {{_ 'context-separator'}}
@@ -27,7 +27,7 @@ template(name="resultCard")
             .broken-cards-null
               | NULL
         if getSwimlane.archived
-          i.fa.fa-archive
+          | 📦
       li.result-card-context.result-card-context-separator
         = ' '
         | {{_ 'context-separator'}}
@@ -41,4 +41,4 @@ template(name="resultCard")
             .broken-cards-null
               | NULL
         if getList.archived
-          i.fa.fa-archive
+          | 📦

client/components/cards/subtasks.jade

@@ -1,6 +1,6 @@
 template(name="subtasks")
   h3.card-details-item-title
-    i.fa.fa-sitemap
+    | 🌐
     | {{_ 'subtasks'}}
   if currentUser.isBoardAdmin
     if toggleDeleteDialog.get
@@ -16,7 +16,7 @@ template(name="subtasks")
       +addSubtaskItemForm
     else
       a.js-open-inlined-form(title="{{_ 'add-subtask'}}")
-        i.fa.fa-plus
+        | ➕
 
 template(name="subtaskDetail")
   .js-subtasks.subtask
@@ -26,7 +26,7 @@ template(name="subtaskDetail")
       .subtask-title
         span
         if canModifyCard
-          a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
+          a.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
         if canModifyCard
           h2.title.js-open-inlined-form.is-editable
             +viewer
@@ -40,7 +40,7 @@ template(name="addSubtaskItemForm")
   textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editSubtaskItemForm")
   textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
@@ -50,7 +50,7 @@ template(name="editSubtaskItemForm")
       = subtask.title
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
     span(title=createdAt) {{ moment createdAt }}
     if canModifyCard
       if currentUser.isBoardAdmin
@@ -68,7 +68,7 @@ template(name="subtasksItems")
         +addSubtaskItemForm
       else
         a.add-subtask-item.js-open-inlined-form
-          i.fa.fa-plus
+          | ➕
           | {{_ 'add-subtask-item'}}...
 
 template(name='subtaskItemDetail')
@@ -92,10 +92,10 @@ template(name="subtaskActionsPopup")
   ul.pop-over-list
     li
       a.js-view-subtask(title="{{ subtask.title }}")
-        i.fa.fa-eye
+        | 👁️
         | {{_ "view-it"}}
       if currentUser.isBoardAdmin
         a.js-delete-subtask.delete-subtask
-          i.fa.fa-trash
+          | 🗑️
           | {{_ "delete"}} ...
 

client/components/common/originalPosition.css

@@ -0,0 +1,123 @@
+/* Original Position Component Styles */
+.original-position-info {
+  margin: 5px 0;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.original-position-loading {
+  color: #666;
+  font-style: italic;
+}
+
+.original-position-loading i {
+  margin-right: 5px;
+}
+
+.original-position-details {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 3px;
+  padding: 6px 8px;
+}
+
+.original-position-moved {
+  color: #856404;
+  background-color: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 3px;
+  padding: 4px 6px;
+  margin-bottom: 4px;
+}
+
+.original-position-moved i {
+  color: #f39c12;
+  margin-right: 5px;
+}
+
+.original-position-unchanged {
+  color: #155724;
+  background-color: #d4edda;
+  border: 1px solid #c3e6cb;
+  border-radius: 3px;
+  padding: 4px 6px;
+  margin-bottom: 4px;
+}
+
+.original-position-unchanged i {
+  color: #28a745;
+  margin-right: 5px;
+}
+
+.original-position-text {
+  font-weight: 500;
+}
+
+.original-title {
+  color: #6c757d;
+  font-size: 11px;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid #e9ecef;
+}
+
+.original-title strong {
+  color: #495057;
+}
+
+/* Integration with existing Wekan styles */
+.swimlane .original-position-info,
+.list .original-position-info,
+.card .original-position-info {
+  margin: 2px 0;
+  padding: 4px 6px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .original-position-info {
+    font-size: 11px;
+    padding: 6px;
+  }
+  
+  .original-position-details {
+    padding: 4px 6px;
+  }
+  
+  .original-position-moved,
+  .original-position-unchanged {
+    padding: 3px 5px;
+  }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .original-position-details {
+    background-color: #2d3748;
+    border-color: #4a5568;
+    color: #e2e8f0;
+  }
+  
+  .original-position-moved {
+    background-color: #744210;
+    border-color: #b7791f;
+    color: #fbd38d;
+  }
+  
+  .original-position-unchanged {
+    background-color: #22543d;
+    border-color: #38a169;
+    color: #9ae6b4;
+  }
+  
+  .original-title {
+    color: #a0aec0;
+    border-color: #4a5568;
+  }
+  
+  .original-title strong {
+    color: #e2e8f0;
+  }
+}

client/components/common/originalPosition.html

@@ -0,0 +1,29 @@
+<template name="originalPosition">
+  <div class="original-position-info">
+    {{#if isLoading}}
+      <div class="original-position-loading">
+        <i class="fa fa-spinner fa-spin"></i> Loading original position...
+      </div>
+    {{else if showOriginalPosition}}
+      <div class="original-position-details">
+        {{#if hasMovedFromOriginal}}
+          <div class="original-position-moved">
+            <i class="fa fa-info-circle"></i>
+            <span class="original-position-text">{{getOriginalPositionDescription}}</span>
+          </div>
+        {{else}}
+          <div class="original-position-unchanged">
+            <i class="fa fa-check-circle"></i>
+            <span class="original-position-text">In original position</span>
+          </div>
+        {{/if}}
+        
+        {{#if getOriginalTitle}}
+          <div class="original-title">
+            <strong>Original title:</strong> {{getOriginalTitle}}
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+</template>

client/components/common/originalPosition.js

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

client/components/forms/datepicker.jade

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

client/components/lists/list.css

@@ -21,6 +21,8 @@
   background: transparent;
   transition: background-color 0.2s ease;
   border-radius: 2px;
+  /* Ensure the handle is clickable */
+  pointer-events: auto;
 }
 
 .list-resize-handle:hover {
@@ -90,6 +92,8 @@
   width: var(--list-width, auto) !important;
   min-width: var(--list-width, auto) !important;
   max-width: var(--list-width, auto) !important;
+  /* Ensure the width is applied immediately */
+  overflow: visible !important;
 }
 
 body.list-resizing-active {
@@ -187,6 +191,11 @@ body.list-resizing-active * {
   margin-right: 0 !important;
   /* Ensure proper display */
   display: inline-block !important;
+  /* Ensure it's clickable and shows proper cursor */
+  cursor: move !important;
+  pointer-events: auto !important;
+  /* Add some padding for better clickability */
+  padding: 4px !important;
 }
 
 /* Ensure buttons maintain original positioning */
@@ -250,7 +259,70 @@ body.list-resizing-active * {
 }
 .list.list-collapsed {
   flex: none;
+  min-width: 60px;
+  max-width: 80px;
+  width: 60px;
+  min-height: 60vh;
+  height: 60vh;
+  overflow: visible;
+  position: relative;
 }
+.list.list-collapsed .list-header {
+  padding: 1vh 1.5vw 0.5vh;
+  min-height: 2.5vh !important;
+  height: auto !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  overflow: visible !important;
+  width: 100%;
+  max-width: 60px;
+  margin: 0 auto;
+}
+.list.list-collapsed .list-header .js-collapse {
+  margin: 0 auto 20px auto;
+  z-index: 10;
+  padding: 8px 12px;
+  font-size: 12px;
+  white-space: nowrap;
+  display: block;
+  width: fit-content;
+}
+.list.list-collapsed .list-header .list-rotated {
+  width: auto !important;
+  height: auto !important;
+  margin: 20px 0 0 0 !important;
+  position: relative !important;
+  overflow: visible !important;
+}
+
+.list.list-collapsed .list-header .list-rotated h2.list-header-name {
+  text-align: left;
+  overflow: visible;
+  white-space: nowrap;
+  display: block !important;
+  font-size: 12px;
+  line-height: 1.2;
+  color: #333;
+  background-color: rgba(255, 255, 255, 0.95);
+  border: 1px solid #ddd;
+  padding: 8px 4px;
+  border-radius: 4px;
+  margin: 0 auto;
+  width: 25vh;
+  height: 60vh;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(calc(-50% + 50px), -50%) rotate(0deg);
+  z-index: 10;
+  visibility: visible !important;
+  opacity: 1 !important;
+  pointer-events: none;
+}
+
 .list.list-composer .open-list-composer,
 .list .list-composer .open-list-composer {
   color: #8c8c8c;
@@ -334,11 +406,152 @@ body.list-resizing-active * {
   color: #a6a6a6;
   margin-right: 15px;
 }
-.list-header .list-header-uncollapse-left {
+.list-header .js-collapse {
   color: #a6a6a6;
+  margin-right: 15px;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 5px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  cursor: pointer;
+  font-size: 14px;
 }
-.list-header .list-header-uncollapse-right {
-  color: #a6a6a6;
+.list-header .js-collapse:hover {
+  background-color: #e0e0e0;
+  color: #333;
+}
+.list.list-collapsed .list-header .js-collapse {
+  display: inline-block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* Responsive adjustments for collapsed lists */
+@media (min-width: 768px) {
+  .list.list-collapsed {
+    min-width: 60px;
+    max-width: 80px;
+    width: 60px;
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    max-width: 60px;
+    margin: 0 auto;
+    min-height: 2.5vh !important;
+    height: auto !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: 15vh;
+    font-size: 12px;
+    height: 30px;
+    line-height: 1.2;
+    padding: 8px 4px;
+    margin: 0 auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(calc(-50% + 50px), -50%) rotate(0deg);
+    text-align: left;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid #ddd;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 0 auto 20px auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .list.list-collapsed {
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    min-height: 2.5vh !important;
+    height: auto !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: 15vh;
+    font-size: 12px;
+    height: 30px;
+    line-height: 1.2;
+    padding: 8px 4px;
+    margin: 0 auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(calc(-50% + 50px), -50%) rotate(0deg);
+    text-align: left;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid #ddd;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 0 auto 20px auto;
+  }
+}
+
+@media (min-width: 1200px) {
+  .list.list-collapsed {
+    min-height: 60vh;
+    height: 60vh;
+  }
+  .list.list-collapsed .list-header {
+    min-height: 2.5vh !important;
+    height: auto !important;
+  }
+  .list.list-collapsed .list-header .list-rotated {
+    width: auto !important;
+    height: auto !important;
+    margin: 20px 0 0 0 !important;
+    position: relative !important;
+  }
+  .list.list-collapsed .list-header .list-rotated h2.list-header-name {
+    width: 15vh;
+    font-size: 12px;
+    height: 30px;
+    line-height: 1.2;
+    padding: 8px 4px;
+    margin: 0 auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(calc(-50% + 50px), -50%) rotate(0deg);
+    text-align: left;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: block !important;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid #ddd;
+    color: #333;
+    z-index: 10;
+  }
+  .list.list-collapsed .list-header .js-collapse {
+    margin: 0 auto 20px auto;
+  }
 }
 .list-header .list-header-collapse {
   color: #a6a6a6;
@@ -433,7 +646,7 @@ body.list-resizing-active * {
   height: auto;
   width: 100%;
   min-width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
 }
 .list.mobile-view {
@@ -441,7 +654,7 @@ body.list-resizing-active * {
   flex-basis: auto;
   width: 100%;
   min-width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
 }
 .list.mobile-view:first-child {
   margin-left: 0px;
@@ -450,7 +663,7 @@ body.list-resizing-active * {
   flex: 0 0 60px;
   height: 60px;
   width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
 }
 .list.mobile-view.ui-sortable-helper .list-header.ui-sortable-handle {
@@ -460,7 +673,7 @@ body.list-resizing-active * {
   flex: 0 0 60px;
   height: 60px;
   width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
 }
 .list.mobile-view .list-body {
@@ -552,13 +765,14 @@ body.list-resizing-active * {
   align-items: initial;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   .mini-list {
     flex: 0 0 60px;
     height: auto;
     width: 100%;
     min-width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
   }
   .list {
@@ -566,7 +780,7 @@ body.list-resizing-active * {
     flex-basis: auto;
     width: 100%;
     min-width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
   }
   .list:first-child {
     margin-left: 0px;
@@ -575,7 +789,7 @@ body.list-resizing-active * {
     flex: 0 0 60px;
     height: 60px;
     width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
   }
   .list.ui-sortable-helper .list-header.ui-sortable-handle {
@@ -585,7 +799,7 @@ body.list-resizing-active * {
     flex: 0 0 60px;
     height: 60px;
     width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
   }
   .list-body {

client/components/lists/list.jade

@@ -4,7 +4,7 @@ template(name='list')
                 class="{{#if collapsed}}list-collapsed{{/if}} {{#if autoWidth}}list-auto-width{{/if}} {{#if isMiniScreen}}mobile-view{{/if}}")
     +listHeader
     +listBody
-    .list-resize-handle.js-list-resize-handle
+    .list-resize-handle.js-list-resize-handle.nodragscroll
 
 template(name='miniList')
   a.mini-list.js-select-list.js-list(id="js-list-{{_id}}" class="{{#if isMiniScreen}}mobile-view{{/if}}")

client/components/lists/list.js

@@ -24,7 +24,7 @@ BlazeComponent.extendComponent({
   onRendered() {
     const boardComponent = this.parentComponent().parentComponent();
 
-    // Initialize list resize functionality
+    // Initialize list resize functionality immediately
     this.initializeListResize();
 
     const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
@@ -150,17 +150,13 @@ BlazeComponent.extendComponent({
     });
 
     this.autorun(() => {
-      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-        $cards.sortable({
-          handle: '.handle',
-        });
-      } else {
-        $cards.sortable({
-          handle: '.minicard',
-        });
-      }
-
       if ($cards.data('uiSortable') || $cards.data('sortable')) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+          $cards.sortable('option', 'handle', '.handle');
+        } else {
+          $cards.sortable('option', 'handle', '.minicard');
+        }
+
         $cards.sortable(
           'option',
           'disabled',
@@ -201,28 +197,89 @@ BlazeComponent.extendComponent({
   listWidth() {
     const user = ReactiveCache.getCurrentUser();
     const list = Template.currentData();
-    return user.getListWidth(list.boardId, list._id);
+    if (!list) return 270; // Return default width if list is not available
+    
+    if (user) {
+      // For logged-in users, get from user profile
+      return user.getListWidthFromStorage(list.boardId, list._id);
+    } else {
+      // For non-logged-in users, get from localStorage
+      try {
+        const stored = localStorage.getItem('wekan-list-widths');
+        if (stored) {
+          const widths = JSON.parse(stored);
+          if (widths[list.boardId] && widths[list.boardId][list._id]) {
+            return widths[list.boardId][list._id];
+          }
+        }
+      } catch (e) {
+        console.warn('Error reading list width from localStorage:', e);
+      }
+      return 270; // Return default width if not found
+    }
   },
 
   listConstraint() {
     const user = ReactiveCache.getCurrentUser();
     const list = Template.currentData();
-    return user.getListConstraint(list.boardId, list._id);
+    if (!list) return 550; // Return default constraint if list is not available
+    
+    if (user) {
+      // For logged-in users, get from user profile
+      return user.getListConstraintFromStorage(list.boardId, list._id);
+    } else {
+      // For non-logged-in users, get from localStorage
+      try {
+        const stored = localStorage.getItem('wekan-list-constraints');
+        if (stored) {
+          const constraints = JSON.parse(stored);
+          if (constraints[list.boardId] && constraints[list.boardId][list._id]) {
+            return constraints[list.boardId][list._id];
+          }
+        }
+      } catch (e) {
+        console.warn('Error reading list constraint from localStorage:', e);
+      }
+      return 550; // Return default constraint if not found
+    }
   },
 
   autoWidth() {
     const user = ReactiveCache.getCurrentUser();
     const list = Template.currentData();
+    if (!user) {
+      // For non-logged-in users, auto-width is disabled
+      return false;
+    }
     return user.isAutoWidth(list.boardId);
   },
 
   initializeListResize() {
+    // Check if we're still in a valid template context
+    if (!Template.currentData()) {
+      console.warn('No current template data available for list resize initialization');
+      return;
+    }
+    
     const list = Template.currentData();
     const $list = this.$('.js-list');
     const $resizeHandle = this.$('.js-list-resize-handle');
     
+    // Check if elements exist
+    if (!$list.length || !$resizeHandle.length) {
+      console.warn('List or resize handle not found, retrying in 100ms');
+      Meteor.setTimeout(() => {
+        if (!this.isDestroyed) {
+          this.initializeListResize();
+        }
+      }, 100);
+      return;
+    }
+    
+    
     // Only enable resize for non-collapsed, non-auto-width lists
-    if (list.collapsed || this.autoWidth()) {
+    const isAutoWidth = this.autoWidth();
+    if (list.collapsed || isAutoWidth) {
       $resizeHandle.hide();
       return;
     }
@@ -240,41 +297,41 @@ BlazeComponent.extendComponent({
       startX = e.pageX || e.originalEvent.touches[0].pageX;
       startWidth = $list.outerWidth();
       
+      
       // Add visual feedback
       $list.addClass('list-resizing');
       $('body').addClass('list-resizing-active');
       
+      
       // Prevent text selection during resize
       $('body').css('user-select', 'none');
       
       e.preventDefault();
+      e.stopPropagation();
     };
 
     const doResize = (e) => {
-      if (!isResizing) return;
+      if (!isResizing) {
+        return;
+      }
       
       const currentX = e.pageX || e.originalEvent.touches[0].pageX;
       const deltaX = currentX - startX;
       const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + deltaX));
       
-      // Apply the new width immediately for real-time feedback using CSS custom properties
+      // Apply the new width immediately for real-time feedback
       $list[0].style.setProperty('--list-width', `${newWidth}px`);
-      $list.css({
-        'width': `${newWidth}px`,
-        'min-width': `${newWidth}px`,
-        'max-width': `${newWidth}px`,
-        'flex': 'none',
-        'flex-basis': 'auto',
-        'flex-grow': '0',
-        'flex-shrink': '0'
-      });
+      $list[0].style.setProperty('width', `${newWidth}px`);
+      $list[0].style.setProperty('min-width', `${newWidth}px`);
+      $list[0].style.setProperty('max-width', `${newWidth}px`);
+      $list[0].style.setProperty('flex', 'none');
+      $list[0].style.setProperty('flex-basis', 'auto');
+      $list[0].style.setProperty('flex-grow', '0');
+      $list[0].style.setProperty('flex-shrink', '0');
       
-      // Debug: log the width change
-      if (process.env.DEBUG === 'true') {
-        console.log(`Resizing list to ${newWidth}px`);
-      }
       
       e.preventDefault();
+      e.stopPropagation();
     };
 
     const stopResize = (e) => {
@@ -287,17 +344,15 @@ BlazeComponent.extendComponent({
       const deltaX = currentX - startX;
       const finalWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + deltaX));
       
-      // Ensure the final width is applied using CSS custom properties
+      // Ensure the final width is applied
       $list[0].style.setProperty('--list-width', `${finalWidth}px`);
-      $list.css({
-        'width': `${finalWidth}px`,
-        'min-width': `${finalWidth}px`,
-        'max-width': `${finalWidth}px`,
-        'flex': 'none',
-        'flex-basis': 'auto',
-        'flex-grow': '0',
-        'flex-shrink': '0'
-      });
+      $list[0].style.setProperty('width', `${finalWidth}px`);
+      $list[0].style.setProperty('min-width', `${finalWidth}px`);
+      $list[0].style.setProperty('max-width', `${finalWidth}px`);
+      $list[0].style.setProperty('flex', 'none');
+      $list[0].style.setProperty('flex-basis', 'auto');
+      $list[0].style.setProperty('flex-grow', '0');
+      $list[0].style.setProperty('flex-shrink', '0');
       
       // Remove visual feedback but keep the width
       $list.removeClass('list-resizing');
@@ -311,19 +366,52 @@ BlazeComponent.extendComponent({
       const boardId = list.boardId;
       const listId = list._id;
       
-      // Use the same method as the hamburger menu
+      // Use the new storage method that handles both logged-in and non-logged-in users
       if (process.env.DEBUG === 'true') {
-        console.log(`Saving list width: ${finalWidth}px for list ${listId}`);
       }
-      Meteor.call('applyListWidth', boardId, listId, finalWidth, listConstraint, (error, result) => {
-        if (error) {
-          console.error('Error saving list width:', error);
-        } else {
-          if (process.env.DEBUG === 'true') {
-            console.log('List width saved successfully:', result);
+      
+      const currentUser = ReactiveCache.getCurrentUser();
+      if (currentUser) {
+        // For logged-in users, use server method
+        Meteor.call('applyListWidthToStorage', boardId, listId, finalWidth, listConstraint, (error, result) => {
+          if (error) {
+            console.error('Error saving list width:', error);
+          } else {
+            if (process.env.DEBUG === 'true') {
+            }
           }
+        });
+      } else {
+        // For non-logged-in users, save to localStorage directly
+        try {
+          // Save list width
+          const storedWidths = localStorage.getItem('wekan-list-widths');
+          let widths = storedWidths ? JSON.parse(storedWidths) : {};
+          
+          if (!widths[boardId]) {
+            widths[boardId] = {};
+          }
+          widths[boardId][listId] = finalWidth;
+          
+          localStorage.setItem('wekan-list-widths', JSON.stringify(widths));
+          
+          // Save list constraint
+          const storedConstraints = localStorage.getItem('wekan-list-constraints');
+          let constraints = storedConstraints ? JSON.parse(storedConstraints) : {};
+          
+          if (!constraints[boardId]) {
+            constraints[boardId] = {};
+          }
+          constraints[boardId][listId] = listConstraint;
+          
+          localStorage.setItem('wekan-list-constraints', JSON.stringify(constraints));
+          
+          if (process.env.DEBUG === 'true') {
+          }
+        } catch (e) {
+          console.warn('Error saving list width/constraint to localStorage:', e);
         }
-      });
+      }
       
       e.preventDefault();
     };
@@ -334,9 +422,16 @@ BlazeComponent.extendComponent({
     $(document).on('mouseup', stopResize);
     
     // Touch events for mobile
-    $resizeHandle.on('touchstart', startResize);
-    $(document).on('touchmove', doResize);
-    $(document).on('touchend', stopResize);
+    $resizeHandle.on('touchstart', startResize, { passive: false });
+    $(document).on('touchmove', doResize, { passive: false });
+    $(document).on('touchend', stopResize, { passive: false });
+    
+    
+    // Prevent dragscroll interference
+    $resizeHandle.on('mousedown', (e) => {
+      e.stopPropagation();
+    });
+    
     
     // Reactively update resize handle visibility when auto-width changes
     component.autorun(() => {

client/components/lists/listBody.jade

@@ -32,7 +32,7 @@ template(name="listBody")
             +addCardForm(listId=_id position="bottom")
           else
             a.open-minicard-composer.js-card-composer.js-open-inlined-form(title="{{_ 'add-card-to-bottom-of-list'}}")
-              i.fa.fa-plus
+              | ➕
 
 template(name="spinnerList")
   .sk-spinner.sk-spinner-list(
@@ -54,7 +54,7 @@ template(name="addCardForm")
 
   .add-controls.clearfix
     button.primary.confirm(type="submit") {{_ 'add'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form | ❌
   .add-controls.clearfix
     unless currentBoard.isTemplatesBoard
       unless currentBoard.isTemplateBoard

client/components/lists/listHeader.jade

@@ -7,12 +7,10 @@ template(name="listHeader")
     else
       if isMiniScreen
         if currentList
-          a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
+          a.list-header-left-icon.js-unselect-list
+            | ◀️
       else
         if collapsed
-          a.js-collapse(title="{{_ 'uncollapse'}}")
-            i.fa.fa-arrow-left.list-header-uncollapse-left
-            i.fa.fa-arrow-right.list-header-uncollapse-right
           if showCardsCountForList cards.length
             br
             span.cardCount {{cardsCount}}
@@ -29,6 +27,10 @@ template(name="listHeader")
         if showCardsCountForList cards.length
           span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}}
       else
+        if collapsed
+          a.js-collapse(title="{{_ 'uncollapse'}}")
+            | ⬅️
+            | ➡️
         div(class="{{#if collapsed}}list-rotated{{/if}}")
           h2.list-header-name(
             title="{{ moment modifiedAt 'LLL' }}"
@@ -45,94 +47,95 @@ template(name="listHeader")
       if isMiniScreen
         if currentList
           if isWatching
-            i.list-header-watch-icon.fa.fa-eye
+            i.list-header-watch-icon | 👁️
           div.list-header-menu
             unless currentUser.isCommentOnly
               if canSeeAddCard
-                a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
-              a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
+                a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") ➕
+              a.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") ☰
         else
-          a.list-header-menu-icon.fa.fa-angle-right.js-select-list
-          a.list-header-handle.handle.fa.fa-arrows.js-list-handle
+          a.list-header-menu-icon.js-select-list ▶️
+          a.list-header-handle.handle.js-list-handle ↕️
       else if currentUser.isBoardMember
         if isWatching
-          i.list-header-watch-icon.fa.fa-eye
+          i.list-header-watch-icon | 👁️
         unless collapsed
           div.list-header-menu
             unless currentUser.isCommentOnly
               //if isBoardAdmin
               //  a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}")
               if canSeeAddCard
-                a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
+                a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") ➕
                 a.js-collapse(title="{{_ 'collapse'}}")
-                  i.fa.fa-arrow-right.list-header-collapse-right
-                  i.fa.fa-arrow-left.list-header-collapse-left
-                a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
-            if currentUser.isBoardAdmin
-              if isTouchScreenOrShowDesktopDragHandles
-                a.list-header-handle.handle.fa.fa-arrows.js-list-handle
+                  | ⬅️
+                  | ➡️
+                a.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") ☰
+            if currentUser.isBoardMember
+              unless currentUser.isCommentOnly
+                a.list-header-handle.handle.js-list-handle ↕️
 
 template(name="editListTitleForm")
   .list-composer
     input.list-name-input.full-line(type="text" value=title autofocus)
     .edit-controls.clearfix
       button.primary.confirm(type="submit") {{_ 'save'}}
-      a.fa.fa-times-thin.js-close-inlined-form
+      a.js-close-inlined-form
+        | ❌
 
 template(name="listActionPopup")
   ul.pop-over-list
     li
       a.js-add-card.list-header-plus-bottom
-        i.fa.fa-plus
-        i.fa.fa-arrow-down
+        | ➕
+        | ⬇️
         | {{_ 'add-card-to-bottom-of-list'}}
   hr
   ul.pop-over-list
     li
       a.js-set-list-width
-        i.fa.fa-arrows-h
+        | ↔️
         |  {{_ 'set-list-width'}}
   ul.pop-over-list
     li
       a.js-toggle-watch-list
         if isWatching
-          i.fa.fa-eye
+          | 👁️
           |  {{_ 'unwatch'}}
         else
-          i.fa.fa-eye-slash
+          | 🙈
           |  {{_ 'watch'}}
   unless currentUser.isCommentOnly
     unless currentUser.isWorker
       ul.pop-over-list
         li
           a.js-set-color-list
-            i.fa.fa-paint-brush
+            | 🎨
             | {{_ 'set-color-list'}}
     ul.pop-over-list
       if cards.length
         li
           a.js-select-cards
-            i.fa.fa-check-square
+            | ☑️
             | {{_ 'list-select-cards'}}
     if currentUser.isBoardAdmin
       ul.pop-over-list
         li
           a.js-set-wip-limit
-            i.fa.fa-ban
+            | 🚫
             | {{#if isWipLimitEnabled }}{{_ 'edit-wip-limit'}}{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
     unless currentUser.isWorker
       hr
       ul.pop-over-list
         li
           a.js-close-list
-            i.fa.fa-arrow-right
-            i.fa.fa-archive
+            | ➡️
+            | 📦
             | {{_ 'archive-list'}}
     hr
     ul.pop-over-list
       li
         a.js-more
-          i.fa.fa-link
+          | 🔗
           | {{_ 'listMorePopup-title'}}
 
 template(name="boardLists")
@@ -149,7 +152,7 @@ template(name="listMorePopup")
     span.clearfix
       span {{_ 'link-list'}}
       = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      | {{#if board.isPublic}}🌐{{else}}🔒{{/if}}
       input.inline-input(type="text" readonly value="{{ rootUrl }}")
     | {{_ 'added'}}
     span.date(title=list.createdAt) {{ moment createdAt 'LLL' }}
@@ -169,7 +172,7 @@ template(name="setWipLimitPopup")
     ul.pop-over-list
       li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}}
         if isWipLimitEnabled
-          i.fa.fa-check
+          | ✅
     if isWipLimitEnabled
       p
         input.wip-limit-value(type="number" value="{{ wipLimitValue }}" min="1" max="99")
@@ -197,7 +200,7 @@ template(name="setListWidthPopup")
         br
         a.js-auto-width-board(
           title="{{#if isAutoWidth}}{{_ 'click-to-disable-auto-width'}}{{else}}{{_ 'click-to-enable-auto-width'}}{{/if}}")
-          i.fa(class="fa-solid fa-{{#if isAutoWidth}}compress{{else}}expand{{/if}}")
+          | {{#if isAutoWidth}}🗜️{{else}}📏{{/if}}
           span {{_ 'auto-list-width'}}
 
 template(name="listWidthErrorPopup")
@@ -211,6 +214,6 @@ template(name="setListColorPopup")
       // note: we use the swimlane palette to have more than just the border
       span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
         if(isSelected color)
-          i.fa.fa-check
+          | ✅
     button.primary.confirm.js-submit {{_ 'save'}}
     button.js-remove-color.negate.wide.right {{_ 'unset-color'}}

client/components/main/bookmarks.jade

@@ -8,7 +8,7 @@ template(name="bookmarks")
             li
               a(href="{{pathFor 'board' id=_id slug=slug}}")= title
               a.js-toggle-star(title="{{_ 'star-board-short-unstar'}}")
-                i.fa.fa-star
+                | ⭐
       else
         p {{_ 'no-starred-boards'}}
     else
@@ -21,9 +21,9 @@ template(name="bookmarksPopup")
       each starredBoards
         li
           a(href="{{pathFor 'board' id=_id slug=slug}}")
-            i.fa.fa-star
+            | ⭐
             |  #{title}
           a.js-toggle-star.right(title="{{_ 'star-board-short-unstar'}}")
-            i.fa.fa-star
+            | ⭐
     else
       li {{_ 'no-starred-boards'}}

client/components/main/dueCards.jade

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

client/components/main/dueCards.js

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

client/components/main/editor.jade

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

client/components/main/globalSearch.jade

@@ -1,20 +1,21 @@
 template(name="globalSearchHeaderBar")
   if currentUser
     h1
-      i.fa.fa-search
+      | 🔍
       | {{_ 'globalSearch-title'}}
 
 template(name="globalSearchModalTitle")
   if currentUser
     h2
-      i.fa.fa-keyboard-o
+      | ⌨️
       | {{_ 'globalSearch-title'}}
 
 template(name="resultsPaged")
   if resultsHeading.get
     h1
       = resultsHeading.get
-      a.fa.fa-link(title="{{_ 'link-to-search' }}" href="{{ getSearchHref }}")
+      a(title="{{_ 'link-to-search' }}" href="{{ getSearchHref }}")
+        | 🔗
   each card in results.get
     +resultCard(card)
   table.global-search-footer
@@ -41,7 +42,8 @@ template(name="globalSearch")
           value="{{ query.get }}"
           autofocus dir="auto"
         )
-        a.js-new-search.fa.fa-eraser
+        a.js-new-search
+          | 🧹
       if debug.get.show
         h1 Debug
         if debug.get.showSelector

client/components/main/header.css

@@ -58,7 +58,7 @@
   float: left;
   overflow: hidden;
   line-height: 28px;
-  margin: 0 2px;
+  margin: 0 12px;
 }
 #header #header-main-bar .board-header-btn i.fa {
   float: left;
@@ -100,8 +100,9 @@
   z-index: 1000;
   padding: 10px 0px;
   align-items: center;
-  flex-wrap: wrap; /* Allow wrapping on mobile */
-  min-height: 28px; /* Allow height to grow */
+  flex-wrap: nowrap; /* Prevent wrapping to keep single row */
+  min-height: 28px;
+  overflow: hidden; /* Prevent content from overflowing */
 }
 #header-quick-access .home-icon {
   display: flex;
@@ -167,13 +168,39 @@
   white-space: nowrap;
   padding: 10px;
   margin: -10px;
+  flex: 1; /* Take up available space */
+  min-width: 0; /* Allow shrinking below content size */
+  display: flex; /* Use flexbox for better control */
+  align-items: center;
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* Firefox */
+}
+
+/* Webkit scrollbar styling for better UX */
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar {
+  height: 4px;
+}
+
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
 }
 #header-quick-access ul.header-quick-access-list li {
-  display: inline;
+  display: inline-block; /* Keep inline-block for proper spacing */
   width: auto;
   color: #d9d9d9;
   padding: 12px 0px;
   margin: -10px 0px;
+  flex-shrink: 0; /* Prevent items from shrinking */
+  white-space: nowrap; /* Prevent text wrapping within items */
 }
 #header-quick-access ul.header-quick-access-list li a {
   padding: 12px 10px;
@@ -220,6 +247,7 @@
   margin: 0;
   margin-top: 1px;
 }
+
 #header-quick-access #header-user-bar .header-user-bar-name,
 #header-quick-access #header-help  {
   margin: 4px 8px 0 0;
@@ -314,7 +342,8 @@
     }
 
     /* Make zoom input wider on all mobile screens */
-    @media screen and (max-width: 800px) {
+    @media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
       #header-quick-access .zoom-controls .zoom-input {
         min-width: 50px !important; /* Wider on mobile */
         width: 50px !important; /* Fixed width to show all numbers */
@@ -424,7 +453,8 @@
   margin: 6px 5px 0;
   width: 12px;
 }
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
   #header #header-main-bar {
     height: 40px;
   }
@@ -446,6 +476,8 @@
     transition: background-color 0.4s;
     width: 100%;
     z-index: 30;
+    flex-wrap: nowrap !important; /* Force single row on mobile */
+    overflow: hidden; /* Prevent content overflow */
   }
 
   /* Mobile home icon styling */
@@ -489,11 +521,12 @@
          screen and (max-width: 800px) and (orientation: portrait),
          screen and (max-width: 800px) and (orientation: landscape) {
     #header-quick-access {
-      height: auto !important; /* Allow height to grow */
+      height: 48px !important; /* Fixed height for mobile */
       min-height: 48px !important; /* Minimum height for mobile */
-      flex-wrap: wrap !important; /* Force wrapping */
-      align-items: flex-start !important; /* Align to top when wrapping */
+      flex-wrap: nowrap !important; /* Force single row */
+      align-items: center !important; /* Center align items */
       padding: 8px 0px !important; /* Adjust padding for mobile */
+      overflow: hidden !important; /* Prevent content overflow */
     }
     #header-quick-access {
       font-size: 2em !important; /* 2x bigger base font size */

client/components/main/header.jade

@@ -9,7 +9,7 @@ template(name="header")
       // Home icon - always at left side of logo
       span.home-icon.allBoards
         a(href="{{pathFor 'home'}}")
-          span.fa.fa-home
+          | 🏠
           | {{_ 'all-boards'}}
 
       // Logo - visible; on mobile constrained by CSS
@@ -80,12 +80,12 @@ template(name="header")
 
       .mobile-mode-toggle
         a.board-header-btn.js-mobile-mode-toggle(title="{{_ 'mobile-desktop-toggle'}}" class="{{#if mobileMode}}mobile-active{{else}}desktop-active{{/if}}")
-          i.fa.fa-mobile.mobile-icon(class="{{#if mobileMode}}active{{/if}}")
-          i.fa.fa-desktop.desktop-icon(class="{{#unless mobileMode}}active{{/unless}}")
+          i.mobile-icon(class="{{#if mobileMode}}active{{/if}}") 📱
+          i.desktop-icon(class="{{#unless mobileMode}}active{{/unless}}") 🖥️
 
       // Bookmarks button - desktop opens popup, mobile routes to page
       a.board-header-btn.js-open-bookmarks(title="{{_ 'bookmarks'}}")
-        i.fa.fa-bookmark
+        | 🔖
 
       // Notifications
       +notifications
@@ -93,7 +93,7 @@ template(name="header")
       if currentSetting.customHelpLinkUrl
         #header-help
           a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer")
-            span.fa.fa-question
+            | ❓
 
       +headerUserBar
 
@@ -112,15 +112,15 @@ template(name="header")
     if hasAnnouncement
       .announcement
         p
-          i.fa.fa-bullhorn
+          | 📢
           +viewer
             | #{announcement}
-          i.fa.fa-times-circle.js-close-announcement
+          | ❌
 
 template(name="offlineWarning")
   .offline-warning
     p
-      i.fa.fa-warning
+      | ⚠️
       | {{_ 'app-is-offline'}}
 
       a.app-try-reconnect {{_ 'app-try-reconnect'}}

client/components/main/keyboardShortcuts.jade

@@ -1,12 +1,12 @@
 template(name="shortcutsHeaderBar")
   h1
     a.back-btn(href="{{pathFor 'home'}}")
-      i.fa.fa-chevron-left
+      | ◀️
     | {{_ 'keyboard-shortcuts'}}
 
 template(name="shortcutsModalTitle")
   h2
-    i.fa.fa-keyboard-o
+    | ⌨️
     | {{_ 'keyboard-shortcuts'}}
 
 template(name="keyboardShortcuts")

client/components/main/layouts.css

@@ -470,8 +470,10 @@ a:not(.disabled).is-active i.fa {
    MOBILE & TABLET RESPONSIVE IMPROVEMENTS
    ======================================== */
 
-/* Mobile devices (up to 800px) */
-@media screen and (max-width: 800px) {
+/* Mobile devices (up to 800px) and all iPhone models */
+@media screen and (max-width: 800px),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape),
+       screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
   #content {
     margin: 1px 0px 0px 0px;
     height: calc(100% - 0px);
@@ -719,20 +721,20 @@ a:not(.disabled).is-active i.fa {
   }
   
   .list {
-    margin: 0 20px;
+    margin: 0 8px;
     min-width: 360px;
   }
   
   .board-canvas {
-    padding: 20px;
-    max-width: 2400px;
-    margin: 0 auto;
+    padding: 0;
   }
   
   #header {
-    padding: 20px 32px;
-    max-width: 2400px;
-    margin: 0 auto;
+    padding: 0 8px;
+  }
+  
+  #content > .wrapper {
+    padding: 0;
   }
   
   #modal .modal-content {
@@ -745,8 +747,6 @@ a:not(.disabled).is-active i.fa {
   
   .setting-content .content-body {
     gap: 32px;
-    max-width: 2400px;
-    margin: 0 auto;
   }
   
   .setting-content .content-body .side-menu {

client/components/main/layouts.jade

@@ -85,13 +85,13 @@ template(name="defaultLayout")
       if (Modal.isWide)
         .modal-content-wide.modal-container
           a.modal-close-btn.js-close-modal
-            i.fa.fa-times-thin
+            | ❌
           +Template.dynamic(template=Modal.getHeaderName)
           +Template.dynamic(template=Modal.getTemplateName)
       else
         .modal-content.modal-container
           a.modal-close-btn.js-close-modal
-            i.fa.fa-times-thin
+            | ❌
           +Template.dynamic(template=Modal.getHeaderName)
           +Template.dynamic(template=Modal.getTemplateName)
 

client/components/main/layouts.js

@@ -92,6 +92,18 @@ Template.userFormsLayout.onRendered(() => {
     if (loginInput && loginInput.name && (loginInput.name.toLowerCase().includes('user') || loginInput.name.toLowerCase().includes('email'))) {
       loginInput.setAttribute('autocomplete', 'username email');
     }
+
+    // Add autocomplete attributes to password fields for WCAG compliance
+    const passwordInputs = document.querySelectorAll('input[type="password"]');
+    passwordInputs.forEach(input => {
+      if (input.name && input.name.includes('password')) {
+        if (input.name.includes('password_again') || input.name.includes('new_password')) {
+          input.setAttribute('autocomplete', 'new-password');
+        } else {
+          input.setAttribute('autocomplete', 'current-password');
+        }
+      }
+    });
   });
 });
 

client/components/main/myCards.jade

@@ -3,23 +3,23 @@ template(name="myCardsHeaderBar")
     h1
       //a.back-btn(href="{{pathFor 'home'}}")
       //  i.fa.fa-chevron-left
-      i.fa.fa-list
+      | 📋
       | {{_ 'my-cards'}}
 
     .board-header-btns.left
       a.board-header-btn.js-my-cards-view-change(title="{{_ 'myCardsViewChange-title'}}")
-        i.fa.fa-caret-down
+        | ▼
         if $eq myCardsView 'boards'
-          i.fa.fa-trello
+          | 📋
           | {{_ 'myCardsViewChange-choice-boards'}}
         if $eq myCardsView 'table'
-          i.fa.fa-table
+          | 📊
           | {{_ 'myCardsViewChange-choice-table'}}
 
 template(name="myCardsModalTitle")
   if currentUser
     h2
-      i.fa.fa-keyboard-o
+      | ⌨️
       | {{_ 'my-cards'}}
 
 template(name="myCards")
@@ -102,15 +102,15 @@ template(name="myCardsViewChangePopup")
       li
         with "myCardsViewChange-choice-boards"
           a.js-my-cards-view-boards
-            i.fa.fa-trello.colorful
+            | 📋
             | {{_ 'myCardsViewChange-choice-boards'}}
             if $eq Utils.myCardsView "boards"
-              i.fa.fa-check
+              | ✅
       hr
       li
         with "myCardsViewChange-choice-table"
           a.js-my-cards-view-table
-            i.fa.fa-table.colorful
+            | 📊
             | {{_ 'myCardsViewChange-choice-table'}}
             if $eq Utils.myCardsView "table"
-              i.fa.fa-check
+              | ✅

client/components/main/popup.css

@@ -73,33 +73,303 @@
 }
 .pop-over .content-wrapper {
   width: 100%;
-  overflow: hidden;
+  max-height: calc(70vh + 20px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Allow dynamic max-height to override default constraint */
+.pop-over[style*="max-height"] .content-wrapper {
+  max-height: inherit;
 }
 .pop-over .content-container {
-  width: 5000px;
-  max-height: 70vh;
+  width: 100%;
+  max-height: calc(70vh + 20px);
   transition: transform 0.2s;
 }
+
+/* Allow dynamic max-height to override default constraint for content-container */
+.pop-over[style*="max-height"] .content-container {
+  max-height: inherit;
+}
+
+/* Admin edit popups: use full height */
+.pop-over[data-popup="editUser"],
+.pop-over[data-popup="editOrg"],
+.pop-over[data-popup="editTeam"] {
+  height: calc(100vh - 20px) !important;
+  max-height: calc(100vh - 20px) !important;
+}
+
+.pop-over[data-popup="editUser"] .content-wrapper,
+.pop-over[data-popup="editOrg"] .content-wrapper,
+.pop-over[data-popup="editTeam"] .content-wrapper {
+  max-height: calc(100vh - 80px) !important; /* Subtract header height */
+  height: calc(100vh - 80px) !important;
+  overflow-y: auto !important;
+}
+
+.pop-over[data-popup="editUser"] .content-container,
+.pop-over[data-popup="editOrg"] .content-container,
+.pop-over[data-popup="editTeam"] .content-container {
+  max-height: calc(100vh - 80px) !important; /* Subtract header height */
+  height: calc(100vh - 80px) !important;
+}
+
+/* Ensure language popup list can scroll properly */
+.pop-over .pop-over-list {
+  max-height: none;
+  overflow: visible;
+}
+
+/* Specific styling for language popup list */
+.pop-over[data-popup="changeLanguage"] .pop-over-list {
+  max-height: none;
+  overflow: visible;
+  height: auto;
+  flex: 1;
+}
+
+/* Ensure content div in language popup contains all items */
+.pop-over[data-popup="changeLanguage"] .content {
+  height: auto;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Allow dynamic height for Change Language popup */
+.pop-over[data-popup="changeLanguage"] .content-wrapper {
+  max-height: inherit; /* Use dynamic height from JavaScript */
+}
+
+.pop-over[data-popup="changeLanguage"] .content-container {
+  max-height: inherit; /* Use dynamic height from JavaScript */
+}
+
+/* Make language popup extend to bottom of browser window */
+.pop-over[data-popup="changeLanguage"] {
+  height: calc(100vh - 30px);
+  min-height: 300px;
+  /* Adjust positioning to move popup 30px higher */
+  transform: translateY(-30px);
+}
+
+.pop-over[data-popup="changeLanguage"] .content-wrapper {
+  height: calc(100% - 50px); /* Subtract header height more precisely */
+  min-height: 250px;
+  overflow-y: auto;
+  max-height: none; /* Remove any max-height constraints */
+  display: flex;
+  flex-direction: column;
+}
+
+.pop-over[data-popup="changeLanguage"] .content-container {
+  height: auto; /* Let content determine height */
+  min-height: 250px;
+  max-height: none; /* Remove any max-height constraints */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Date popup sizing for native HTML inputs */
+.pop-over[data-popup="editCardReceivedDatePopup"],
+.pop-over[data-popup="editCardStartDatePopup"],
+.pop-over[data-popup="editCardDueDatePopup"],
+.pop-over[data-popup="editCardEndDatePopup"],
+.pop-over[data-popup*="Date"] {
+  width: min(400px, 90vw) !important; /* Smaller width for native inputs */
+  min-width: 350px !important;
+  max-height: 80vh !important;
+}
+
+.pop-over[data-popup="editCardReceivedDatePopup"] .content-wrapper,
+.pop-over[data-popup="editCardStartDatePopup"] .content-wrapper,
+.pop-over[data-popup="editCardDueDatePopup"] .content-wrapper,
+.pop-over[data-popup="editCardEndDatePopup"] .content-wrapper,
+.pop-over[data-popup*="Date"] .content-wrapper {
+  max-height: 60vh !important;
+  overflow-y: auto !important;
+}
+
+.pop-over[data-popup="editCardReceivedDatePopup"] .content-container,
+.pop-over[data-popup="editCardStartDatePopup"] .content-container,
+.pop-over[data-popup="editCardDueDatePopup"] .content-container,
+.pop-over[data-popup="editCardEndDatePopup"] .content-container,
+.pop-over[data-popup*="Date"] .content-container {
+  max-height: 60vh !important;
+}
+
+/* Native HTML input styling */
+.pop-over[data-popup*="Date"] .datepicker-container {
+  width: 100% !important;
+  padding: 15px !important;
+}
+
+.pop-over[data-popup*="Date"] .datepicker-container .fields {
+  display: flex !important;
+  gap: 15px !important;
+  margin-bottom: 15px !important;
+}
+
+.pop-over[data-popup*="Date"] .datepicker-container .fields .left,
+.pop-over[data-popup*="Date"] .datepicker-container .fields .right {
+  flex: 1 !important;
+  width: auto !important;
+}
+
+.pop-over[data-popup*="Date"] .datepicker-container label {
+  display: block !important;
+  margin-bottom: 5px !important;
+  font-weight: bold !important;
+}
+
+.pop-over[data-popup*="Date"] .datepicker-container input[type="date"],
+.pop-over[data-popup*="Date"] .datepicker-container input[type="time"] {
+  width: 100% !important;
+  padding: 8px !important;
+  border: 1px solid #ccc !important;
+  border-radius: 4px !important;
+  font-size: 14px !important;
+  box-sizing: border-box !important;
+}
+
+.pop-over[data-popup*="Date"] .datepicker-container input[type="date"]:focus,
+.pop-over[data-popup*="Date"] .datepicker-container input[type="time"]:focus {
+  outline: none !important;
+  border-color: #007cba !important;
+  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2) !important;
+}
+
+/* Ensure date popup buttons stay within popup boundaries */
+.pop-over[data-popup="editCardReceivedDatePopup"] .content,
+.pop-over[data-popup="editCardStartDatePopup"] .content,
+.pop-over[data-popup="editCardDueDatePopup"] .content,
+.pop-over[data-popup="editCardEndDatePopup"] .content,
+.pop-over[data-popup*="Date"] .content {
+  max-height: 60vh !important; /* Leave space for buttons */
+  overflow-y: auto !important;
+  padding-bottom: 100px !important; /* More space for buttons */
+  margin-bottom: 0 !important;
+}
+
+.pop-over[data-popup="editCardReceivedDatePopup"] .datepicker-container,
+.pop-over[data-popup="editCardStartDatePopup"] .datepicker-container,
+.pop-over[data-popup="editCardDueDatePopup"] .datepicker-container,
+.pop-over[data-popup="editCardEndDatePopup"] .datepicker-container,
+.pop-over[data-popup*="Date"] .datepicker-container {
+  max-height: 50vh !important; /* Limit calendar height */
+  overflow-y: auto !important;
+  margin-bottom: 20px !important; /* Space before buttons */
+}
+
+/* Ensure buttons are properly positioned */
+.pop-over[data-popup="editCardReceivedDatePopup"] .edit-date,
+.pop-over[data-popup="editCardStartDatePopup"] .edit-date,
+.pop-over[data-popup="editCardDueDatePopup"] .edit-date,
+.pop-over[data-popup="editCardEndDatePopup"] .edit-date,
+.pop-over[data-popup*="Date"] .edit-date {
+  display: flex !important;
+  flex-direction: column !important;
+  height: 100% !important;
+}
+
+.pop-over[data-popup="editCardReceivedDatePopup"] .edit-date .fields,
+.pop-over[data-popup="editCardStartDatePopup"] .edit-date .fields,
+.pop-over[data-popup="editCardDueDatePopup"] .edit-date .fields,
+.pop-over[data-popup="editCardEndDatePopup"] .edit-date .fields,
+.pop-over[data-popup*="Date"] .edit-date .fields {
+  flex-shrink: 0 !important;
+  margin-bottom: 15px !important;
+}
+
+.pop-over[data-popup="editCardReceivedDatePopup"] .edit-date .js-datepicker,
+.pop-over[data-popup="editCardStartDatePopup"] .edit-date .js-datepicker,
+.pop-over[data-popup="editCardDueDatePopup"] .edit-date .js-datepicker,
+.pop-over[data-popup="editCardEndDatePopup"] .edit-date .js-datepicker,
+.pop-over[data-popup*="Date"] .edit-date .js-datepicker {
+  flex: 1 !important;
+  overflow-y: auto !important;
+}
+
+.pop-over[data-popup="editCardReceivedDatePopup"] .edit-date button,
+.pop-over[data-popup="editCardStartDatePopup"] .edit-date button,
+.pop-over[data-popup="editCardDueDatePopup"] .edit-date button,
+.pop-over[data-popup="editCardEndDatePopup"] .edit-date button,
+.pop-over[data-popup*="Date"] .edit-date button {
+  flex-shrink: 0 !important;
+  margin-top: 15px !important;
+  position: relative !important;
+  z-index: 10 !important;
+}
 .pop-over .content-container .content {
   /* Match wider popover, leave padding */
-  width: min(360px, 52vw);
+  width: 100%;
   padding: 0 1.3vw 1.3vh;
-  float: left;
+  box-sizing: border-box;
+  /* Ensure content is not shifted left */
+  margin-left: 0 !important;
+  transform: none !important;
 }
 
 /* Utility: remove left gutter inside specific popups */
 .pop-over .content .flush-left {
-  margin-left: -1.3vw;
+  margin-left: 0;
   padding-left: 0;
-  width: calc(100% + 1.3vw);
+  width: 100%;
 }
 
 /* Swimlane popups: remove left gutter, align content fully left */
 .pop-over .content form.swimlane-color-popup,
 .pop-over .content .swimlane-height-popup {
-  margin-left: -1.3vw;
+  margin-left: 0;
   padding-left: 0;
-  width: calc(100% + 1.3vw);
+  width: 100%;
+}
+
+/* Color selection popups: ensure proper alignment */
+.pop-over .content form.swimlane-color-popup .palette-colors,
+.pop-over .content form.edit-label .palette-colors,
+.pop-over .content form.create-label .palette-colors {
+  margin-left: 0;
+  padding-left: 0;
+  width: 100%;
+}
+
+/* Color palette items: ensure proper positioning */
+.pop-over .content .palette-colors .palette-color {
+  margin-left: 0;
+  margin-right: 2px;
+  margin-bottom: 2px;
+}
+
+/* Global fix for all popup content to prevent left shifting */
+.pop-over .content * {
+  margin-left: 0 !important;
+  transform: none !important;
+}
+
+/* Override any potential left shifting for specific elements */
+.pop-over .content form,
+.pop-over .content .palette-colors,
+.pop-over .content .pop-over-list,
+.pop-over .content .flush-left {
+  margin-left: 0 !important;
+  padding-left: 0 !important;
+  transform: none !important;
+}
+
+/* Fix popup depth containers that cause left shifting */
+.pop-over .popup-container-depth-1,
+.pop-over .popup-container-depth-2,
+.pop-over .popup-container-depth-3,
+.pop-over .popup-container-depth-4,
+.pop-over .popup-container-depth-5,
+.pop-over .popup-container-depth-6 {
+  transform: none !important;
+  margin-left: 0 !important;
+  padding-left: 0 !important;
 }
 
 /* Ensure buttons don’t reserve left space; align to flow */
@@ -111,7 +381,11 @@
   margin-left: 0;
 }
 .pop-over .content-container .content.no-height {
-  height: 2.5vh;
+  height: 0;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  visibility: hidden;
 }
 .pop-over .quiet {
 /*  padding: 6px 6px 4px;*/
@@ -130,7 +404,7 @@
 .pop-over .at-form .at-error,
 .pop-over .at-form .at-result {
   padding: 8px 12px;
-  margin: -8px -10px 10px;
+  margin: 0 0 10px 0;
 }
 .pop-over .at-form .at-error {
   background: #ef9a9a;
@@ -174,7 +448,7 @@
   font-weight: 700;
   padding: 1.5px 10px;
   position: relative;
-  margin: 0 -10px;
+  margin: 0;
   text-decoration: none;
   overflow: hidden;
   line-height: 33px;
@@ -333,12 +607,12 @@
     margin: 48px 0px 0px 0px;
   }
   .pop-over .content-container {
-    width: 1000%;
+    width: 100%;
     height: 100%;
     max-height: 100%;
   }
   .pop-over .content-container .content {
-    width: calc(10% - 20px);
+    width: calc(100% - 20px);
     height: calc(100% - 20px);
     padding: 10px;
   }
@@ -360,21 +634,21 @@
     margin: 0px 0px;
   }
   .pop-over .popup-container-depth-1 {
-    transform: translateX(-10%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-2 {
-    transform: translateX(-20%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-3 {
-    transform: translateX(-30%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-4 {
-    transform: translateX(-40%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-5 {
-    transform: translateX(-50%);
+    transform: none !important;
   }
   .pop-over .popup-container-depth-6 {
-    transform: translateX(-60%);
+    transform: none !important;
   }
 }

client/components/main/popup.tpl.jade

@@ -2,13 +2,13 @@
   class="{{#unless title}}miniprofile{{/unless}}"
   class=currentBoard.colorClass
   class="{{#unless title}}no-title{{/unless}}"
-  style="left:{{offset.left}}px; top:{{offset.top}}px;")
+  style="left:{{offset.left}}px; top:{{offset.top}}px;{{#if offset.maxHeight}} max-height:{{offset.maxHeight}}px;{{/if}}")
   .header
     a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
-      i.fa.fa-chevron-left
+      | ◀️
     span.header-title= title
     a.close-btn.js-close-pop-over
-      i.fa.fa-times-thin
+      | ❌
   .content-wrapper
     //-
       We display the all stack of popup content next to each other and move

client/components/migrationProgress.jade

@@ -3,7 +3,7 @@ template(name="migrationProgress")
     .migration-modal
       .migration-header
         h3
-          i.fa.fa-database
+          | 🗄️
           | {{_ 'database-migration'}}
         p {{_ 'database-migration-description'}}
       
@@ -16,11 +16,11 @@ template(name="migrationProgress")
             .progress-label {{_ 'overall-progress'}}
           
           .current-step
-            i.fa.fa-cog.fa-spin
+            | ⚙️
             | {{migrationCurrentStep}}
           
           .estimated-time(style="{{#unless migrationEstimatedTime}}display: none;{{/unless}}")
-            i.fa.fa-clock-o
+            | ⏰
             | {{_ 'estimated-time-remaining'}}: {{migrationEstimatedTime}}
         
         .migration-steps
@@ -31,11 +31,11 @@ template(name="migrationProgress")
                 .step-header
                   .step-icon
                     if completed
-                      i.fa.fa-check-circle
+                      | ✅
                     else if isCurrentStep
-                      i.fa.fa-cog.fa-spin
+                      | ⚙️
                     else
-                      i.fa.fa-circle-o
+                      | ⭕
                   .step-info
                     .step-name {{name}}
                     .step-description {{description}}
@@ -51,13 +51,13 @@ template(name="migrationProgress")
                     .progress-fill(style="width: {{progress}}%")
         
         .migration-status
-          i.fa.fa-info-circle
+          | ℹ️
           | {{migrationStatus}}
       
       .migration-footer
         .migration-info
-          i.fa.fa-lightbulb-o
+          | 💡
           | {{_ 'migration-info-text'}}
         .migration-warning
-          i.fa.fa-exclamation-triangle
+          | ⚠️
           | {{_ 'migration-warning-text'}}

client/components/notifications/notifications.jade

@@ -1,5 +1,6 @@
 template(name='notifications')
   #notifications.board-header-btns.right
-    a.notifications-drawer-toggle.fa.fa-bell(class="{{#if $gt unreadNotifications 0}}alert{{/if}}" title="{{_ 'notifications'}}")
+    a.notifications-drawer-toggle(class="{{#if $gt unreadNotifications 0}}alert{{/if}}" title="{{_ 'notifications'}}")
+      | 🔔
     if $.Session.get 'showNotificationsDrawer'
       +notificationsDrawer(unreadNotifications=unreadNotifications)

client/components/rules/actions/boardActions.jade

@@ -10,7 +10,7 @@ template(name="boardActions")
       div.trigger-text
         | {{_'r-its-list'}}
     div.trigger-button.js-add-gen-move-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -38,7 +38,7 @@ template(name="boardActions")
       div.trigger-dropdown
         input(id="swimlaneName",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-add-spec-move-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -49,7 +49,7 @@ template(name="boardActions")
       div.trigger-text
         | {{_'r-card'}}
     div.trigger-button.js-add-arch-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -58,7 +58,7 @@ template(name="boardActions")
       div.trigger-dropdown
         input(id="swimlane-name",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-add-swimlane-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -75,7 +75,7 @@ template(name="boardActions")
       div.trigger-dropdown
         input(id="swimlane-name2",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-create-card-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -99,7 +99,7 @@ template(name="boardActions")
       div.trigger-dropdown
         input(id="swimlaneName-link",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-link-card-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
 
 

client/components/rules/actions/cardActions.jade

@@ -16,7 +16,7 @@ template(name="cardActions")
       div.trigger-text
         | {{_'r-to-current-datetime'}}
     div.trigger-button.js-set-date-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -30,7 +30,7 @@ template(name="cardActions")
           option(value="endAt") {{_'r-df-end-at'}}
           option(value="receivedAt") {{_'r-df-received-at'}}
     div.trigger-button.js-remove-datevalue-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -46,7 +46,7 @@ template(name="cardActions")
             option(value="#{_id}")
               = name
     div.trigger-button.js-add-label-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -59,14 +59,14 @@ template(name="cardActions")
       div.trigger-dropdown
         input(id="member-name",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-add-member-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
       div.trigger-text
         | {{_'r-remove-all'}}
     div.trigger-button.js-add-removeall-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -77,12 +77,12 @@ template(name="cardActions")
           class="card-details-{{cardColorButton}}")
           | {{_ cardColorButtonText }}
     div.trigger-button.js-set-color-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
 template(name="setCardActionsColorPopup")
   form.edit-label
     .palette-colors: each colors
       span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
         if(isSelected color)
-          i.fa.fa-check
+          | ✅
     button.primary.confirm.js-submit {{_ 'save'}}

client/components/rules/actions/checklistActions.jade

@@ -10,7 +10,7 @@ template(name="checklistActions")
       div.trigger-dropdown
         input(id="checklist-name",type=text,placeholder="{{_'r-name'}}")  
     div.trigger-button.js-add-checklist-action.js-goto-rules
-      i.fa.fa-plus  
+      | ➕  
 
   div.trigger-item
     div.trigger-content
@@ -23,7 +23,7 @@ template(name="checklistActions")
       div.trigger-dropdown
         input(id="checklist-name2",type=text,placeholder="{{_'r-name'}}")  
     div.trigger-button.js-add-checkall-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
 
   div.trigger-item
@@ -41,7 +41,7 @@ template(name="checklistActions")
       div.trigger-dropdown
         input(id="checklist-name3",type=text,placeholder="{{_'r-name'}}")  
     div.trigger-button.js-add-check-item-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
       div.trigger-content
@@ -54,7 +54,7 @@ template(name="checklistActions")
         div.trigger-dropdown
           input(id="checklist-items",type=text,placeholder="{{_'r-items-list'}}")    
       div.trigger-button.js-add-checklist-items-action.js-goto-rules
-        i.fa.fa-plus  
+        | ➕  
 
   div.trigger-item
       div.trigger-content

client/components/rules/actions/mailActions.jade

@@ -8,4 +8,4 @@ template(name="mailActions")
       input(id="email-subject",type=text,placeholder="{{_'r-subject'}}")
       textarea(id="email-msg")  
     div.trigger-button.trigger-button-email.js-mail-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕

client/components/rules/ruleDetails.jade

@@ -1,7 +1,7 @@
 template(name="ruleDetails")
   .rules
     h2
-      i.fa.fa-magic
+      | ✨
       | {{_ 'r-rule-details' }}
     .triggers-content
         .triggers-body
@@ -20,5 +20,5 @@ template(name="ruleDetails")
                         = action 
     div.rules-back
         button.js-goback
-          i.fa.fa-chevron-left
+          | ◀️
           | {{_ 'back'}}

client/components/rules/rulesActions.jade

@@ -1,19 +1,19 @@
 template(name="rulesActions")
   h2
-    i.fa.fa-magic
+    | ✨
     | {{_ 'r-rule' }} "#{data.ruleName.get}" - {{_ 'r-add-action'}}
   .triggers-content
     .triggers-body
       .triggers-side-menu
         ul
           li.active.js-set-board-actions
-            i.fa.fa-columns
+            | 📊
           li.js-set-card-actions
-            i.fa.fa-sticky-note
+            | 📝
           li.js-set-checklist-actions
-            i.fa.fa-check
+            | ✅
           li.js-set-mail-actions
-            i.fa.fa-at
+            | @
       .triggers-main-body
         if ($eq currentActions.get 'board')
           +boardActions(ruleName=data.ruleName triggerVar=data.triggerVar)
@@ -25,5 +25,5 @@ template(name="rulesActions")
           +mailActions(ruleName=data.ruleName triggerVar=data.triggerVar)
   div.rules-back
         button.js-goback
-          i.fa.fa-chevron-left
+          | ◀️
           | {{_ 'back'}}

client/components/rules/rulesList.jade

@@ -1,7 +1,7 @@
 template(name="rulesList")
   .rules
     h2
-      i.fa.fa-magic
+      | ✨
       | {{_ 'r-board-rules' }}
 
     ul.rules-list
@@ -11,27 +11,27 @@ template(name="rulesList")
             = title
           div.rules-btns-group
             button.js-goto-details
-              i.fa.fa-eye
+              | 👁️
               | {{_ 'r-view-rule'}}
             if currentUser.isAdmin
               button.js-delete-rule
-                i.fa.fa-trash-o
+                | 🗑️
                 | {{_ 'r-delete-rule'}}
             else if currentUser.isBoardAdmin
               button.js-delete-rule
-                i.fa.fa-trash-o
+                | 🗑️
                 | {{_ 'r-delete-rule'}}
       else
         li.no-items-message {{_ 'r-no-rules' }}
     if currentUser.isAdmin
       div.rules-add
         button.js-goto-trigger
-          i.fa.fa-plus
+          | ➕
           | {{_ 'r-add-rule'}}
         input(type=text,placeholder="{{_ 'r-new-rule-name' }}",id="ruleTitle")
     else if currentUser.isBoardAdmin
       div.rules-add
         button.js-goto-trigger
-          i.fa.fa-plus
+          | ➕
           | {{_ 'r-add-rule'}}
         input(type=text,placeholder="{{_ 'r-new-rule-name' }}",id="ruleTitle")

client/components/rules/rulesTriggers.jade

@@ -1,17 +1,17 @@
 template(name="rulesTriggers")
   h2
-    i.fa.fa-magic
+    | ✨
     | {{_ 'r-rule' }} "#{data.ruleName.get}" - {{_ 'r-add-trigger'}}
   .triggers-content
     .triggers-body
       .triggers-side-menu
         ul
           li.active.js-set-board-triggers
-            i.fa.fa-columns
+            | 📊
           li.js-set-card-triggers
-            i.fa.fa-sticky-note
+            | 📝
           li.js-set-checklist-triggers
-            i.fa.fa-check
+            | ✅
       .triggers-main-body
         if showBoardTrigger.get
           +boardTriggers
@@ -21,5 +21,5 @@ template(name="rulesTriggers")
           +checklistTriggers
   div.rules-back
         button.js-goback
-          i.fa.fa-chevron-left
+          | ◀️
           | {{_ 'back'}}

client/components/rules/triggers/boardTriggers.jade

@@ -4,7 +4,7 @@ template(name="boardTriggers")
       div.trigger-text 
         | {{_'r-when-a-card'}}
       div.trigger-inline-button.js-open-card-title-popup 
-        i.fa.fa-filter
+        | 🔍
       div.trigger-text 
         | {{_'r-is'}}
       div.trigger-text 
@@ -18,39 +18,39 @@ template(name="boardTriggers")
       div.trigger-dropdown
         input(id="create-swimlane-name",type=text,placeholder="{{_'r-swimlane-name'}}") 
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-create-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item#trigger-three
     div.trigger-content
       div.trigger-text 
         | {{_'r-when-a-card'}}
       div.trigger-inline-button.js-open-card-title-popup 
-        i.fa.fa-filter
+        | 🔍
       div.trigger-text 
         | {{_'r-is-moved'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-moved-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item#trigger-four
     div.trigger-content
       div.trigger-text 
         | {{_'r-when-a-card'}}
       div.trigger-inline-button.js-open-card-title-popup 
-        i.fa.fa-filter
+        | 🔍
       div.trigger-text 
         | {{_'r-is'}}
       div.trigger-dropdown
@@ -66,21 +66,21 @@ template(name="boardTriggers")
       div.trigger-dropdown
         input(id="create-swimlane-name-2",type=text,placeholder="{{_'r-swimlane-name'}}") 
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-moved-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item#trigger-five
     div.trigger-content
       div.trigger-text 
         | {{_'r-when-a-card'}}
       div.trigger-inline-button.js-open-card-title-popup 
-        i.fa.fa-filter
+        | 🔍
       div.trigger-text 
         | {{_'r-is'}}
       div.trigger-dropdown
@@ -88,14 +88,14 @@ template(name="boardTriggers")
           option(value="archived") {{_'r-archived'}}
           option(value="unarchived") {{_'r-unarchived'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-arch-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
       div.trigger-content

client/components/rules/triggers/cardTriggers.jade

@@ -10,14 +10,14 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-label-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -37,14 +37,14 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-label-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -57,14 +57,14 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-member-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
 
   div.trigger-item
@@ -82,14 +82,14 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-member-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -104,11 +104,11 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-attachment-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕

client/components/rules/triggers/checklistTriggers.jade

@@ -10,14 +10,14 @@ template(name="checklistTriggers")
       div.trigger-text 
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-check-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
 
   div.trigger-item
@@ -35,14 +35,14 @@ template(name="checklistTriggers")
       div.trigger-text 
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-check-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -53,14 +53,14 @@ template(name="checklistTriggers")
           option(value="completed") {{_'r-completed'}}
           option(value="uncompleted") {{_'r-made-incomplete'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-comp-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -75,14 +75,14 @@ template(name="checklistTriggers")
           option(value="completed") {{_'r-completed'}}
           option(value="uncompleted") {{_'r-made-incomplete'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-comp-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -93,14 +93,14 @@ template(name="checklistTriggers")
           option(value="checked") {{_'r-checked'}}
           option(value="unchecked") {{_'r-unchecked'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-check-item-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -115,11 +115,11 @@ template(name="checklistTriggers")
           option(value="checked") {{_'r-checked'}}
           option(value="unchecked") {{_'r-unchecked'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-check-item-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕

client/components/settings/adminReports.jade

@@ -8,27 +8,27 @@ template(name="adminReports")
           ul
             li
               a.js-report-broken(data-id="report-broken")
-                i.fa.fa-chain-broken
+                | 🔗
                 | {{_ 'broken-cards'}}
 
             li
               a.js-report-files(data-id="report-files")
-                i.fa.fa-paperclip
+                | 📎
                 | {{_ 'filesReportTitle'}}
 
             li
               a.js-report-rules(data-id="report-rules")
-                i.fa.fa-magic
+                | ✨
                 | {{_ 'rulesReportTitle'}}
 
             li
               a.js-report-boards(data-id="report-boards")
-                i.fa.fa-magic
+                | ✨
                 | {{_ 'boardsReportTitle'}}
 
             li
               a.js-report-cards(data-id="report-cards")
-                i.fa.fa-magic
+                | ✨
                 | {{_ 'cardsReportTitle'}}
 
         .main-body

client/components/settings/attachments.jade

@@ -8,7 +8,7 @@ template(name="attachments")
           ul
             li
               a.js-move-attachments(data-id="move-attachments")
-                i.fa.fa-arrow-right
+                | ➡️
                 | {{_ 'attachment-move'}}
 
         .main-body
@@ -80,17 +80,17 @@ template(name="moveAttachment")
       td
         if $neq version.storageName "fs"
           button.js-move-storage-fs
-            i.fa.fa-arrow-right
+            | ➡️
             | {{_ 'attachment-move-storage-fs'}}
 
         if $neq version.storageName "gridfs"
           if version.storageName
             button.js-move-storage-gridfs
-              i.fa.fa-arrow-right
+              | ➡️
               | {{_ 'attachment-move-storage-gridfs'}}
 
         if $neq version.storageName "s3"
           if version.storageName
             button.js-move-storage-s3
-              i.fa.fa-arrow-right
+              | ➡️
               | {{_ 'attachment-move-storage-s3'}}

client/components/settings/cronSettings.jade

@@ -47,17 +47,17 @@ template(name="cronMigrations")
   .cron-migrations
     .migration-header
       h2
-        i.fa.fa-database
+        | 🗄️
         | {{_ 'database-migrations'}}
       .migration-controls
         button.btn.btn-primary.js-start-all-migrations
-          i.fa.fa-play
+          | ▶️
           | {{_ 'start-all-migrations'}}
         button.btn.btn-warning.js-pause-all-migrations
-          i.fa.fa-pause
+          | ⏸️
           | {{_ 'pause-all-migrations'}}
         button.btn.btn-danger.js-stop-all-migrations
-          i.fa.fa-stop
+          | ⏹️
           | {{_ 'stop-all-migrations'}}
     
     .migration-progress
@@ -68,11 +68,11 @@ template(name="cronMigrations")
         .progress-label {{_ 'overall-progress'}}
       
       .current-step
-        i.fa.fa-cog.fa-spin
+        | ⚙️
         | {{migrationCurrentStep}}
       
       .migration-status
-        i.fa.fa-info-circle
+        | ℹ️
         | {{migrationStatus}}
     
     .migration-steps
@@ -83,11 +83,11 @@ template(name="cronMigrations")
             .step-header
               .step-icon
                 if completed
-                  i.fa.fa-check-circle
+                  | ✅
                 else if isCurrentStep
-                  i.fa.fa-cog.fa-spin
+                  | ⚙️
                 else
-                  i.fa.fa-circle-o
+                  | ⭕
               .step-info
                 .step-name {{name}}
                 .step-description {{description}}
@@ -106,17 +106,17 @@ template(name="cronBoardOperations")
   .cron-board-operations
     .board-operations-header
       h2
-        i.fa.fa-tasks
+        | 📋
         | {{_ 'board-operations'}}
       .board-operations-controls
         button.btn.btn-success.js-refresh-board-operations
-          i.fa.fa-refresh
+          | 🔄
           | {{_ 'refresh'}}
         button.btn.btn-primary.js-start-test-operation
-          i.fa.fa-play
+          | ▶️
           | {{_ 'start-test-operation'}}
         button.btn.btn-info.js-force-board-scan
-          i.fa.fa-search
+          | 🔍
           | {{_ 'force-board-scan'}}
     
     .board-operations-stats
@@ -164,7 +164,7 @@ template(name="cronBoardOperations")
     .board-operations-search
       .search-box
         input.form-control.js-search-board-operations(type="text" placeholder="{{_ 'search-boards-or-operations'}}")
-        i.fa.fa-search.search-icon
+        | 🔍.search-icon
     
     .board-operations-list
       .operations-header
@@ -203,36 +203,36 @@ template(name="cronBoardOperations")
                   .btn-group
                     if isRunning
                       button.btn.btn-sm.btn-warning.js-pause-operation(data-operation="{{id}}")
-                        i.fa.fa-pause
+                        | ⏸️
                     else
                       button.btn.btn-sm.btn-success.js-resume-operation(data-operation="{{id}}")
-                        i.fa.fa-play
+                        | ▶️
                     button.btn.btn-sm.btn-danger.js-stop-operation(data-operation="{{id}}")
-                      i.fa.fa-stop
+                      | ⏹️
                     button.btn.btn-sm.btn-info.js-view-details(data-operation="{{id}}")
-                      i.fa.fa-info-circle
+                      | ℹ️
       
       .pagination
         if pagination.hasPrev
           button.btn.btn-sm.btn-default.js-prev-page
-            i.fa.fa-chevron-left
+            | ◀️
             | {{_ 'previous'}}
         .page-info
           | {{_ 'page'}} {{pagination.page}} {{_ 'of'}} {{pagination.totalPages}}
         if pagination.hasNext
           button.btn.btn-sm.btn-default.js-next-page
             | {{_ 'next'}}
-            i.fa.fa-chevron-right
+            | ▶️
 
 template(name="cronJobs")
   .cron-jobs
     .jobs-header
       h2
-        i.fa.fa-clock-o
+        | ⏰
         | {{_ 'cron-jobs'}}
       .jobs-controls
         button.btn.btn-success.js-refresh-jobs
-          i.fa.fa-refresh
+          | 🔄
           | {{_ 'refresh'}}
     
     .jobs-list
@@ -258,20 +258,20 @@ template(name="cronJobs")
                 .btn-group
                   if isRunning
                     button.btn.btn-sm.btn-warning.js-pause-job(data-job="{{name}}")
-                      i.fa.fa-pause
+                      | ⏸️
                   else
                     button.btn.btn-sm.btn-success.js-start-job(data-job="{{name}}")
-                      i.fa.fa-play
+                      | ▶️
                   button.btn.btn-sm.btn-danger.js-stop-job(data-job="{{name}}")
-                    i.fa.fa-stop
+                    | ⏹️
                   button.btn.btn-sm.btn-danger.js-remove-job(data-job="{{name}}")
-                    i.fa.fa-trash
+                    | 🗑️
 
 template(name="cronAddJob")
   .cron-add-job
     .add-job-header
       h2
-        i.fa.fa-plus
+        | ➕
         | {{_ 'add-cron-job'}}
     
     .add-job-form
@@ -302,8 +302,8 @@ template(name="cronAddJob")
         
         .form-actions
           button.btn.btn-primary(type="submit")
-            i.fa.fa-plus
+            | ➕
             | {{_ 'add-job'}}
           button.btn.btn-default.js-cancel-add-job
-            i.fa.fa-times
+            | ❌
             | {{_ 'cancel'}}

client/components/settings/informationBody.jade

@@ -5,14 +5,14 @@ template(name='information')
     else
       .content-title
         span
-          i.fa.fa-info-circle
+          | ℹ️
           | {{_ 'info'}}
       .content-body
         .side-menu
           ul
             li.active
               a.js-setting-menu(data-id="information-display")
-                i.fa.fa-info-circle
+                | ℹ️
                 | {{_ 'info'}}
         .main-body
           +statistics

client/components/settings/peopleBody.css

@@ -71,6 +71,13 @@ table tr:nth-child(even) {
   left: 0 !important;
   display: block !important;
 }
+
+/* Make checkbox column fit content */
+table th:first-child,
+table td:first-child {
+  width: auto;
+  min-width: auto;
+}
 #divAddOrRemoveTeam {
   background: #008000;
   display: none;
@@ -141,7 +148,7 @@ table tr:nth-child(even) {
 }
 
 .account-active-status {
-  width: 20px;
+  width: auto;
   text-align: center;
 }
 
@@ -170,7 +177,7 @@ table tr:nth-child(even) {
 }
 
 .account-status {
-  width: 20px;
+  width: auto;
   text-align: center;
 }
 

client/components/settings/peopleBody.jade

@@ -9,34 +9,34 @@ template(name="people")
             +spinner
           else if orgSetting.get
             span
-              i.fa.fa-sitemap
+              | 🌐
               unless isMiniScreen
                 | {{_ 'organizations'}}
             input#searchOrgInput(placeholder="{{_ 'search'}}")
             button#searchOrgButton
-              i.fa.fa-search
+              | 🔍
               | {{_ 'search'}}
             .ext-box-right
               span {{#unless isMiniScreen}}{{_ 'org-number'}}{{/unless}} #{orgNumber}
           else if teamSetting.get
             span
-              i.fa.fa-users
+              | 👥
               unless isMiniScreen
                 | {{_ 'teams'}}
             input#searchTeamInput(placeholder="{{_ 'search'}}")
             button#searchTeamButton
-              i.fa.fa-search
+              | 🔍
               | {{_ 'search'}}
             .ext-box-right
               span {{#unless isMiniScreen}}{{_ 'team-number'}}{{/unless}} #{teamNumber}
           else if peopleSetting.get
             span
-              i.fa.fa-user
+              | 👤
               unless isMiniScreen
                 | {{_ 'people'}}
             input#searchInput(placeholder="{{_ 'search'}}")
             button#searchButton
-              i.fa.fa-search
+              | 🔍
               | {{_ 'search'}}
             .divLockedUsersFilter
               .flex-container
@@ -46,18 +46,19 @@ template(name="people")
                   option(value="locked") {{_ 'admin-people-filter-locked'}}
                   option(value="active") {{_ 'admin-people-filter-active'}}
                   option(value="inactive") {{_ 'admin-people-filter-inactive'}}
+                  option(value="admin") Admin
               button#unlockAllUsers.unlock-all-btn
-                i.fa.fa-unlock
+                | 🔓
                 | {{_ 'accounts-lockout-unlock-all'}}
             .ext-box-right
               span {{#unless isMiniScreen}}{{_ 'people-number'}}{{/unless}} #{peopleNumber}
             .divAddOrRemoveTeam#divAddOrRemoveTeam
               button#addOrRemoveTeam
-                i.fa.fa-edit
+                | ✏️
                 | {{_ 'add'}} / {{_ 'delete'}} {{_ 'teams'}}
           else if lockedUsersSetting.get
             span
-              i.fa.fa-lock.text-red
+              span.text-red 🔒
               unless isMiniScreen
                 | {{_ 'accounts-lockout-locked-users'}}
 
@@ -66,19 +67,19 @@ template(name="people")
           ul
             li.active
               a.js-org-menu(data-id="org-setting")
-                i.fa.fa-sitemap
+                | 🌐
                 | {{_ 'organizations'}}
             li
               a.js-team-menu(data-id="team-setting")
-                i.fa.fa-users
+                | 👥
                 | {{_ 'teams'}}
             li
               a.js-people-menu(data-id="people-setting")
-                i.fa.fa-user
+                | 👤
                 | {{_ 'people'}}
             li
               a.js-locked-users-menu(data-id="locked-users-setting")
-                i.fa.fa-lock.text-red
+                span.text-red 🔒
                 | {{_ 'accounts-lockout-locked-users'}}
         .main-body
           if loading.get
@@ -100,7 +101,6 @@ template(name="orgGeneral")
         th {{_ 'displayName'}}
         th {{_ 'description'}}
         th {{_ 'shortName'}}
-        th {{_ 'autoAddUsersWithDomainName'}}
         th {{_ 'website'}}
         th {{_ 'createdAt'}}
         th {{_ 'active'}}
@@ -140,16 +140,9 @@ template(name="peopleGeneral")
         th {{_ 'admin-people-active-status'}}
         th {{_ 'username'}}
         th {{_ 'fullname'}}
-        th {{_ 'initials'}}
         th {{_ 'admin'}}
         th {{_ 'email'}}
-        th {{_ 'verified'}}
         th {{_ 'createdAt'}}
-        th {{_ 'active'}}
-        th {{_ 'authentication-method'}}
-        th {{_ 'import-usernames'}}
-        th {{_ 'organizations'}}
-        th {{_ 'teams'}}
         th
           +newUserRow
     tbody
@@ -163,17 +156,17 @@ template(name="selectAllUser")
 
 template(name="newOrgRow")
   a.new-org
-    i.fa.fa-plus-square
+    | ➕
     | {{_ 'new'}}
 
 template(name="newTeamRow")
   a.new-team
-    i.fa.fa-plus-square
+    | ➕
     | {{_ 'new'}}
 
 template(name="newUserRow")
   a.new-user
-    i.fa.fa-plus-square
+    | ➕
     | {{_ 'new'}}
 
 template(name="orgRow")
@@ -190,10 +183,6 @@ template(name="orgRow")
       td {{ orgData.orgShortName }}
     else
       td <s>{{ orgData.orgShortName }}</s>
-    if orgData.orgIsActive
-      td {{ orgData.orgAutoAddUsersWithDomainName }}
-    else
-      td <s>{{ orgData.orgAutoAddUsersWithDomainName }}</s>
     if orgData.orgIsActive
       td {{ orgData.orgWebsite }}
     else
@@ -209,10 +198,10 @@ template(name="orgRow")
         | {{_ 'no'}}
     td
       a.edit-org
-        i.fa.fa-edit
+        | ✏️
         | {{_ 'edit'}}
       a.more-settings-org
-        i.fa.fa-ellipsis-h
+        | ⋯
 
 template(name="teamRow")
   tr
@@ -243,10 +232,10 @@ template(name="teamRow")
         | {{_ 'no'}}
     td
       a.edit-team
-        i.fa.fa-edit
+        | ✏️
         | {{_ 'edit'}}
       a.more-settings-team
-        i.fa.fa-ellipsis-h
+        | ⋯
 
 template(name="peopleRow")
   tr
@@ -258,14 +247,14 @@ template(name="peopleRow")
         input.selectUserChkBox(type="checkbox", id="{{userData._id}}")
     td.account-status
       if isUserLocked
-        i.fa.fa-lock.text-red.js-toggle-lock-status(data-user-id=userData._id, data-is-locked="true", title="{{_ 'accounts-lockout-click-to-unlock'}}")
+        span.text-red.js-toggle-lock-status(data-user-id=userData._id, data-is-locked="true", title="{{_ 'accounts-lockout-click-to-unlock'}}") 🔒
       else
-        i.fa.fa-unlock.text-green.js-toggle-lock-status(data-user-id=userData._id, data-is-locked="false", title="{{_ 'accounts-lockout-user-unlocked'}}")
+        span.text-green.js-toggle-lock-status(data-user-id=userData._id, data-is-locked="false", title="{{_ 'accounts-lockout-user-unlocked'}}") 🔓
     td.account-active-status
       if userData.loginDisabled
-        i.fa.fa-ban.text-red.js-toggle-active-status(data-user-id=userData._id, data-is-active="false", title="{{_ 'admin-people-user-inactive'}}")
+        span.text-red.js-toggle-active-status(data-user-id=userData._id, data-is-active="false", title="{{_ 'admin-people-user-inactive'}}") 🚫
       else
-        i.fa.fa-check-circle.text-green.js-toggle-active-status(data-user-id=userData._id, data-is-active="true", title="{{_ 'admin-people-user-active'}}")
+        span.text-green.js-toggle-active-status(data-user-id=userData._id, data-is-active="true", title="{{_ 'admin-people-user-active'}}") ✅
     if userData.loginDisabled
       td.username <s>{{ userData.username }}</s>
     else if isUserLocked
@@ -276,10 +265,6 @@ template(name="peopleRow")
       td <s>{{ userData.profile.fullname }}</s>
     else
       td {{ userData.profile.fullname }}
-    if userData.loginDisabled
-      td <s>{{ userData.profile.initials }}</s>
-    else
-      td {{ userData.profile.initials }}
     if userData.loginDisabled
       td
         if userData.isAdmin
@@ -296,49 +281,16 @@ template(name="peopleRow")
       td <s>{{ userData.emails.[0].address }}</s>
     else
       td {{ userData.emails.[0].address }}
-    if userData.loginDisabled
-      td
-        if userData.emails.[0].verified
-          | <s>{{_ 'yes'}}</s>
-        else
-          | <s>{{_ 'no'}}</s>
-    else
-      td
-        if userData.emails.[0].verified
-          | {{_ 'yes'}}
-        else
-          | {{_ 'no'}}
     if userData.loginDisabled
       td <s>{{ moment userData.createdAt 'LLL' }}</s>
     else
       td {{ moment userData.createdAt 'LLL' }}
-    td
-      if userData.loginDisabled
-        | {{_ 'no'}}
-      else
-        | {{_ 'yes'}}
-    if userData.loginDisabled
-      td <s>{{_ userData.authenticationMethod }}</s>
-    else
-      td {{_ userData.authenticationMethod }}
-    if userData.loginDisabled
-      td <s>{{ userData.importUsernamesString }}</s>
-    else
-      td {{ userData.importUsernamesString }}
-    if userData.loginDisabled
-      td <s>{{ userData.orgsUserBelongs }}</s>
-    else
-      td {{ userData.orgsUserBelongs }}
-    if userData.loginDisabled
-      td <s>{{ userData.teamsUserBelongs }}</s>
-    else
-      td {{ userData.teamsUserBelongs }}
     td
       a.edit-user
-        i.fa.fa-edit
+        | ✏️
         | {{_ 'edit'}}
       a.more-settings-user
-        i.fa.fa-ellipsis-h
+        | ⋯
 
 template(name="editOrgPopup")
   form
@@ -448,8 +400,8 @@ template(name="editUserPopup")
             option(value="{{value}}") {{_ value}}
     label
       | {{_ 'organizations'}}
-      i.fa.fa-plus-square#addUserOrg
-      i.fa.fa-minus-square#removeUserOrg
+      span#addUserOrg ➕
+      span#removeUserOrg ➖
       select.js-orgs#jsOrgs
         option(value="-1") {{_ 'organizations'}} :
         each value in orgsDatas
@@ -458,8 +410,8 @@ template(name="editUserPopup")
       input#jsUserOrgIdsInPut.js-userOrgIds.hide(type="hidden" value=user.orgIdsUserBelongs)
     label
       | {{_ 'teams'}}
-      i.fa.fa-plus-square#addUserTeam
-      i.fa.fa-minus-square#removeUserTeam
+      span#addUserTeam ➕
+      span#removeUserTeam ➖
       select.js-teams#jsTeams
         option(value="-1") {{_ 'teams'}} :
         each value in teamsDatas
@@ -591,8 +543,8 @@ template(name="newUserPopup")
             option(value="{{value}}") {{_ value}}
     label
       | {{_ 'organizations'}}
-      i.fa.fa-plus-square#addUserOrgNewUser
-      i.fa.fa-minus-square#removeUserOrgNewUser
+      span#addUserOrgNewUser ➕
+      span#removeUserOrgNewUser ➖
       select.js-orgsNewUser#jsOrgsNewUser
         option(value="-1") {{_ 'organizations'}} :
         each value in orgsDatas
@@ -601,8 +553,8 @@ template(name="newUserPopup")
       input#jsUserOrgIdsInPutNewUser.js-userOrgIdsNewUser.hide(type="text" value=user.orgIdsUserBelongs)
     label
       | {{_ 'teams'}}
-      i.fa.fa-plus-square#addUserTeamNewUser
-      i.fa.fa-minus-square#removeUserTeamNewUser
+      span#addUserTeamNewUser ➕
+      span#removeUserTeamNewUser ➖
       select.js-teamsNewUser#jsTeamsNewUser
         option(value="-1") {{_ 'teams'}} :
         each value in teamsDatas
@@ -636,7 +588,7 @@ template(name="settingsOrgPopup")
   // to impersonate organization?
   //  li
   //    a.impersonate-org
-  //      i.fa.fa-user
+  //      | 👤
   //      | {{_ 'impersonate-org'}}
   //
   //
@@ -659,7 +611,7 @@ template(name="settingsUserPopup")
   ul.pop-over-list
     li
       a.impersonate-user
-        i.fa.fa-user
+        | 👤
         | {{_ 'impersonate-user'}}
     br
     hr

client/components/settings/peopleBody.js

@@ -172,6 +172,10 @@ BlazeComponent.extendComponent({
         // Show only inactive users (loginDisabled is true)
         query['loginDisabled'] = true;
         break;
+      case 'admin':
+        // Show only admin users (isAdmin is true)
+        query['isAdmin'] = true;
+        break;
       case 'all':
       default:
         // Show all users, no additional filter

client/components/settings/settingBody.jade

@@ -6,87 +6,87 @@ template(name="setting")
       .content-title.ext-box
         if isGeneralSetting
           span
-            i.fa.fa-sign-in
+            | 🔑
             | {{_ 'registration'}}
         else if isEmailSetting
           span
-            i.fa.fa-envelope
+            | ✉️
             | {{_ 'email'}}
         else if isAccountSetting
           span
-            i.fa.fa-users
+            | 👥
             | {{_ 'accounts'}}
         else if isTableVisibilityModeSetting
           span
-            i.fa.fa-eye
+            | 👁️
             | {{_ 'tableVisibilityMode'}}
         else if isAnnouncementSetting
           span
-            i.fa.fa-bullhorn
+            | 📢
             | {{_ 'admin-announcement'}}
         else if isAccessibilitySetting
           span
-            i.fa.fa-universal-access
+            | ♿
             | {{_ 'accessibility'}}
         else if isLayoutSetting
           span
-            i.fa.fa-object-group
+            | 🔗
             | {{_ 'layout'}}
         else if isWebhookSetting
           span
-            i.fa.fa-globe
+            | 🌐
             | {{_ 'global-webhook'}}
         else if isAttachmentSettings
           span
-            i.fa.fa-paperclip
+            | 📎
             | {{_ 'attachments'}}
         else if isCronSettings
           span
-            i.fa.fa-clock-o
+            | ⏰
             | {{_ 'cron'}}
       .content-body
         .side-menu
           ul
             li(class="{{#if isGeneralSetting}}active{{/if}}")
               a.js-setting-menu(data-id="registration-setting")
-                i.fa.fa-sign-in
+                | 🔑
                 | {{_ 'registration'}}
             unless isSandstorm
               li(class="{{#if isEmailSetting}}active{{/if}}")
                 a.js-setting-menu(data-id="email-setting")
-                  i.fa.fa-envelope
+                  | ✉️
                   | {{_ 'email'}}
             li(class="{{#if isAccountSetting}}active{{/if}}")
               a.js-setting-menu(data-id="account-setting")
-                i.fa.fa-users
+                | 👥
                 | {{_ 'accounts'}}
             li(class="{{#if isTableVisibilityModeSetting}}active{{/if}}")
               a.js-setting-menu(data-id="tableVisibilityMode-setting")
-                i.fa.fa-eye
+                | 👁️
                 | {{_ 'tableVisibilityMode'}}
             li(class="{{#if isAnnouncementSetting}}active{{/if}}")
               a.js-setting-menu(data-id="announcement-setting")
-                i.fa.fa-bullhorn
+                | 📢
                 | {{_ 'admin-announcement'}}
             li(class="{{#if isAccessibilitySetting}}active{{/if}}")
               a.js-setting-menu(data-id="accessibility-setting")
-                i.fa.fa-universal-access
+                | ♿
                 | {{_ 'accessibility'}}
             li(class="{{#if isLayoutSetting}}active{{/if}}")
               a.js-setting-menu(data-id="layout-setting")
-                i.fa.fa-object-group
+                | 🔗
                 | {{_ 'layout'}}
             li(class="{{#if isWebhookSetting}}active{{/if}}")
               a.js-setting-menu(data-id="webhook-setting")
-                i.fa.fa-globe
+                | 🌐
                 | {{_ 'global-webhook'}}
             li(class="{{#if isAttachmentSettings}}active{{/if}}")
               a.js-setting-menu(data-id="attachment-settings")
-                i.fa.fa-paperclip
+                | 📎
                 | {{_ 'attachments'}}
             li(class="{{#if isCronSettings}}active{{/if}}")
               a.js-setting-menu(data-id="cron-settings")
-                i.fa.fa-clock-o
+                | ⏰
                 | {{_ 'cron'}}
         .main-body
           if isLoading

client/components/settings/settingHeader.jade

@@ -5,31 +5,31 @@ template(name="settingHeaderBar")
   .setting-header-btns.left
     if currentUser
       a.setting-header-btn.settings(href="{{pathFor 'setting'}}")
-        i.fa(class="fa-cog")
+        | ⚙️
         span {{_ 'settings'}}
 
       a.setting-header-btn.people(href="{{pathFor 'people'}}")
-        i.fa(class="fa-users")
+        | 👥
         span {{_ 'people'}}
 
       a.setting-header-btn.informations(href="{{pathFor 'admin-reports'}}")
-        i.fa(class="fa-list")
+        | 📋
         span {{_ 'reports'}}
 
       a.setting-header-btn.informations(href="{{pathFor 'attachments'}}")
-        i.fa(class="fa-paperclip")
+        | 📎
         span {{_ 'attachments'}}
 
       a.setting-header-btn.informations(href="{{pathFor 'translation'}}")
-        i.fa(class="fa-font")
+        | 🔤
         span {{_ 'translation'}}
 
       a.setting-header-btn.informations(href="{{pathFor 'information'}}")
-        i.fa(class="fa-info-circle")
+        | ℹ️
         span {{_ 'info'}}
 
     else
       a.setting-header-btn.js-log-in(
         title="{{_ 'log-in'}}")
-        i.fa.fa-sign-in
+        | 🚪
         span {{_ 'log-in'}}

client/components/settings/translationBody.jade

@@ -9,12 +9,12 @@ template(name="translation")
             +spinner
           else if translationSetting.get
             span
-              i.fa.fa-font
+              | 🔤
               unless isMiniScreen
                 | {{_ 'translation'}}
             input#searchTranslationInput(placeholder="{{_ 'search'}}")
             button#searchTranslationButton
-              i.fa.fa-search
+              | 🔍
               | {{_ 'search'}}
             .ext-box-right
               span {{#unless isMiniScreen}}{{_ 'translation-number'}}{{/unless}} #{translationNumber}
@@ -24,7 +24,7 @@ template(name="translation")
           ul
             li.active
               a.js-translation-menu(data-id="translation-setting")
-                i.fa.fa-font
+                | 🔤
                 | {{_ 'translation'}}
         .main-body
           if loading.get
@@ -47,7 +47,7 @@ template(name="translationGeneral")
 
 template(name="newTranslationRow")
   a.new-translation
-    i.fa.fa-plus-square
+    | ➕
     | {{_ 'new'}}
 
 template(name="translationRow")
@@ -57,10 +57,10 @@ template(name="translationRow")
     td {{translationData.translationText}}
     td
       a.edit-translation
-        i.fa.fa-edit
+        | ✏️
         | {{_ 'edit'}}
       a.more-settings-translation
-        i.fa.fa-ellipsis-h
+        | ⋯
 
 template(name="editTranslationPopup")
   form

client/components/sidebar/sidebar.jade

@@ -7,14 +7,14 @@ template(name="sidebar")
     .sidebar-actions
       .sidebar-shortcuts
         a.sidebar-btn.js-shortcuts(title="{{_ 'keyboard-shortcuts' }}")
-          i.fa.fa-keyboard-o
+          | ⌨️
           span {{_ 'keyboard-shortcuts' }}
         a.sidebar-btn.js-keyboard-shortcuts-toggle(
           title="{{#if isKeyboardShortcuts}}{{_ 'keyboard-shortcuts-enabled'}}{{else}}{{_ 'keyboard-shortcuts-disabled'}}{{/if}}")
-          i.fa(class="fa-solid fa-{{#if isKeyboardShortcuts}}check-square-o{{else}}ban{{/if}}")
+          | {{#if isKeyboardShortcuts}}✅{{else}}🚫{{/if}}
       if isAccessibilityEnabled
         a.sidebar-accessibility
-          i.fa.fa-universal-access
+          | ♿
           span {{_ 'accessibility'}}
       a.sidebar-xmark.js-close-sidebar ✕
     .sidebar-content.js-board-sidebar-content
@@ -22,13 +22,12 @@ template(name="sidebar")
       //  i.fa.fa-navicon
       unless isDefaultView
         h2
-          a.fa.fa-chevron-left.js-back-home
+          a.js-back-home | ⬅️
           = getViewTitle
       if isOpen
         +Template.dynamic(template=getViewTemplate)
 
 template(name='homeSidebar')
-  hr
   +membersWidget
   hr
   +labelsWidget
@@ -38,11 +37,12 @@ template(name='homeSidebar')
       span {{_ 'hide-minicard-label-text'}}
       b  
       .materialCheckBox(class="{{#if hiddenMinicardLabelText}}is-checked{{/if}}")
-  ul#cards.vertical-scrollbars-toggle
-    a.flex.js-vertical-scrollbars-toggle(title="{{_ 'enable-vertical-scrollbars'}}")
-      span {{_ 'enable-vertical-scrollbars'}}
-      b  
-      .materialCheckBox(class="{{#if isVerticalScrollbars}}is-checked{{/if}}")
+  if currentUser
+    ul#cards.vertical-scrollbars-toggle
+      a.flex.js-vertical-scrollbars-toggle(title="{{_ 'enable-vertical-scrollbars'}}")
+        span {{_ 'enable-vertical-scrollbars'}}
+        b  
+        .materialCheckBox(class="{{#if isVerticalScrollbars}}is-checked{{/if}}")
   ul#cards.show-week-of-year-toggle
     a.flex.js-show-week-of-year-toggle(title="{{_ 'show-week-of-year'}}")
       span {{_ 'show-week-of-year'}}
@@ -51,7 +51,7 @@ template(name='homeSidebar')
   hr
   unless currentUser.isNoComments
     h3.activity-title
-      i.fa.fa-comments-o
+      | 💬
       | {{_ 'activities'}}
 
       .material-toggle-switch(title="{{_ 'show-activities'}}")
@@ -67,11 +67,11 @@ template(name="membersWidget")
     unless currentUser.isWorker
       h3
         a.board-header-btn.js-open-board-menu(title="{{_ 'boardMenuPopup-title'}}")
-          i.board-header-btn-icon.fa.fa-cog
+          | ⚙️
           | {{_ 'boardMenuPopup-title'}}
   hr
   h3
-    i.fa.fa-users
+    | 👥
     | {{_ 'members'}}
   +basicTabs(tabs=tabs)
       +tabContent(slug="people")
@@ -83,15 +83,15 @@ template(name="membersWidget")
           if isSandstorm
             if currentUser.isBoardMember
               a.member.add-member.sandstorm-powerbox-request-identity(title="{{_ 'add-members'}}")
-                i.fa.fa-plus
+                | ➕
           else if currentUser.isBoardAdmin
             a.member.add-member.js-manage-board-members(title="{{_ 'add-members'}}")
-              i.fa.fa-plus
+              | ➕
           .clearfix
           if isInvited
             hr
             p
-              i.fa.fa-exclamation-circle
+              | ⚠️
               | {{_ 'just-invited'}}
             button.js-member-invite-accept.primary {{_ 'accept'}}
             button.js-member-invite-decline {{_ 'decline'}}
@@ -127,7 +127,7 @@ template(name="boardOrgGeneral")
         th
           if currentUser.isBoardAdmin
             a.member.orgOrTeamMember.add-member.js-manage-board-addOrg(title="{{_ 'add-members'}}")
-              i.addTeamFaPlus.fa.fa-plus
+              | ➕
             .divaddfaplusminus
               | {{_ 'add'}}
       each org in currentBoard.activeOrgs
@@ -148,7 +148,7 @@ template(name="boardTeamGeneral")
         th
           if currentUser.isBoardAdmin
             a.member.orgOrTeamMember.add-member.js-manage-board-addTeam(title="{{_ 'add-members'}}")
-              i.addTeamFaPlus.fa.fa-plus
+              | ➕
             .divaddfaplusminus
               | {{_ 'add'}}
       each currentBoard.activeTeams
@@ -161,7 +161,7 @@ template(name="boardChangeColorPopup")
         span.background-box(class="board-color-{{this}}")
           span {{this}}
           if isSelected
-            i.fa.fa-check
+            | ✅
 
 template(name="boardChangeBackgroundImagePopup")
   form
@@ -187,14 +187,14 @@ template(name="boardInfoOnMyBoardsPopup")
         a.flex.js-field-has-cardcounterlist(class="{{#if allowsCardCounterList}}is-checked{{/if}}")
           .materialCheckBox(class="{{#if allowsCardCounterList}}is-checked{{/if}}")
           span
-            i.fa.fa-sign-out
+            | 🚪
             | {{_ 'show-card-counter-per-list'}}
     unless currentSetting.hideBoardMemberList
       div.check-div
         a.flex.js-field-has-boardmemberlist(class="{{#if allowsBoardMemberList}}is-checked{{/if}}")
           .materialCheckBox(class="{{#if allowsBoardMemberList}}is-checked{{/if}}")
           span
-            i.fa.fa-hourglass-start
+            | ⏳
             | {{_ 'show-board_members-avatar'}}
 
 template(name="boardCardSettingsPopup")
@@ -204,149 +204,149 @@ template(name="boardCardSettingsPopup")
       a.flex.js-field-has-receiveddate(class="{{#if allowsReceivedDate}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsReceivedDate}}is-checked{{/if}}")
         span
-          i.fa.fa-sign-out
+          | 🚪
           | {{_ 'card-received'}}
     div.check-div
       a.flex.js-field-has-startdate(class="{{#if allowsStartDate}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsStartDate}}is-checked{{/if}}")
         span
-          i.fa.fa-hourglass-start
+          | ⏳
           | {{_ 'card-start'}}
     div.check-div
       a.flex.js-field-has-duedate(class="{{#if allowsDueDate}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsDueDate}}is-checked{{/if}}")
         span
-          i.fa.fa-sign-in
+          | 🚪
           | {{_ 'card-due'}}
     div.check-div
       a.flex.js-field-has-enddate(class="{{#if allowsEndDate}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsEndDate}}is-checked{{/if}}")
         span
-          i.fa.fa-hourglass-end
+          | ⏰
           | {{_ 'card-end'}}
     div.check-div
       a.flex.js-field-has-members(class="{{#if allowsMembers}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsMembers}}is-checked{{/if}}")
         span
-          i.fa.fa-users
+          | 👥
           | {{_ 'members'}}
     div.check-div
       a.flex.js-field-has-creator(class="{{#if allowsCreator}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCreator}}is-checked{{/if}}")
         span
-          i.fa.fa-user
+          | 👤
           | {{_ 'creator'}}
     div.check-div
       a.flex.js-field-has-creator-on-minicard(class="{{#if allowsCreatorOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCreatorOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-user
+          | 👤
           | {{_ 'creator-on-minicard'}}
     div.check-div
       a.flex.js-field-has-assignee(class="{{#if allowsAssignee}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsAssignee}}is-checked{{/if}}")
         span
-          i.fa.fa-user
+          | 👤
           | {{_ 'assignee'}}
     div.check-div
       a.flex.js-field-has-assigned-by(class="{{#if allowsAssignedBy}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsAssignedBy}}is-checked{{/if}}")
         span
-          i.fa.fa-shopping-cart
+          | 🛒
           | {{_ 'assigned-by'}}
     div.check-div
       a.flex.js-field-has-requested-by(class="{{#if allowsRequestedBy}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsRequestedBy}}is-checked{{/if}}")
         span
-          i.fa.fa-user-plus
+          | 👤➕
           | {{_ 'requested-by'}}
     div.check-div
       a.flex.js-field-has-card-sorting-by-number(class="{{#if allowsCardSortingByNumber}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCardSortingByNumber}}is-checked{{/if}}")
         span
-          i.fa.fa-sort
+          | 🔢
           | {{_ 'card-sorting-by-number'}}
     div.check-div
       a.flex.js-field-has-card-sorting-by-number-on-minicard(class="{{#if allowsCardSortingByNumberOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCardSortingByNumberOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-sort
+          | 🔢
           | {{_ 'card-sorting-by-number-on-minicard'}}
     div.check-div
       a.flex.js-field-has-card-show-lists(class="{{#if allowsShowLists}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsShowLists}}is-checked{{/if}}")
         span
-          i.fa.fa-list
+          | 📋
           | {{_ 'card-show-lists'}}
     div.check-div
       a.flex.js-field-has-labels(class="{{#if allowsLabels}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsLabels}}is-checked{{/if}}")
         span
-          i.fa.fa-tags
+          | 🏷️
           | {{_ 'labels'}}
     div.check-div
       a.flex.js-field-has-card-show-lists-on-minicard(class="{{#if allowsShowListsOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsShowListsOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-list
+          | 📋
           | {{_ 'card-show-lists-on-minicard'}}
     div.check-div
       a.flex.js-field-has-card-number(class="{{#if allowsCardNumber}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCardNumber}}is-checked{{/if}}")
         span
-          i.fa.fa-hashtag
+          | #️⃣
           | {{_ 'card'}}
           | {{_ 'number'}}
     div.check-div
       a.flex.js-field-has-description-title(class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
         span
-          i.fa.fa-align-left
+          | 📝
           | {{_ 'description'}}
           | {{_ 'title'}}
     div.check-div
       a.flex.js-field-has-description-text(class="{{#if allowsDescriptionText}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsDescriptionText}}is-checked{{/if}}")
         span
-          i.fa.fa-align-left
+          | 📝
           | {{_ 'description'}}
           | {{_ 'custom-field-text'}}
     div.check-div
       a.flex.js-field-has-description-text-on-minicard(class="{{#if allowsDescriptionTextOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsDescriptionTextOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-align-left
+          | 📝
           | {{_ 'description-on-minicard'}}
     div.check-div
       a.flex.js-field-has-checklists(class="{{#if allowsChecklists}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsChecklists}}is-checked{{/if}}")
         span
-          i.fa.fa-check
+          | ✅
           | {{_ 'checklists'}}
     div.check-div
       a.flex.js-field-has-subtasks(class="{{#if allowsSubtasks}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsSubtasks}}is-checked{{/if}}")
         span
-          i.fa.fa-sitemap
+          | 🌐
           | {{_ 'subtasks'}}
     div.check-div
       a.flex.js-field-has-attachments(class="{{#if allowsAttachments}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsAttachments}}is-checked{{/if}}")
         span
-          i.fa.fa-paperclip
+          | 📎
           | {{_ 'attachments'}}
     div.check-div
       a.flex.js-field-has-badge-attachment-on-minicard(class="{{#if allowsBadgeAttachmentOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsBadgeAttachmentOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-paperclip
+          | 📎
           | {{_ 'badge-attachment-on-minicard'}}
     div.check-div
       a.flex.js-field-has-cover-attachment-on-minicard(class="{{#if allowsCoverAttachmentOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCoverAttachmentOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-book
-          i.fa.fa-picture-o
+          | 📖
+          | 🖼️
           | {{_ 'cover-attachment-on-minicard'}}
     //div.check-div
     //  a.flex.js-field-has-comments(class="{{#if allowsComments}}is-checked{{/if}}")
@@ -423,7 +423,7 @@ template(name="chooseBoardSource")
 template(name="archiveBoardPopup")
   p {{_ 'close-board-pop'}}
   button.js-confirm.negate.full(type="submit")
-    i.fa.fa-archive
+    | 📦
     | {{_ 'archive'}}
 
 template(name="outgoingWebhooksPopup")
@@ -459,25 +459,25 @@ template(name="boardMenuPopup")
     if currentUser.isBoardAdmin
       li
         a.js-open-rules-view(title="{{_ 'rules'}}")
-          i.fa.fa-magic
+          | ✨
           | {{_ 'rules'}}
     if currentUser.isBoardAdmin
       li
         a.js-custom-fields
-          i.fa.fa-list-alt
+          | 📝
           | {{_ 'custom-fields'}}
     li
       a.js-open-archives
-        i.fa.fa-archive
+        | 📦
         | {{_ 'archived-items'}}
     if currentUser.isBoardAdmin
       li
         a.js-change-board-color
-          i.fa.fa-paint-brush
+          | 🎨
           | {{_ 'board-change-color'}}
       li
         a.js-change-background-image
-          i.fa.fa-picture-o
+          | 🖼️
           | {{_ 'board-change-background-image'}}
     //Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
     //if currentUser.isBoardAdmin
@@ -492,20 +492,20 @@ template(name="boardMenuPopup")
     if withApi
       li
         a.js-export-board
-          i.fa.fa-share-alt
+          | 📤
           | {{_ 'export-board'}}
     if currentUser.isBoardAdmin
       li
         a.js-outgoing-webhooks
-          i.fa.fa-globe
+          | 🌐
           | {{_ 'outgoing-webhooks'}}
       li
         a.js-card-settings
-          i.fa.fa-id-card-o
+          | 🃏
           | {{_ 'card-settings'}}
       li
         a.js-subtask-settings
-          i.fa.fa-sitemap
+          | 🌐
           | {{_ 'subtask-settings'}}
   unless currentBoard.isTemplatesBoard
     if currentUser.isBoardAdmin
@@ -513,41 +513,40 @@ template(name="boardMenuPopup")
       ul.pop-over-list
         li
           a.js-archive-board
-            i.fa.fa-arrow-right
-            i.fa.fa-archive
+            | ➡️📦
             | {{_ 'archive-board'}}
 
 template(name="exportBoard")
   ul.pop-over-list
     li
       a.download-json-link(href="{{exportUrl}}", download="{{exportJsonFilename}}")
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-board-json'}}
     li
       a(href="{{exportUrlExcel}}", download="{{exportFilenameExcel}}")
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-board-excel'}}
     li
       a(href="{{exportCsvUrl}}", download="{{exportCsvFilename}}")
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-board-csv'}} ,
     li
       a(href="{{exportScsvUrl}}", download="{{exportCsvFilename}}")
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-board-csv'}} ;
     li
       a(href="{{exportTsvUrl}}", download="{{exportTsvFilename}}")
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-board-tsv'}}
     li
       a.html-export-board
-        i.fa.fa-archive
+        | 📦
         | {{_ 'export-board-html'}}
 
 template(name="labelsWidget")
   .board-widget.board-widget-labels
     h3
-      i.fa.fa-tags
+      | 🏷️
       | {{_ 'labels'}}
     .board-widget-content
       each currentBoard.labels
@@ -558,7 +557,7 @@ template(name="labelsWidget")
                 = name
       if currentUser.isBoardAdmin
         a.card-label.add-label.js-add-label(title="{{_ 'label-create'}}")
-          i.fa.fa-plus
+          | ➕
 
 template(name="memberPopup")
   .board-member-menu
@@ -570,7 +569,7 @@ template(name="memberPopup")
         p.quiet @#{user.username}
         if isInvited
           p
-            i.fa.fa-exclamation-circle
+            | ⚠️
             | {{_ 'not-accepted-yet'}}
 
     ul.pop-over-list
@@ -665,31 +664,31 @@ template(name="changePermissionsPopup")
       a(class="{{#if isLastAdmin}}disabled{{else}}js-set-admin{{/if}}")
         | {{_ 'admin'}}
         if isAdmin
-          i.fa.fa-check
+          | ✅
         span.sub-name {{_ 'admin-desc'}}
     li
       a(class="{{#if isLastAdmin}}disabled{{else}}js-set-normal{{/if}}")
         | {{_ 'normal'}}
         if isNormal
-          i.fa.fa-check
+          | ✅
         span.sub-name {{_ 'normal-desc'}}
     li
       a(class="{{#if isLastAdmin}}disabled{{else}}js-set-no-comments{{/if}}")
         | {{_ 'no-comments'}}
         if isNoComments
-          i.fa.fa-check
+          | ✅
         span.sub-name {{_ 'no-comments-desc'}}
     li
       a(class="{{#if isLastAdmin}}disabled{{else}}js-set-comment-only{{/if}}")
         | {{_ 'comment-only'}}
         if isCommentOnly
-          i.fa.fa-check
+          | ✅
         span.sub-name {{_ 'comment-only-desc'}}
     li
       a(class="{{#if isLastAdmin}}disabled{{else}}js-set-worker{{/if}}")
         | {{_ 'worker'}}
         if isWorker
-          i.fa.fa-check
+          | ✅
         span.sub-name {{_ 'worker-desc'}}
   if isLastAdmin
     hr

client/components/sidebar/sidebar.js

@@ -203,6 +203,8 @@ BlazeComponent.extendComponent({
   },
 }).register('homeSidebar');
 
+
+
 Template.boardInfoOnMyBoardsPopup.helpers({
   hideCardCounterList() {
     return Utils.isMiniScreen() && Session.get('currentBoard');

client/components/sidebar/sidebarCustomFields.jade

@@ -4,7 +4,8 @@ template(name="customFieldsSidebar")
             li
                 div.minicard-wrapper.js-minicard
                     div.minicard
-                        a.fa.fa-pencil.js-edit-custom-field.minicard-edit-button
+                        a.js-edit-custom-field.minicard-edit-button
+                          | ✏️
                         div.minicard-title
                           +viewer
                             =name
@@ -13,7 +14,7 @@ template(name="customFieldsSidebar")
     if currentUser.isBoardMember
         hr
         a.sidebar-btn.js-open-create-custom-field
-            i.fa.fa-plus
+            | ➕
             span {{_ 'createCustomField'}}
 
 template(name="createCustomFieldPopup")

client/components/sidebar/sidebarFilters.jade

@@ -5,19 +5,19 @@
 
 template(name="filterSidebar")
   h3
-    i.fa.fa-trello
+    | 📋
     | {{_ 'list-filter-label'}}
   ul.sidebar-list
     form.js-list-filter
       input(type="text")
   hr
   h3
-    i.fa.fa-list-alt
+    | 📋
     | {{_ 'filter-card-title-label'}}
   input.js-field-card-filter(type="text")
   hr
   h3
-    i.fa.fa-tags
+    | 🏷️
     | {{_ 'filter-labels-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.labelIds.isSelected undefined}}active{{/if}}")
@@ -25,7 +25,7 @@ template(name="filterSidebar")
             span.sidebar-list-item-description
               | {{_ 'filter-no-label'}}
             if Filter.labelIds.isSelected undefined
-              i.fa.fa-check
+              | ✅
     each currentBoard.labels
       li
         a.name.js-toggle-label-filter
@@ -39,7 +39,7 @@ template(name="filterSidebar")
             i.fa.fa-check
   hr
   h3
-    i.fa.fa-users
+    | 👥
     | {{_ 'filter-member-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.members.isSelected undefined}}active{{/if}}")
@@ -47,7 +47,7 @@ template(name="filterSidebar")
             span.sidebar-list-item-description
               | {{_ 'filter-no-member'}}
             if Filter.members.isSelected undefined
-              i.fa.fa-check
+              | ✅
     each currentBoard.activeMembers
       with getUser userId
         li(class="{{#if Filter.members.isSelected _id}}active{{/if}}")
@@ -57,10 +57,10 @@ template(name="filterSidebar")
               = profile.fullname
               | (<span class="username">{{ username }}</span>)
             if Filter.members.isSelected _id
-              i.fa.fa-check
+              | ✅
   hr
   h3
-    i.fa.fa-user
+    | 👤
     | {{_ 'filter-assignee-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.assignees.isSelected undefined}}active{{/if}}")
@@ -78,11 +78,11 @@ template(name="filterSidebar")
               = profile.fullname
               | (<span class="username">{{ username }}</span>)
             if Filter.assignees.isSelected _id
-              i.fa.fa-check
+              | ✅
 
   hr
   h3
-    i.fa.fa-list-alt
+    | 📅
     | {{_ 'filter-dates-label' }}
   ul.sidebar-list
     li(class="{{#if Filter.dueAt.isSelected 'noDate'}}active{{/if}}")
@@ -123,7 +123,7 @@ template(name="filterSidebar")
           i.fa.fa-check
   hr
   h3
-    i.fa.fa-list-alt
+    | 📋
     | {{_ 'filter-custom-fields-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.customFields.isSelected undefined}}active{{/if}}")
@@ -131,7 +131,7 @@ template(name="filterSidebar")
             span.sidebar-list-item-description
               | {{_ 'filter-no-custom-fields'}}
             if Filter.customFields.isSelected undefined
-              i.fa.fa-check
+              | ✅
     each currentBoard.customFields
       li(class="{{#if Filter.customFields.isSelected _id}}active{{/if}}")
         a.name.js-toggle-custom-fields-filter
@@ -163,15 +163,15 @@ template(name="filterSidebar")
   if Filter.isActive
     hr
     a.sidebar-btn.js-clear-all
-      i.fa.fa-filter
+      | 🔍
       span {{_ 'filter-clear'}}
     a.sidebar-btn.js-filter-to-selection
-      i.fa.fa-check-square-o
+      | ☑️
       span {{_ 'filter-to-selection'}}
 
 template(name="multiselectionSidebar")
   h3
-    i.fa.fa-tags
+    | 🏷️
     | {{_ 'multi-selection-label'}}
   ul.sidebar-list
     each currentBoard.labels
@@ -184,12 +184,12 @@ template(name="multiselectionSidebar")
             else
               span.quiet {{_ "label-default" (_ (concat "color-" color))}}
           if allSelectedElementHave 'label' _id
-            i.fa.fa-check
+            | ✅
           else if someSelectedElementHave 'label' _id
-            i.fa.fa-ellipsis-h
+            | ⋯
   hr
   h3
-    i.fa.fa-users
+    | 👥
     | {{_ 'multi-selection-member'}}
   ul.sidebar-list
     each currentBoard.activeMembers
@@ -201,16 +201,16 @@ template(name="multiselectionSidebar")
               = profile.fullname
               | (<span class="username">{{ username }}</span>)
             if allSelectedElementHave 'member' _id
-              i.fa.fa-check
+              | ✅
             else if someSelectedElementHave 'member' _id
-              i.fa.fa-ellipsis-h
+              | ⋯
   if currentUser.isBoardAdmin
     hr
     a.sidebar-btn.js-move-selection
-      i.fa.fa-share
+      | 📤
       span {{_ 'move-selection'}}
     a.sidebar-btn.js-archive-selection
-      i.fa.fa-archive
+      | 📦
       span {{_ 'archive-selection'}}
 
 template(name="disambiguateMultiLabelPopup")

client/components/swimlanes/miniswimlane.jade

@@ -3,6 +3,6 @@ template(name="miniswimlane")
     class="minicard-{{colorClass}}")
     .minicard-title
       .handle
-        .fa.fa-arrows
+        | ↕️
       +viewer
         = title

client/components/swimlanes/swimlaneHeader.jade

@@ -23,70 +23,77 @@ template(name="swimlaneFixedHeader")
         +viewer
           | {{isTitleDefault title}}
   .swimlane-header-menu
-    unless currentUser.isCommentOnly
-      a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon(title="{{_ 'add-swimlane'}}")
-      a.fa.fa-navicon.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}")
-      //// TODO: Collapse Swimlane: make button working, etc.
-      //unless collapsed
-      //  a.js-collapse-swimlane(title="{{_ 'collapse'}}")
-      //    i.fa.fa-arrow-down.swimlane-header-collapse-down
-      //    i.fa.fa-arrow-up.swimlane-header-collapse-up
-      //if collapsed
-      //  a.js-collapse-swimlane(title="{{_ 'uncollapse'}}")
-      //    i.fa.fa-arrow-up.swimlane-header-collapse-up
-      //    i.fa.fa-arrow-down.swimlane-header-collapse-down
-      unless isTouchScreen
-        if isShowDesktopDragHandles
-          a.swimlane-header-handle.handle.fa.fa-arrows.js-swimlane-header-handle
-      if isTouchScreen
-        a.swimlane-header-miniscreen-handle.handle.fa.fa-arrows.js-swimlane-header-handle
+    if currentUser
+      unless currentUser.isCommentOnly
+        a.js-open-add-swimlane-menu.swimlane-header-plus-icon(title="{{_ 'add-swimlane'}}")
+          | ➕
+        a.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}")
+          | ☰
+        //// TODO: Collapse Swimlane: make button working, etc.
+        //unless collapsed
+        //  a.js-collapse-swimlane(title="{{_ 'collapse'}}")
+        //    i.fa.fa-arrow-down.swimlane-header-collapse-down
+        //    ⬆️.swimlane-header-collapse-up
+        //if collapsed
+        //  a.js-collapse-swimlane(title="{{_ 'uncollapse'}}")
+        //    ⬆️.swimlane-header-collapse-up
+        //    i.fa.fa-arrow-down.swimlane-header-collapse-down
+        unless isTouchScreen
+          a.swimlane-header-handle.handle.js-swimlane-header-handle
+            | ↕️
+        if isTouchScreen
+          a.swimlane-header-miniscreen-handle.handle.js-swimlane-header-handle
+            | ↕️
 
 template(name="editSwimlaneTitleForm")
   .list-composer
     input.list-name-input.full-line(type="text" value="{{isTitleDefault title}}" autofocus)
     .edit-controls.clearfix
       button.primary.confirm(type="submit") {{_ 'save'}}
-      a.fa.fa-times-thin.js-close-inlined-form
+      a.js-close-inlined-form
+        | ❌
 
 template(name="swimlaneActionPopup")
-  unless currentUser.isCommentOnly
-    ul.pop-over-list
-       if currentUser.isBoardAdmin
-         li: a.js-set-swimlane-color
-          i.fa.fa-paint-brush
-          | {{_ 'select-color'}}
-       li: a.js-set-swimlane-height
-        i.fa.fa-arrows-v
-        |  {{_ 'set-swimlane-height'}}
-    if currentUser.isBoardAdmin
-      unless this.isTemplateContainer
-        hr
-        ul.pop-over-list
-          li: a.js-close-swimlane
-            i.fa.fa-arrow-right
-            i.fa.fa-archive
-            | {{_ 'archive-swimlane'}}
-        ul.pop-over-list
-          li: a.js-copy-swimlane
-            i.fa.fa-copy
-            | {{_ 'copy-swimlane'}}
-        ul.pop-over-list
-          li: a.js-move-swimlane
-            i.fa.fa-arrow-up
-            | {{_ 'move-swimlane'}}
+  if currentUser
+    unless currentUser.isCommentOnly
+      ul.pop-over-list
+         if currentUser.isBoardAdmin
+           li: a.js-set-swimlane-color
+             | 🎨
+             | {{_ 'select-color'}}
+         li: a.js-set-swimlane-height
+           | ↕️
+           |  {{_ 'set-swimlane-height'}}
+      if currentUser.isBoardAdmin
+        unless this.isTemplateContainer
+          hr
+          ul.pop-over-list
+            li: a.js-close-swimlane
+              | ▶️
+              | 📦
+              | {{_ 'archive-swimlane'}}
+          ul.pop-over-list
+            li: a.js-copy-swimlane
+              | 📋
+              | {{_ 'copy-swimlane'}}
+          ul.pop-over-list
+            li: a.js-move-swimlane
+              | ⬆️
+              | {{_ 'move-swimlane'}}
 
 template(name="swimlaneAddPopup")
-  unless currentUser.isCommentOnly
-    form
-      input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"
-        autocomplete="off" autofocus)
-      .edit-controls.clearfix
-        button.primary.confirm(type="submit") {{_ 'add'}}
-        unless currentBoard.isTemplatesBoard
-          unless currentBoard.isTemplateBoard
-            span.quiet
-              | {{_ 'or'}}
-              a.js-swimlane-template {{_ 'template'}}
+  if currentUser
+    unless currentUser.isCommentOnly
+      form
+        input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"
+          autocomplete="off" autofocus)
+        .edit-controls.clearfix
+          button.primary.confirm(type="submit") {{_ 'add'}}
+          unless currentBoard.isTemplatesBoard
+            unless currentBoard.isTemplateBoard
+              span.quiet
+                | {{_ 'or'}}
+                a.js-swimlane-template {{_ 'template'}}
 
 template(name="setSwimlaneColorPopup")
   form.edit-label.swimlane-color-popup
@@ -96,7 +103,7 @@ template(name="setSwimlaneColorPopup")
         each colors
           span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
             if(isSelected color)
-              i.fa.fa-check
+              | ✅
     // Buttons aligned left too
     .flush-left
       button.primary.confirm.js-submit(style="margin-left:0") {{_ 'save'}}

client/components/swimlanes/swimlanes.css

@@ -8,6 +8,7 @@
   flex-direction: row;
   overflow: auto;
   max-height: 100%;
+  position: relative;
 }
 .swimlane-header-menu .swimlane-header-collapse-down {
   font-size: 50%;
@@ -234,3 +235,106 @@
   background: #4b0082 !important;
   color: #fff !important;
 }
+
+/* Swimlane resize handle */
+.swimlane-resize-handle {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: transparent;
+  cursor: row-resize;
+  z-index: 20;
+  border-top: 2px solid transparent;
+  transition: all 0.2s ease;
+  border-radius: 2px;
+  /* Ensure the handle is clickable */
+  pointer-events: auto;
+}
+
+/* Show resize handle only on hover */
+.swimlane:hover .swimlane-resize-handle {
+  background: rgba(0, 0, 0, 0.1);
+  border-top-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Add a subtle resize indicator line at the bottom of swimlane on hover */
+.swimlane:hover .swimlane-resize-handle::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: rgba(0, 123, 255, 0.3);
+  z-index: 21;
+  transition: all 0.2s ease;
+  border-radius: 1px;
+}
+
+/* Make the indicator line more prominent when hovering over the resize handle */
+.swimlane-resize-handle:hover::after {
+  background: rgba(0, 123, 255, 0.6) !important;
+  height: 3px !important;
+  box-shadow: 0 0 4px rgba(0, 123, 255, 0.2);
+}
+
+.swimlane-resize-handle:hover {
+  background: rgba(0, 123, 255, 0.4) !important;
+  border-top-color: #0079bf !important;
+  box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
+}
+
+.swimlane-resize-handle:active {
+  background: rgba(0, 123, 255, 0.6) !important;
+  border-top-color: #0079bf !important;
+  box-shadow: 0 0 6px rgba(0, 123, 255, 0.4);
+}
+
+/* Add a subtle indicator line */
+.swimlane-resize-handle::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 2px;
+  background: rgba(0, 123, 255, 0.6);
+  border-radius: 1px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.swimlane-resize-handle:hover::before {
+  opacity: 1;
+}
+
+/* Visual feedback during resize */
+.swimlane.swimlane-resizing {
+  transition: none !important;
+  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
+  /* Ensure the swimlane maintains its new height during resize */
+  flex: none !important;
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  /* Override any conflicting layout properties */
+  display: flex !important;
+  position: relative !important;
+  /* Force height to be respected */
+  height: var(--swimlane-height, auto) !important;
+  min-height: var(--swimlane-height, auto) !important;
+  max-height: var(--swimlane-height, auto) !important;
+  /* Ensure the height is applied immediately */
+  overflow: visible !important;
+}
+
+body.swimlane-resizing-active {
+  cursor: row-resize !important;
+}
+
+body.swimlane-resizing-active * {
+  cursor: row-resize !important;
+}

client/components/swimlanes/swimlanes.jade

@@ -4,6 +4,7 @@ template(name="swimlane")
   unless collapseSwimlane
     .swimlane.js-lists.js-swimlane.dragscroll(id="swimlane-{{_id}}"
                                    style="height:{{swimlaneHeight}};")
+      .swimlane-resize-handle.js-swimlane-resize-handle.nodragscroll
       if isMiniScreen
         if currentListIsInThisSwimlane _id
           +list(currentList)
@@ -59,7 +60,8 @@ template(name="addListForm")
                   option(value="{{_id}}" selected=currentBoard.getLastList.title) {{title}}
             .edit-controls.clearfix
               button.primary.confirm(type="submit") {{_ 'save'}}
-              .fa.fa-times-thin.js-close-inlined-form
+              .js-close-inlined-form
+                | ❌
               unless currentBoard.isTemplatesBoard
                 unless currentBoard.isTemplateBoard
                   span.quiet
@@ -67,24 +69,26 @@ template(name="addListForm")
                     a.js-list-template {{_ 'template'}}
           else
             a.open-list-composer.js-open-inlined-form(title="{{_ 'add-list'}}")
-              i.fa.fa-plus
+              | ➕
 
 template(name="moveSwimlanePopup")
-  unless currentUser.isWorker
-    label {{_ 'boards'}}:
-    select.js-select-boards(autofocus)
-      each toBoard in toBoards
-        option(value="{{toBoard._id}}") {{toBoard.title}}
+  if currentUser
+    unless currentUser.isWorker
+      label {{_ 'boards'}}:
+      select.js-select-boards(autofocus)
+        each toBoard in toBoards
+          option(value="{{toBoard._id}}") {{toBoard.title}}
 
-  .edit-controls.clearfix
-    button.primary.confirm.js-done {{_ 'done'}}
+      .edit-controls.clearfix
+        button.primary.confirm.js-done {{_ 'done'}}
 
 template(name="copySwimlanePopup")
-  unless currentUser.isWorker
-    label {{_ 'boards'}}:
-    select.js-select-boards(autofocus)
-      each toBoard in toBoards
-        option(value="{{toBoard._id}}" selected="{{#if $eq toBoard.title board.title}}1{{/if}}") {{toBoard.title}}
+  if currentUser
+    unless currentUser.isWorker
+      label {{_ 'boards'}}:
+      select.js-select-boards(autofocus)
+        each toBoard in toBoards
+          option(value="{{toBoard._id}}" selected="{{#if $eq toBoard.title board.title}}1{{/if}}") {{toBoard.title}}
 
-  .edit-controls.clearfix
-    button.primary.confirm.js-done {{_ 'done'}}
+      .edit-controls.clearfix
+        button.primary.confirm.js-done {{_ 'done'}}

client/components/swimlanes/swimlanes.js

@@ -1,6 +1,9 @@
 import { ReactiveCache } from '/imports/reactiveCache';
+import dragscroll from '@wekanteam/dragscroll';
 const { calculateIndex } = Utils;
 
+
+
 function currentListIsInThisSwimlane(swimlaneId) {
   const currentList = Utils.getCurrentList();
   return (
@@ -43,6 +46,18 @@ function currentCardIsInThisList(listId, swimlaneId) {
 }
 
 function initSortable(boardComponent, $listsDom) {
+  // Safety check: ensure we have valid DOM elements
+  if (!$listsDom || $listsDom.length === 0) {
+    console.error('initSortable: No valid DOM elements provided');
+    return;
+  }
+  
+  // Check if sortable is already initialized
+  if ($listsDom.data('uiSortable') || $listsDom.data('sortable')) {
+    $listsDom.sortable('destroy');
+  }
+  
+  
   // We want to animate the card details window closing. We rely on CSS
   // transition for the actual animation.
   $listsDom._uihooks = {
@@ -62,18 +77,68 @@ function initSortable(boardComponent, $listsDom) {
     },
   };
 
-  $listsDom.sortable({
-    connectWith: '.js-swimlane, .js-lists',
-    tolerance: 'pointer',
-    helper: 'clone',
-    items: '.js-list:not(.js-list-composer)',
-    placeholder: 'js-list placeholder',
-    distance: 7,
+  
+  // Add click debugging for drag handles
+  $listsDom.on('mousedown', '.js-list-handle', function(e) {
+    e.stopPropagation();
+  });
+  
+  $listsDom.on('mousedown', '.js-list-header', function(e) {
+  });
+  
+  // Add debugging for any mousedown on lists
+  $listsDom.on('mousedown', '.js-list', function(e) {
+  });
+  
+  // Add debugging for sortable events
+  $listsDom.on('sortstart', function(e, ui) {
+  });
+  
+  $listsDom.on('sortbeforestop', function(e, ui) {
+  });
+  
+  $listsDom.on('sortstop', function(e, ui) {
+  });
+  
+  try {
+    $listsDom.sortable({
+      connectWith: '.js-swimlane, .js-lists',
+      tolerance: 'pointer',
+      appendTo: '.board-canvas',
+      helper(evt, item) {
+        const helper = item.clone();
+        helper.css('z-index', 1000);
+        return helper;
+      },
+      items: '.js-list:not(.js-list-composer)',
+      placeholder: 'list placeholder',
+      distance: 3,
+      forcePlaceholderSize: true,
+      cursor: 'move',
     start(evt, ui) {
+      ui.helper.css('z-index', 1000);
       ui.placeholder.height(ui.helper.height());
       ui.placeholder.width(ui.helper.width());
       EscapeActions.executeUpTo('popup-close');
       boardComponent.setIsDragging(true);
+      
+      // Add visual feedback for list being dragged
+      ui.item.addClass('ui-sortable-helper');
+      
+      // Disable dragscroll during list dragging to prevent interference
+      try {
+        dragscroll.reset();
+      } catch (e) {
+      }
+      
+      // Also disable dragscroll on all swimlanes during list dragging
+      $('.js-swimlane').each(function() {
+        $(this).removeClass('dragscroll');
+      });
+    },
+    beforeStop(evt, ui) {
+      // Clean up visual feedback
+      ui.item.removeClass('ui-sortable-helper');
     },
     stop(evt, ui) {
       // To attribute the new index number, we need to get the DOM element
@@ -83,15 +148,37 @@ function initSortable(boardComponent, $listsDom) {
       const sortIndex = calculateIndex(prevListDom, nextListDom, 1);
 
       const listDomElement = ui.item.get(0);
-      const list = Blaze.getData(listDomElement);
+      if (!listDomElement) {
+        console.error('List DOM element not found during drag stop');
+        return;
+      }
+      
+      let list;
+      try {
+        list = Blaze.getData(listDomElement);
+      } catch (error) {
+        console.error('Error getting list data:', error);
+        return;
+      }
+      
+      if (!list) {
+        console.error('List data not found for element:', listDomElement);
+        return;
+      }
 
       // Detect if the list was dropped in a different swimlane
       const targetSwimlaneDom = ui.item.closest('.js-swimlane');
       let targetSwimlaneId = null;
 
+
       if (targetSwimlaneDom.length > 0) {
         // List was dropped in a swimlane
-        targetSwimlaneId = targetSwimlaneDom.attr('id').replace('swimlane-', '');
+        try {
+          targetSwimlaneId = targetSwimlaneDom.attr('id').replace('swimlane-', '');
+        } catch (error) {
+          console.error('Error getting target swimlane ID:', error);
+          return;
+        }
       } else {
         // List was dropped in lists view (not swimlanes view)
         // In this case, assign to the default swimlane
@@ -127,9 +214,6 @@ function initSortable(boardComponent, $listsDom) {
       // If the list was dropped in a different swimlane, update the swimlaneId
       if (isDifferentSwimlane) {
         updateData.swimlaneId = targetSwimlaneId;
-        if (process.env.DEBUG === 'true') {
-          console.log(`Moving list "${list.title}" from swimlane ${originalSwimlaneId} to swimlane ${targetSwimlaneId}`);
-        }
 
         // Move all cards in the list to the new swimlane
         const cardsInList = ReactiveCache.getCards({
@@ -141,9 +225,6 @@ function initSortable(boardComponent, $listsDom) {
           card.move(list.boardId, targetSwimlaneId, list._id);
         });
 
-        if (process.env.DEBUG === 'true') {
-          console.log(`Moved ${cardsInList.length} cards to swimlane ${targetSwimlaneId}`);
-        }
 
         // Don't cancel the sortable when moving to a different swimlane
         // The DOM move should be allowed to complete
@@ -152,48 +233,97 @@ function initSortable(boardComponent, $listsDom) {
         $listsDom.sortable('cancel');
       }
 
-      Lists.update(list._id, {
-        $set: updateData,
-      });
+      try {
+        Lists.update(list._id, {
+          $set: updateData,
+        });
+      } catch (error) {
+        console.error('Error updating list:', error);
+        return;
+      }
 
       boardComponent.setIsDragging(false);
+      
+      // Re-enable dragscroll after list dragging is complete
+      try {
+        dragscroll.reset();
+      } catch (e) {
+      }
+      
+      // Re-enable dragscroll on all swimlanes
+      $('.js-swimlane').each(function() {
+        $(this).addClass('dragscroll');
+      });
     },
   });
+  } catch (error) {
+    console.error('Error initializing list sortable:', error);
+    return;
+  }
+  
+  
+  // Check if drag handles exist
+  const dragHandles = $listsDom.find('.js-list-handle');
+  
+  // Check if lists exist
+  const lists = $listsDom.find('.js-list');
 
-  boardComponent.autorun(() => {
-    if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
-      $listsDom.sortable({
-        handle: '.js-list-handle',
-        connectWith: '.js-swimlane, .js-lists',
-      });
-    } else {
-      $listsDom.sortable({
-        handle: '.js-list-header',
-        connectWith: '.js-swimlane, .js-lists',
-      });
-    }
-
-    const $listDom = $listsDom;
-    if ($listDom.data('uiSortable') || $listDom.data('sortable')) {
-      $listsDom.sortable(
-        'option',
-        'disabled',
-        !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
-      );
-    }
-  });
+  // Skip the complex autorun and options for now
 }
 
 BlazeComponent.extendComponent({
   onRendered() {
     const boardComponent = this.parentComponent();
     const $listsDom = this.$('.js-lists');
+    
 
     if (!Utils.getCurrentCardId()) {
       boardComponent.scrollLeft();
     }
 
-    initSortable(boardComponent, $listsDom);
+    // Try a simpler approach - initialize sortable directly like cards do
+    
+    // Wait for DOM to be ready
+    setTimeout(() => {
+      const $lists = this.$('.js-list');
+      
+      const $parent = $lists.parent();
+      
+      if ($lists.length > 0) {
+        
+        // Check for drag handles
+        const $handles = $parent.find('.js-list-handle');
+        
+        // Test if drag handles are clickable
+        $handles.on('click', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+        
+        $parent.sortable({
+          connectWith: '.js-swimlane, .js-lists',
+          tolerance: 'pointer',
+          appendTo: '.board-canvas',
+          helper: 'clone',
+          items: '.js-list:not(.js-list-composer)',
+          placeholder: 'list placeholder',
+          distance: 7,
+          handle: '.js-list-handle',
+          disabled: !Utils.canModifyBoard(),
+          start(evt, ui) {
+            ui.helper.css('z-index', 1000);
+            ui.placeholder.height(ui.helper.height());
+            ui.placeholder.width(ui.helper.width());
+            EscapeActions.executeUpTo('popup-close');
+            boardComponent.setIsDragging(true);
+          },
+          stop(evt, ui) {
+            boardComponent.setIsDragging(false);
+          }
+        });
+      } else {
+      }
+    }, 100);
   },
   onCreated() {
     this.draggingActive = new ReactiveVar(false);
@@ -223,10 +353,9 @@ BlazeComponent.extendComponent({
       }
     }
     if (Filter.hideEmpty.isSelected()) {
-      const swimlaneId = this.parentComponent()
-        .parentComponent()
-        .data()._id;
-      const cards = list.cards(swimlaneId);
+      // Check for cards in all swimlanes, not just the current one
+      // This ensures lists with cards in other swimlanes are still visible
+      const cards = list.cards();
       if (cards.length === 0) {
         return false;
       }
@@ -248,10 +377,20 @@ BlazeComponent.extendComponent({
             Utils.isTouchScreenOrShowDesktopDragHandles()
               ? ['.js-list-handle', '.js-swimlane-header-handle']
               : ['.js-list-header'],
-          );
+          ).concat([
+            '.js-list-resize-handle',
+            '.js-swimlane-resize-handle'
+          ]);
 
+          const isResizeHandle = $(evt.target).closest('.js-list-resize-handle, .js-swimlane-resize-handle').length > 0;
+          const isInNoDragArea = $(evt.target).closest(noDragInside.join(',')).length > 0;
+          
+          if (isResizeHandle) {
+            return;
+          }
+          
           if (
-            $(evt.target).closest(noDragInside.join(',')).length === 0 &&
+            !isInNoDragArea &&
             this.$('.swimlane').prop('clientHeight') > evt.offsetY
           ) {
             this._isDragging = true;
@@ -284,11 +423,198 @@ BlazeComponent.extendComponent({
   swimlaneHeight() {
     const user = ReactiveCache.getCurrentUser();
     const swimlane = Template.currentData();
-    const height = user.getSwimlaneHeight(swimlane.boardId, swimlane._id);
+    
+    let height;
+    if (user) {
+      // For logged-in users, get from user profile
+      height = user.getSwimlaneHeightFromStorage(swimlane.boardId, swimlane._id);
+    } else {
+      // For non-logged-in users, get from localStorage
+      try {
+        const stored = localStorage.getItem('wekan-swimlane-heights');
+        if (stored) {
+          const heights = JSON.parse(stored);
+          if (heights[swimlane.boardId] && heights[swimlane.boardId][swimlane._id]) {
+            height = heights[swimlane.boardId][swimlane._id];
+          } else {
+            height = -1;
+          }
+        } else {
+          height = -1;
+        }
+      } catch (e) {
+        console.warn('Error reading swimlane height from localStorage:', e);
+        height = -1;
+      }
+    }
+    
     return height == -1 ? "auto" : (height + 5 + "px");
   },
+
+  onRendered() {
+    // Initialize swimlane resize functionality immediately
+    this.initializeSwimlaneResize();
+  },
+
+  initializeSwimlaneResize() {
+    // Check if we're still in a valid template context
+    if (!Template.currentData()) {
+      console.warn('No current template data available for swimlane resize initialization');
+      return;
+    }
+    
+    const swimlane = Template.currentData();
+    const $swimlane = $(`#swimlane-${swimlane._id}`);
+    const $resizeHandle = $swimlane.find('.js-swimlane-resize-handle');
+    
+    // Check if elements exist
+    if (!$swimlane.length || !$resizeHandle.length) {
+      console.warn('Swimlane or resize handle not found, retrying in 100ms');
+      Meteor.setTimeout(() => {
+        if (!this.isDestroyed) {
+          this.initializeSwimlaneResize();
+        }
+      }, 100);
+      return;
+    }
+    
+    
+    if ($resizeHandle.length === 0) {
+      return;
+    }
+
+    let isResizing = false;
+    let startY = 0;
+    let startHeight = 0;
+    const minHeight = 100;
+    const maxHeight = 2000;
+
+    const startResize = (e) => {
+      isResizing = true;
+      startY = e.pageY || e.originalEvent.touches[0].pageY;
+      startHeight = parseInt($swimlane.css('height')) || 300;
+      
+      
+      $swimlane.addClass('swimlane-resizing');
+      $('body').addClass('swimlane-resizing-active');
+      $('body').css('user-select', 'none');
+      
+      
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const doResize = (e) => {
+      if (!isResizing) {
+        return;
+      }
+      
+      const currentY = e.pageY || e.originalEvent.touches[0].pageY;
+      const deltaY = currentY - startY;
+      const newHeight = Math.max(minHeight, Math.min(maxHeight, startHeight + deltaY));
+      
+      
+      // Apply the new height immediately for real-time feedback
+      $swimlane[0].style.setProperty('--swimlane-height', `${newHeight}px`);
+      $swimlane[0].style.setProperty('height', `${newHeight}px`);
+      $swimlane[0].style.setProperty('min-height', `${newHeight}px`);
+      $swimlane[0].style.setProperty('max-height', `${newHeight}px`);
+      $swimlane[0].style.setProperty('flex', 'none');
+      $swimlane[0].style.setProperty('flex-basis', 'auto');
+      $swimlane[0].style.setProperty('flex-grow', '0');
+      $swimlane[0].style.setProperty('flex-shrink', '0');
+      
+      
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const stopResize = (e) => {
+      if (!isResizing) return;
+      
+      isResizing = false;
+      
+      // Calculate final height
+      const currentY = e.pageY || e.originalEvent.touches[0].pageY;
+      const deltaY = currentY - startY;
+      const finalHeight = Math.max(minHeight, Math.min(maxHeight, startHeight + deltaY));
+      
+      // Ensure the final height is applied
+      $swimlane[0].style.setProperty('--swimlane-height', `${finalHeight}px`);
+      $swimlane[0].style.setProperty('height', `${finalHeight}px`);
+      $swimlane[0].style.setProperty('min-height', `${finalHeight}px`);
+      $swimlane[0].style.setProperty('max-height', `${finalHeight}px`);
+      $swimlane[0].style.setProperty('flex', 'none');
+      $swimlane[0].style.setProperty('flex-basis', 'auto');
+      $swimlane[0].style.setProperty('flex-grow', '0');
+      $swimlane[0].style.setProperty('flex-shrink', '0');
+      
+      // Remove visual feedback but keep the height
+      $swimlane.removeClass('swimlane-resizing');
+      $('body').removeClass('swimlane-resizing-active');
+      $('body').css('user-select', '');
+      
+      // Save the new height using the existing system
+      const boardId = swimlane.boardId;
+      const swimlaneId = swimlane._id;
+      
+      if (process.env.DEBUG === 'true') {
+      }
+      
+      const currentUser = ReactiveCache.getCurrentUser();
+      if (currentUser) {
+        // For logged-in users, use server method
+        Meteor.call('applySwimlaneHeightToStorage', boardId, swimlaneId, finalHeight, (error, result) => {
+          if (error) {
+            console.error('Error saving swimlane height:', error);
+          } else {
+            if (process.env.DEBUG === 'true') {
+            }
+          }
+        });
+      } else {
+        // For non-logged-in users, save to localStorage directly
+        try {
+          const stored = localStorage.getItem('wekan-swimlane-heights');
+          let heights = stored ? JSON.parse(stored) : {};
+          
+          if (!heights[boardId]) {
+            heights[boardId] = {};
+          }
+          heights[boardId][swimlaneId] = finalHeight;
+          
+          localStorage.setItem('wekan-swimlane-heights', JSON.stringify(heights));
+          
+          if (process.env.DEBUG === 'true') {
+          }
+        } catch (e) {
+          console.warn('Error saving swimlane height to localStorage:', e);
+        }
+      }
+      
+      e.preventDefault();
+    };
+
+    // Mouse events
+    $resizeHandle.on('mousedown', startResize);
+    $(document).on('mousemove', doResize);
+    $(document).on('mouseup', stopResize);
+    
+    // Touch events for mobile
+    $resizeHandle.on('touchstart', startResize, { passive: false });
+    $(document).on('touchmove', doResize, { passive: false });
+    $(document).on('touchend', stopResize, { passive: false });
+    
+    
+    // Prevent dragscroll interference
+    $resizeHandle.on('mousedown', (e) => {
+      e.stopPropagation();
+    });
+    
+  },
 }).register('swimlane');
 
+
 BlazeComponent.extendComponent({
   onCreated() {
     this.currentBoard = Utils.getCurrentBoard();
@@ -358,6 +684,108 @@ Template.swimlane.helpers({
   },
 });
 
+// Initialize sortable on DOM elements
+setTimeout(() => {
+  const $swimlaneElements = $('.swimlane');
+  const $listsGroupElements = $('.list-group');
+  
+  // Initialize sortable on ALL swimlane elements (even empty ones)
+  $swimlaneElements.each(function(index) {
+    const $swimlane = $(this);
+    const $lists = $swimlane.find('.js-list');
+    
+    // Only initialize on swimlanes that have the .js-lists class (the container for lists)
+    if ($swimlane.hasClass('js-lists')) {
+      $swimlane.sortable({
+        connectWith: '.js-swimlane, .js-lists',
+        tolerance: 'pointer',
+        appendTo: '.board-canvas',
+        helper: 'clone',
+        items: '.js-list:not(.js-list-composer)',
+        placeholder: 'list placeholder',
+        distance: 7,
+        handle: '.js-list-handle',
+        disabled: !Utils.canModifyBoard(),
+        start(evt, ui) {
+          ui.helper.css('z-index', 1000);
+          ui.placeholder.height(ui.helper.height());
+          ui.placeholder.width(ui.helper.width());
+          EscapeActions.executeUpTo('popup-close');
+          // Try to get board component
+          try {
+            const boardComponent = BlazeComponent.getComponentForElement(ui.item[0]);
+            if (boardComponent && boardComponent.setIsDragging) {
+              boardComponent.setIsDragging(true);
+            }
+          } catch (e) {
+            // Silent fail
+          }
+        },
+        stop(evt, ui) {
+          // Try to get board component
+          try {
+            const boardComponent = BlazeComponent.getComponentForElement(ui.item[0]);
+            if (boardComponent && boardComponent.setIsDragging) {
+              boardComponent.setIsDragging(false);
+            }
+          } catch (e) {
+            // Silent fail
+          }
+        }
+      });
+    }
+  });
+  
+  // Initialize sortable on ALL listsGroup elements (even empty ones)
+  $listsGroupElements.each(function(index) {
+    const $listsGroup = $(this);
+    const $lists = $listsGroup.find('.js-list');
+    
+    // Only initialize on listsGroup elements that have the .js-lists class
+    if ($listsGroup.hasClass('js-lists')) {
+      $listsGroup.sortable({
+        connectWith: '.js-swimlane, .js-lists',
+        tolerance: 'pointer',
+        appendTo: '.board-canvas',
+        helper: 'clone',
+        items: '.js-list:not(.js-list-composer)',
+        placeholder: 'list placeholder',
+        distance: 7,
+        handle: '.js-list-handle',
+        disabled: !Utils.canModifyBoard(),
+        start(evt, ui) {
+          ui.helper.css('z-index', 1000);
+          ui.placeholder.height(ui.helper.height());
+          ui.placeholder.width(ui.helper.width());
+          EscapeActions.executeUpTo('popup-close');
+          // Try to get board component
+          try {
+            const boardComponent = BlazeComponent.getComponentForElement(ui.item[0]);
+            if (boardComponent && boardComponent.setIsDragging) {
+              boardComponent.setIsDragging(true);
+            }
+          } catch (e) {
+            // Silent fail
+          }
+        },
+        stop(evt, ui) {
+          // Try to get board component
+          try {
+            const boardComponent = BlazeComponent.getComponentForElement(ui.item[0]);
+            if (boardComponent && boardComponent.setIsDragging) {
+              boardComponent.setIsDragging(false);
+            }
+          } catch (e) {
+            // Silent fail
+          }
+        }
+      });
+    }
+  });
+}, 1000);
+
+
+
 BlazeComponent.extendComponent({
   currentCardIsInThisList(listId, swimlaneId) {
     return currentCardIsInThisList(listId, swimlaneId);
@@ -375,10 +803,9 @@ BlazeComponent.extendComponent({
       }
     }
     if (Filter.hideEmpty.isSelected()) {
-      const swimlaneId = this.parentComponent()
-        .parentComponent()
-        .data()._id;
-      const cards = list.cards(swimlaneId);
+      // Check for cards in all swimlanes, not just the current one
+      // This ensures lists with cards in other swimlanes are still visible
+      const cards = list.cards();
       if (cards.length === 0) {
         return false;
       }
@@ -388,15 +815,59 @@ BlazeComponent.extendComponent({
   onRendered() {
     const boardComponent = this.parentComponent();
     const $listsDom = this.$('.js-lists');
+    
 
     if (!Utils.getCurrentCardId()) {
       boardComponent.scrollLeft();
     }
 
-    initSortable(boardComponent, $listsDom);
+    // Try a simpler approach for listsGroup too
+    
+    // Wait for DOM to be ready
+    setTimeout(() => {
+      const $lists = this.$('.js-list');
+      
+      const $parent = $lists.parent();
+      
+      if ($lists.length > 0) {
+        
+        // Check for drag handles
+        const $handles = $parent.find('.js-list-handle');
+        
+        // Test if drag handles are clickable
+        $handles.on('click', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+        
+        $parent.sortable({
+          connectWith: '.js-swimlane, .js-lists',
+          tolerance: 'pointer',
+          appendTo: '.board-canvas',
+          helper: 'clone',
+          items: '.js-list:not(.js-list-composer)',
+          placeholder: 'list placeholder',
+          distance: 7,
+          handle: '.js-list-handle',
+          disabled: !Utils.canModifyBoard(),
+          start(evt, ui) {
+            ui.helper.css('z-index', 1000);
+            ui.placeholder.height(ui.helper.height());
+            ui.placeholder.width(ui.helper.width());
+            EscapeActions.executeUpTo('popup-close');
+            boardComponent.setIsDragging(true);
+          },
+          stop(evt, ui) {
+            boardComponent.setIsDragging(false);
+          }
+        });
+      } else {
+      }
+    }, 100);
   },
 }).register('listsGroup');
 
+
 class MoveSwimlaneComponent extends BlazeComponent {
   serverMethod = 'moveSwimlane';
 

client/components/users/userAvatar.jade

@@ -13,7 +13,7 @@ template(name="userAvatar")
       if showEdit
         if $eq currentUser._id userData._id
           a.edit-avatar.js-change-avatar
-            i.fa.fa-pencil
+            | ✏️
 
 template(name="userAvatarInitials")
   svg.avatar.avatar-initials(viewBox="0 0 {{viewPortWidth}} 15")
@@ -32,7 +32,8 @@ template(name="boardOrgRow")
     td
       if currentUser.isBoardAdmin
         a.member.orgOrTeamMember.add-member.js-manage-board-removeOrg(title="{{_ 'remove-from-board'}}")
-          i.removeTeamFaMinus.fa.fa-minus
+          i.removeTeamFaMinus
+            | ➖
         .divaddfaplusminus
           | {{_ 'remove-btn'}}
 
@@ -45,7 +46,8 @@ template(name="boardTeamRow")
     td
       if currentUser.isBoardAdmin
         a.member.orgOrTeamMember.add-member.js-manage-board-removeTeam(title="{{_ 'remove-from-board'}}")
-          i.removeTeamFaMinus.fa.fa-minus
+          i.removeTeamFaMinus
+            | ➖
         .divaddfaplusminus
           | {{_ 'remove-btn'}}
 
@@ -88,7 +90,7 @@ template(name="changeAvatarPopup")
           img.avatar.avatar-image(src="{{link}}?auth=false&brokenIsFine=true")
         | {{_ 'uploaded-avatar'}}
         if isSelected
-          i.fa.fa-check
+          | ✅
         p.sub-name
           unless isSelected
             a.js-delete-avatar {{_ 'delete'}}
@@ -99,7 +101,7 @@ template(name="changeAvatarPopup")
         +userAvatarInitials(userId=currentUser._id)
       | {{_ 'initials' }}
       if noAvatarUrl
-        i.fa.fa-check
+        | ✅
        p.sub-name {{_ 'default-avatar'}}
   input.hide.js-upload-avatar-input(accept="image/*;capture=camera" type="file")
   if Meteor.settings.public.avatarsUploadMaxSize
@@ -110,7 +112,7 @@ template(name="changeAvatarPopup")
     br
   | {{_ 'invalid-file'}}
   button.full.js-upload-avatar
-    i.fa.fa-upload
+    | 📤
     | {{_ 'upload-avatar'}}
 
 template(name="cardMemberPopup")

client/components/users/userHeader.jade

@@ -15,92 +15,92 @@ template(name="memberMenuPopup")
     // Bookmarks at the very top
     li
       a.js-open-bookmarks
-        i.fa.fa-bookmark
+        | 🔖
         | {{_ 'bookmarks'}}
     with currentUser
       li
         a.js-my-cards(href="{{pathFor 'my-cards'}}")
-          i.fa.fa-list
+          | 📋
           | {{_ 'my-cards'}}
       li
         a.js-due-cards(href="{{pathFor 'due-cards'}}")
-          i.fa.fa-calendar
+          | 📅
           | {{_ 'dueCards-title'}}
       li
         a.js-global-search(href="{{pathFor 'global-search'}}")
-          i.fa.fa-search
+          | 🔍
           | {{_ 'globalSearch-title'}}
       li
         a(href="{{pathFor 'home'}}")
-          span.fa.fa-home
+          | 🏠
           | {{_ 'all-boards'}}
       li
         a(href="{{pathFor 'public'}}")
-          span.fa.fa-globe
+          | 🌐
           | {{_ 'public'}}
       li
         a.board-header-btn.js-open-archived-board
-          i.fa.fa-archive
+          | 📦
           span {{_ 'archives'}}
       li
         a.js-notifications-drawer-toggle
-          i.fa.fa-bell
+          | 🔔
           | {{_ 'notifications'}}
       if currentSetting.customHelpLinkUrl
         li
           a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer")
-            i.fa.fa-question
+            | ❓
             | {{_ 'help'}}
       unless currentUser.isWorker
         ul.pop-over-list
           li
             a(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
-              i.fa.fa-clone
+              | 📋
               | {{_ 'templates'}}
       if currentUser.isAdmin
         li
           a.js-go-setting(href="{{pathFor 'setting'}}")
-            i.fa.fa-lock
+            | 🔒
             | {{_ 'admin-panel'}}
       hr
       if isSameDomainNameSettingValue
         li
           a.js-invite-people
-            i.fa.fa-envelope
+            | ✉️
             | {{_ 'invite-people'}}
       if isNotOAuth2AuthenticationMethod
         li
           a.js-edit-profile
-            i.fa.fa-user
+            | 👤
             | {{_ 'edit-profile'}}
       li
         a.js-change-settings
-          i.fa.fa-cog
+          | ⚙️
           | {{_ 'change-settings'}}
       li
         a.js-change-avatar
-          i.fa.fa-picture-o
+          | 🖼️
           | {{_ 'edit-avatar'}}
       unless isSandstorm
         if isNotOAuth2AuthenticationMethod
           li
             a.js-change-password
-              i.fa.fa-key
+              | 🔑
               | {{_ 'changePasswordPopup-title'}}
       li
         a.js-change-language
-          i.fa.fa-flag
+          | 🏁
           | {{_ 'changeLanguagePopup-title'}}
       //li
       //  a.js-support
-      //    i.fa.fa-question-circle
+      //    ❓-circle
       //    | {{_ 'support'}}
   unless isSandstorm
     hr
     ul.pop-over-list
       li
         a.js-logout
-          i.fa.fa-sign-out
+          | 🚪
           | {{_ 'log-out'}}
 
 template(name="invitePeoplePopup")
@@ -171,9 +171,10 @@ template(name="changeLanguagePopup")
     each languages
       li(class="{{# if isCurrentLanguage}}active{{/if}}")
         a.js-set-language
-          = name
+          | {{languageFlag}}
+          | {{name}}
           if isCurrentLanguage
-            i.fa.fa-check
+            | ✅
 
 template(name="changeSettingsPopup")
   ul.pop-over-list
@@ -186,11 +187,11 @@ template(name="changeSettingsPopup")
     unless currentUser.isWorker
       li
         label.bold.clear
-          i.fa.fa-sort-numeric-asc
+          | 🔢
           | {{_ 'show-cards-minimum-count'}}
         input#show-cards-count-at.inline-input.left(type="number" value="#{showCardsCountAt}" min="-1")
         label.bold.clear
-          i.fa.fa-calendar
+          | 📅
           | {{_ 'start-day-of-week'}}
         select#start-day-of-week.inline-input.left
           each day in weekDays startDayOfWeek

client/components/users/userHeader.js

@@ -294,6 +294,30 @@ Template.changeLanguagePopup.helpers({
   isCurrentLanguage() {
     return this.tag === TAPi18n.getLanguage();
   },
+
+  languageFlag() {
+    const flagMap = {
+      'en': '🇺🇸', 'es': '🇪🇸', 'fr': '🇫🇷', 'de': '🇩🇪', 'it': '🇮🇹', 'pt': '🇵🇹', 'ru': '🇷🇺',
+      'ja': '🇯🇵', 'ko': '🇰🇷', 'zh': '🇨🇳', 'ar': '🇸🇦', 'hi': '🇮🇳', 'th': '🇹🇭', 'vi': '🇻🇳',
+      'tr': '🇹🇷', 'pl': '🇵🇱', 'nl': '🇳🇱', 'sv': '🇸🇪', 'da': '🇩🇰', 'no': '🇳🇴', 'fi': '🇫🇮',
+      'cs': '🇨🇿', 'hu': '🇭🇺', 'ro': '🇷🇴', 'bg': '🇧🇬', 'hr': '🇭🇷', 'sk': '🇸🇰', 'sl': '🇸🇮',
+      'et': '🇪🇪', 'lv': '🇱🇻', 'lt': '🇱🇹', 'el': '🇬🇷', 'he': '🇮🇱', 'uk': '🇺🇦', 'be': '🇧🇾',
+      'ca': '🇪🇸', 'eu': '🇪🇸', 'gl': '🇪🇸', 'cy': '🇬🇧', 'ga': '🇮🇪', 'mt': '🇲🇹', 'is': '🇮🇸',
+      'mk': '🇲🇰', 'sq': '🇦🇱', 'sr': '🇷🇸', 'bs': '🇧🇦', 'me': '🇲🇪', 'fa': '🇮🇷', 'ur': '🇵🇰',
+      'bn': '🇧🇩', 'ta': '🇮🇳', 'te': '🇮🇳', 'ml': '🇮🇳', 'kn': '🇮🇳', 'gu': '🇮🇳', 'pa': '🇮🇳',
+      'or': '🇮🇳', 'as': '🇮🇳', 'ne': '🇳🇵', 'si': '🇱🇰', 'my': '🇲🇲', 'km': '🇰🇭', 'lo': '🇱🇦',
+      'ka': '🇬🇪', 'hy': '🇦🇲', 'az': '🇦🇿', 'kk': '🇰🇿', 'ky': '🇰🇬', 'uz': '🇺🇿', 'mn': '🇲🇳',
+      'bo': '🇨🇳', 'dz': '🇧🇹', 'ug': '🇨🇳', 'ii': '🇨🇳', 'za': '🇨🇳', 'yue': '🇭🇰', 'zh-HK': '🇭🇰',
+      'zh-TW': '🇹🇼', 'zh-CN': '🇨🇳', 'id': '🇮🇩', 'ms': '🇲🇾', 'tl': '🇵🇭', 'ceb': '🇵🇭',
+      'haw': '🇺🇸', 'mi': '🇳🇿', 'sm': '🇼🇸', 'to': '🇹🇴', 'fj': '🇫🇯', 'ty': '🇵🇫', 'mg': '🇲🇬',
+      'sw': '🇹🇿', 'am': '🇪🇹', 'om': '🇪🇹', 'so': '🇸🇴', 'ti': '🇪🇷', 'ha': '🇳🇬', 'yo': '🇳🇬',
+      'ig': '🇳🇬', 'zu': '🇿🇦', 'xh': '🇿🇦', 'af': '🇿🇦', 'st': '🇿🇦', 'tn': '🇿🇦', 'ss': '🇿🇦',
+      've': '🇿🇦', 'ts': '🇿🇦', 'nr': '🇿🇦', 'nso': '🇿🇦', 'wo': '🇸🇳', 'ff': '🇸🇳', 'dy': '🇲🇱',
+      'bm': '🇲🇱', 'tw': '🇬🇭', 'ak': '🇬🇭', 'lg': '🇺🇬', 'rw': '🇷🇼', 'rn': '🇧🇮', 'ny': '🇲🇼',
+      'sn': '🇿🇼', 'nd': '🇿🇼'
+    };
+    return flagMap[this.tag] || '🌐';
+  },
 });
 
 Template.changeLanguagePopup.events({

client/config/blazeHelpers.js

@@ -1,7 +1,26 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { Blaze } from 'meteor/blaze';
 import { Session } from 'meteor/session';
-import moment from 'moment/min/moment-with-locales';
+import { 
+  formatDateTime, 
+  formatDate, 
+  formatTime, 
+  getISOWeek, 
+  isValidDate, 
+  isBefore, 
+  isAfter, 
+  isSame, 
+  add, 
+  subtract, 
+  startOf, 
+  endOf, 
+  format, 
+  parseDate, 
+  now, 
+  createDate, 
+  fromNow, 
+  calendar 
+} from '/imports/lib/dateUtils';
 
 Blaze.registerHelper('currentBoard', () => {
   const ret = Utils.getCurrentBoard();
@@ -46,8 +65,8 @@ Blaze.registerHelper('isTouchScreenOrShowDesktopDragHandles', () =>
 
 Blaze.registerHelper('moment', (...args) => {
   args.pop(); // hash
-  const [date, format] = args;
-  return moment(date).format(format ?? 'LLLL');
+  const [date, formatStr] = args;
+  return format(new Date(date), formatStr ?? 'LLLL');
 });
 
 Blaze.registerHelper('canModifyCard', () =>

client/lib/cardSearch.js

@@ -29,21 +29,86 @@ export class CardSearchPagedComponent extends BlazeComponent {
     const that = this;
     this.subscriptionCallbacks = {
       onReady() {
-        that.getResults();
-        that.searching.set(false);
-        that.hasResults.set(true);
-        that.serverError.set(false);
+        if (process.env.DEBUG === 'true') {
+          console.log('Subscription ready, getting results...');
+          console.log('Subscription ready - sessionId:', that.sessionId);
+        }
+        
+        // Wait for session data to be available (with timeout)
+        let waitCount = 0;
+        const maxWaitCount = 50; // 10 seconds max wait
+        
+        const waitForSessionData = () => {
+          waitCount++;
+          const sessionData = that.getSessionData();
+          if (process.env.DEBUG === 'true') {
+            console.log('waitForSessionData - attempt', waitCount, 'session data:', sessionData);
+          }
+          
+          if (sessionData) {
+            const results = that.getResults();
+            if (process.env.DEBUG === 'true') {
+              console.log('Search results count:', results ? results.length : 0);
+            }
+            
+            // If no results and this is a due cards search, try to retry
+            if ((!results || results.length === 0) && that.searchRetryCount !== undefined && that.searchRetryCount < that.maxRetries) {
+              if (process.env.DEBUG === 'true') {
+                console.log('No results found, retrying search...');
+              }
+              that.searchRetryCount++;
+              Meteor.setTimeout(() => {
+                if (that.performSearch) {
+                  that.performSearch();
+                }
+              }, 500);
+              return;
+            }
+            
+            that.searching.set(false);
+            that.hasResults.set(true);
+            that.serverError.set(false);
+             } else if (waitCount < maxWaitCount) {
+               // Session data not available yet, wait a bit more
+               if (process.env.DEBUG === 'true') {
+                 console.log('Session data not available yet, waiting... (attempt', waitCount, 'of', maxWaitCount, ')');
+               }
+               Meteor.setTimeout(waitForSessionData, 200);
+             } else {
+               // Timeout reached, try fallback search
+               if (process.env.DEBUG === 'true') {
+                 console.log('Timeout reached waiting for session data, trying fallback search');
+               }
+               const results = that.getResults();
+               if (process.env.DEBUG === 'true') {
+                 console.log('Fallback search results count:', results ? results.length : 0);
+               }
+               
+               if (results && results.length > 0) {
+                 that.searching.set(false);
+                 that.hasResults.set(true);
+                 that.serverError.set(false);
+               } else {
+                 that.searching.set(false);
+                 that.hasResults.set(false);
+                 that.serverError.set(true);
+               }
+             }
+        };
+        
+        // Start waiting for session data
+        Meteor.setTimeout(waitForSessionData, 100);
       },
       onError(error) {
+        if (process.env.DEBUG === 'true') {
+          console.log('Subscription error:', error);
+          console.log('Error.reason:', error.reason);
+          console.log('Error.message:', error.message);
+          console.log('Error.stack:', error.stack);
+        }
         that.searching.set(false);
         that.hasResults.set(false);
         that.serverError.set(true);
-        // eslint-disable-next-line no-console
-        //console.log('Error.reason:', error.reason);
-        // eslint-disable-next-line no-console
-        //console.log('Error.message:', error.message);
-        // eslint-disable-next-line no-console
-        //console.log('Error.stack:', error.stack);
       },
     };
   }
@@ -62,9 +127,28 @@ export class CardSearchPagedComponent extends BlazeComponent {
   }
 
   getSessionData(sessionId) {
-    return ReactiveCache.getSessionData({
-      sessionId: sessionId || SessionData.getSessionId(),
+    const sessionIdToUse = sessionId || SessionData.getSessionId();
+    if (process.env.DEBUG === 'true') {
+      console.log('getSessionData - looking for sessionId:', sessionIdToUse);
+    }
+    
+    // Try using the raw SessionData collection instead of ReactiveCache
+    const sessionData = SessionData.findOne({
+      sessionId: sessionIdToUse,
     });
+    if (process.env.DEBUG === 'true') {
+      console.log('getSessionData - found session data (raw):', sessionData);
+    }
+    
+    // Also try ReactiveCache for comparison
+    const reactiveSessionData = ReactiveCache.getSessionData({
+      sessionId: sessionIdToUse,
+    });
+    if (process.env.DEBUG === 'true') {
+      console.log('getSessionData - found session data (reactive):', reactiveSessionData);
+    }
+    
+    return sessionData || reactiveSessionData;
   }
 
   getResults() {
@@ -72,33 +156,85 @@ export class CardSearchPagedComponent extends BlazeComponent {
     // console.log('getting results');
     this.sessionData = this.getSessionData();
     // eslint-disable-next-line no-console
-    console.log('session data:', this.sessionData);
+    if (process.env.DEBUG === 'true') {
+      console.log('getResults - sessionId:', this.sessionId);
+      console.log('getResults - session data:', this.sessionData);
+    }
     const cards = [];
-    this.sessionData.cards.forEach(cardId => {
-      cards.push(ReactiveCache.getCard(cardId));
-    });
-    this.queryErrors = this.sessionData.errors;
+    
+    if (this.sessionData && this.sessionData.cards) {
+      if (process.env.DEBUG === 'true') {
+        console.log('getResults - cards array length:', this.sessionData.cards.length);
+      }
+      this.sessionData.cards.forEach(cardId => {
+        const card = ReactiveCache.getCard(cardId);
+        if (process.env.DEBUG === 'true') {
+          console.log('getResults - card:', cardId, card);
+        }
+        cards.push(card);
+      });
+      this.queryErrors = this.sessionData.errors || [];
+    } else {
+      if (process.env.DEBUG === 'true') {
+        console.log('getResults - no sessionData or no cards array, trying direct card search');
+      }
+      // Fallback: try to get cards directly from the client-side collection
+      const selector = {
+        type: 'cardType-card',
+        dueAt: { $exists: true, $nin: [null, ''] }
+      };
+      const allCards = Cards.find(selector).fetch();
+      if (process.env.DEBUG === 'true') {
+        console.log('getResults - direct card search found:', allCards ? allCards.length : 0, 'cards');
+      }
+      
+      if (allCards && allCards.length > 0) {
+        allCards.forEach(card => {
+          if (card && card._id) {
+            if (process.env.DEBUG === 'true') {
+              console.log('getResults - direct card:', card._id, card.title);
+            }
+            cards.push(card);
+          }
+        });
+      }
+      
+      this.queryErrors = [];
+    }
     if (this.queryErrors.length) {
       // console.log('queryErrors:', this.queryErrorMessages());
       this.hasQueryErrors.set(true);
       // return null;
     }
-    this.debug.set(new QueryDebug(this.sessionData.debug));
-    console.log('debug:', this.debug.get().get());
-    console.log('debug.show():', this.debug.get().show());
-    console.log('debug.showSelector():', this.debug.get().showSelector());
+    this.debug.set(new QueryDebug(this.sessionData ? this.sessionData.debug : null));
+    if (process.env.DEBUG === 'true') {
+      console.log('debug:', this.debug.get().get());
+      console.log('debug.show():', this.debug.get().show());
+      console.log('debug.showSelector():', this.debug.get().showSelector());
+    }
 
     if (cards) {
-      this.totalHits = this.sessionData.totalHits;
-      this.resultsCount = cards.length;
-      this.resultsStart = this.sessionData.lastHit - this.resultsCount + 1;
-      this.resultsEnd = this.sessionData.lastHit;
-      this.resultsHeading.set(this.getResultsHeading());
-      this.results.set(cards);
-      this.hasNextPage.set(this.sessionData.lastHit < this.sessionData.totalHits);
-      this.hasPreviousPage.set(
-        this.sessionData.lastHit - this.sessionData.resultsCount > 0,
-      );
+      if (this.sessionData) {
+        this.totalHits = this.sessionData.totalHits || 0;
+        this.resultsCount = cards.length;
+        this.resultsStart = this.sessionData.lastHit - this.resultsCount + 1;
+        this.resultsEnd = this.sessionData.lastHit;
+        this.resultsHeading.set(this.getResultsHeading());
+        this.results.set(cards);
+        this.hasNextPage.set(this.sessionData.lastHit < this.sessionData.totalHits);
+        this.hasPreviousPage.set(
+          this.sessionData.lastHit - this.sessionData.resultsCount > 0,
+        );
+      } else {
+        this.totalHits = cards.length;
+        this.resultsCount = cards.length;
+        this.resultsStart = 1;
+        this.resultsEnd = cards.length;
+        this.resultsHeading.set(this.getResultsHeading());
+        this.results.set(cards);
+        this.hasNextPage.set(false);
+        this.hasPreviousPage.set(false);
+      }
       return cards;
     }
 
@@ -113,13 +249,29 @@ export class CardSearchPagedComponent extends BlazeComponent {
   }
 
   getSubscription(queryParams) {
-    return Meteor.subscribe(
+    if (process.env.DEBUG === 'true') {
+      console.log('Subscribing to globalSearch with:', {
+        sessionId: this.sessionId,
+        params: queryParams.params,
+        text: queryParams.text
+      });
+    }
+
+    // Subscribe to both globalSearch and sessionData
+    const globalSearchHandle = Meteor.subscribe(
       'globalSearch',
       this.sessionId,
       queryParams.params,
       queryParams.text,
       this.subscriptionCallbacks,
     );
+    
+    const sessionDataHandle = Meteor.subscribe('sessionData', this.sessionId);
+    if (process.env.DEBUG === 'true') {
+      console.log('Subscribed to sessionData with sessionId:', this.sessionId);
+    }
+
+    return globalSearchHandle;
   }
 
   runGlobalSearch(queryParams) {

client/lib/datepicker.js

@@ -1,12 +1,29 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
-import moment from 'moment/min/moment-with-locales';
+import { 
+  formatDateTime, 
+  formatDate, 
+  formatTime, 
+  getISOWeek, 
+  isValidDate, 
+  isBefore, 
+  isAfter, 
+  isSame, 
+  add, 
+  subtract, 
+  startOf, 
+  endOf, 
+  format, 
+  parseDate, 
+  now, 
+  createDate, 
+  fromNow, 
+  calendar 
+} from '/imports/lib/dateUtils';
 
-// Helper function to replace HH with H for 24 hours format, because H allows also single-digit hours
+// Helper function to get time format for 24 hours
 function adjustedTimeFormat() {
-  return moment
-    .localeData()
-    .longDateFormat('LT');
+  return 'HH:mm';
 }
 
 //   .replace(/HH/i, 'H');
@@ -19,7 +36,7 @@ export class DatePicker extends BlazeComponent {
   onCreated(defaultTime = '1970-01-01 08:00:00') {
     this.error = new ReactiveVar('');
     this.card = this.data();
-    this.date = new ReactiveVar(moment.invalid());
+    this.date = new ReactiveVar(new Date('invalid'));
     this.defaultTime = defaultTime;
   }
 
@@ -33,102 +50,86 @@ export class DatePicker extends BlazeComponent {
   }
 
   onRendered() {
-    const $picker = this.$('.js-datepicker')
-      .datepicker({
-        todayHighlight: true,
-        todayBtn: 'linked',
-        language: TAPi18n.getLanguage(),
-        weekStart: this.startDayOfWeek(),
-        calendarWeeks: true,
-      })
-      .on(
-        'changeDate',
-        function(evt) {
-          this.find('#date').value = moment(evt.date).format('L');
-          this.error.set('');
-          const timeInput = this.find('#time');
-          timeInput.focus();
-          if (!timeInput.value && this.defaultTime) {
-            const currentHour = evt.date.getHours();
-            const defaultMoment = moment(
-              currentHour > 0 ? evt.date : this.defaultTime,
-            ); // default to 8:00 am local time
-            timeInput.value = defaultMoment.format('LT');
-          }
-        }.bind(this),
-      );
-
-    if (this.date.get().isValid()) {
-      $picker.datepicker('update', this.date.get().toDate());
+    // Set initial values for native HTML inputs
+    if (isValidDate(this.date.get())) {
+      const dateInput = this.find('#date');
+      const timeInput = this.find('#time');
+      
+      if (dateInput) {
+        dateInput.value = formatDate(this.date.get());
+      }
+      if (timeInput && !timeInput.value && this.defaultTime) {
+        const defaultDate = new Date(this.defaultTime);
+        timeInput.value = formatTime(defaultDate);
+      } else if (timeInput && isValidDate(this.date.get())) {
+        timeInput.value = formatTime(this.date.get());
+      }
     }
   }
 
   showDate() {
-    if (this.date.get().isValid()) return this.date.get().format('L');
+    if (isValidDate(this.date.get())) return formatDate(this.date.get());
     return '';
   }
   showTime() {
-    if (this.date.get().isValid()) return this.date.get().format('LT');
+    if (isValidDate(this.date.get())) return formatTime(this.date.get());
     return '';
   }
   dateFormat() {
-    return moment.localeData().longDateFormat('L');
+    return 'L';
   }
   timeFormat() {
-    return moment.localeData().longDateFormat('LT');
+    return '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());
+        'change .js-date-field'() {
+          // Native HTML date input validation
+          const dateValue = this.find('#date').value;
+          if (dateValue) {
+            const dateObj = new Date(dateValue);
+            if (isValidDate(dateObj)) {
+              this.error.set('');
+            } else {
+              this.error.set('invalid-date');
+            }
           }
         },
-        'keyup .js-time-field'() {
-          // parse for localized time format in strict mode
-          const dateMoment = moment(
-            this.find('#time').value,
-            adjustedTimeFormat(),
-            true,
-          );
-          if (dateMoment.isValid()) {
-            this.error.set('');
+        'change .js-time-field'() {
+          // Native HTML time input validation
+          const timeValue = this.find('#time').value;
+          if (timeValue) {
+            const timeObj = new Date(`1970-01-01T${timeValue}`);
+            if (isValidDate(timeObj)) {
+              this.error.set('');
+            } else {
+              this.error.set('invalid-time');
+            }
           }
         },
         '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 newTime = moment(time, adjustedTimeFormat(), true);
-          const newDate = moment(evt.target.date.value, 'L', true);
-          const dateString = `${evt.target.date.value} ${time}`;
-          const newCompleteDate = moment(
-            dateString,
-            `L ${adjustedTimeFormat()}`,
-            true,
-          );
-          if (!newTime.isValid()) {
-            this.error.set('invalid-time');
-            evt.target.time.focus();
-          }
-          if (!newDate.isValid()) {
+          const dateValue = evt.target.date.value;
+          const timeValue = evt.target.time.value || '12:00'; // Default to 12:00 if no time given
+          
+          if (!dateValue) {
             this.error.set('invalid-date');
             evt.target.date.focus();
+            return;
           }
-          if (newCompleteDate.isValid()) {
-            this._storeDate(newCompleteDate.toDate());
-            Popup.back();
-          } else if (!this.error) {
+
+          const newCompleteDate = new Date(`${dateValue}T${timeValue}`);
+          
+          if (!isValidDate(newCompleteDate)) {
             this.error.set('invalid');
+            return;
           }
+
+          this._storeDate(newCompleteDate);
+          Popup.back();
         },
         'click .js-delete-date'(evt) {
           evt.preventDefault();

client/lib/filter.js

@@ -1,5 +1,24 @@
 import { ReactiveCache } from '/imports/reactiveCache';
-import moment from 'moment/min/moment-with-locales';
+import { 
+  formatDateTime, 
+  formatDate, 
+  formatTime, 
+  getISOWeek, 
+  isValidDate, 
+  isBefore, 
+  isAfter, 
+  isSame, 
+  add, 
+  subtract, 
+  startOf, 
+  endOf, 
+  format, 
+  parseDate, 
+  now, 
+  createDate, 
+  fromNow, 
+  calendar 
+} from '/imports/lib/dateUtils';
 
 // Filtered view manager
 // We define local filter objects for each different type of field (SetFilter,
@@ -30,7 +49,7 @@ class DateFilter {
       this.reset();
       return;
     }
-    this._filter = { $lte: moment().toDate() };
+    this._filter = { $lte: now() };
     this._updateState('past');
   }
 
@@ -72,13 +91,8 @@ class DateFilter {
       return;
     }
 
-    var startDay = moment()
-        .startOf('day')
-        .toDate(),
-      endDay = moment()
-        .endOf('day')
-        .add(offset, 'day')
-        .toDate();
+    var startDay = startOf(now(), 'day'),
+      endDay = endOf(add(now(), offset, 'day'), 'day');
 
     if (offset >= 0) {
       this._filter = { $gte: startDay, $lte: endDay };
@@ -112,33 +126,21 @@ class DateFilter {
     const weekStartDay = currentUser ? currentUser.getStartDayOfWeek() : 1;
 
     if (week === 'this') {
-      // Moments are mutable so they must be cloned before modification
-      var WeekStart = moment()
-        .startOf('day')
-        .startOf('week')
-        .add(weekStartDay, 'days');
-      var WeekEnd = WeekStart
-        .clone()
-        .add(6, 'days')
-        .endOf('day');
+      // Create week start and end dates
+      var WeekStart = startOf(add(startOf(now(), 'week'), weekStartDay, 'days'), 'day');
+      var WeekEnd = endOf(add(WeekStart, 6, 'days'), 'day');
 
       this._updateState('thisweek');
     } else if (week === 'next') {
-      // Moments are mutable so they must be cloned before modification
-      var WeekStart = moment()
-        .startOf('day')
-        .startOf('week')
-        .add(weekStartDay + 7, 'days');
-      var WeekEnd = WeekStart
-        .clone()
-        .add(6, 'days')
-        .endOf('day');
+      // Create next week start and end dates
+      var WeekStart = startOf(add(startOf(now(), 'week'), weekStartDay + 7, 'days'), 'day');
+      var WeekEnd = endOf(add(WeekStart, 6, 'days'), 'day');
 
      this._updateState('nextweek');
     }
 
-    var startDate = WeekStart.toDate();
-    var endDate = WeekEnd.toDate();
+    var startDate = WeekStart;
+    var endDate = WeekEnd;
 
     if (offset >= 0) {
       this._filter = { $gte: startDate, $lte: endDate };

client/lib/originalPositionHelpers.js

@@ -0,0 +1,114 @@
+/**
+ * Helper functions for integrating original position tracking into existing Wekan templates
+ */
+
+/**
+ * Add original position tracking to swimlane templates
+ */
+export function addOriginalPositionToSwimlane(swimlaneId) {
+  if (!swimlaneId) return;
+  
+  // Track original position when swimlane is created or first accessed
+  Meteor.call('positionHistory.trackSwimlane', swimlaneId, (error) => {
+    if (error) {
+      console.warn('Failed to track original position for swimlane:', error);
+    }
+  });
+}
+
+/**
+ * Add original position tracking to list templates
+ */
+export function addOriginalPositionToList(listId) {
+  if (!listId) return;
+  
+  // Track original position when list is created or first accessed
+  Meteor.call('positionHistory.trackList', listId, (error) => {
+    if (error) {
+      console.warn('Failed to track original position for list:', error);
+    }
+  });
+}
+
+/**
+ * Add original position tracking to card templates
+ */
+export function addOriginalPositionToCard(cardId) {
+  if (!cardId) return;
+  
+  // Track original position when card is created or first accessed
+  Meteor.call('positionHistory.trackCard', cardId, (error) => {
+    if (error) {
+      console.warn('Failed to track original position for card:', error);
+    }
+  });
+}
+
+/**
+ * Get original position description for display in templates
+ */
+export function getOriginalPositionDescription(entityId, entityType) {
+  return new Promise((resolve, reject) => {
+    const methodName = `positionHistory.get${entityType.charAt(0).toUpperCase() + entityType.slice(1)}Description`;
+    
+    Meteor.call(methodName, entityId, (error, result) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(result);
+      }
+    });
+  });
+}
+
+/**
+ * Check if an entity has moved from its original position
+ */
+export function hasEntityMoved(entityId, entityType) {
+  return new Promise((resolve, reject) => {
+    const methodName = `positionHistory.has${entityType.charAt(0).toUpperCase() + entityType.slice(1)}Moved`;
+    
+    Meteor.call(methodName, entityId, (error, result) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(result);
+      }
+    });
+  });
+}
+
+/**
+ * Template helper for displaying original position info
+ */
+Template.registerHelper('originalPositionInfo', function(entityId, entityType) {
+  if (!entityId || !entityType) return null;
+  
+  const description = getOriginalPositionDescription(entityId, entityType);
+  const hasMoved = hasEntityMoved(entityId, entityType);
+  
+  return {
+    description: description,
+    hasMoved: hasMoved,
+    entityId: entityId,
+    entityType: entityType
+  };
+});
+
+/**
+ * Template helper for checking if entity has moved
+ */
+Template.registerHelper('hasEntityMoved', function(entityId, entityType) {
+  if (!entityId || !entityType) return false;
+  
+  return hasEntityMoved(entityId, entityType);
+});
+
+/**
+ * Template helper for getting original position description
+ */
+Template.registerHelper('getOriginalPositionDescription', function(entityId, entityType) {
+  if (!entityId || !entityType) return 'No original position data';
+  
+  return getOriginalPositionDescription(entityId, entityType);
+});

client/lib/popup.js

@@ -46,6 +46,8 @@ window.Popup = new (class {
           return;
         } else {
           $(previousOpenerElement).removeClass('is-active');
+          // Clean up previous popup content to prevent mixing
+          self._cleanupPreviousPopupContent();
         }
       }
 
@@ -58,7 +60,12 @@ window.Popup = new (class {
       if (clickFromPopup(evt) && self._getTopStack()) {
         openerElement = self._getTopStack().openerElement;
       } else {
-        self._stack = [];
+        // For Member Settings sub-popups, always start fresh to avoid content mixing
+        if (popupName.includes('changeLanguage') || popupName.includes('changeAvatar') || 
+            popupName.includes('editProfile') || popupName.includes('changePassword') ||
+            popupName.includes('invitePeople') || popupName.includes('support')) {
+          self._stack = [];
+        }
         openerElement = evt.currentTarget;
       }
       $(openerElement).addClass('is-active');
@@ -94,6 +101,10 @@ window.Popup = new (class {
       // our internal dependency, and since we just changed the top element of
       // our internal stack, the popup will be updated with the new data.
       if (!self.isOpen()) {
+        if (!Template[popupName]) {
+          console.error('Template not found:', popupName);
+          return;
+        }
         self.current = Blaze.renderWithData(
           self.template,
           () => {
@@ -169,6 +180,8 @@ window.Popup = new (class {
       $(openerElement).removeClass('is-active');
 
       this._stack = [];
+      // Clean up popup content when closing
+      this._cleanupPreviousPopupContent();
     }
   }
 
@@ -182,6 +195,13 @@ window.Popup = new (class {
     return this._stack[this._stack.length - 1];
   }
 
+  _cleanupPreviousPopupContent() {
+    // Force a re-render to ensure proper cleanup
+    if (this._dep) {
+      this._dep.changed();
+    }
+  }
+
   // We automatically calculate the popup offset from the reference element
   // position and dimensions. We also reactively use the window dimensions to
   // ensure that the popup is always visible on the screen.
@@ -193,11 +213,55 @@ window.Popup = new (class {
       if (Utils.isMiniScreen()) return { left: 0, top: 0 };
 
       const offset = $element.offset();
-      const popupWidth = 300 + 15;
-      return {
-        left: Math.min(offset.left, $(window).width() - popupWidth),
-        top: offset.top + $element.outerHeight(),
-      };
+      // Calculate actual popup width based on CSS: min(380px, 55vw)
+      const viewportWidth = $(window).width();
+      const viewportHeight = $(window).height();
+      const popupWidth = Math.min(380, viewportWidth * 0.55) + 15; // Add 15px for margin
+      
+      // Check if this is an admin panel edit popup
+      const isAdminEditPopup = $element.hasClass('edit-user') || 
+                              $element.hasClass('edit-org') || 
+                              $element.hasClass('edit-team');
+      
+      if (isAdminEditPopup) {
+        // Center the popup horizontally and use full height
+        const centeredLeft = (viewportWidth - popupWidth) / 2;
+        
+        return {
+          left: Math.max(10, centeredLeft), // Ensure popup doesn't go off screen
+          top: 10, // Start from top with small margin
+          maxHeight: viewportHeight - 20, // Use full height minus small margins
+        };
+      }
+      
+      // Calculate available height for popup
+      const popupTop = offset.top + $element.outerHeight();
+      
+      // For language popup, don't use dynamic height to avoid overlapping board
+      const isLanguagePopup = $element.hasClass('js-change-language');
+      let availableHeight, maxPopupHeight;
+      
+      if (isLanguagePopup) {
+        // For language popup, position content area below right vertical scrollbar
+        const availableHeight = viewportHeight - popupTop - 20; // 20px margin from bottom (near scrollbar)
+        const calculatedHeight = Math.min(availableHeight, viewportHeight * 0.5); // Max 50% of viewport
+        
+        return {
+          left: Math.min(offset.left, viewportWidth - popupWidth),
+          top: popupTop,
+          maxHeight: Math.max(calculatedHeight, 200), // Minimum 200px height
+        };
+      } else {
+        // For other popups, use the dynamic height calculation
+        availableHeight = viewportHeight - popupTop - 20; // 20px margin from bottom
+        maxPopupHeight = Math.min(availableHeight, viewportHeight * 0.8); // Max 80% of viewport
+        
+        return {
+          left: Math.min(offset.left, viewportWidth - popupWidth),
+          top: popupTop,
+          maxHeight: Math.max(maxPopupHeight, 200), // Minimum 200px height
+        };
+      }
     };
   }
 

client/lib/secureDOMPurify.js

@@ -3,43 +3,25 @@ import DOMPurify from 'dompurify';
 // Centralized secure DOMPurify configuration to prevent XSS and CSS injection attacks
 export function getSecureDOMPurifyConfig() {
   return {
-    // Block dangerous elements that can cause XSS and CSS injection
-    FORBID_TAGS: [
-      'svg', 'defs', 'use', 'g', 'symbol', 'marker', 'pattern', 'mask', 'clipPath',
-      'linearGradient', 'radialGradient', 'stop', 'animate', 'animateTransform',
-      'animateMotion', 'set', 'switch', 'foreignObject', 'script', 'style', 'link',
-      'meta', 'iframe', 'object', 'embed', 'applet', 'form', 'input', 'textarea',
-      'select', 'option', 'button', 'label', 'fieldset', 'legend', 'frameset',
-      'frame', 'noframes', 'base', 'basefont', 'isindex', 'dir', 'menu', 'menuitem'
-    ],
-    // Block dangerous attributes that can cause XSS and CSS injection
-    FORBID_ATTR: [
-      'xlink:href', 'href', 'onload', 'onerror', 'onclick', 'onmouseover',
-      'onfocus', 'onblur', 'onchange', 'onsubmit', 'onreset', 'onselect',
-      'onunload', 'onresize', 'onscroll', 'onkeydown', 'onkeyup', 'onkeypress',
-      'onmousedown', 'onmouseup', 'onmouseover', 'onmouseout', 'onmousemove',
-      'ondblclick', 'oncontextmenu', 'onwheel', 'ontouchstart', 'ontouchend',
-      'ontouchmove', 'ontouchcancel', 'onabort', 'oncanplay', 'oncanplaythrough',
-      'ondurationchange', 'onemptied', 'onended', 'onerror', 'onloadeddata',
-      'onloadedmetadata', 'onloadstart', 'onpause', 'onplay', 'onplaying',
-      'onprogress', 'onratechange', 'onseeked', 'onseeking', 'onstalled',
-      'onsuspend', 'ontimeupdate', 'onvolumechange', 'onwaiting', 'onbeforeunload',
-      'onhashchange', 'onpagehide', 'onpageshow', 'onpopstate', 'onstorage',
-      'onunload', 'style', 'class', 'id', 'data-*', 'aria-*'
-    ],
-    // Allow only safe image formats and protocols
+    // Allow common markdown elements including anchor tags
+    ALLOWED_TAGS: ['a', 'p', 'br', 'strong', 'em', 'u', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'hr', 'div', 'span'],
+    // Allow safe attributes including href for anchor tags
+    ALLOWED_ATTR: ['href', 'title', 'alt', 'src', 'width', 'height', 'target', 'rel'],
+    // Allow safe protocols for links
     ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
-    // Remove dangerous protocols
+    // Allow unknown protocols but be cautious
     ALLOW_UNKNOWN_PROTOCOLS: false,
-    // Sanitize URLs to prevent malicious content loading
+    // Sanitize DOM for security
     SANITIZE_DOM: true,
-    // Remove dangerous elements completely
-    KEEP_CONTENT: false,
-    // Additional security measures
-    ADD_ATTR: [],
+    // Keep content but sanitize it
+    KEEP_CONTENT: true,
+    // Block dangerous elements that can cause XSS
+    FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'applet', 'svg', 'defs', 'use', 'g', 'symbol', 'marker', 'pattern', 'mask', 'clipPath', 'linearGradient', 'radialGradient', 'stop', 'animate', 'animateTransform', 'animateMotion', 'set', 'switch', 'foreignObject', 'link', 'meta', 'form', 'input', 'textarea', 'select', 'option', 'button', 'label', 'fieldset', 'legend', 'frameset', 'frame', 'noframes', 'base', 'basefont', 'isindex', 'dir', 'menu', 'menuitem'],
+    // Block dangerous attributes but allow safe href
+    FORBID_ATTR: ['xlink:href', 'onload', 'onerror', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange', 'onsubmit', 'onreset', 'onselect', 'onunload', 'onresize', 'onscroll', 'onkeydown', 'onkeyup', 'onkeypress', 'onmousedown', 'onmouseup', 'onmouseover', 'onmouseout', 'onmousemove', 'ondblclick', 'oncontextmenu', 'onwheel', 'ontouchstart', 'ontouchend', 'ontouchmove', 'ontouchcancel', 'onabort', 'oncanplay', 'oncanplaythrough', 'ondurationchange', 'onemptied', 'onended', 'onerror', 'onloadeddata', 'onloadedmetadata', 'onloadstart', 'onpause', 'onplay', 'onplaying', 'onprogress', 'onratechange', 'onseeked', 'onseeking', 'onstalled', 'onsuspend', 'ontimeupdate', 'onvolumechange', 'onwaiting', 'onbeforeunload', 'onhashchange', 'onpagehide', 'onpageshow', 'onpopstate', 'onstorage', 'onunload', 'style', 'class', 'id', 'data-*', 'aria-*'],
     // Block data URIs that could contain malicious content
     ALLOW_DATA_ATTR: false,
-    // Custom hook to further sanitize content
+    // Custom hooks for additional security
     HOOKS: {
       uponSanitizeElement: function(node, data) {
         // Block any remaining dangerous elements
@@ -51,14 +33,37 @@ export function getSecureDOMPurifyConfig() {
           return false;
         }
 
-        // Block img tags with SVG data URIs
+        // Block img tags with SVG data URIs that could contain malicious JavaScript
         if (node.tagName && node.tagName.toLowerCase() === 'img') {
           const src = node.getAttribute('src');
-          if (src && (src.startsWith('data:image/svg') || src.endsWith('.svg'))) {
-            if (process.env.DEBUG === 'true') {
-              console.warn('Blocked potentially malicious SVG image:', src);
+          if (src) {
+            // Block all SVG data URIs to prevent XSS via embedded JavaScript
+            if (src.startsWith('data:image/svg') || src.endsWith('.svg')) {
+              if (process.env.DEBUG === 'true') {
+                console.warn('Blocked potentially malicious SVG image:', src);
+              }
+              return false;
+            }
+            
+            // Additional check for base64 encoded SVG with script tags
+            if (src.startsWith('data:image/svg+xml;base64,')) {
+              try {
+                const base64Content = src.split(',')[1];
+                const decodedContent = atob(base64Content);
+                if (decodedContent.includes('<script') || decodedContent.includes('javascript:')) {
+                  if (process.env.DEBUG === 'true') {
+                    console.warn('Blocked SVG with embedded JavaScript:', src.substring(0, 100) + '...');
+                  }
+                  return false;
+                }
+              } catch (e) {
+                // If decoding fails, block it as a safety measure
+                if (process.env.DEBUG === 'true') {
+                  console.warn('Blocked malformed SVG data URI:', src);
+                }
+                return false;
+              }
             }
-            return false;
           }
         }
 
@@ -100,6 +105,19 @@ export function getSecureDOMPurifyConfig() {
           return false;
         }
 
+        // Allow href attribute for anchor tags only
+        if (data.attrName === 'href') {
+          // Only allow href on anchor tags
+          if (node.tagName && node.tagName.toLowerCase() === 'a') {
+            return true;
+          } else {
+            if (process.env.DEBUG === 'true') {
+              console.warn('Blocked href attribute on non-anchor element:', node.tagName);
+            }
+            return false;
+          }
+        }
+
         return true;
       }
     }

client/lib/utils.js

@@ -433,10 +433,14 @@ Utils = {
   // we can easily debug with a small window of desktop browser. :-)
   isMiniScreen() {
     this.windowResizeDep.depend();
+    // Also depend on mobile mode changes to make this reactive
+    Session.get('wekan-mobile-mode');
+    
     // Show mobile view when:
     // 1. Screen width is 800px or less (matches CSS media queries)
     // 2. Mobile phones in portrait mode
     // 3. iPad in very small screens (≤ 600px)
+    // 4. All iPhone models by default (including largest models), but respect user preference
     const isSmallScreen = window.innerWidth <= 800;
     const isVerySmallScreen = window.innerWidth <= 600;
     const isPortrait = window.innerWidth < window.innerHeight || window.matchMedia("(orientation: portrait)").matches;
@@ -445,13 +449,19 @@ Utils = {
     const isIPad = /iPad/i.test(navigator.userAgent);
     const isUbuntuTouch = /Ubuntu/i.test(navigator.userAgent);
 
-    // For iPhone: always show mobile view regardless of orientation
-    // For other mobile phones: show mobile view in portrait, desktop view in landscape
-    // For iPad: show mobile view only in very small screens (≤ 600px)
-    // For Ubuntu Touch: smartphones behave like mobile phones, tablets like iPad
-    // For desktop: show mobile view when screen width <= 800px
+    // Check if user has explicitly set mobile mode preference
+    const userMobileMode = this.getMobileMode();
+    
+    // For iPhone: default to mobile view, but respect user's mobile mode toggle preference
+    // This ensures all iPhone models (including iPhone 15 Pro Max, 14 Pro Max, etc.) start with mobile view
+    // but users can still switch to desktop mode if they prefer
     if (isIPhone) {
-      return true; // iPhone: always mobile view
+      // If user has explicitly set a preference, respect it
+      if (userMobileMode !== null && userMobileMode !== undefined) {
+        return userMobileMode;
+      }
+      // Otherwise, default to mobile view for iPhones
+      return true;
     } else if (isMobilePhone) {
       return isPortrait; // Other mobile phones: portrait = mobile, landscape = desktop
     } else if (isIPad) {
@@ -496,30 +506,14 @@ Utils = {
 
   // returns if desktop drag handles are enabled
   isShowDesktopDragHandles() {
-    if (this.isTouchScreen()) {
-      return true;
-    /*
-    const currentUser = ReactiveCache.getCurrentUser();
-    if (currentUser) {
-      return (currentUser.profile || {}).showDesktopDragHandles;
-    } else if (window.localStorage.getItem('showDesktopDragHandles')) {
-    //
-    if (window.localStorage.getItem('showDesktopDragHandles')) {
-      return true;
-    } else {
-      return false;
-    */
-    } else {
-      return false;
-    }
+    // Always show drag handles on all displays
+    return true;
   },
 
   // returns if mini screen or desktop drag handles
   isTouchScreenOrShowDesktopDragHandles() {
-    // Always enable drag handles for mobile screens (touch devices)
-    return this.isTouchScreen() || this.isMiniScreen();
-    //return this.isTouchScreen() || this.isShowDesktopDragHandles();
-    //return this.isShowDesktopDragHandles();
+    // Always enable drag handles for all displays
+    return true;
   },
 
   calculateIndexData(prevData, nextData, nItems = 1) {