feat: Add swimlane grouping by labels and assignees

[Pavlinchen]

• Target version: main (NC34)
• Resolves: Swimlanes support #32
  • perhaps also relates to:
    • user can change group by [discussion] #1878
    • status board, label board and assignee board ... #3930
    • Custom Deck Overview sorted by Tags (and Lists?) #3416

Disclaimer

This PR was written mainly with LLM assistance (Claude Opus 4.7 max effort) for technical implementation.

Summary

Adds horizontal swimlane grouping to the board view.

Users can now group cards by labels or assignees via the existing "View Modes" menu. Each group renders as a collapsible horizontal row with its own set of stacks, showing only the cards that belong to that group.

Key behaviors:

• Cards with multiple labels (or multiple assignees) appear in all matching lanes — a subtle badge indicates the card is in multiple lanes
• A "No label" / "Unassigned" catchall lane appears at the bottom for ungrouped cards
• Empty lanes (labels/assignees with no cards) are automatically hidden
• Lanes can be collapsed/expanded (persisted per-user in localStorage)
• Lanes can be reordered via drag-and-drop (editors only, persisted via OCS config API as shared board setting)
• Card drag-and-drop works within each lane across stacks, but cross-lane dragging is blocked (prevents accidental label/assignee changes)
• Swimlane mode and lane order are shared board settings — all users see the same layout, only editors can change them (persisted via setAppValue, gated by PERMISSION_EDIT)
• Full keyboard and screen reader accessibility — aria-expanded, aria-label, focus-visible styles

No database changes — swimlanes are a computed view layer derived from existing card labels and assignee data.

Architecture

The implementation adds no new API endpoints or database tables. It extends the existing frontend state management and adds two new Vue components:

Layer	Changes
Vue components	New Swimlane.vue and SwimlaneHeader.vue; modified Board.vue, Stack.vue, Controls.vue, CardBadges.vue
Vuex store	New cardsByStackAndLane getter in card.js; swimlane order state + actions in main.js
Backend	Extended BoardService::enrichWithBoardSettings() to include swimlane config (3 new getAppValue calls); ConfigService::set() gates swimlane keys with PERMISSION_EDIT
Persistence	Swimlane mode and lane order stored as shared board settings via setAppValue (visible to all users, editable by board editors only). Collapse state remains per-user in localStorage

The existing vue-smooth-dnd Container/Draggable pattern is reused for both within-lane card drag and lane reordering. Lane isolation uses group-name scoping ('stack-' + lane.key) to prevent cross-lane card drops.

How it works

1. Controls.vue adds "Group by" radio options to the View Modes menu
2. When a mode is selected, it is stored via the OCS config API as a shared board setting and an event-bus message triggers Board.vue to re-render
3. Board.vue switches from the flat stack view to a vertical list of Swimlane components
4. Each Swimlane renders a SwimlaneHeader (with label color/avatar, card count, collapse toggle) and the same horizontal stack layout
5. Stack.vue accepts an optional lane prop — when present, it uses cardsByStackAndLane to filter cards for that lane
6. CardBadges.vue shows a duplicate badge when a card appears in 2+ lanes

Changes

New files (4):

• src/components/board/Swimlane.vue — Swimlane row wrapper (header + stacks)
• src/components/board/SwimlaneHeader.vue — Lane header with label/avatar, count, collapse, drag handle
• tests/unit/Service/ConfigServiceTest.php — PHPUnit tests for swimlane config storage and permission gating
• cypress/e2e/swimlanesFeatures.js — Cypress E2E tests for swimlane grouping interactions

Modified files (8):

• src/components/board/Board.vue — Conditional flat vs swimlane rendering, lane computation, lane reorder DnD (editor-gated)
• src/components/board/Stack.vue — Accept lane prop, lane-scoped card filtering and DnD group names
• src/components/Controls.vue — "Group by" radio selector in View Modes menu (disabled for non-editors)
• src/components/cards/CardBadges.vue — Duplicate lane badge
• src/store/card.js — cardsByStackAndLane getter
• src/store/main.js — Swimlane mode/order state, mutations, actions, config loading
• lib/Service/BoardService.php — Swimlane settings in board enrichment (shared via getAppValue)
• lib/Service/ConfigService.php — Swimlane config keys gated by PERMISSION_EDIT, stored via setAppValue

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Documentation (manuals or wiki) has been updated or is not required
• Verify with NC dark mode / high-contrast themes
• Test with right-to-left (RTL) languages

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)