Feat/update theming

[Kripu77]

Summary by CodeRabbit

Release Notes

New Features

• Added handdrawn/sketchy rendering mode for drawing tools with configurable roughness and visual styles
• Introduced new select dropdown component with improved UI design

Bug Fixes

• Fixed grid visibility default (now shows minor grid lines by default)
• Improved error handling in collaborative board operations

Style & Design

• Migrated UI to centralized theme system with improved dark mode support
• Updated toolbar, controls, and dropdown styling with new design tokens
• Refined spacing and sizing across UI components
• Replaced icons with updated design system variants

Chores

• Added design system dependencies (Radix UI Select, utility libraries)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
thinkix	Building	Preview	Mar 13, 2026 10:44am

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

The PR introduces a comprehensive design system with centralized theme tokens, implements a new handdrawn mode plugin using RoughJS for stylized drawing, adds a new Select component built on Radix UI, and migrates multiple UI components from hard-coded styling to theme-driven styling across the application.

Changes

Cohort / File(s)	Summary
Design System & Typography app/globals.css, shared/constants/theme.ts, shared/constants/styles.ts	Introduced comprehensive CSS custom property tokens for typography, shadows, backdrop effects, sizing, and animations; created a centralized THEME constant with nested styling categories (toolbar, control, dropdown, dialog, etc.); migrated deprecated style exports to reference THEME.
Handdrawn Mode Plugin features/board/plugins/handdrawn-mode/helpers.ts, features/board/plugins/handdrawn-mode/state.ts, features/board/plugins/handdrawn-mode/patches.ts, features/board/plugins/handdrawn-mode/with-handdrawn.ts, features/board/plugins/handdrawn-mode/index.ts	Implemented a complete handdrawn rendering system with RoughJS integration including proxy SVG wrapper, path conversion utilities, per-board state management, patches for board rendering interception, and public API exports for enabling/disabling handdrawn mode.
Select Component & Exports packages/ui/src/components/ui/select.tsx, packages/ui/src/index.ts	Added a new Radix UI-based select component with multiple sub-components (SelectTrigger, SelectContent, SelectItem, etc.), integrated scroll buttons, and consistent theming support; exposed via barrel export.
Icon System Expansion shared/constants/icons.tsx, shared/constants/tools.tsx	Added three new custom icon components (MixedCanvasIcon, LaserBeamIcon, HanddrawnIcon) and re-exported common Lucide icons; updated tool icons to use the new icon system.
Board State & Grid Configuration features/board/hooks/use-board-state.tsx, features/board/grid/types.ts	Enhanced board state management with persistent handdrawn mode storage via localStorage, added mobile detection in initialization, updated tool change logic to set default creation mode, and adjusted grid density/background defaults.
Toolbar & UI Component Migration features/toolbar/components/BoardToolbar.tsx, features/toolbar/components/AppMenu.tsx, features/toolbar/components/UndoRedoButtons.tsx, features/toolbar/components/ZoomToolbar.tsx	Migrated multiple toolbar components from hard-coded class strings to THEME-based styling; added dynamic icon sizing via CSS variables; introduced keyboard shortcuts and updated menu structure for collaboration features.
Collaboration UI Migration features/collaboration/components/collaborate-button.tsx, features/collaboration/components/collaboration-start-dialog.tsx, features/collaboration/components/collaborative-board.tsx	Replaced fixed class strings with THEME-based styling; added error handling in element hashing; updated offline warning and status indicator styling to support dark mode.
Storage & UI Components features/storage/components/BoardSwitcher.tsx, packages/ui/src/components/ui/dropdown-menu.tsx, packages/ui/src/components/ui/loading-logo.tsx, packages/collaboration/src/components/ui.tsx	Updated dropdown menu item/trigger spacing, replaced loading spinner with icon component, introduced DropdownMenuLabelItem component, and adjusted dialog border styling.
Dialog Component Updates features/dialogs/components/MermaidToBoardDialog.tsx, features/dialogs/components/MarkdownToMindmapDialog.tsx	Refactored Mermaid example selection to use new Select component with EXAMPLES mapping; reformatted error expressions for clarity.
Test Infrastructure & Mocks tests/__mocks__/setup.mts, tests/components/board-toolbar-mobile.test.tsx, tests/components/loading-logo.test.tsx, tests/components/MermaidToBoardDialog.test.tsx, tests/unit/MermaidToBoardDialog.test.tsx, tests/unit/board-utils.test.ts, tests/unit/cursor-manager.test.ts, tests/unit/mermaid-transformers.test.ts, tests/e2e/grid-background.spec.ts	Added global DOMRect polyfill and requestIdleCallback mock; introduced comprehensive UI component mocks for Select and THEME object; updated test assertions and interactions to use data attributes and theme tokens.
Configuration & Environment .gitignore, package.json, vitest.config.mts, next-env.d.ts	Added redesign.plan.md to gitignore; installed new dependencies (@radix-ui/react-select, clsx, tailwind-merge); expanded vitest test discovery patterns; updated Next.js type import path.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• Feature/responsive toolbar palm rejection #15: Both PRs modify the board/toolbar stack including use-board-state, toolbar components, and globals.css, indicating shared styling and state management changes.
• Feat/add collab mode #20: Both PRs modify collaboration feature components and their integration with the board system, directly related at the collaboration UI level.
• Feat/board background patterns #18: Both PRs modify board grid types and constants (DEFAULT_GRID_DENSITY and DEFAULT_BOARD_BACKGROUND.showMajor) in the same file.

Poem

🎨 A canvas reborn with handdrawn grace,
Theme tokens dancing in their proper place,
Selects and icons join the grand design,
From toolbar to boards, it all aligns! 🐰✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.14% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Feat/update theming' is directly related to the main changes in the pull request, which involve a comprehensive theming system update across the codebase.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/update-themeing

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

[github-actions]

❌ Test Results

Metric	Coverage
Lines	0%
Functions	60.98%
Branches	41.5%
Statements	54.06%
Average	39.1%

📦 Download Coverage Report

How to view coverage report

1. Download the coverage artifact from the link above
2. Extract the ZIP file
3. Open index.html in your browser

---

Commit: f044c8646af02382e4c2a83c1592ba29d4e4e55d