Skip to content

feat: revamp the project board header toolbar (compact, agenda-style,…#616

Open
bmestrallet wants to merge 2 commits into
feat/favorite-projects-tasksfrom
feat/task-application-toolbar
Open

feat: revamp the project board header toolbar (compact, agenda-style,…#616
bmestrallet wants to merge 2 commits into
feat/favorite-projects-tasksfrom
feat/task-application-toolbar

Conversation

@bmestrallet

Copy link
Copy Markdown

What

Reworks the project board header toolbar to be compact and responsive, modelled on the Agenda / Documents toolbars, and makes task search usable on mobile.

Before, the header used a hand-rolled v-toolbar with an inline v-tabs view switcher, an always-on keyword field and a separate Filter button, laid out with a fixed 30 % / 70 % flex split plus bespoke @media CSS that simply hid the keyword search on small screens.

Changes

  • Breadcrumb (back link + project name) stays on the left; the task-board-header extension point (favorite ⭐ / AI 🔔) moves to the right, grouped with the other actions.
  • The Board / List / Plan view selector becomes a compact icon + dropdown menu — new TasksViewSwitcher, styled after agenda's AgendaSwitchView — kept visible on mobile.
  • The keyword search collapses behind a filter icon and expands full width with a back arrow (Esc closes it) → search now works on phones.
  • The advanced filter keeps its own icon (with applied-filter count) and opens the existing Sort & Filter drawer.
  • Right-hand action order: favorite/AI · view selector · search · advanced filter. All icons are 36×36 / 20px with the lighter text-light-color, evenly spaced; the back arrow aligns with the first column's content.
  • The view-switcher dropdown is relocated into the Vuetify app root so it renders above the kanban board with the correct (opaque) theme background.
  • Removes the now-dead toolbar CSS (30/70 flex split, view-tab styling, mobile overrides).

No backend changes. New i18n key label.viewOptions (en only; Crowdin syncs the rest).

Test

Verified live on a Meeds 7.2.x server: Board/List/Plan switching, full-width search expand/collapse (incl. narrow widths), advanced filter drawer, favorite/AI icons, alignment and even spacing — desktop and compact.

@github-actions github-actions Bot added the partialCIBuild Perform Partial CI Build label Jun 28, 2026
Benjamin and others added 2 commits June 30, 2026 13:34
… mobile search)

Replace the bespoke project board toolbar (inline v-tabs view switcher,
always-on keyword field and a separate Filter button, with a fixed 30/70 flex
split and custom mobile CSS that simply hid the search) with a compact,
responsive header modelled on the Agenda/Documents toolbars:

- the breadcrumb (back link + project name) stays on the left; the favorite/AI
  board-header extension point moves to the right with the other actions;
- the Board/List/Plan view selector becomes a compact icon + dropdown menu
  (new TasksViewSwitcher, agenda AgendaSwitchView style), kept visible on mobile;
- the keyword search collapses behind a filter icon and expands full width with
  a back arrow (Esc closes it), so search finally works on small screens;
- the advanced filter keeps its own icon (with applied-filter count) opening the
  existing Sort & Filter drawer;
- right-hand action order: favorite/AI, view selector, search, advanced filter;
  all icons are 36x36 / 20px with the lighter text-light-color, evenly spaced;
- the back arrow aligns with the first column content (board padding).

The view-switcher dropdown is relocated into the Vuetify app root so it renders
above the kanban board with the correct (opaque) theme background. Removes the
now-dead toolbar CSS (flex split, view-tab styling, mobile overrides).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
On small screens (smAndDown) the view selector is hidden, matching agenda's
toolbar; the search and advanced filter remain. The current view is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@bmestrallet bmestrallet force-pushed the feat/task-application-toolbar branch from 9d539b6 to b067699 Compare June 30, 2026 11:35
@github-actions github-actions Bot removed the partialCIBuild Perform Partial CI Build label Jun 30, 2026
@sonarqubecloud

Copy link
Copy Markdown

@bmestrallet bmestrallet changed the base branch from develop to feat/favorite-projects-tasks June 30, 2026 11:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant