feat: Tasks UI revamp — project cards & list toolbars - EXO-88314

[Jihed525]

(cherry picked from commit b14b8a2)

[boubaker]

Reviewed the diff and cross-checked the actual template/CSS state on backport/EXO-88314-develop, plus the shared application-toolbar component contract from Meeds-io/social. This is a large, mostly-frontend revamp (project cards, list toolbars, CSS cleanup) — overall direction is good (removing the flip-card design, jQuery width hacks, and duplicated color/chip CSS in favor of shared components), but there's one confirmed visual regression.

Confirmed bug — dead CSS still referenced by the Gantt view

tasks.less removes the .unscheduled-task-container / .unscheduled-task-btn / .unscheduled-task-badge rules (absolute positioning, FAB background, badge circle styling), but TasksViewGantt.vue still renders exactly those classes for the floating "unscheduled tasks" button + counter badge (confirmed both the removed CSS and the still-present markup on the PR branch). Without the CSS, that button loses its floating position and the badge its circle styling in the Gantt tab. Looks like this got swept up in the broader "remove dead flip-card CSS" cleanup by mistake — this block is unrelated to the project-card flip removal.

Performance — eager per-card stats fetch

ProjectCardFront.vue now calls getStatusesByProjectId() + getProjectStats() in mounted() unconditionally for every rendered card, to feed the new progress-bar footer. A page of 20 project cards fires ~40 parallel REST calls on load. The previous design (ProjectCardReverse.vue, now deleted) only fetched stats lazily when a card was flipped by the user. Worth considering lazy-loading (e.g. only once a card is visible) or a batched stats endpoint, especially since a similar N+1 pattern was just fixed on the backend side for favorites in PR #622.

Known limitation, self-documented — client-side "Favorites" project filter

ProjectCardList.vue's displayedProjects filters the already-paginated projects array by .favorite when projectFilterSelected === 'FAVORITES', since ProjectRestService.getProjects has no FAVORITES branch server-side (confirmed). canShowMore is based on the unfiltered count, so a user with few favorites scattered across many projects may need to click "Load more" repeatedly before seeing them all. Not a crash, and the code comment already flags it as a deliberate workaround — but a real backend filter (could reuse FavoriteUtil.getFavoriteObjectIds from PR #622) would fix both the UX and the wasted client-side fetch/filter.

Good

• application-toolbar reuse in ProjectListToolbar.vue / TasksListToolbar.vue: verified the props (left-button, right-text-filter, right-select-box, right-filter-button, filters-count, compact) and events (left-button-click, filter-text-input-end-typing, filter-select-change, filter-button-click) against the actual shared component in Meeds-io/social — all match. Nice cleanup of the old per-component jQuery width/select hacks.
• Row-level @click="openTaskDrawer()" + targeted @click.stop on TaskViewListItem.vue's checkbox/assignee cells is consistent and doesn't leave any inner clickable element mis-firing the row handler.
• No backend/Java changes, no new files, so no license-header concerns here.

CI note

"Analyse Project with SonarCloud" is failing, but on a transient infra error (Failed to query JRE metadata: ... HTTP 504 Gateway Timeout from SonarCloud's own API) — unrelated to this diff, should clear on re-run. "PR Build" and Snyk both pass.

[Jihed525]

Thanks for the review — addressed in 4f9ae27:

• Confirmed bug: restored the .unscheduled-task-container / .unscheduled-task-btn / .unscheduled-task-badge rules in tasks.less (dropped by mistake in the flip-card CSS cleanup). TasksViewGantt.vue's floating unscheduled-tasks button and its badge are back to their intended styling.
• Performance: ProjectCardFront.vue now lazy-fetches project stats via an IntersectionObserver — only once a card actually scrolls into view — instead of firing getStatusesByProjectId/getProjectStats unconditionally for every rendered card on mount.

Left the client-side "Favorites" filter as-is for now since it's flagged as a non-blocking, self-documented workaround rather than a bug — happy to follow up with a real backend filter (reusing FavoriteUtil.getFavoriteObjectIds from #622) in a separate PR if you'd rather not carry it.

Ready for re-review.

[boubaker]

Follow-up after the fix commits:

• 4f9ae27e / 75b321ee9 correctly restored the Gantt .unscheduled-task-container styles and lazy-loaded the per-card stats fetch (nice IntersectionObserver-based fix, addresses the perf note from the review) — confirmed both by re-reading the diff and by building webapps locally.
• While double-checking every other class this PR removed from tasks.less against the current templates, found one more regression from the same cleanup that wasn't covered yet: the whole .tasksToolbar block (.inputTasksFilter, .taskFilterMobile, .selectPrimaryFilter, .selectTasksFilter, .taskDisplay, .taskTabCards, .taskTabList, .filterTasksSetting, ...) was also dropped, but TasksViewToolbar.vue — the toolbar on a project's task board/list/gantt view, untouched by this PR — still renders every one of these classes. Restored it in ecedb153e.
• Also found beforeDestroy() { this.statsObserver && this.statsObserver.disconnect(); } from 4f9ae27e was tripping eslint's no-unused-expressions and failing npm run build (confirmed on the actual PR Build check for that commit); 75b321ee9 already fixed it with an explicit if before I got to it.
• Verified locally with mvn -pl webapps -am install (LESS compile + webpack/eslint) — green on ecedb153e.

No other missing class found after checking the full removed-class list against the current template tree.

[boubaker]

All the issues raised are now fixed:

• Gantt .unscheduled-task-container CSS regression — fixed
• Eager per-card stats fetch (~40 parallel REST calls on a 20-card page) — fixed with an IntersectionObserver-based lazy fetch
• The ESLint no-unused-expressions error that broke PR Build on the fix commit — fixed
• .tasksToolbar CSS regression affecting TasksViewToolbar.vue (missed in the first pass, found while double-checking every removed class against the current templates) — fixed and verified with a local mvn -pl webapps -am install (LESS compile + webpack/eslint green)

PR Build (the only required check on develop) is green. Analyse Project with SonarCloud is failing on an unrelated, transient HTTP 504 Gateway Timeout from SonarCloud's own JRE-provisioning API — not a code issue.

Remaining known limitation: the "Favorites" project filter is client-side only (no backend filter yet), already self-documented in the code as a deliberate trade-off — not blocking.

Note: some of the fixes above (the .tasksToolbar CSS restoration, commit ecedb15) were contributed directly by me to this branch. Approving with the author's explicit awareness/confirmation of that.

Approving.