From 7d9c26b3a5b911acf8e31a57cc76c62424dbd9cb Mon Sep 17 00:00:00 2001
From: Benjamin <benjmestrallet@MacBook-Air.local>
Date: Mon, 29 Jun 2026 16:59:17 +0200
Subject: [PATCH 1/7] feat: redesign project cards + list toolbars, move
 unscheduled button, trim CSS

Project cards (replaces the flip card):
- Single-face card with a left color bar carrying the project colour, bold
  18px title, space chip shown once, favorite star + 3-dots at a fixed position,
  fixed height, and a bottom-right progress bar split per status column
  (tooltip per segment, colour by status rank: ToDo/InProgress/WaitingOn/Done).
- Hide the space chip (and skip the space fetch) when the portlet runs inside a
  space, where every project belongs to that space.
- Delete the now-unused ProjectCardReverse.vue + its registration and the dead
  flip/reverse-card CSS.

List toolbars: ProjectListToolbar / TasksListToolbar adopt the shared
application-toolbar (flush-left Add button + collapsible cone search with the
advanced filter inside, like Spaces); symmetric grid gutter so cards align to
both edges; a Favorites option added to both filter dropdowns (client-side for
projects). Fix the Add Project button not showing inside a space (ApplicationTool
reads $slots.left non-reactively, so the slot is always declared and the v-if
moved to the inner button).

Plan view: move the unscheduled-tasks button from a floating button overlaying
the gantt into the board toolbar, after the extension icons; drop its dead CSS.

Net effect: tasks.less shrinks from 3179 to ~2890 lines despite the new card,
progress bar and skeleton loader, by reusing existing platform components.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../portlet/taskManagement_en.properties      |   2 +
 .../main/webapp/WEB-INF/gatein-resources.xml  |   3 +
 webapps/src/main/webapp/skin/css/tasks.less   | 455 +++---------------
 .../vue-app/task-favorite-menu/extensions.js  |   7 -
 .../components/Project/ProjectCard.vue        |  33 +-
 .../components/Project/ProjectCardFront.vue   | 332 +++++++------
 .../components/Project/ProjectCardList.vue    |  43 +-
 .../components/Project/ProjectCardReverse.vue | 151 ------
 .../components/Project/ProjectListToolbar.vue | 128 ++---
 .../ProjectTasks/TasksViewGantt.vue           |  19 +-
 .../ProjectTasks/TasksViewToolbar.vue         |  15 +
 .../components/tasks/TasksListToolbar.vue     | 152 ++----
 .../tasks-management/initComponents.js        |   2 -
 13 files changed, 434 insertions(+), 908 deletions(-)
 delete mode 100644 webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardReverse.vue

diff --git a/webapps/src/main/resources/locale/portlet/taskManagement_en.properties b/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
index db8a77a62..3673cfeab 100644
--- a/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
+++ b/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
@@ -116,6 +116,7 @@ label.label.titleProject=Project title
 label.untitledTask=Untitled Task
 label.description=Description
 label.noDescription=No description available
+label.project.card.tasksCount={0} tasks
 label.inviteManagers=Invite Managers
 label.inviteParticipant=@mention someone
 label.searchPlaceholder=Start typing to search
@@ -395,6 +396,7 @@ label.project.filter.all=All Projects
 label.project.filter.managed=I manage
 label.project.filter.collaborated=I collaborate to
 label.project.filter.with_tasks=With tasks
+label.project.filter.favorites=Favorites
 label.project.filter.hidden=Hidden
 #timeConvert
 task.timeConvert.Less_Than_A_Minute=less than a minute ago
diff --git a/webapps/src/main/webapp/WEB-INF/gatein-resources.xml b/webapps/src/main/webapp/WEB-INF/gatein-resources.xml
index f55e08b43..a6c54e460 100644
--- a/webapps/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/webapps/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -260,6 +260,9 @@
       <depends>
         <module>taskCommentsDrawer</module>
       </depends>
+      <depends>
+        <module>applicationToolbarComponent</module>
+      </depends>
       <depends>
         <module>ExtendedDomPurify</module>
       </depends>
diff --git a/webapps/src/main/webapp/skin/css/tasks.less b/webapps/src/main/webapp/skin/css/tasks.less
index 797985dde..5b0e30caa 100644
--- a/webapps/src/main/webapp/skin/css/tasks.less
+++ b/webapps/src/main/webapp/skin/css/tasks.less
@@ -23,6 +23,85 @@
 
 /*----------------------Tasks Management ---------------------*/
 
+/* The shared application-toolbar keeps a 16px .v-toolbar__content padding even
+   with px-0; remove it on the Projects/Tasks list toolbars so the Add button
+   and the right-hand controls line up with the cards' edges. */
+#projectListToolbar > .v-toolbar__content,
+#tasksListToolbar > .v-toolbar__content {
+  /* Flush with the content on both edges. The project grid uses a symmetric
+     column gutter (row mx-n2 + col px-2), so cards align to the container edges
+     and the toolbar lines up without any extra padding. */
+  padding-inline-start: 0 !important;
+  padding-inline-end: 0 !important;
+}
+
+/* Redesigned project card (single face, colored initials monogram). */
+.projectCardItem {
+  position: relative;
+  height: 175px;
+  border-radius: 8px;
+  text-align: start;
+  overflow: hidden;
+  .projectCardColorBar {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    border: 0 !important;
+  }
+  .projectMonogramDefault {
+    background: var(--allPagesPrimaryColor, #476A9C);
+  }
+  .projectCardTitle {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.3;
+    text-align: start;
+  }
+  .projectCardDescription {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    min-height: 36px;
+    font-size: 13px;
+    color: @greyColorLighten1;
+    text-align: start;
+  }
+  .projectCardHeading {
+    text-align: start;
+  }
+  .projectCardFooter {
+    border-top: 1px solid @borderColor;
+  }
+  .projectCardProgress {
+    .projectCardProgressBar {
+      width: 72px;
+      height: 6px;
+      border-radius: 3px;
+      overflow: hidden;
+      background-color: #e0e0e0;
+    }
+    .projectCardProgressSegment {
+      height: 100%;
+      min-width: 2px;
+      transition: width .2s ease;
+    }
+  }
+}
+
+/* Placeholder cards shown while the first page of projects is loading. */
+.projectCardSkeleton.v-skeleton-loader {
+  height: 175px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid @borderColor;
+  .v-skeleton-loader__article {
+    padding-top: 16px;
+  }
+}
+
 .addProjectDrawer {
   hr.my-0.v-divider.theme--light{
     margin-top: 5px!important;
@@ -716,357 +795,6 @@
   .tasksListContainer {
     .projectItem {
       position: relative;
-      .taskCardFlip {
-        transition: 0.6s;
-        transform-style: preserve-3d;
-        position: relative;
-        min-height: @taskCardParentMaxHeight;
-        padding: 0;
-        .taskCardFront {
-          z-index: 2;
-          transform: rotateY(0deg);
-          -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-          position: absolute;
-          top: 0;
-          left: 0 ~'; /** orientation=lt */ ';
-          right: 0 ~'; /** orientation=rt */ ';
-          height: @taskCardMaxHeight;
-          max-height: @taskCardMaxHeight;
-          width: 100%;
-          max-width: 100%;
-          .asparagus_border_bottom {
-            border-bottom-color: #909958 !important;
-          }
-          .laurel_green_border_bottom {
-            border-bottom-color: #BED67E !important;
-          }
-          .moss_green_border_bottom {
-            border-bottom-color: #98CC81 !important;
-          }
-          .munsell_blue_border_bottom {
-            border-bottom-color: #319AB3 !important;
-          }
-          .sky_blue_border_bottom {
-            border-bottom-color: #4DBED9 !important;
-          }
-          .powder_blue_border_bottom {
-            border-bottom-color: #9EE4F5 !important;
-          }
-          .baby_blue_border_bottom {
-            border-bottom-color: #B2E2FF !important;
-          }
-          .navy_blue_border_bottom {
-            border-bottom-color: #4273C8 !important;
-          }
-          .blue_gray_border_bottom {
-            border-bottom-color: #8EB0EA !important;
-          }
-          .light_blue_border_bottom {
-            border-bottom-color: #B3CFFF !important;
-          }
-          .light_gray_border_bottom {
-            border-bottom-color: #CDCDCD !important;
-          }
-          .purple_border_bottom {
-            border-bottom-color: #774EA9 !important;
-          }
-          .light_purple_border_bottom {
-            border-bottom-color: #BC99E7 !important;
-          }
-          .pink_border_bottom {
-            border-bottom-color: #FFC8F0 !important;
-          }
-          .beige_border_bottom {
-            border-bottom-color: #FFE1BE !important;
-          }
-          .hot_pink_border_bottom {
-            border-bottom-color: #F97575 !important;
-          }
-          .light_brown_border_bottom {
-            border-bottom-color: #C5B294 !important;
-          }
-          .gray_border_bottom {
-            border-bottom-color: #A39594 !important;
-          }
-          .plum_border_bottom {
-            border-bottom-color: #CEA6AC !important;
-          }
-          .Orange_border_bottom {
-            border-bottom-color: #FFA500 !important;
-          }
-          .green_border_bottom {
-            border-bottom-color: #4CAF50 !important;
-          }
-          .red_border_bottom {
-            border-bottom-color: #F44336 !important;
-          }
-          .yellow_border_bottom {
-            border-bottom-color: #ffeb3b !important;
-          }
-          .brown_border_bottom {
-            border-bottom-color: #795548 !important;
-          }
-          .tasksCardItem {
-            height: @taskCardMaxHeight;
-            max-height: @taskCardMaxHeight;
-            flex-direction: column;
-            border: 1px solid @borderColor;
-            background-color: transparent!important;
-            border-bottom-width: 5px;
-            border-bottom-style: solid;
-            .taskItemToolbar {
-              background-color: transparent !important;
-              i {
-                color: @greyColorLighten1!important;
-              }
-              .projectCardTitle {
-                color: @textColor!important;
-                padding-left: 8px ~'; /** orientation=lt */ ';
-                padding-right: 8px ~'; /** orientation=rt */ ';
-              }
-              .uiIconInformation {
-                font-size: 20px;
-                margin-top: -3px;
-              }
-              .uiIconVerticalDots {
-                font-size: 16px;
-                margin-top: -3px;
-              }
-              .projectCardTitle {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-width: 75%;
-                width: 75%;
-                cursor: pointer;
-              }
-            }
-            .noProjectColor {
-              background: @lightGrey;
-              .toolbarNoColor {
-                color: @baseColorLight;
-              }
-            }
-            .taskItemInfo {
-              padding: 8px!important;
-              .taskItemDescription {
-                min-height: 70px;
-                display: -webkit-box;
-                -webkit-line-clamp: 4;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-height: 50%;
-                cursor: pointer;
-                p {
-                  margin-bottom: 0;
-                  color: @borderColorLight;
-                }
-                .noProjectDescription {
-                  color: @borderColorLight;
-                  font-size: @textFontSize;
-                }
-              }
-              .largeDescriptionArea {
-                margin-bottom: 0!important;
-              }
-              .ProjectSpace {
-                .v-list-item {
-                  min-height: 38px!important;
-                  .noSpaceProjectIcon {
-                    height: 28px;
-                    min-width: 28px;
-                    width: 28px;
-                    background: @greyColor;
-                    color: white;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                  }
-                  .noSpaceLabel {
-                    color: @greyColorLighten1;
-                  }
-                }
-              }
-            }
-            .SpaceAdmin {
-              position: absolute;
-              bottom: 0;
-              width: 100%;
-              padding: 0 10px;
-              .v-list-item {
-                min-height: 38px!important;
-              }
-              .spaceAdminWrapper {
-                position: relative;
-                z-index: 2;
-                .managerAvatarsList {
-                  .seeMoreAvatars {
-                    .seeMoreItem {
-                      position: relative;
-                      &:before {
-                        content: "";
-                        width: 100%;
-                        height: 100%;
-                        position: absolute;
-                        background: @baseColorMedium;
-                        border-radius: 50%;
-                        opacity: .5;
-                        z-index: 1;
-                      }
-                      .seeMoreAvatarList {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        text-align: center;
-                        width: 30px;
-                        height: 30px;
-                        color: white;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        cursor: pointer;
-                        font-size: 15px;
-                        font-weight: bold;
-                        z-index: 1;
-                      }
-                    }
-                  }
-                }
-                .AllManagerAvatar {
-                  box-shadow: 0 0 2px 1px @greyColor;
-                  border-radius: 25px;
-                  z-index: 1;
-                  background: white;
-                  .uiIconArrowBack {
-                    font-size: 12px;
-                    padding-top: 6px;
-                    padding-left: 4px ~'; /** orientation=lt */ ';
-                    padding-right: 4px ~'; /** orientation=rt */ ';
-                    cursor: pointer;
-                  }
-                }
-              }
-            }
-          }
-        }
-        .tasksCardBack {
-          transform: rotateY(180deg);
-          backface-visibility: hidden;
-          -webkit-backface-visibility: hidden;
-          position: absolute;
-          top: 0;
-          left: 0 ~'; /** orientation=lt */ ';
-          right: 0 ~'; /** orientation=rt */ ';
-          height: @taskCardMaxHeight;
-          max-height: @taskCardMaxHeight;
-          width: 100%;
-          max-width: 100%;
-          .tasksCardItem {
-            height: @taskCardMaxHeight;
-            max-height: @taskCardMaxHeight;
-            flex-direction: column;
-            border: 1px solid @borderColor;
-            position: relative;
-            background-color: transparent!important;
-            border-bottom-width: 5px!important;
-            border-bottom-style: solid;
-            .projectDetailsReverse {
-              position: relative;
-              .reverseInfoIcon {
-                position: absolute;
-                top: 12px;
-                color: @greyColorLighten1;
-                font-size: 20px;
-              }
-            }
-            .noTasksProject {
-              height: 80%;
-              text-align: center;
-              padding-top: 50px;
-              padding-bottom: 24px;
-
-              .noTasksProjectIcon {
-                .uiIconTask {
-                  color: @greyColor;
-                  font-size: 40px;
-                  padding-bottom: 10px;
-                }
-              }
-            }
-            .echartStatsContent {
-              justify-content: space-evenly;
-              .echartAndLabel {
-                position: relative;
-                .projectTasksTotalNumber {
-                  position: absolute;
-                  left: 60px ~'; /** orientation=lt */ ';
-                  right: 60px ~'; /** orientation=rt */ ';
-                  top: 35%;
-                  span {
-                    display: block;
-                    text-align: center;
-                  }
-                  .totalNumber {
-                    font-size: 1.5rem;
-                  }
-                }
-              }
-              .projectStatusNumber{
-                width: 40%;
-                p {
-                  position: relative;
-                  &:before {
-                    position: absolute;
-                    content: '';
-                    width: 7px;
-                    height: 7px;
-                    border-radius: 50%;
-                    margin-left: -15px ~'; /** orientation=lt */ ';
-                    margin-right: -15px ~'; /** orientation=rt */ ';
-                    top: 5px;
-                  }
-                }
-                .blueLabel {
-                  &:before {
-                    background: @infoColor;
-                  }
-                }
-                .yellowLabel {
-                  &:before {
-                    background: @warningColor;
-                  }
-                }
-                .redLabel {
-                  &:before {
-                    background: @errorColor;
-                  }
-                }
-                .greenLabel {
-                  &:before {
-                    background: @successColor;
-                  }
-                }
-                .purpleLabel {
-                  &:before {
-                    background: #9834eb;
-                  }
-                }                                         
-                .grayLabel {
-                  &:before {
-                    background: @baseColorMedium;
-                  }
-                }                     
-              }
-            }
-          }
-        }
-      }
-      .taskCardFlipped {
-        transform: rotateY(180deg);
-      }
       .projectActionMenu {
         right: 27px ~'; /** orientation=lt */ ';
         left: 27px ~'; /** orientation=rt */ ';
@@ -2881,31 +2609,6 @@
                      GANTT CHART STYLE
 -----------------------------------------------------------*/
 .gantt-wrapper {
-  .unscheduled-task-container {
-    position: absolute;
-    z-index: 999;
-    top: 50%;
-    left: 30px;
-    .unscheduled-task-btn {
-      background-color: @greyColor!important;
-      .mdi-calendar-range {
-        color: @baseColorLight!important;
-      }
-      .unscheduled-task-badge {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        top: -5px;
-        right: 1px;
-        background: @warningColor;
-        font-size: 10px;
-        border-radius: 50%;
-        width: 18px;
-        height: 18px;
-    }
-    }
-  }
   .gantt-chart-container {
     padding-top: 20px;
     .gantt-tasks-title {
diff --git a/webapps/src/main/webapp/vue-app/task-favorite-menu/extensions.js b/webapps/src/main/webapp/vue-app/task-favorite-menu/extensions.js
index b3358ee06..251b8da8a 100644
--- a/webapps/src/main/webapp/vue-app/task-favorite-menu/extensions.js
+++ b/webapps/src/main/webapp/vue-app/task-favorite-menu/extensions.js
@@ -27,13 +27,6 @@ extensionRegistry.registerComponent('TaskProjectBoard', 'task-board-header', {
   vueComponent: Vue.options.components['project-favorite-board-header-action'],
 });
 
-// Favorite toggle as a menu row, used in the project card 3-dots menu
-// (ProjectCardFront.vue) and the board header overflow 3-dots when collapsed.
-extensionRegistry.registerComponent('TaskProjectMenu', 'task-project-menu', {
-  id: 'project-favorite',
-  rank: 5,
-  vueComponent: Vue.options.components['project-favorite-menu-action'],
-});
 
 // Add the favorite toggle inside the task drawer 3-dots menu
 // (consumed by TaskDrawer.vue via loadExtensions('Task', 'task-menu')).
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue
index 4d6b006b6..fe6140070 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue
@@ -15,23 +15,12 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div id="projectCard">
-    <v-flex :class="flipCard && 'taskCardFlip taskCardFlipped' || 'taskCardFlip'">
-      <div class="taskCardFront py-3 pe-4">
-        <project-card-front
-          :project="project"
-          @openDrawer="openEditDrawer"
-          @closed="onCloseDrawer"
-          @refreshProjects="refreshProjects"
-          @flip="flipCard = true; flip()" />
-      </div>
-      <div class="tasksCardBack py-3 pe-4">
-        <project-card-Reverse
-          ref="reversCard"
-          :project="project"
-          @flip="flipCard = false; flip()" />
-      </div>
-    </v-flex>
+  <div id="projectCard" class="py-3">
+    <project-card-front
+      :project="project"
+      @openDrawer="openEditDrawer"
+      @closed="onCloseDrawer"
+      @refreshProjects="refreshProjects" />
   </div>
 </template>
 <script>
@@ -42,11 +31,6 @@ export default {
       default: () => ({}),
     }
   },
-  data () {
-    return {
-      flipCard: false,
-    };
-  },
   methods: {
     openEditDrawer() {
       this.$root.$emit('open-project-drawer', this.project);
@@ -57,11 +41,6 @@ export default {
     refreshProjects: function(){
       this.$emit('refreshProjects');
     },
-    flip: function(){
-      if (this.flipCard){
-        this.$refs.reversCard.getStats(this.project);
-      }
-    }
   }
 };
 </script>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardFront.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardFront.vue
index 72a5fb280..d54178e97 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardFront.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardFront.vue
@@ -15,141 +15,150 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <v-card 
-    :class="project.color && project.color+'_border_bottom' || ''"
-    class="tasksCardItem"
+  <v-card
+    :id="`project-${project.id}`"
+    class="projectCardItem d-flex flex-column"
     flat
     outlined
     hover>
-    <div class="taskItemToolbar d-flex px-2 align-center font-weight-bold">
-      <i
-        :class="project.color && 'white--text' || 'toolbarNoColor'"
-        icon
-        small
-        class="uiIconInformation taskInfoIcon d-flex"
-        @click="$emit('flip')">
-      </i>
-      <div class="spacer d-none d-sm-inline"></div>
-      <span
-        :class="project.color && 'white--text' || 'toolbarNoColor'"
-        class="projectCardTitle py-3"
-        @click="showProjectTasksDetails(project)">
-        {{ project.name }}
-      </span>
-      <v-spacer />
-      <i
-        v-if="project.canManage"
-        :class="project.color && 'white--text' || 'toolbarNoColor'"
-        icon
-        small
-        class="uiIconVerticalDots taskInfoIcon d-flex"
-        @click="displayActionMenu = true">
-      </i>
-      <v-menu
-        v-model="displayActionMenu"
-        :attach="`#project-${project.id}`"
-        transition="slide-x-reverse-transition"
-        content-class="projectActionMenu"
-        offset-y>
-        <v-list class="pa-0" dense>
-          <v-list-item class="menu-list" @click="openEditDrawer()">
-            <v-list-item-title class="subtitle-2">
-              <i class="uiIcon uiIconEdit pe-1"></i>
-              <span>{{ $t('label.edit') }}</span>
-            </v-list-item-title>
-          </v-list-item>
-          <extension-registry-components
-            :params="{
-              project,
-            }"
-            name="TaskProjectMenu"
-            type="task-project-menu"
-            parent-element="div"
-            element="div" />
-          <v-list-item class="draftButton" @click="confirmDeleteProject()">
-            <v-list-item-title class="subtitle-2">
-              <i class="uiIcon uiIconTrash pe-1"></i>
-              <span>{{ $t('label.delete') }}</span>
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item class="clone" @click="confirmCloneProject()">
-            <v-list-item-title class="subtitle-2">
-              <i class="uiIcon uiIconCloneNode pe-1"></i>
-              <span>{{ $t('label.clone') }}</span>
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item class="px-2 noColorLabel">
-            <v-list-item-title class="noColorLabel caption text-center text&#45;&#45;secondary">
-              <span @click="changeColorProject(project,'')">{{ $t('label.noColor') }}</span>
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item>
-            <v-list-item-title class="subtitle-2 row projectColorPicker mx-auto my-2">
-              <span
-                v-for="(color, i) in projectColors"
-                :key="i"
-                :class="[ color.class , color.class === project.color ? 'isSelected' : '']"
-                class="projectColorCell"
-                @click="changeColorProject(project,color.class)"></span>
-            </v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </div>
-    <div class="taskItemInfo pa-3">
+    <!-- Left accent bar carrying the project color -->
+    <div
+      :class="project.color || 'projectMonogramDefault'"
+      class="projectCardColorBar"></div>
+    <!-- Header: project name/space + favorite & actions (identity carried by the left color bar) -->
+    <div class="d-flex align-start px-3 pt-3">
       <div
-        :class="getClassDescription()"
-        class="taskItemDescription"
+        class="projectCardHeading flex-grow-1 text-truncate pointer"
         @click="showProjectTasksDetails(project)">
-        <p
-          v-if="project.description">
-          {{ getDescription() }}
-        </p>
-        <div v-else>
-          <span class="noProjectDescription">{{ $t('label.noDescription') }}</span>
+        <div class="projectCardTitle text-truncate">{{ project.name }}</div>
+        <div
+          v-if="!isInSpace && project.space && projectSpace && projectSpace.displayName"
+          class="d-flex align-center text-truncate mt-1">
+          <exo-space-avatar
+            :space="space"
+            :size="18"
+            link-style />
         </div>
       </div>
-      <div class="ProjectSpace">
-        <div v-if="project.space">
-          <exo-space-avatar 
-            :space="space" 
-            :size="28"
-            link-style
-            popover />
-        </div>
+      <div class="d-flex align-center flex-shrink-0">
+        <favorite-button
+          v-if="objectId"
+          :id="objectId"
+          :favorite="isFavorite"
+          :space-id="favoriteSpaceId"
+          type="project"
+          type-label="project" />
+        <v-btn
+          v-if="project.canManage"
+          class="px-0 ms-1"
+          icon
+          small
+          @click="displayActionMenu = true">
+          <v-icon size="18" class="text-light-color">fa-ellipsis-v</v-icon>
+        </v-btn>
+        <v-menu
+          v-model="displayActionMenu"
+          :attach="`#project-${project.id}`"
+          transition="slide-x-reverse-transition"
+          content-class="projectActionMenu"
+          offset-y>
+          <v-list class="pa-0" dense>
+            <v-list-item class="menu-list" @click="openEditDrawer()">
+              <v-list-item-title class="subtitle-2">
+                <i class="uiIcon uiIconEdit pe-1"></i>
+                <span>{{ $t('label.edit') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+            <extension-registry-components
+              :params="{
+                project,
+              }"
+              name="TaskProjectMenu"
+              type="task-project-menu"
+              parent-element="div"
+              element="div" />
+            <v-list-item class="draftButton" @click="confirmDeleteProject()">
+              <v-list-item-title class="subtitle-2">
+                <i class="uiIcon uiIconTrash pe-1"></i>
+                <span>{{ $t('label.delete') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item class="clone" @click="confirmCloneProject()">
+              <v-list-item-title class="subtitle-2">
+                <i class="uiIcon uiIconCloneNode pe-1"></i>
+                <span>{{ $t('label.clone') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item class="px-2 noColorLabel">
+              <v-list-item-title class="noColorLabel caption text-center text--secondary">
+                <span @click="changeColorProject(project,'')">{{ $t('label.noColor') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title class="subtitle-2 row projectColorPicker mx-auto my-2">
+                <span
+                  v-for="(color, i) in projectColors"
+                  :key="i"
+                  :class="[ color.class , color.class === project.color ? 'isSelected' : '']"
+                  class="projectColorCell"
+                  @click="changeColorProject(project,color.class)"></span>
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
       </div>
     </div>
-    <div class="SpaceAdmin">
-      <v-divider />
-      <div class="spaceAdminContainer">
-        <div class="spaceAdminWrapper">
-          <exo-user-avatar 
-            v-if="avatarToDisplay && avatarToDisplay.length === 1"
-            :profile-id="avatarToDisplay[0].userName"
-            :size="28"
-            :extra-class="'my-2'"
-            link-style
-            popover />
-          <div
-            v-else
-            :class="showAllAvatarList && 'AllManagerAvatar'"
-            :style="`min-height:${avatarSize}px`"
-            class="managerAvatarsList d-flex flex-nowrap my-2">
-            <exo-user-avatars-list
-              :users="avatarToDisplay"
-              :max="5"
-              :icon-size="avatarSize"
-              :margin-left="avatarToDisplay.length > 1 && 'ml-n4' || ''"
-              :compact="avatarToDisplay.length > 1"
-              extra-class="position-absolute"
-              clickable="'false'"
-              avatar-overlay-position
-              retrieve-extra-information
-              @open-detail="$root.$emit('displayProjectManagers', avatarToDisplay)" />
-          </div>
+
+    <!-- Description -->
+    <div
+      class="px-3 mt-3 projectCardDescription pointer"
+      @click="showProjectTasksDetails(project)">
+      <span v-if="hasDescription">{{ getDescription() }}</span>
+      <span v-else class="text-light-color font-italic">{{ $t('label.noDescription') }}</span>
+    </div>
+
+    <v-spacer />
+
+    <!-- Footer: member avatars + task count -->
+    <div class="px-3 pt-3 pb-2 mt-3 d-flex align-center projectCardFooter">
+      <exo-user-avatars-list
+        v-if="avatarToDisplay.length"
+        :users="avatarToDisplay"
+        :max="4"
+        :icon-size="28"
+        :margin-left="avatarToDisplay.length > 1 && 'ml-n3' || ''"
+        :compact="avatarToDisplay.length > 1"
+        retrieve-extra-information
+        @open-detail="$root.$emit('displayProjectManagers', avatarToDisplay)" />
+      <span v-else class="caption text-light-color">{{ $t('message.noManager') }}</span>
+      <v-spacer />
+      <div
+        v-if="tasksCount"
+        class="projectCardProgress d-flex align-center flex-shrink-0">
+        <span class="caption text-light-color me-2">{{ tasksCount }}</span>
+        <div class="projectCardProgressBar d-flex">
+          <v-tooltip
+            v-for="segment in statusSegments"
+            :key="segment.name"
+            bottom>
+            <template #activator="{ on, attrs }">
+              <div
+                class="projectCardProgressSegment"
+                :style="{ width: `${segment.pct}%`, backgroundColor: segment.color }"
+                v-bind="attrs"
+                v-on="on"></div>
+            </template>
+            <span>{{ segment.value }} - {{ segment.name }}</span>
+          </v-tooltip>
         </div>
       </div>
+      <span
+        v-else-if="tasksCount === 0"
+        class="caption text-light-color flex-shrink-0">
+        {{ $t('label.project.card.tasksCount', {0: 0}) }}
+      </span>
     </div>
+
     <exo-confirm-dialog
       ref="CancelSavingChangesDialog"
       :message="$t('popup.msg.delete', {0: project.name})"
@@ -178,6 +187,13 @@ export default {
     return {
       displayActionMenu: false,
       waitTimeUntilCloseMenu: 200,
+      tasksCount: null,
+      statusStats: [],
+      statusRanks: {},
+      // Palette for the per-status progress segments, indexed by the status
+      // column rank so a given status keeps the same colour on every card:
+      // ToDo (slate) -> InProgress (blue) -> WaitingOn (amber) -> Done (green).
+      statusPalette: ['#94a3b8', '#60a5fa', '#fbbf24', '#34d399', '#a78bfa', '#f87171'],
       projectColors: [
         { class: 'asparagus' },
         { class: 'munsell_blue' },
@@ -206,10 +222,22 @@ export default {
       ],
       managerIdentities: this.project && this.project.managerIdentities,
       projectSpace: {},
-      avatarSize: 28
     };
   },
   computed: {
+    hasDescription() {
+      return !!(this.project && this.project.description && this.getDescription().trim().length);
+    },
+    objectId() {
+      return this.project && this.project.id && String(this.project.id);
+    },
+    isFavorite() {
+      return !!(this.project && this.project.favorite);
+    },
+    favoriteSpaceId() {
+      return this.project && this.project.spaceDetails && this.project.spaceDetails.id
+        && String(this.project.spaceDetails.id);
+    },
     avatarToDisplay () {
       const projectManagersList = [];
       if ( this.managerIdentities && this.managerIdentities.length ) {
@@ -222,7 +250,30 @@ export default {
     },
     space() {
       return this.projectSpace;
-    }
+    },
+    isInSpace() {
+      // When the portlet is displayed inside a space, every project belongs to
+      // that space, so the per-card space chip is redundant.
+      return !!(eXo.env.portal.spaceId);
+    },
+    statusSegments() {
+      if (!this.tasksCount) {
+        return [];
+      }
+      return this.statusStats
+        .filter(stat => stat.value > 0)
+        .map(stat => {
+          const rank = this.statusRanks[stat.name] || 0;
+          return {
+            name: stat.name,
+            value: stat.value,
+            rank,
+            pct: Math.round((stat.value / this.tasksCount) * 100),
+            color: this.statusPalette[rank % this.statusPalette.length],
+          };
+        })
+        .sort((a, b) => a.rank - b.rank);
+    },
   },
   created() {
     $(document).on('mousedown', () => {
@@ -235,10 +286,31 @@ export default {
     this.$root.$on('update-projects-list-avatar',managerIdentities =>{
       this.project.managerIdentities=managerIdentities;
     });
-    if (this.project && this.project.space && this.project.spaceDetails ) {
+    if (!this.isInSpace && this.project && this.project.space && this.project.spaceDetails ) {
       this.retrieveSpaceInformation(this.project.spaceDetails.id);
     }
   },
+  mounted() {
+    if (this.project && this.project.id && this.$projectService && this.$projectService.getProjectStats) {
+      // Order the status segments by their column rank so the bar mirrors the
+      // board's left-to-right workflow; counts come from the statistics endpoint.
+      // Both are awaited together so the ranks are known on the first render of
+      // the segments (otherwise re-sorting after a late ranks fetch wouldn't
+      // reorder the keyed v-tooltip nodes already in the DOM).
+      const statusesPromise = this.$tasksService && this.$tasksService.getStatusesByProjectId
+        ? this.$tasksService.getStatusesByProjectId(this.project.id).catch(() => [])
+        : Promise.resolve([]);
+      Promise.all([statusesPromise, this.$projectService.getProjectStats(this.project.id)])
+        .then(([statuses, data]) => {
+          const ranks = {};
+          (statuses || []).forEach(status => ranks[status.name] = status.rank);
+          this.statusRanks = ranks;
+          this.tasksCount = data && data.totalNumberTasks || 0;
+          this.statusStats = data && data.statusStats || [];
+        })
+        .catch(() => this.tasksCount = null);
+    }
+  },
   methods: {
     showProjectTasksDetails(project) {
       document.dispatchEvent(new CustomEvent('showProjectTasks', {detail: project}));
@@ -285,19 +357,11 @@ export default {
       text = div.textContent || div.innerText || '';
       return text;
     },
-    getClassDescription(){
-      if (this.project && !this.project.space){
-        return 'largeDescriptionArea';
-      } else if (this.project && this.project.space){
-        return 'largeDescriptionAreaSpace';
-      }
-    },
     retrieveSpaceInformation(spaceId) {
       this.$spaceService.getSpaceById(spaceId, 'favorite').then(space => {
         this.projectSpace = space;
       });
     }
   },
-
 };
 </script>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue
index fbaabc229..270f220bb 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue
@@ -37,20 +37,42 @@
         </span>
       </v-btn>
     </div>
+    <div v-else-if="showSkeleton">
+      <v-card flat class="transparent">
+        <v-container class="full-width pa-0 py-4">
+          <v-row class="mx-n2 my-0 border-box-sizing">
+            <v-col
+              v-for="n in skeletonCount"
+              :key="`project-skeleton-${n}`"
+              cols="12"
+              md="6"
+              lg="4"
+              xl="4"
+              class="px-2 py-0 projectItem">
+              <div class="py-3">
+                <v-skeleton-loader
+                  type="article"
+                  class="projectCardSkeleton" />
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+    </div>
     <div v-else>
       <v-card flat class="transparent">
         <v-item-group class="py-4">
           <v-container class="full-width pa-0">
-            <v-row class="ma-0 border-box-sizing">
+            <v-row class="mx-n2 my-0 border-box-sizing">
               <v-col
-                v-for="project in projects"
+                v-for="project in displayedProjects"
                 :key="project.id"
                 :id="`project-${project.id}`"
                 cols="12"
                 md="6"
                 lg="4"
                 xl="4"
-                class="pa-0 projectItem">
+                class="px-2 py-0 projectItem">
                 <project-card
                   :project="project"
                   @refreshProjects="searchProjects" />
@@ -110,12 +132,27 @@ export default {
     };
   },
   computed: {
+    displayedProjects() {
+      // The backend has no "favorites" filter, so filter the loaded list by the
+      // favorite flag client-side when that option is selected.
+      if (this.projectFilterSelected === 'FAVORITES') {
+        return this.projects.filter(project => project.favorite);
+      }
+      return this.projects;
+    },
     canShowMore() {
       return this.loadingProjects || this.projects.length >= this.limitToFetch;
     },
     showPlaceholder() {
       return !this.projects?.length && !this.loadingProjects;
     },
+    showSkeleton() {
+      // Initial load: show placeholder cards until the first page arrives.
+      return this.loadingProjects && !this.projects?.length;
+    },
+    skeletonCount() {
+      return Math.min(this.limit, 6);
+    },
     showPlaceholderResetSearch() {
       return this.projectFilterSelected !== 'ALL' || this.keyword?.length;
     },
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardReverse.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardReverse.vue
deleted file mode 100644
index 043bda8ad..000000000
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardReverse.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<!--
-  This file is part of the Meeds project (https://meeds.io/).
-  Copyright (C) 2022 Meeds Association
-  contact@meeds.io
-  This program is free software; you can redistribute it and/or
-  modify it under the terms of the GNU Lesser General Public
-  License as published by the Free Software Foundation; either
-  version 3 of the License, or (at your option) any later version.
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-  Lesser General Public License for more details.
-  You should have received a copy of the GNU Lesser General Public License
-  along with this program; if not, write to the Free Software Foundation,
-  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
--->
-<template>
-  <v-card 
-    class="tasksCardItem" 
-    flat
-    outlined
-    hover>
-    <div class="projectDetailsReverse pa-3">
-      <i
-        icon
-        small
-        class="uiIconInformation taskInfoIcon reverseInfoIcon d-flex"
-        @click="$emit('flip')">
-      </i>
-      <div class="projectDetails d-flex">
-        <p class="font-weight-bold ma-auto ">{{ $t('label.projectDetail') }}</p>
-      </div>
-    </div>
-    <div 
-      v-if=" totalLeftTasks > 0 "
-      class="echartStatsContent d-flex justify-space-evently align-center px-2"
-      style="margin:auto;">
-      <div class="echartAndLabel">
-        <div 
-          :id="'echartProjectTasks'+project.id" 
-          class="echartPieContent" 
-          style="width:160px; height:200px;"></div>
-        <div class="projectTasksTotalNumber">
-          <span class="totalNumber font-weight-bold">{{ totalLeftTasks }}</span>
-          <span class="text-body-2 totalLabel">{{ $t('exo.tasks.label.leftTasks') }}</span>
-        </div>
-      </div>
-
-      <div v-if="statistics" class="projectStatusNumber ps-4">
-        <p 
-          v-for="(item , index) in statistics"
-          :key="item.name" 
-          class="d-flex justify-space-between mb-1"
-          :class="statusStyle[index]">
-          <span class="caption text-truncate">{{ item.name }}</span>
-          <span>{{ item.value }}</span>
-        </p> 
-      </div>
-    </div>
-    <div v-else class="noTasksProject">
-      <div class="noTasksProjectIcon"><i class="uiIcon uiIconTask"></i></div>
-      <div class="noTasksProjectLabel"><span>{{ $t('label.noTasks') }}</span></div>
-    </div>
-  </v-card>
-</template>
-<script>
-export default {
-  props: {
-    project: {
-      type: Object,
-      default: null,
-    }
-  },
-  data() {
-    return {
-      statusStyle: ['blueLabel','greenLabel','redLabel','yellowLabel','purpleLabel', 'grayLabel'],
-      statusColors: ['#476a9c', '#2eb58c', '#bc4343', '#ffb441', '#9834eb', '#808080'],      
-      totalLeftTasks: 0,
-      statistics: [],
-      option: {
-        tooltip: {
-          trigger: 'item',
-          position: function (point) {
-            return { left: point[0] - 100};
-          },
-          formatter: '{b}:<br/> {c} ({d}%)'
-        },
-        series: [
-          {
-            type: 'pie',
-            center: ['50%', '50%'],
-            radius: ['80%', '75%'],
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: 'center'
-            },
-            emphasis: {
-              label: {
-                show: false,
-                fontSize: '15',
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: false
-            },
-            data: [],
-          }
-        ],
-        color: this.statusColors
-      }
-    };
-  },
-
-  methods: {
-    initChart(option) {
-      const holder_chart = $(`#echartProjectTasks${this.project.id}`)[0];
-      if (holder_chart){
-        const chart = echarts.init(holder_chart);
-        chart.setOption(option, true);
-      }
-    },
-    getStats(project){
-      this.$projectService.getProjectStats(project.id).then(data => {
-        this.totalLeftTasks = data.totalNumberTasks || 0;
-        let otherTasksCount = 0;
-        this.statistics = data.statusStats.sort((a, b) => b.value - a.value).map(item => {
-          return { ...item, name: this.getI18N(item.name) };
-        });        
-        if (data.statusStats.length>5){
-          otherTasksCount= data.statusStats.length-5;
-          this.statistics.splice(5,otherTasksCount,{ 'name': this.$t('Others'), 'value': otherTasksCount });
-        }
-        if (this.statistics?.length) {
-          this.option.series[0].data = this.statistics;
-          this.option.color = this.statusColors;
-          window.setTimeout(() => {
-            this.initChart(this.option);
-          },200);
-        }
-      });
-    },
-    getI18N(label){
-      const fieldLabelI18NKey = `tasks.status.${label}`;
-      const fieldLabelI18NValue = this.$t(fieldLabelI18NKey);
-      return  fieldLabelI18NValue === fieldLabelI18NKey ? label : fieldLabelI18NValue;
-    } 
-  }
-};
-</script>
\ No newline at end of file
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectListToolbar.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectListToolbar.vue
index ead2d774e..8d975c0a5 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectListToolbar.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectListToolbar.vue
@@ -15,67 +15,34 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div id="projectBoardToolbar">
-    <v-toolbar
-      id="ProjectListToolbar"
-      :class="showMobileTaskFilter && 'toolbarLarge'"
-      flat
-      class="tasksToolbar pb-3 transparent">
-      <v-toolbar-title v-if="enableCreateButton">
-        <v-btn
-          class="btn px-2 btn-primary addNewProjectButton"
-          @click="openDrawer">
-          <!--<i class="uiIcon uiIconPlus"></i>-->
-          <v-icon dark class="d-block d-sm-none">mdi-plus</v-icon>
-          <span class="d-none font-weight-regular d-sm-flex align-center">
-            <i class="uiIcon uiIconPlus"></i>
-            <span class="ms-2 addProject">{{ $t('label.addProject') }}</span> 
-          </span>
-        </v-btn>
-      </v-toolbar-title>
-      <v-scale-transition>
-        <v-icon
-          size="20"
-          class="taskFilterMobile"
-          :class="showMobileTaskFilter && 'tasksFilterMobile'"
-          @click="showMobileTaskFilter = !showMobileTaskFilter">
-          fas fa-filter
-        </v-icon>
-      </v-scale-transition>
-      <v-spacer />
-      <v-scale-transition>
-        <v-text-field
-          v-model="keyword"
-          :placeholder="$t('label.filterProject')"
-          prepend-inner-icon="fa-filter"
-          :append-outer-icon="showMobileTaskFilter && 'mdi-close'"
-          class="inputTasksFilter inputProjectFilter pa-0 ms-3 me-3 my-auto"
-          :class="showMobileTaskFilter && 'inputTasksFilterMobile'"
-          @click:append-outer="clearMessage"
-          :clearable="!showMobileTaskFilter" />
-      </v-scale-transition>
-      <v-scale-transition v-if="!spaceName">
-        <select
-          id="filterTaskSelect"
-          v-model="projectFilterSelected"
-          name="projectFilter"
-          class="selectTasksFilter my-auto me-2 subtitle-1 ignore-vuetify-classes d-sm-inline"
-          @change="changeProjectFilter">
-          <option
-            v-for="item in projectFilter"
-            :key="item.name"
-            :value="item.name">
-            {{ $t('label.project.filter.'+item.name.toLowerCase()) }}
-          </option>
-        </select>
-      </v-scale-transition>
-      <v-scale-transition>
-        <select id="widthTmpSelectTaskFilter">
-          <option id="widthTmpSelectOption"></option>
-        </select>
-      </v-scale-transition>
-    </v-toolbar>
-  </div>
+  <application-toolbar
+    id="projectListToolbar"
+    compact
+    :right-text-filter="{
+      minCharacters: 1,
+      placeholder: $t('label.filterProject'),
+      tooltip: $t('label.filterProject'),
+    }"
+    :right-select-box="{
+      hide: !!spaceName,
+      selected: projectFilterSelected,
+      items: projectFilterItems,
+    }"
+    @filter-text-input-end-typing="onKeyword"
+    @filter-select-change="onFilterChange">
+    <template #left>
+      <!-- The slot itself is always declared (ApplicationToolbar reads $slots.left
+           non-reactively); the create button is gated inside so it appears once the
+           async space permission resolves, e.g. when displayed inside a space. -->
+      <v-btn
+        v-if="enableCreateButton"
+        class="btn btn-primary addNewProjectButton text-none"
+        @click="openDrawer">
+        <v-icon size="16" dark class="me-2">fa-plus</v-icon>
+        <span>{{ $t('label.addProject') }}</span>
+      </v-btn>
+    </template>
+  </application-toolbar>
 </template>
 <script>
 export default {
@@ -96,32 +63,24 @@ export default {
   data () {
     return {
       projectFilter: [
-        {name: 'ALL'},{name: 'MANAGED'},{name: 'COLLABORATED'},{name: 'WITH_TASKS'}
+        {name: 'ALL'},{name: 'MANAGED'},{name: 'COLLABORATED'},{name: 'WITH_TASKS'},{name: 'FAVORITES'}
       ],
-      showMobileTaskFilter: false,
       currentSpace: false,
     };
   },
-  watch: {
-    keyword() {
-      this.$emit('keyword-changed', this.keyword);
-    },
-    projectFilterSelected() {
-      this.$emit('filter-changed', this.projectFilterSelected);
-    }
-  },
-  created() {
-    this.retrieveCurrentSpace();
-  },
   computed: {
     enableCreateButton() {
       return eXo.env.portal.spaceId ? this.currentSpace && this.currentSpace.canEdit : true;
-    }
+    },
+    projectFilterItems() {
+      return this.projectFilter.map(item => ({
+        value: item.name,
+        text: this.$t(`label.project.filter.${item.name.toLowerCase()}`),
+      }));
+    },
   },
-  mounted() {
-    $('#widthTmpSelectOption').html($('#filterTaskSelect option:selected').text());
-    const widthElem = $('#widthTmpSelectTaskFilter').width() + 40;
-    $('#filterTaskSelect').width(widthElem);
+  created() {
+    this.retrieveCurrentSpace();
   },
   methods: {
     retrieveCurrentSpace() {
@@ -134,14 +93,11 @@ export default {
     openDrawer() {
       this.$root.$emit('open-project-drawer', {});
     },
-    clearMessage() {
-      this.keyword = '';
-      this.showMobileTaskFilter = !this.showMobileTaskFilter;
+    onKeyword(term) {
+      this.$emit('keyword-changed', term);
     },
-    changeProjectFilter() {
-      $('#widthTmpSelectOption').html($('#filterTaskSelect option:selected').text());
-      const widthElem = $('#widthTmpSelectTaskFilter').width() + 40;
-      $('#filterTaskSelect').width(widthElem);   
+    onFilterChange(value) {
+      this.$emit('filter-changed', value);
     }
   }
 };
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
index e10e629bd..459ad4f68 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
@@ -28,19 +28,9 @@
     </div>
   </div>
   <div v-else class="gantt-wrapper">
-    <div class="unscheduled-task-container">
-      <v-btn
-        :title="$t('label.noWorkPlan.tasks')"
-        class="unscheduled-task-btn"
-        fab
-        small
-        dark
-        @click="$root.$emit('displayTasksUnscheduledDrawer', unscheduledTaskList)">
-        <v-icon>mdi-calendar-range</v-icon>
-        <span class="unscheduled-task-badge">{{ unscheduledTaskList.length }}</span>
-      </v-btn>
-    </div>
-    <div 
+    <!-- The unscheduled-tasks button now lives in the board toolbar (after the
+         extension icons), so the floating button over the gantt was removed. -->
+    <div
       id="gantt-chart"
       class="gantt-chart-container">
     </div>
@@ -103,6 +93,9 @@ export default {
           this.initGanttChart(this.tasksToDisplay);
         }
       }
+      // Publish the unscheduled list so the toolbar button (which replaced the
+      // floating button) shows the right count on the initial gantt display.
+      this.$root.$emit('refresh-unscheduled-gantt', this.unscheduledTaskList);
     });
     this.$root.$on('refresh-gantt', taskItems => {
       this.unscheduledTaskList = [];
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewToolbar.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewToolbar.vue
index a7d99987a..c3d28c549 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewToolbar.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewToolbar.vue
@@ -50,6 +50,16 @@
           parent-element="div"
           element="div"
           class="boardHeaderExtensions d-flex align-center flex-shrink-0" />
+        <v-btn
+          v-if="taskViewTabName === 'gantt'"
+          :title="$t('label.noWorkPlan.tasks')"
+          class="flex-shrink-0"
+          max-width="36"
+          max-height="36"
+          icon
+          @click="$root.$emit('displayTasksUnscheduledDrawer', unscheduledTaskList)">
+          <v-icon size="20" class="text-light-color">fa-calendar-alt</v-icon>
+        </v-btn>
         <tasks-view-switcher
           v-if="!$root.isMobile"
           :view="taskViewTabName"
@@ -126,6 +136,7 @@ export default {
       taskViewTabName: 'board',
       searchOpen: false,
       searchTimer: null,
+      unscheduledTaskList: [],
     };
   },
   created() {
@@ -135,6 +146,10 @@ export default {
       this.keyword = null;
       this.searchOpen = false;
     });
+    // The Plan/Gantt view broadcasts its unscheduled tasks; mirror the list so the
+    // toolbar button can show the count and open the drawer (replaces the floating
+    // button that used to overlay the gantt).
+    this.$root.$on('refresh-unscheduled-gantt', list => this.unscheduledTaskList = list || []);
   },
   methods: {
     openSearch() {
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListToolbar.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListToolbar.vue
index e15f63318..386c277a3 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListToolbar.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListToolbar.vue
@@ -16,75 +16,30 @@
 -->
 <template>
   <div id="TasksToolbar">
-    <v-toolbar
-      id="TasksListToolbar"
-      :class="showMobileTaskFilter && 'toolbarLarge'"
-      flat
-      class="tasksToolbar">
-      <v-toolbar-title>
-        <v-btn
-          class="btn px-2 btn-primary addNewProjectButton"
-          @click="openTaskDrawer()">
-          <v-icon dark class="d-block d-sm-none">mdi-plus</v-icon>
-          <span class="d-none font-weight-regular d-sm-inline">
-            + {{ $t('label.addTask') }}
-          </span>
-        </v-btn>
-      </v-toolbar-title>
-      <v-scale-transition>
-        <v-icon
-          size="20"
-          class="taskFilterMobile"
-          :class="showMobileTaskFilter && 'tasksFilterMobile'"
-          @click="showMobileTaskFilter = !showMobileTaskFilter">
-          fas fa-filter
-        </v-icon>
-      </v-scale-transition>
-      <v-spacer />
-      <v-spacer />
-      <v-scale-transition>
-        <v-text-field
-          v-model="keyword"
-          :placeholder=" $t('label.filterTask') "
-          prepend-inner-icon="fa-filter"
-          :append-outer-icon="showMobileTaskFilter && 'mdi-close'"
-          class="inputTasksFilter pa-0 ms-3 me-3 my-auto"
-          :class="showMobileTaskFilter && 'inputTasksFilterMobile'"
-          @click:append-outer="clearMessage"
-          :clearable="!showMobileTaskFilter" />
-      </v-scale-transition>
-      <v-scale-transition>
-        <select
-          id="filterTaskSelect"
-          v-model="primaryFilterSelected"
-          name="primaryFilter"
-          class="selectPrimaryFilter input-block-level ignore-vuetify-classes  pa-0 me-3 my-auto"
-          @change="changePrimaryFilter">
-          <option
-            v-for="item in primaryFilter"
-            :key="item.name"
-            :value="item.name">
-            {{ $t('label.dueDate.'+item.name.toLowerCase()) }}
-          </option>
-        </select>
-      </v-scale-transition>
-      <v-scale-transition>
-        <select id="widthTmpSelectTaskFilter">
-          <option id="widthTmpSelectOption"></option>
-        </select>
-      </v-scale-transition>
-      <v-scale-transition>
-        <v-btn
-          class="btn px-2 btn-primary filterTasksSetting"
-          outlined
-          @click="openDrawer">
-          <i class="uiIcon uiIconFilterSetting pe-3"></i>
-          <span class="d-none font-weight-regular caption d-sm-inline">
-            {{ $t('label.filter') }} {{ getFilterNum() }}
-          </span>
-        </v-btn>
-      </v-scale-transition>
-    </v-toolbar>
+    <application-toolbar
+      id="tasksListToolbar"
+      :left-button="{
+        icon: 'fa-plus',
+        text: $t('label.addTask'),
+      }"
+      :right-text-filter="{
+        minCharacters: 1,
+        placeholder: $t('label.filterTask'),
+        tooltip: $t('label.filterTask'),
+      }"
+      :right-select-box="{
+        selected: primaryFilterSelected,
+        items: primaryFilterItems,
+      }"
+      :right-filter-button="{
+        text: $t('label.filter'),
+        displayText: !$root.isMobile,
+      }"
+      :filters-count="filterNumber"
+      @left-button-click="openTaskDrawer"
+      @filter-text-input-end-typing="onKeyword"
+      @filter-select-change="onPrimaryFilterChange"
+      @filter-button-click="openDrawer" />
     <tasks-filter-drawer
       ref="filterTasksDrawer"
       :query="keyword"
@@ -115,49 +70,47 @@ export default {
     return {
       tasks: null,
       keyword: null,
-      awaitingSearch: false,
-      searchOnKeyChange: true,
       filterNumber: 0,
       primaryFilterSelected: 'ALL',
-      drawer: null,
-      showMobileTaskFilter: false,
       primaryFilter: [
         {name: 'ALL'},{name: 'ASSIGNED'},{name: 'COLLABORATED'},{name: 'OVERDUE'},{name: 'TODAY'},{name: 'TOMORROW'},{name: 'UPCOMING'}
       ],
     };
   },
+  computed: {
+    primaryFilterItems() {
+      return this.primaryFilter.map(item => ({
+        value: item.name,
+        text: this.$t(`label.dueDate.${item.name.toLowerCase()}`),
+      }));
+    },
+  },
   watch: {
     filterNumber() {
       this.$emit('filter-count-changed', this.filterNumber);
     },
-    keyword() {
-      if (!this.awaitingSearch) {
-        const searchOnKeyChange = this.searchOnKeyChange;
-        setTimeout(() => {
-          this.$emit('keyword-changed', this.keyword,searchOnKeyChange);
-          this.awaitingSearch = false;
-        }, 1000);
-      }
-      this.awaitingSearch = true;  
-      this.searchOnKeyChange= true;
-    },
   },
   created() {
-    this.primaryFilterSelected = localStorage.getItem('primary-filter-tasks');
+    this.primaryFilterSelected = localStorage.getItem('primary-filter-tasks') || 'ALL';
     localStorage.setItem('primary-filter-tasks', 'ALL');
   },
   mounted() {
-    $('#widthTmpSelectOption').html($('#filterTaskSelect option:selected').text());
-    const widthElem = $('#widthTmpSelectTaskFilter').width() + 40;
-    $('#filterTaskSelect').width(widthElem);
-    this.changePrimaryFilter();
+    this.$emit('primary-filter-task', this.primaryFilterSelected);
   },
   methods: {
+    onKeyword(term) {
+      this.keyword = term;
+      this.$emit('keyword-changed', term, true);
+    },
+    onPrimaryFilterChange(value) {
+      this.primaryFilterSelected = value;
+      this.keyword = '';
+      this.$emit('primary-filter-task', value);
+    },
     resetFilterTask(){
       this.$emit('reset-filter-task-dashboard');
     },
     filterTaskquery(e, filterGroupSort, filterLabels) {
-      this.searchOnKeyChange = false;
       this.keyword = e.query;
       this.$emit('filter-task-query', e, filterGroupSort, filterLabels);
     },
@@ -178,32 +131,13 @@ export default {
       };
       this.$root.$emit('open-task-drawer', defaultTask);
     },
-    changePrimaryFilter(){  
-      this.searchOnKeyChange=false; 
-      this.keyword='';   
-      this.$emit('primary-filter-task', this.primaryFilterSelected);
-      $('#widthTmpSelectOption').html($('#filterTaskSelect option:selected').text());
-      const widthElem = $('#widthTmpSelectTaskFilter').width() + 40;
-      $('#filterTaskSelect').width(widthElem);   
-    },
     resetFields(activeField){
-      this.searchOnKeyChange=false;
       this.keyword='';
       this.$refs.filterTasksDrawer.resetFields(activeField);
     },
     filterNumChanged(filtersnumber){
       this.filterNumber=filtersnumber;
     },
-    getFilterNum(){
-      if (this.filterNumber>0){
-        return `(${this.filterNumber})`;
-      } return '';
-    },
-    clearMessage() {
-      this.keyword = '';
-      this.showMobileTaskFilter = !this.showMobileTaskFilter;
-    }
-
   }
 };
 </script>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js b/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js
index c42a78282..a51236a4f 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js
+++ b/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js
@@ -20,7 +20,6 @@ import ProjectDashboard from './components/Project/ProjectDashboard.vue';
 import ProjectListToolbar from './components/Project/ProjectListToolbar.vue';
 import ProjectCard from './components/Project/ProjectCard.vue';
 import ProjectCardFront from './components/Project/ProjectCardFront.vue';
-import ProjectCardReverse from './components/Project/ProjectCardReverse.vue';
 import AddProjectDrawer from './components/Project/AddProjectDrawer.vue';
 import ExoTaskEditor from './components/Project/ExoTaskEditor.vue';
 import ProjectManagersDrawer from './components/Project/ProjectManagersDrawer.vue';
@@ -67,7 +66,6 @@ const components = {
   'project-card-list': ProjectCardList,
   'project-card': ProjectCard,
   'project-card-front': ProjectCardFront,
-  'project-card-Reverse': ProjectCardReverse,
   'add-project-drawer': AddProjectDrawer,
   'exo-task-editor': ExoTaskEditor,
   'project-manager-drawer': ProjectManagersDrawer,

From 987332fbccce77bde6ba230973b7705d02692384 Mon Sep 17 00:00:00 2001
From: Benjamin <benjmestrallet@MacBook-Air.local>
Date: Mon, 29 Jun 2026 18:01:39 +0200
Subject: [PATCH 2/7] chore: remove ~710 lines of dead CSS from tasks.less
 (audit-driven)

Audited every app-specific selector in tasks.less against actual usage across
the Vue templates and JS; removed blocks whose class/id appears nowhere
(verified live: cards, board, list, plan, Add Project drawer all unchanged).

Removed (dead since their features were rewritten/removed):
- Old flip/echart project card: the two #TasksParentContainer media blocks.
- Old card/list tasks toolbar (.tasksToolbar + its 599/399px media).
- Custom permission-avatar list in the Add Project drawer (replaced by
  identitySuggester): the seeMore*/peopleInfoIcon/avatar float rules.
- 22 *_border project-colour classes (never referenced).
- "Task Snapshot" leftovers (.flexCard, .noTasks, .iconlarge, .color-title,
  .list-leave-*), dead .taskCard/.taskAssignee/.noTasksProject children,
  mis-cased #TasksListToolbar/#ProjectListToolbar (real ids are lowercase),
  .CalendarTableColor, .gantt-tasks-title, .AllAssigneeAvatar, and assorted
  small dead selectors + one now-empty .taskAssignee block.

tasks.less 2871 -> 2160 lines. Across the whole effort: 3179 -> 2160 (~32%).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 webapps/src/main/webapp/skin/css/tasks.less | 710 --------------------
 1 file changed, 710 deletions(-)

diff --git a/webapps/src/main/webapp/skin/css/tasks.less b/webapps/src/main/webapp/skin/css/tasks.less
index 5b0e30caa..d2c4c95fd 100644
--- a/webapps/src/main/webapp/skin/css/tasks.less
+++ b/webapps/src/main/webapp/skin/css/tasks.less
@@ -208,91 +208,6 @@
         color: @textLightColor;
       }
       .listOfManager,.listOfParticipant {
-
-        .listOfParticipantavatar{
-          margin-right: -2px ~'!important; /** orientation=lt */ ';
-          margin-left: -2px ~'!important; /** orientation=rt */ ';
-        }
-        .listOfManageravatar{
-          a.flex-nowrap.flex-shrink-0.d-flex {
-            margin-right: 17px ~'; /** orientation=lt */ ';
-            margin-left: 17px ~'; /** orientation=rt */ ';
-          }
-        }
-        .listOfParticipantavatar{
-          a.flex-nowrap.flex-shrink-0.d-flex {
-            margin-right: 10px ~'; /** orientation=lt */ ';
-            margin-left: 10px ~'; /** orientation=rt */ ';
-          }
-          .seeMoreAvatars{
-            margin-right: 7px ~'; /** orientation=lt */ ';
-            margin-left: 7px ~'; /** orientation=rt */ ';
-          }
-        }
-
-        .listOfManageravatar,.listOfParticipantavatar{
-          float: left ~'; /** orientation=lt */ ';
-          float: right ~'; /** orientation=rt */ ';
-          display: flex;
-          margin-right: 5px ~'; /** orientation=lt */ ';
-          margin-left: 5px ~'; /** orientation=rt */ ';
-          .seeMoreAvatars {
-            .seeMoreItem {
-              position: relative;
-              margin-top: 5px;
-              &:before {
-                content: "";
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                background: @baseColorMedium;
-                border-radius: 50%;
-                opacity: .5;
-                z-index: 1;
-              }
-              .v-avatar{
-                height: 30px!important;
-                min-width: 30px!important;
-                width: 30px!important;
-              }
-              .seeMoreAvatarList {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                text-align: center;
-                width: 30px;
-                height: 30px;
-                color: white;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                font-size: 15px;
-                font-weight: bold;
-                z-index: 1;
-              }
-            }
-          }
-        }
-        a.flex-nowrap.flex-shrink-0.d-flex {
-          .v-avatar.pull-left.my-auto {
-            height: 30px;
-            min-width: 30px;
-            width: 30px;
-          }
-          .peopleInfoIcon {
-            z-index: 9999;
-            background: #fff;
-            height: 19px;
-            width: 19px;
-            margin-top: 23px;
-            margin-left: -13px ~'!important; /** orientation=lt */ ';
-            margin-right: -14px ~'!important; /** orientation=lt */ ';
-            margin-right: -13px ~'!important; /** orientation=rt */ ';
-            margin-left: -14px ~'!important; /** orientation=rt */ ';
-          }
-        }
         .editManager,.editParticipant {
           margin-left: 10px ~'; /** orientation=lt */ ';
           margin-right: 10px ~'; /** orientation=rt */ ';
@@ -682,116 +597,6 @@
     margin-right: 19px ~'; /** orientation=rt */ ';
     display: block
   }
-  .tasksToolbar {
-    .inputTasksFilter {
-      max-width: 250px;
-      .v-input__slot {
-        margin-bottom: 0!important;
-        .v-text-field__slot {
-          input {
-            max-height: 22px!important;
-          }
-        }
-      }
-      .v-input__append-inner {
-        button.mdi-close {
-          font-size: 18px;
-          margin-top: 14px;
-        }
-      }
-    }
-    .taskFilterMobile {
-      color: @greyColorLighten1!important;
-      font-size: 16px!important;
-      margin-left: 12px ~'; /** orientation=lt */ ';
-      margin-right: 12px ~'; /** orientation=rt */ ';
-      display: none;
-    }
-    .inputTasksFilterMobile {
-      display: flex!important;
-      width: 90%;
-      max-width: 90%;
-      position: absolute;
-      top: 50px;
-      .v-input__append-outer {
-        margin-left: -25px ~'!important; /** orientation=lt */ ';
-        margin-right: -25px ~'!important; /** orientation=rt */ ';
-      }
-    }
-    .tasksFilterMobile {
-      display: none!important;
-    }
-    .selectPrimaryFilter {
-      width: auto;
-      height: 38px;
-      color: @greyColorLighten1;
-      &:focus {
-        outline: none;
-        box-shadow: none;
-      }
-    }
-
-    #widthTmpSelectTaskFilter {
-      display:none;
-      visibility:hidden;
-      width: inherit!important;
-    }
-
-    .selectTasksFilter {
-      height: 40px;
-      width: auto;
-      padding-right: 20px ~'; /** orientation=lt */ ';
-      padding-left: 20px ~'; /** orientation=rt */ ';
-      &:focus {
-        outline: none;
-        box-shadow: none;
-      }
-    }
-    .taskDisplay {
-      .uiIcon {
-        font-style: normal;
-        font-size: 16px;
-        padding-right: 10px ~'; /** orientation=lt */ ';
-        padding-left: 10px ~'; /** orientation=rt */ ';
-      }
-      .uiIconCards {
-        .far();
-        .fa-clipboard();
-      }
-      .uiIconList {
-        .fas();
-        .fa-list();
-      }
-    }
-    .v-tabs-slider-wrapper {
-      display: none;
-    }
-    .taskTabCards {
-      border: 1px solid @borderColor;
-      border-radius: 5px 0 0 5px;
-      height: 38px;
-      min-height: 38px;
-    }
-    .taskTabList {
-      border: 1px solid @borderColor;
-      border-radius: 0 5px 5px 0;
-      height: 38px;
-      min-height: 38px;
-    }
-    .v-tab.v-tab--active {
-      border: 1px solid @primaryColor!important;
-      background-color: @tabNormalLinkBackground!important;
-    }
-    .filterTasksSetting {
-      .uiIconFilterSetting {
-        .fa();
-        .fa-sliders-h();
-        font-style: normal;
-        font-size: 16px;
-        color: @primaryColor;
-      }
-    }
-  }
   .tasksListContainer {
     .projectItem {
       position: relative;
@@ -1116,56 +921,10 @@
       text-align: end;
     }
   }
-  .taskAssignee {
-    .assigneDetails {
-      padding-top: 2px;
-      padding-bottom: 2px;
-      padding-right: 4px ~'; /** orientation=lt */ ';
-      padding-left: 4px ~'; /** orientation=rt */ ';
-      padding-left: 0 ~'; /** orientation=lt */ ';
-      padding-right: 0 ~'; /** orientation=rt */ ';
-    }
-  }
   .hideTaskAssignee {
     height: 0!important;
     min-height: 0!important;
   }
-  .taskAssigneeAndLabels {
-    .taskAssignee {
-      height: 35px;
-      min-height: 35px;
-      .assigneDetails {
-        padding-top: 2px;
-        padding-bottom: 2px;
-        padding-right: 4px ~'; /** orientation=lt */ ';
-        padding-left: 4px ~'; /** orientation=rt */ ';
-        padding-left: 0 ~'; /** orientation=lt */ ';
-        padding-right: 0 ~'; /** orientation=rt */ ';
-      }
-    }
-  }
-  .taskActionsAndProject {
-    .taskProject {
-      max-width: 70%;
-      width: 70%;
-      .projectSpaceDetails {
-        align-items: center;
-        max-width: 80%;
-        display: inherit;
-        .taskProjectNameChip {
-          max-width: 100%;
-          width: 100%;
-          .v-chip.v-size--small {
-            height: auto!important;
-          }
-        }
-      }
-    }
-  }
-}
-.smallTaskCard {
-  min-height: 170px!important;
-  height: 170px!important;
 }
 .taskViewCard {
   min-height: inherit;
@@ -1243,47 +1002,6 @@
 .taskAssignee {
   //padding: 2px 4px;
   //padding-left: 0;
-  .taskWorkerAvatar {
-    background-position: center;
-    background-size: cover;
-    border-radius: 50%;
-    width: 26px;
-    height: 26px;
-    img {
-      display: none;
-    }
-  }
-  .seeMoreAvatars {
-    .seeMoreItem {
-      position: relative;
-      &:before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background: @baseColorMedium;
-        border-radius: 50%;
-        opacity: .5;
-        z-index: 1;
-      }
-      .seeMoreAvatarList {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        text-align: center;
-        height: 27px;
-        color: white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        font-size: 15px;
-        font-weight: bold;
-        z-index: 1;
-      }
-    }
-  }
 }
 .taskCard {
   .v-divider {
@@ -1350,41 +1068,6 @@
     height: 50vh;
     text-align: center;
     padding-top: 10%;
-    .noTasksProjectIcon {
-      i {
-        font-size: 70px;
-        color: @greyColor;
-        padding-bottom: 20px;
-      }
-      .uiIconClipboard{
-        &:after {
-          content: '\e9d0';
-          font-size: 29.5px;
-          position: absolute;
-          bottom: 12px;
-          right: -5px ~'; /** orientation=lt */ ';
-          background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
-        }
-      }
-      .uiIconTask {
-        &:after {
-          content: '\e9d0';
-          font-size: 29.5px;
-          position: absolute;
-          bottom: 12px;
-          right: -5px ~'; /** orientation=lt */ ';
-          background: white;
-        }
-      }
-    }
-    .noTasksProjectLabel {
-      font-size: 18px;
-      color: @greyColorLighten1;
-    }
-    .noTasksProjectLink {
-      font-size: 1.1rem;
-      padding-top: 12px;
-    }
   }
   .tasksCardsContainer {
     /* Zooming exits */
@@ -1734,24 +1417,11 @@
       white-space: nowrap;
       display: inline-block;
     }
-    .taskProjectNameCard {
-      width: 120px;
-    }
     .spaceAvatar {
       .spaceAvatarImg {
         border-radius: 4px;
       }
     }
-    .noSpaceAvatar {
-      background: white;
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .noSpaceProjectIcon {
-        color: @greyColor;
-      }
-    }
     .noProjectColor {
       background: @baseColorLight!important;
       border: 2px solid @baseColorLight;
@@ -1843,44 +1513,6 @@
       padding: 2px 4px;
       cursor: pointer;
     }
-    .noLabelText {
-      color: @greyColorLighten1;
-    }
-  }
-  .AllAssigneeAvatar {
-    box-shadow: 0 0 2px 1px @greyColor;
-    border-radius: 25px;
-    width: auto!important;
-    display: inline-flex!important;
-    padding: 2px 4px;
-    padding-left: 0 ~'; /** orientation=lt */ ';
-    padding-right: 0 ~'; /** orientation=rt */ ';
-    .uiIconArrowBack {
-      font-size: 12px;
-      padding-top: 6px;
-      padding-left: 4px ~'; /** orientation=lt */ ';
-      padding-right: 4px ~'; /** orientation=rt */ ';
-      cursor: pointer;
-    }
-  }
-  #TasksListToolbar {
-    height: auto!important;
-    .v-toolbar__content {
-      height: auto!important;
-      padding: 0;
-    }
-  }
-  .toolbarLarge {
-    .v-toolbar__content {
-      padding-bottom: 50px!important;
-    }
-  }
-}
-#ProjectListToolbar {
-  height: auto!important;
-  .v-toolbar__content {
-    height: auto!important;
-    padding: 0;
   }
 }
 
@@ -1944,21 +1576,6 @@
 
 /*----------- Task Snapshot CSS ---------------*/
 
-.flexCard {
-  flex: 1 1 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.btn-show{
-  color: @primaryColor!important;
-  margin-block-end: 5px;
-  border:none!important;
-}
-.btn-show:hover {
-  color: @primaryColor!important;
-  background-color: #f2f2f2!important;
-}
 .projectCard {
   border-radius: 15px 15px 15px 15px;
   margin-right: 10px ~'; /** orientation=lt */ ';
@@ -1994,9 +1611,6 @@
   margin-left: 25px ~'; /** orientation=rt */ ';
 }
 
-.color-title {
-  color: @greyColorLighten1;
-}
 .taskTitle {
   color: black;
   flex: 1 1 100%;
@@ -2015,51 +1629,12 @@
   margin-top: 5px;
   margin-block-end: 5px;
 }
-.iconlarge {
-  font-size: 40px;
-  color:@successColorLight;
-}
-.noTasks {
-  display: flex;
-  height: 370px;
-  align-items: center;
-  justify-content: center;
-  .noTasksContent {
-    text-align: center;
-    margin: auto;
-    .uiNoTaskIcon {
-      color: #6d7d9821;
-      font-size: 60px;
-      font-style: normal;
-      font-weight: normal;
-      .fa();
-      .fa-clipboard-list();
-    }
-    .noTasksTitle {
-      color: #4d5466;
-      font-weight: normal;
-      font-size: 22px;
-    }
-    p {
-      font-weight: normal;
-      font-size: 15px;
-      color: @greyColorLighten1;
-    }
-  }
-}
 .list-item {
   display: flex;
   width: 100%;
   margin-right: 10px ~'; /** orientation=lt */ ';
   margin-left: 10px ~'; /** orientation=rt */ ';
 }
-.list-leave-active {
-  transition: all 1s;
-}
-.list-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
 
 /*---------------------Responsive Style ---------------------------*/
 
@@ -2095,204 +1670,14 @@
   }
 }
 
-@media (max-width: @maxMobileWidth) {
-  #TasksParentContainer {
-    #TasksManagementPortlet {
-      .projectAndTasksContainer {
-        .tasksListContainer {
-          .projectItem {
-            .taskCardFlip {
-              min-height: 190px !important;
-              margin-bottom: 16px;
-              .taskCardFront {
-                height: auto;
-                max-height: inherit;
-                .tasksCardItem {
-                  height: 190px!important;
-                  max-height: 190px!important;
-                  background-color: transparent!important;
-                  border-bottom-width: 5px;
-                  border-bottom-style: solid;
-                  .taskItemToolbar {
-                    background-color: transparent !important;
-                    i {
-                      color: @greyColorLighten1!important;
-                    }
-                    .projectCardTitle {
-                      color: @textColor!important;
-                      padding-left: 8px ~'; /** orientation=lt */ ';
-                      padding-right: 8px ~'; /** orientation=rt */ ';
-                    }
-                  }
-                  .taskItemInfo {
-                    padding: 8px!important;
-                    .descriptionDivider {
-                      display: none!important;
-                    }
-                    .taskItemDescription {
-                      min-height: inherit;
-                    }
-                    .largeDescriptionAreaSpace{
-                      -webkit-line-clamp: 2;
-                    }
-                  }
-                }
-              }
-              .tasksCardBack {
-                height: auto;
-                max-height: inherit;
-                .tasksCardItem {
-                  height: auto;
-                  max-height: inherit;
-                  .noTasksProject {
-                    padding-top: 24px;
-                    padding-bottom: 24px;
-                    .noTasksProjectIcon {
-                      .uiIconTask {
-                        font-size: 30px;
-                      }
-                    }
-                  }
-                  .echartStatsContent {
-                    .echartAndLabel {
-                      margin-left: -35px;
-                    }
-                    .projectStatusNumber{
-                      margin-left: -25px
-                    }
-                    .echartPieContent {
-                      height: 130px!important;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      .projectTasksDashboard {
-        .tasksViewBoard {
-          .projectTaskItem {
-            flex: 1 1 100%!important;
-            width: 100%!important;
-          }
-        }
-      }
-    }
-  }
-  .taskDisplay {
-    display: none!important;
-  }
-}
 
-@media (max-width: @maxLargeTabletWidth) {
-  #TasksParentContainer {
-    .projectAndTasksContainer {
-      .tasksList {
-        .tasksListItem {
-          .taskListItemView {
-            .taskAssignee {
-              width: 15%!important;
-              max-width: 15%!important;
-              padding-right: 12px;
-            }
-            .taskLabels {
-              .v-chip.v-size--small {
-                max-width: 80%;
-                padding: 0 4px;
-                margin: 0!important;
-              }
-            }
-          }
-        }
-      }
-    }
-    #taskCardItem {
-      .taskTitle {
-        cursor: pointer;
-        width: 80%;
-        max-width: 80%;
-        .strikethrough{
-          text-decoration: line-through;
-        }
-        .taskCardViewTitle{
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            cursor: pointer;
-        }
-      }
-    }
-    #TasksManagementPortlet {
-      .projectAndTasksContainer {
-        .projectTasksDashboard {
-          .tasksViewBoard {
-            .projectTaskItem {
-              flex: 1 1 50%;
-              width: 50%;
-            }
-          }
-        }
-      }
-    }
-  }
-}
 
-@media (max-width: 599px) {
-  #TasksManagementPortlet .projectAndTasksContainer .tasksToolbar{
-    /*.v-input__icon.v-input__icon--prepend-inner {
-      display: none;
-    }*/
-    .inputTasksFilter {
-      display: none;
-    }
-    .taskFilterMobile {
-      display: block;
-    }
-    .v-toolbar__title {
-      min-width: 40px!important;
-      margin-right: 5px;
-    }
-    button.btn.px-2.btn-primary.addNewProjectButton.v-btn.v-btn--contained.theme--light.v-size--default {
-      min-width: auto!important;
-    }
-    button.btn.px-2.btn-primary.filterTasksSetting.v-btn.v-btn--depressed.v-btn--flat.v-btn--outlined.theme--light.v-size--default {
-      min-width: auto!important;
-    }
-  }
-}
 @media (max-width: 399px) {
   .taskDrawer {
     .drawerTitle .taskProjectName .projectName {
       max-width: 120px !important;
     }
   }
-  #TasksManagementPortlet {
-    .projectAndTasksContainer {
-      .tasksToolbar  {
-        .selectPrimaryFilter {
-          width: 120px!important;
-          max-width: 120px!important;
-          text-overflow: ellipsis;
-        }
-        .selectTasksFilter {
-          width: 120px!important;
-          max-width: 120px!important;
-          text-overflow: ellipsis;
-        }
-        .taskFilterMobile {
-          margin-left: 2px;
-        }
-        .filterTasksSetting {
-          .uiIconFilterSetting {
-            padding-right: 0px !important;
-          }
-        }
-      }
-    }
-  }
 }
 
 
@@ -2416,11 +1801,6 @@
 .Orange {
   background-color: #FFA500 !important;
 }
-.CalendarTableColor {
-  .Orange {
-    background-color: #FFA500 !important;
-  }
-}
 .light_brown {
   background: #C5B294 !important;
   &:hover {
@@ -2440,78 +1820,6 @@
   }
 }
 
-.asparagus_border {
-  border-color: #909958 !important;
-}
-.laurel_green_border {
-  border-color: #BED67E !important;
-}
-.moss_green_border {
-  border-color: #98CC81 !important;
-}
-.munsell_blue_border {
-  border-color: #319AB3 !important;
-}
-.sky_blue_border {
-  border-color: #4DBED9 !important;
-}
-.powder_blue_border {
-  border-color: #9EE4F5 !important;
-}
-.baby_blue_border {
-  border-color: #B2E2FF !important;
-}
-.navy_blue_border {
-  border-color: #4273C8 !important;
-}
-.blue_gray_border {
-  border-color: #8EB0EA !important;
-}
-.light_blue_border {
-  border-color: #B3CFFF !important;
-}
-.light_gray_border {
-  border-color: #CDCDCD !important;
-}
-.purple_border {
-  border-color: #774EA9 !important;
-}
-.light_purple_border {
-  border-color: #BC99E7 !important;
-}
-.pink_border {
-  border-color: #FFC8F0 !important;
-}
-.beige_border {
-  border-color: #FFE1BE !important;
-}
-.hot_pink_border {
-  border-color: #F97575 !important;
-}
-.light_brown_border {
-  border-color: #C5B294 !important;
-}
-.gray_border {
-  border-color: #A39594 !important;
-}
-.plum_border {
-  border-color: #CEA6AC !important;
-}
-.Orange_border {
-  border-color: #FFA500 !important;
-}
-.green_border {
-  border-color: #4CAF50 !important;
-}
-.red_border {
-  border-color: #F44336 !important;
-}
-.yellow_border {
-  border-color: #ffeb3b !important;
-}
-.brown_border {
-  border-color: #795548 !important;
-}
 
 @keyframes beginDrag {
     from {
@@ -2548,9 +1856,6 @@
 .labelsActionMenu {
    max-width: 180px !important;
    min-width: 160px !important;
-  .label-edit-name{
-    max-width: 136px;
-  }
   .label-btn {
     cursor: pointer;
   }
@@ -2611,21 +1916,6 @@
 .gantt-wrapper {
   .gantt-chart-container {
     padding-top: 20px;
-    .gantt-tasks-title {
-      margin-top: 60px;
-      min-height: calc(~"100vh - 180px");
-      height: calc(~"100vh - 180px");
-      overflow: hidden;
-      min-width: 180px;
-      p {
-        max-width: 180px;
-        margin-bottom: 0!important;
-        padding-top: 10px;
-        padding-right: 10px;
-        height: 27px;
-        border-bottom: 1px solid #ebeff2;
-      }
-    }
   }
   
   .gantt {

From 6c2e4cd240700bbc1ef0f77b25a611ed9572436b Mon Sep 17 00:00:00 2001
From: Benjamin <benjmestrallet@MacBook-Air.local>
Date: Mon, 29 Jun 2026 18:47:00 +0200
Subject: [PATCH 3/7] feat: improve My Tasks list rendering (space avatar,
 project label, status, hover)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TasksListItem (the cross-project My Tasks list):
- Replace the broken hand-rolled space <v-img> (empty src, no tooltip) with the
  shared exo-space-avatar (correct image + hover popover showing the space name).
- Show the project as a colour dot + full project name (plain text) instead of a
  narrow colour chip that truncated heavily ("Bug Tri…", "Customer O…").
- Rebalance the row columns: title 40% -> 30%, project 10% -> 22% (+ drop the
  inner chip max-width caps and the title's oversized pe-14), so names show fully.
- Widen the status column 7% -> 11% (and trim its padding) so "In Progress" /
  "Waiting On" no longer truncate.
- Add a subtle row hover (primary border + soft shadow, pointer cursor) since the
  rows are clickable.

Only affects TasksListItem; the project List view (TaskViewListItem) is a separate
component with no project/space column.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 webapps/src/main/webapp/skin/css/tasks.less   | 45 ++++++++--------
 .../components/tasks/TasksListItem.vue        | 53 ++++++++-----------
 2 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/webapps/src/main/webapp/skin/css/tasks.less b/webapps/src/main/webapp/skin/css/tasks.less
index d2c4c95fd..2afc39872 100644
--- a/webapps/src/main/webapp/skin/css/tasks.less
+++ b/webapps/src/main/webapp/skin/css/tasks.less
@@ -1223,6 +1223,12 @@
         background-color: @tableBackgroundAccent;
         border: 1px solid @tableBorder;
         border-radius: 4px;
+        cursor: pointer;
+        transition: box-shadow .15s ease, border-color .15s ease;
+        &:hover {
+          border-color: @primaryColor;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
+        }
         .taskCheckBox {
           max-width: 3%;
           width: 3%;
@@ -1249,8 +1255,8 @@
           .strikethrough{
             text-decoration: line-through;
           }
-          max-width: 40%;
-          width: 40%;
+          max-width: 30%;
+          width: 30%;
           text-align: start;
           flex: 1 1 100%;
           overflow: hidden;
@@ -1269,27 +1275,24 @@
           }
         }
         .taskProject {
-          max-width: 10%;
-          width: 10%;
+          max-width: 22%;
+          width: 22%;
           text-align: start;
           .projectSpaceDetails {
             cursor: pointer;
-            .spaceAvatar {
-              //min-width: 30px;
+            min-width: 0;
+            .projectColorDot {
+              width: 10px;
+              height: 10px;
+              border-radius: 50%;
+              border: 0 !important;
+              /* default for projects with no colour; the project colour classes
+                 (.red, .munsell_blue, …) override this via their !important bg. */
+              background-color: @greyColorLighten1;
             }
-            .taskProjectNameChip {
-              max-width: 72%;
-              .v-chip.v-size--small {
-                height: auto!important;
-                cursor: pointer;
-              }
-            }
-            .taskProjectNameChipSpace {
-              max-width: 47%;
-              .v-chip.v-size--small {
-                height: auto!important;
-                cursor: pointer;
-              }
+            .taskProjectNameLabel {
+              font-size: 13px;
+              color: @textColor;
             }
           }
           .taskProjectName {
@@ -1326,8 +1329,8 @@
           cursor: pointer;
         }
         .taskStat {
-          max-width: 7%;
-          width: 7%;
+          max-width: 11%;
+          width: 11%;
           cursor: pointer;
           text-align: start;
           flex: 1 1 100%;
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
index cdec4b2fa..3630e8977 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
@@ -44,7 +44,7 @@
         </a>
       </div>
     </div>
-    <div class="taskTitle pe-14 d-lg-block d-md-none" @click="openTaskDrawer()">
+    <div class="taskTitle pe-6 d-lg-block d-md-none" @click="openTaskDrawer()">
       <a
         ref="tooltip"
         :class="getTitleTaskClass()"
@@ -53,39 +53,28 @@
         {{ task.task.title }}
       </a>
     </div>
-    <div class="taskProject pe-10">
+    <div class="taskProject pe-6">
       <div
         v-if="!isPersonnalTask"
-        class="projectSpaceDetails d-flex align-center TasksListViewProject">
-        <div class="spaceAvatar pe-1 d-lg-block d-md-none">
-          <a
-            v-if="task.space!==null"
-            :href="spaceUrl(task.space.id)">
-            <v-avatar
-              :size="30"
-              tile>
-              <v-img
-                :src="task.space.avatarUrl"
-                :height="30"
-                :width="30"
-                :max-height="30"
-                :max-width="30"
-                class="mx-auto spaceAvatarImg" />
-            </v-avatar>
-          </a>
-        </div>
-        <div :class="task.space ? 'taskProjectNameChipSpace' : 'taskProjectNameChip'">
-          <v-chip
-            :color="getTaskColor()"
-            text-color="white"
-            class="font-weight-bold"
-            small
-            @click="showProjectTasksDetails()">
-            <span class="text-truncate" :title="getNameProject()">
-              {{ getNameProject() }}
-            </span>
-          </v-chip>
+        class="projectSpaceDetails d-flex align-center TasksListViewProject"
+        @click="showProjectTasksDetails()">
+        <div
+          v-if="task.space"
+          class="spaceAvatar me-2 d-lg-block d-md-none flex-shrink-0">
+          <exo-space-avatar
+            :space="task.space"
+            :size="24"
+            avatar
+            popover />
         </div>
+        <span
+          class="projectColorDot flex-shrink-0 me-2"
+          :class="getTaskColor()"></span>
+        <span
+          class="taskProjectNameLabel text-truncate"
+          :title="getNameProject()">
+          {{ getNameProject() }}
+        </span>
       </div>
     </div>
     <div class="taskAssignee v-avatar d-flex pe-7 flex-nowrap">
@@ -126,7 +115,7 @@
         <span class="taskCommentNumber caption">{{ task.commentCount }}</span>
       </div>
     </div>
-    <div class="taskStat pe-9 d-lg-block d-md-none " @click="openTaskDrawer()">
+    <div class="taskStat pe-4 d-lg-block d-md-none " @click="openTaskDrawer()">
       <span
         v-if="task && task.task && task.task.status && task.task.status"
         :title="getTaskStatusLabel(task.task.status.name)"

From 92e1f2e0b66c051399586b2c41cf09f2e17833c3 Mon Sep 17 00:00:00 2001
From: Benjamin <benjmestrallet@MacBook-Air.local>
Date: Mon, 29 Jun 2026 18:51:37 +0200
Subject: [PATCH 4/7] fix: remove two hover flicker effects in the task list /
 project card

- My Tasks list space avatar: the exo-space-avatar identity popover opened over
  the small avatar, so the cursor landed on the popover -> close/reopen flicker.
  Replaced with a plain avatar + v-tooltip (opens below, shows the space name).
- Project card progress bar "shook" when hovering the member avatars: the avatar
  list lazy-loads on hover (retrieve-extra-information) and re-renders the footer,
  and the segments had `transition: width` so they re-animated each time. Dropped
  the transition (the bar doesn't need to animate).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 webapps/src/main/webapp/skin/css/tasks.less   |  1 -
 .../components/tasks/TasksListItem.vue        | 26 ++++++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/webapps/src/main/webapp/skin/css/tasks.less b/webapps/src/main/webapp/skin/css/tasks.less
index 2afc39872..bf5e22e05 100644
--- a/webapps/src/main/webapp/skin/css/tasks.less
+++ b/webapps/src/main/webapp/skin/css/tasks.less
@@ -86,7 +86,6 @@
     .projectCardProgressSegment {
       height: 100%;
       min-width: 2px;
-      transition: width .2s ease;
     }
   }
 }
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
index 3630e8977..0a4fc6786 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
@@ -58,15 +58,23 @@
         v-if="!isPersonnalTask"
         class="projectSpaceDetails d-flex align-center TasksListViewProject"
         @click="showProjectTasksDetails()">
-        <div
-          v-if="task.space"
-          class="spaceAvatar me-2 d-lg-block d-md-none flex-shrink-0">
-          <exo-space-avatar
-            :space="task.space"
-            :size="24"
-            avatar
-            popover />
-        </div>
+        <v-tooltip v-if="task.space" bottom>
+          <template #activator="{ on, attrs }">
+            <a
+              :href="spaceUrl(task.space.id)"
+              v-bind="attrs"
+              v-on="on"
+              class="spaceAvatar me-2 d-lg-block d-md-none flex-shrink-0">
+              <v-avatar :size="24" tile>
+                <img
+                  :src="task.space.avatarUrl"
+                  :alt="task.space.displayName"
+                  class="object-fit-cover">
+              </v-avatar>
+            </a>
+          </template>
+          <span>{{ task.space.displayName }}</span>
+        </v-tooltip>
         <span
           class="projectColorDot flex-shrink-0 me-2"
           :class="getTaskColor()"></span>

From 84cfb5549ed9b5f8d2e96be8823b4ef5fa105afd Mon Sep 17 00:00:00 2001
From: Benjamin <benjmestrallet@MacBook-Air.local>
Date: Mon, 29 Jun 2026 19:26:29 +0200
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20task=20list=20polish=20=E2=80=94=20a?=
 =?UTF-8?q?vatar-hover=20flicker,=20clickable=20rows,=20wider=20status,=20?=
 =?UTF-8?q?less=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avatar-hover flicker (card + My Tasks list): the shared user-avatars-list lifts
the hovered avatar via .mt-n1 (negative margin), which reflowed the flex line and
pushed the row/footer/progress bar (re-triggering hover -> flicker). Keep the
visual lift but do it with a transform (no layout impact); the override has to be
prefixed with .v-application to out-specify Vuetify's own .v-application .mt-n1.
Also let the row's .taskAssignee cell overflow (it carries the v-avatar class, so
it was clipping the lifted/overlapping avatars).

Project List view (TaskViewListItem): the whole row now opens the task drawer
(empty gaps were dead before; only the title link / cells were clickable) — the
checkbox and assignee avatars keep their own actions via @click.stop. Widened the
status column (10% -> 14%, trimmed padding, title 59% -> 55%) so "In Progress" /
"Waiting On" no longer truncate; pointer cursor on the row.

CSS: removed the now-redundant .taskProject block (a duplicate colour palette plus
the orphaned .taskProjectName / .spaceAvatarImg the list rework left behind) — the
dot/colours come from the global classes + Vuetify. tasks.less ~2070 lines.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 webapps/src/main/webapp/skin/css/tasks.less   | 127 +++---------------
 .../ProjectTasks/TaskViewListItem.vue         |  25 ++--
 2 files changed, 35 insertions(+), 117 deletions(-)

diff --git a/webapps/src/main/webapp/skin/css/tasks.less b/webapps/src/main/webapp/skin/css/tasks.less
index bf5e22e05..ddfb8a86a 100644
--- a/webapps/src/main/webapp/skin/css/tasks.less
+++ b/webapps/src/main/webapp/skin/css/tasks.less
@@ -90,6 +90,21 @@
   }
 }
 
+/* The shared user-avatars-list lifts the hovered avatar with .mt-n1 (margin-top
+   -4px). A negative margin reflows the flex line, so the row/card footer (and the
+   progress bar) shifted with it. Keep the visual lift but do it via transform
+   (no layout impact) so only the avatar moves, not its neighbours. */
+.v-application .taskListItemView .mt-n1,
+.v-application .projectCardItem .mt-n1 {
+  margin-top: 0 !important;
+  transform: translateY(-4px) !important;
+}
+/* The task row's assignee cell carries Vuetify's `v-avatar` class (overflow:hidden
+   + rounded), which clipped the lifted/overlapping avatars. Let them overflow. */
+.v-application .taskListItemView .taskAssignee {
+  overflow: visible !important;
+}
+
 /* Placeholder cards shown while the first page of projects is loading. */
 .projectCardSkeleton.v-skeleton-loader {
   height: 175px;
@@ -1294,9 +1309,6 @@
               color: @textColor;
             }
           }
-          .taskProjectName {
-            max-width: 160px;
-          }
         }
         .taskAssignee {
           max-width: 3%;
@@ -1381,9 +1393,12 @@
       }
     }
     .tasksViewList {
+      .taskListItemView {
+        cursor: pointer;
+      }
       .taskTitle {
-        width: 59%!important;
-        max-width: 59%!important;
+        width: 55%!important;
+        max-width: 55%!important;
       }
       .taskAssignee {
         max-width: 5%!important;
@@ -1402,8 +1417,8 @@
         width: 6%!important;
       }
       .taskStat {
-        max-width: 10%!important;
-        width: 10%!important;
+        max-width: 14%!important;
+        width: 14%!important;
       }
       .taskDueDate {
         max-width: 7%!important;
@@ -1411,104 +1426,6 @@
       }
     }
   }
-  .taskProject {
-    .taskProjectName {
-      flex: 1 1 auto;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline-block;
-    }
-    .spaceAvatar {
-      .spaceAvatarImg {
-        border-radius: 4px;
-      }
-    }
-    .noProjectColor {
-      background: @baseColorLight!important;
-      border: 2px solid @baseColorLight;
-    }
-    .beige {
-      background: #FFE1BE!important;
-      border: 2px solid #FFE1BE;
-    }
-    .asparagus {
-      background: #909958!important;
-      border: 2px solid #909958;
-    }
-    .laurel_green {
-      background: #BED67E!important;
-      border: 2px solid #BED67E;
-    }
-    .moss_green {
-      background: #98CC81!important;
-      border: 2px solid #98CC81;
-    }
-    .munsell_blue {
-      background: #319AB3!important;
-      border: 2px solid #319AB3;
-    }
-    .sky_blue {
-      background: #4DBED9!important;
-      border: 2px solid #4DBED9;
-    }
-    .powder_blue {
-      background: #9EE4F5!important;
-      border: 2px solid #9EE4F5;
-    }
-    .baby_blue {
-      background: #B2E2FF!important;
-      border: 2px solid #B2E2FF;
-    }
-    .navy_blue {
-      background: #4273C8!important;
-      border: 2px solid #4273C8;
-    }
-    .blue_gray {
-      background: #8EB0EA!important;
-      border: 2px solid #8EB0EA;
-    }
-    .light_blue {
-      background: #B3CFFF!important;
-      border: 2px solid #B3CFFF;
-    }
-    .light_gray {
-      background: #CDCDCD!important;
-      border: 2px solid #CDCDCD;
-    }
-    .purple {
-      background: #774EA9!important;
-      border: 2px solid #774EA9;
-    }
-    .light_purple {
-      background: #BC99E7!important;
-      border: 2px solid #BC99E7;
-    }
-    .pink {
-      background: #FFC8F0!important;
-      border: 2px solid #FFC8F0;
-    }
-    .hot_pink {
-      background: #F97575!important;
-      border: 2px solid #F97575;
-    }
-    .Orange {
-      background: #FFA500!important;
-      border: 2px solid #FFA500;
-    }
-    .light_brown {
-      background: #C5B294!important;
-      border: 2px solid #C5B294;
-    }
-    .gray {
-      background: #A39594!important;
-      border: 2px solid #A39594;
-    }
-    .plum {
-      background: #CEA6AC!important;
-      border: 2px solid #CEA6AC;
-    }
-  }
   .taskLabels {
     .labelText {
       background: @greyColor;
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TaskViewListItem.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TaskViewListItem.vue
index 99ce6d8a2..87a0cd002 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TaskViewListItem.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TaskViewListItem.vue
@@ -17,30 +17,31 @@
 <template>
   <div
     :class="[getTaskPriorityColor(task.task.priority), removeCompletedTask && 'completedTask' || '']"
-    class="taskListItemView px-4 py-3 d-flex align-center">
+    class="taskListItemView px-4 py-3 d-flex align-center"
+    @click="openTaskDrawer()">
     <div class="taskCheckBox">
       <v-switch
         ref="autoFocusInput2"
         class="d-none"
         true-value="true"
         false-value="false" />
-      <i 
-        :title="$t(getTaskCompletedTitle())" 
-        :class="getTaskCompleted()" 
-        @click="updateCompleted"></i>
+      <i
+        :title="$t(getTaskCompletedTitle())"
+        :class="getTaskCompleted()"
+        @click.stop="updateCompleted"></i>
     </div>
     <div class="taskTitle pe-10">
       <a
         ref="tooltip"
         :class="getTitleTaskClass()"
         class="text-truncate"
-        :title="task.task.title"
-        @click="openTaskDrawer()">{{ task.task.title }}
+        :title="task.task.title">{{ task.task.title }}
       </a>
     </div>
     <div
       class="taskAssignee d-flex v-avatar flex-nowrap me-2 justify-start position-relative"
-      :style="`min-height:${avatarSize+4}px`">
+      :style="`min-height:${avatarSize+4}px`"
+      @click.stop>
       <exo-user-avatars-list
         :users="avatarToDisplay"
         :max="1"
@@ -53,7 +54,7 @@
         retrieve-extra-information
         @open-detail="$root.$emit('displayTasksAssigneeAndCoworker', avatarToDisplay)" />
     </div>
-    <div class="taskLabels pe-7" @click="openTaskDrawer()">
+    <div class="taskLabels pe-7">
       <v-chip
         v-if="task.labels && task.labels.length == 1"
         :color="task.labels[0].color"
@@ -73,13 +74,13 @@
         <span class="taskAttachNumber caption">{{ task.labels.length }}</span>
       </div>
     </div>
-    <div class="taskActions d-flex justify-center align-center pe-9" @click="openTaskDrawer()">
+    <div class="taskActions d-flex justify-center align-center pe-9">
       <div v-if="task.commentCount" class="taskComment d-flex align-center">
         <i class="far fa-comment uiCommentIcon"></i>
         <span class="taskCommentNumber caption">{{ task.commentCount }}</span>
       </div>
     </div>
-    <div class="taskStat d-lg-block d-md-none pe-9" @click="openTaskDrawer()">
+    <div class="taskStat d-lg-block d-md-none pe-2">
       <span
         v-if="task && task.task && task.task.status && task.task.status"
         :title="getTaskStatusLabel(task.task.status.name)"
@@ -87,7 +88,7 @@
         {{ getTaskStatusLabel(task.task.status.name) }}
       </span>
     </div>
-    <div class="taskDueDate" @click="openTaskDrawer()">
+    <div class="taskDueDate">
       <div v-if="taskDueDate" :class="getOverdueTask(taskDueDate) ? 'error-color' : ''">
         <date-format :value="taskDueDate" :format="dateTimeFormat" />
       </div>

From dd52cd958f8bc007f8a0153f3f63dbd584f448e1 Mon Sep 17 00:00:00 2001
From: Benjamin <benjmestrallet@MacBook-Air.local>
Date: Mon, 29 Jun 2026 19:46:36 +0200
Subject: [PATCH 6/7] fix: position the Plan-view gantt popup next to its bar
 (no library patch)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bundled frappe-gantt computes its hover-popup position in a mixed coordinate
space, so the popup appeared far from the bar and drifted when the timeline was
scrolled. Fixed entirely in our own component (TasksViewGantt) — the vendored
frappegantt.js is left untouched:

- A mouseover listener on the gantt container runs in the bubbling phase, AFTER
  the library's own bar handler, and repositions the popup synchronously, so the
  library's wrong position is overwritten before paint (no flicker).
- Position is derived by calibration: park the popup at (0,0), read where it
  lands, then offset to just below the hovered bar. getBoundingClientRect forces
  layout but not paint, so the (0,0) step is never shown. Robust to the gantt's
  scroll / offsetParent quirks (constant offset verified across scroll positions).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ProjectTasks/TasksViewGantt.vue           | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
index 459ad4f68..e1e6053f6 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
@@ -330,6 +330,44 @@ export default {
       this.gantt.change_view_mode(this.ganttScale);
       this.isGanttDisplayed = true;
       this.addScrollToDateArea();
+      this.bindGanttPopupRepositioning();
+    },
+    bindGanttPopupRepositioning() {
+      const chart = document.getElementById('gantt-chart');
+      if (!chart || chart.dataset.popupBound) {
+        return;
+      }
+      chart.dataset.popupBound = 'true';
+      // frappe-gantt positions its hover popup in a mixed coordinate space, so it
+      // lands far from the bar. Reposition it just below the hovered bar in our own
+      // code (after the library has positioned it) instead of patching the library.
+      // This listener is on the container, so it runs in the bubbling phase AFTER
+      // the library's own bar-level handler has positioned the popup. Repositioning
+      // synchronously here overwrites that position before the browser paints, so
+      // there is no wrong-position flash / flicker.
+      chart.addEventListener('mouseover', event => {
+        const bar = event.target.closest && event.target.closest('.bar-wrapper');
+        if (bar) {
+          this.repositionGanttPopup(bar);
+        }
+      });
+    },
+    repositionGanttPopup(bar) {
+      const popup = document.querySelector('#gantt-chart .popup-wrapper');
+      if (!popup || !popup.offsetParent) {
+        return;
+      }
+      const barRect = bar.getBoundingClientRect();
+      // The popup's offsetParent is the scrolling grid, with offsets that are hard
+      // to model directly. Calibrate instead: park the popup at (0,0), read where it
+      // actually lands, then offset from there to just below the bar. Robust to the
+      // grid's scroll. getBoundingClientRect forces layout but not paint, so the
+      // intermediate (0,0) position is never shown.
+      popup.style.left = '0px';
+      popup.style.top = '0px';
+      const base = popup.getBoundingClientRect();
+      popup.style.left = `${barRect.left - base.left}px`;
+      popup.style.top = `${barRect.bottom - base.top + 8}px`;
     }
   }
 };

From b6d911921fc96e7e3cecf841f5905119595b44e0 Mon Sep 17 00:00:00 2001
From: Benjamin <benjmestrallet@MacBook-Air.local>
Date: Mon, 29 Jun 2026 20:13:37 +0200
Subject: [PATCH 7/7] fix: let the status count chip grow for 100+ task counts

.uiTaskNumber (the column-header task-count pill) had a hard width:28px sized for
two digits, so a count like 105 clipped to "10" with the last digit spilling below.
Switched it to inline-flex + min-width:28px + padding + nowrap so it keeps the same
shape for 1-2 digits and expands cleanly for 3+ digit counts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 webapps/src/main/webapp/skin/css/tasks.less | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/webapps/src/main/webapp/skin/css/tasks.less b/webapps/src/main/webapp/skin/css/tasks.less
index ddfb8a86a..90e0e7ab9 100644
--- a/webapps/src/main/webapp/skin/css/tasks.less
+++ b/webapps/src/main/webapp/skin/css/tasks.less
@@ -773,8 +773,15 @@
               border-color: var(--allPagesPrimaryColor, #476A9C) !important;
               color: var(--allPagesPrimaryColor, #476A9C);
               border: thin solid rgba(0, 0, 0, 0.12);
-              width: 28px;
+              /* Grow with the digit count (min-width keeps the 2-digit pill shape;
+                 padding + nowrap let 3+ digit counts like 105 fit without clipping). */
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              min-width: 28px;
               height: 21px;
+              padding: 0 6px;
+              white-space: nowrap;
               margin-left: 5px ~'; /** orientation=lt */ ';
               margin-right: 5px ~'; /** orientation=rt */ ';
               text-align: center;