Added initial support for auto-width lists option

client/components/boards/boardHeader.jade

@@ -23,6 +23,10 @@ template(name="boardHeaderBar")
               span
                 = currentBoard.stars
 
+          a.board-header-btn.js-auto-width-board(class="{{#if isAutoWidth}}is-active{{/if}}"
+            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}}")
+
           a.board-header-btn(
             class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
             title="{{_ currentBoard.permission}}")
@@ -66,6 +70,10 @@ template(name="boardHeaderBar")
               span
                 = currentBoard.stars
 
+          a.board-header-btn.js-auto-width-board(class="{{#if isAutoWidth}}is-active{{/if}}"
+            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}}")
+
           a.board-header-btn(
             class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
             title="{{_ currentBoard.permission}}")

client/components/boards/boardHeader.js

@@ -38,6 +38,12 @@ BlazeComponent.extendComponent({
     return user && user.hasStarred(boardId);
   },
 
+  isAutoWidth() {
+    const boardId = Session.get('currentBoard');
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.hasAutoWidth(boardId);
+  },
+
   // Only show the star counter if the number of star is greater than 2
   showStarCounter() {
     const currentBoard = Utils.getCurrentBoard();
@@ -71,6 +77,9 @@ BlazeComponent.extendComponent({
         'click .js-star-board'() {
           ReactiveCache.getCurrentUser().toggleBoardStar(Session.get('currentBoard'));
         },
+        'click .js-auto-width-board'() {
+          ReactiveCache.getCurrentUser().toggleAutoWidth(Session.get('currentBoard'));
+        },
         'click .js-open-board-menu': Popup.open('boardMenu'),
         'click .js-change-visibility': Popup.open('boardChangeVisibility'),
         'click .js-watch-board': Popup.open('boardChangeWatch'),

client/components/lists/list.jade

@@ -1,7 +1,7 @@
 template(name='list')
   .list.js-list(id="js-list-{{_id}}"
-                style="{{#unless collapsed}}min-width:{{listWidth}}px;{{/unless}}"
+                style="{{#unless collapsed}}{{#if autoWidth}}min-{{/if}}width:{{listWidth}}px;{{/unless}}"
-                class="{{#if collapsed}}list-collapsed{{/if}}")
+                class="{{#if collapsed}}list-collapsed{{/if}} {{#if autoWidth}}list-auto-width{{/if}}")
     +listHeader
     +listBody
 

client/components/lists/list.js

@@ -200,6 +200,12 @@ BlazeComponent.extendComponent({
     const list = Template.currentData();
     return user.getListWidth(list.boardId, list._id);
   },
+
+  autoWidth() {
+    const user = ReactiveCache.getCurrentUser();
+    const list = Template.currentData();
+    return user.hasAutoWidth(list.boardId);
+  },
 }).register('list');
 
 Template.miniList.events({

models/users.js

@@ -716,6 +716,11 @@ Users.helpers({
     return _.contains(starredBoards, boardId);
   },
 
+  hasAutoWidth(boardId) {
+    const { autoWidths = {} } = this.profile || {};
+    return autoWidths[boardId] === true;
+  },
+
   invitedBoards() {
     const { invitedBoards = [] } = this.profile || {};
     return Boards.userBoards(
@@ -974,6 +979,17 @@ Users.mutations({
       },
     };
   },
+  toggleAutoWidth(boardId) {
+    const { autoWidths = {} } = this.profile || {};
+
+    autoWidths[boardId] = !autoWidths[boardId];
+
+    return {
+      $set: {
+        'profile.autoWidths': autoWidths,
+      },
+    };
+  },
 
   addInvite(boardId) {
     return {

server/migrations.js

@@ -1489,3 +1489,16 @@ Migrations.add('remove-user-profile-hideCheckedItems', () => {
     noValidateMulti,
   );
 });
+
+Migrations.add('add-default-auto-width-boards', () => {
+  Users.find().forEach(user => {
+    if (!user.hasOwnProperty('profile.autoWidths')) {
+      // Set default auto widths
+      Users.direct.update(
+        { _id: user._id },
+        { $set: { 'profile.autoWidths': {} } },
+        noValidate,
+      );
+    }
+  });
+});