Skip to content

feat(kanban): swimlanes (2-D grouping in the board view)#38

Merged
cnjack merged 2 commits into
mainfrom
feat/kanban-c4-swimlanes
Jun 23, 2026
Merged

feat(kanban): swimlanes (2-D grouping in the board view)#38
cnjack merged 2 commits into
mainfrom
feat/kanban-c4-swimlanes

Conversation

@cnjack

@cnjack cnjack commented Jun 22, 2026

Copy link
Copy Markdown
Owner

What

Implements C4 — an optional second grouping dimension rendered as horizontal swimlane rows, turning the board into a lane × column grid (e.g. priority lanes × status columns).

Pure presentational layer over the shared board model, so it works on both the file board and the DB board (both render BoardSurface). No backend/migration/WS changes.

Changes

  • shared/lib/board.tsswimlaneBy config field + partitionSwimlanes() (laneValue → columnValue → cards), reusing groupValueOf / effectiveColumns for lane values.
  • shared/components/board/BoardSwimlanes.tsx (new) — the 2-D grid view. A read-friendly overview; clicking a card opens the same BoardPeek (where its status / swimlane attribute can be changed). Pointer drag intentionally stays in the 1-D board view.
  • BoardSurface — a "Swimlane" toolbar select (None / the non-column dimensions) and a render branch that swaps in the grid when a swimlane is chosen.
  • Thread swimlaneBy through the three platform config types (desktop BoardConfig, web file-board BoardConfigJSON, web DB-board view).
  • tests/unit/boardSwimlanes.spec.ts + i18n (zh translations).

Verification

  • tsc clean (root + web), unit tests pass.
  • Throwaway harness confirmed the priority×status grid (cards in the correct cells, overdue dates red, task counts, empty-cell placeholders), card-click → peek, and that switching Swimlane → None restores the normal drag-enabled board.

Follow-up

Drag-and-drop directly within the swimlane grid (cross-lane drag updating both status and the swimlane attribute). For now, cards are repositioned via the peek or the 1-D board view.

🤖 Generated with Claude Code

Add an optional second grouping dimension rendered as horizontal swimlane rows,
so the board becomes a lane × column grid (e.g. priority lanes × status columns).
A pure presentational layer over the shared model — works on both the file board
and the DB board (both render BoardSurface). No backend/migration/WS changes.

- shared/lib/board.ts: `swimlaneBy` config field + partitionSwimlanes() (laneValue
  → columnValue → cards), reusing groupValueOf/effectiveColumns for lane values.
- shared/components/board/BoardSwimlanes.tsx: the 2-D grid view. A read-friendly
  overview; clicking a card opens the same BoardPeek (where its status / swimlane
  attribute can be changed). Pointer drag stays in the 1-D board view by design.
- BoardSurface: a "Swimlane" toolbar select (None / the non-column dimensions) and
  a render branch that swaps in the grid when a swimlane is chosen.
- Thread swimlaneBy through the three platform config types (desktop BoardConfig,
  web file-board BoardConfigJSON, web DB-board view).
- tests/unit/boardSwimlanes.spec.ts + i18n (zh translations).

Verified: root+web tsc clean, unit tests pass, and a throwaway harness confirmed
the priority×status grid (cards in the right cells, overdue red, task counts,
empty cells), card-click → peek, and that switching Swimlane→None restores the
normal drag-enabled board.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jun 22, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@cnjack, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 10 minutes and 36 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9d2c8d26-ec48-4d2a-ae23-1e03cafa5a10

📥 Commits

Reviewing files that changed from the base of the PR and between 228b5cd and 8a069bd.

📒 Files selected for processing (17)
  • services/jtype-web/frontend/src/pages/Kanban.tsx
  • services/jtype-web/frontend/src/pages/WebBoardView.tsx
  • shared/components/board/BoardSurface.tsx
  • shared/components/board/BoardSwimlanes.tsx
  • shared/components/board/index.ts
  • shared/i18n/locales/en/messages.mjs
  • shared/i18n/locales/en/messages.po
  • shared/i18n/locales/ja/messages.mjs
  • shared/i18n/locales/ja/messages.po
  • shared/i18n/locales/ko/messages.mjs
  • shared/i18n/locales/ko/messages.po
  • shared/i18n/locales/zh/messages.mjs
  • shared/i18n/locales/zh/messages.po
  • shared/lib/board.ts
  • src/components/BoardView.tsx
  • src/lib/types.ts
  • tests/unit/boardSwimlanes.spec.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/kanban-c4-swimlanes

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

# Conflicts:
#	shared/i18n/locales/en/messages.mjs
#	shared/i18n/locales/ja/messages.mjs
#	shared/i18n/locales/ko/messages.mjs
#	shared/i18n/locales/zh/messages.mjs
@cnjack cnjack merged commit 591643b into main Jun 23, 2026
3 checks passed
@cnjack cnjack deleted the feat/kanban-c4-swimlanes branch June 23, 2026 04:48
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