feat(web): 3D board view — spatial kanban with camera controls - #1565
feat(web): 3D board view — spatial kanban with camera controls#1565neo37 wants to merge 7 commits into
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (17)
🚧 Files skipped from review as they are similar to previous changes (17)
📝 WalkthroughWalkthroughThe PR adds a 3D Kanban view. It updates view-mode state, toolbar and settings controls, board routing, interaction behavior, tests, and localization. Changes3D board view
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant BoardToolbar
participant PreferencesStore
participant BoardRoute
participant KanbanBoard3D
participant Router
User->>BoardToolbar: Selects the 3D view
BoardToolbar->>PreferencesStore: Sets viewMode to board3d
BoardRoute->>KanbanBoard3D: Passes sorted project data
User->>KanbanBoard3D: Selects a task card
KanbanBoard3D->>Router: Updates the taskId parameter
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
PR Summary by QodoAdd CSS 3D Kanban board view with camera controls
AI Description
Diagram
High-Level Assessment
Files changed (7)
|
Code Review by Qodo
1.
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
apps/web/src/components/kanban-board-3d/index.tsx (2)
1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse a PascalCase component filename.
apps/web/src/components/kanban-board-3d/index.tsxdefinesKanbanBoard3D. Rename the component file toKanbanBoard3D.tsx. Update the route and test imports.As per coding guidelines,
apps/web/src/components/**/*.{ts,tsx}requires “Use PascalCase file names for frontend components.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/components/kanban-board-3d/index.tsx` at line 1, Rename the component file defining KanbanBoard3D from index.tsx to KanbanBoard3D.tsx, then update all route and test imports or references to use the new PascalCase path without changing component behavior.Source: Coding guidelines
34-34: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDeclare the component return type.
KanbanBoard3Dhas typed props but an inferred return type. Add an explicit component return type.As per coding guidelines,
apps/web/src/components/**/*.{ts,tsx}requires “Always type props and component return types in React components.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/components/kanban-board-3d/index.tsx` at line 34, Update the KanbanBoard3D component declaration to include an explicit React component return type, while preserving its existing typed KanbanBoard3DProps parameter and implementation.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/components/kanban-board-3d/index.tsx`:
- Around line 228-240: Update the 3D board component around the reset button and
gesture hint to use useTranslation instead of hardcoded “Reset” and instruction
text. Add the corresponding translation keys to the project’s existing locale
resources, then render both labels through the translation function while
preserving the current controls and layout.
- Around line 103-108: Update the kanban viewport’s onWheel handler to ignore
camera zoom when the event target is inside the task-list scroll container,
allowing its native scrolling. Remove touch-none from ancestors of that
container, and add coverage verifying wheel and touch scrolling for overflowing
task columns.
---
Nitpick comments:
In `@apps/web/src/components/kanban-board-3d/index.tsx`:
- Line 1: Rename the component file defining KanbanBoard3D from index.tsx to
KanbanBoard3D.tsx, then update all route and test imports or references to use
the new PascalCase path without changing component behavior.
- Line 34: Update the KanbanBoard3D component declaration to include an explicit
React component return type, while preserving its existing typed
KanbanBoard3DProps parameter and implementation.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 4fdb1c9c-d692-476e-bdfa-5281b0244054
⛔ Files ignored due to path filters (1)
README.mdis excluded by!**/*.md
📒 Files selected for processing (6)
apps/web/src/components/board/board-toolbar.tsxapps/web/src/components/kanban-board-3d/index.test.tsxapps/web/src/components/kanban-board-3d/index.tsxapps/web/src/routes/_layout/_authenticated/dashboard/workspace/$workspaceId/project/$projectId/board.tsxapps/web/src/store/user-preferences.test.tsapps/web/src/store/user-preferences.ts
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@i18n/de-DE.json`:
- Line 481: Translate the new 3D control strings instead of leaving English
fallback values: update settings.preferencesPage.board3d and
tasks.board3d.hint/reset in i18n/de-DE.json at lines 481 and 1923-1925,
i18n/el-GR.json at lines 481 and 1923-1925, and i18n/es-ES.json at lines 378 and
1923-1925 with accurate German, Greek, and Spanish translations respectively.
In `@i18n/fr-FR.json`:
- Line 481: Localize the new 3D-board strings in all listed locale files:
translate settings.preferencesPage.board3d and tasks.editor.board3d.hint/reset
in i18n/fr-FR.json (481-481, 1924-1925), i18n/hi-IN.json (481-481, 1924-1925),
and i18n/id-ID.json (481-481, 1924-1925), replacing the English fallback values
with approved translations.
In `@i18n/it-IT.json`:
- Around line 480-481: Translate the new 3D-board localization values instead of
leaving English fallbacks: update settings.preferencesPage.board3d and the
camera hint/reset label in i18n/it-IT.json at lines 480-481 and 1922-1925 with
Italian text, and make the corresponding translations in i18n/ko-KR.json at
lines 480-481 and 1922-1925 with Korean text.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 006cc39b-2bc1-422a-abf3-f24e6b1c2f5e
📒 Files selected for processing (23)
apps/web/src/components/board/board-toolbar.tsxapps/web/src/components/kanban-board-3d/KanbanBoard3D.test.tsxapps/web/src/components/kanban-board-3d/KanbanBoard3D.tsxapps/web/src/routes/_layout/_authenticated/dashboard/settings/account/preferences.tsxapps/web/src/routes/_layout/_authenticated/dashboard/workspace/$workspaceId/project/$projectId/board.tsxi18n/de-DE.jsoni18n/el-GR.jsoni18n/en-US.jsoni18n/es-ES.jsoni18n/fr-FR.jsoni18n/hi-IN.jsoni18n/id-ID.jsoni18n/it-IT.jsoni18n/ko-KR.jsoni18n/mk-MK.jsoni18n/nl-NL.jsoni18n/pt-BR.jsoni18n/ru-RU.jsoni18n/schema.jsoni18n/tr-TR.jsoni18n/uk-UA.jsoni18n/vi-VN.jsoni18n/zh-CN.json
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/web/src/components/board/board-toolbar.tsx
- apps/web/src/routes/_layout/_authenticated/dashboard/workspace/$workspaceId/project/$projectId/board.tsx
Add a third view mode to the project board: a spatial 3D scene rendered with pure CSS 3D transforms (no WebGL, no new dependencies). - Board / 3D / List switch in the board toolbar - Columns laid out in perspective with a subtle arc toward the camera - Camera: drag to pan, right/ctrl-drag to rotate (tilt clamped), wheel to zoom (clamped), Reset button restores the default view - Task cards stay interactive: click opens the task details sheet via the taskId search param - pointer-events isolation so the full-screen world plane never swallows clicks meant for cards under preserve-3d - View mode persisted in user preferences - Unit tests: rendering, column layout math, camera pan/rotate/zoom clamping, drag lifecycle, task navigation, reset
- Wheel over an overflowing task list scrolls the list; the camera only zooms once the list is at the edge of its scroll range. Drop touch-none from the viewport and mark task lists touch-pan-y so touch scrolling works too. - Add the 3D option to the Default view select in account preferences. - Localize the Reset button, camera hint, view labels (i18n keys tasks:view.board3d, tasks:board3d.*, settings:preferencesPage.board3d). - Rename component file to PascalCase, add explicit return type. - Tests for wheel-over-scrollable behavior (14 total).
34da8b8 to
e2e7281
Compare
The board3d settings label, camera hint and reset label were filled with the English fallback; provide proper translations for every supported locale.
|
I must admit it looks nice, but I am quite certainly unsure if that fits to Kaneo itself. lol. |
I understand you perfectly. Moreover, your rules say to discuss new features first, then implement them—which is generally considered good etiquette. However, to discuss anything, you need something to discuss—which is precisely what my pull request is. Your project is a Kanban board on which agents work—and the more AI develops, the more we humans will need visualization tools to understand what's happening. 3D is a way to convey information more succinctly—there's really no need for it right now, but I sincerely believe that "this is the way." I suggest hiding the 3D visualization button somewhere in the profile settings so that it's not available by default, but the user can enable it if they want (your expertise is needed here). I'll implement it. Thanks for the feedback. I await your reply. Vasily Kiselev. |
|
Wow, this is one of the most creative ideas I've seen. I love it haha. I do agree with @tinsever regarding if it fits the product and I'd like to think about configuring if you wanna see this view. It's too cool to leave it unmerged, give me a few days to think about this! |
3 participants
✨ 3D Board View
This PR adds a third way to look at a project board: a spatial 3D scene, sitting right next to the existing Board and List modes in the board toolbar.
🎥 Live demo (opens straight in 3D): https://neo37.github.io/kaneo/
What it looks like
Columns are laid out in perspective with a subtle arc — outer columns recede and turn toward the camera — so a wide board reads like a landscape you can fly over rather than a strip you scroll. The camera is fully in the user's hands:
Cards are not decorations: every task card stays fully interactive and opens the regular task details sheet via the
taskIdsearch param, exactly like in 2D. Switching back and forth loses nothing, and the chosen view mode is persisted in user preferences like the existing modes.Why CSS 3D and not WebGL
The whole scene is ordinary DOM under a
perspectiveviewport: apreserve-3d"world" transformed by a tiny camera state (x, y, z, rx, ry) and columns positioned withtranslate3d/rotateY. That means:<button>elements.One subtle bug was found and fixed along the way: the full-screen world plane participates in 3D hit-testing and can swallow clicks meant for coplanar child cards. The plane is now
pointer-events: nonewithpointer-events: autorestored on columns, so clicks always land where the user sees them.Changes
apps/web/src/components/kanban-board-3d/— the new view (+ tests)apps/web/src/components/board/board-toolbar.tsx— Board / 3D / List switchapps/web/src/store/user-preferences.ts—viewModeunion extended with"board3d"README.md— a short section documenting the viewTesting
biome checkclean; the two test files failing onmain(use-project-websocket,members-table) fail without this change as well.The label on the toggle is a literal "3D" (language-neutral), so no i18n keys were added — happy to wire it through the i18n schema instead if you prefer, and generally happy to adjust anything about the layout or scope.
Summary by CodeRabbit