Skip to content

feat(dashboard): add the toolbar, five status columns, and task cards - #29

Merged
Alejandroq12 merged 7 commits into
devfrom
feature/dashboard-main-toolbar
Aug 6, 2026
Merged

feat(dashboard): add the toolbar, five status columns, and task cards#29
Alejandroq12 merged 7 commits into
devfrom
feature/dashboard-main-toolbar

Conversation

@Alejandroq12

@Alejandroq12 Alejandroq12 commented Aug 6, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

  • New Features

    • Added full task dashboards for Dashboard and My Tasks views.
    • Added responsive task-board columns with scrolling, status counts, and accessible labels.
    • Added task cards showing points, due dates, tags, assignees, attachments, forks, and comments.
    • Added responsive toolbar controls, mobile navigation tabs, view options, and task creation buttons.
    • Added sample tasks across five workflow statuses and refreshed interface icons.
  • Documentation

    • Updated dashboard documentation and runtime requirements.
  • Tests

    • Expanded navigation and dashboard coverage, including headings, columns, mobile styling, and task-card details.

@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown

Review Change Stack

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 7cd29ae9-f66d-4104-ae88-d712889aaf46

📥 Commits

Reviewing files that changed from the base of the PR and between bf15ba4 and 1a65012.

📒 Files selected for processing (1)
  • README.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • README.md

📝 Walkthrough

Walkthrough

The PR adds typed task-board data and reusable icons, replaces placeholder task pages with responsive dashboards, and expands route tests for headings, columns, task-card metadata, and navigation controls.

Changes

Task dashboard

Layer / File(s) Summary
Shared task data and icons
src/features/tasks/types.ts, src/features/tasks/sample-tasks.ts, src/components/ui/icons.tsx, src/features/tasks/icons.tsx, src/components/layout/Header.tsx, src/components/layout/Sidebar.tsx
Defines task-board types and sample columns. Adds reusable SVG icons and wires shared icons into the header and sidebar.
Board and task views
src/features/tasks/Toolbar.tsx, src/features/tasks/TaskCard.tsx, src/features/tasks/TaskBoard.tsx, src/features/tasks/Dashboard.tsx, src/features/tasks/MyTask.tsx
Adds responsive toolbar, task-card, and board rendering. Dashboard and task pages use the sample columns with accessible page headings.
Route and dashboard validation
src/app/router.test.tsx, src/app/router.tsx, README.md, .npmrc, package.json
Updates route assertions for headings, board content, task-card metadata, dashboard controls, and mobile navigation. Updates project status, router documentation, and Node.js and npm requirements.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Dashboard
  participant Toolbar
  participant TaskBoard
  participant TaskCard
  Dashboard->>Toolbar: render task controls
  Dashboard->>TaskBoard: pass sampleColumns
  TaskBoard->>TaskCard: pass each task
  TaskCard-->>TaskBoard: render task metadata
Loading

Possibly related PRs

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main dashboard changes: the toolbar, five status columns, and task cards.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/dashboard-main-toolbar

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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 `@src/features/tasks/Toolbar.tsx`:
- Around line 7-24: Update the mobile and desktop view switchers in the Toolbar
component to use NavLink elements targeting the dashboard and my-task routes
instead of static spans. Derive each item’s text, border, and indicator styles
from NavLink’s active state so the correct view is highlighted on both routes,
and add coverage verifying the active toolbar item for each route.
🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3811bbef-67b4-4ce2-90b9-538b1e9ee185

📥 Commits

Reviewing files that changed from the base of the PR and between b1281bc and e60622f.

📒 Files selected for processing (10)
  • src/app/router.test.tsx
  • src/components/layout/Sidebar.tsx
  • src/components/ui/icons.tsx
  • src/features/tasks/Dashboard.tsx
  • src/features/tasks/MyTask.tsx
  • src/features/tasks/TaskBoard.tsx
  • src/features/tasks/TaskCard.tsx
  • src/features/tasks/Toolbar.tsx
  • src/features/tasks/icons.tsx
  • src/features/tasks/sample-tasks.ts

Comment thread src/features/tasks/Toolbar.tsx

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/features/tasks/TaskCard.tsx (1)

42-53: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Expose fork and comment counts to assistive technology.

The fork and comment icons are decorative, and their numeric wrappers have no accessible labels. Screen readers expose bare values such as 5 and 3, without identifying whether they represent forks or comments. (raw.githubusercontent.com)

Add an accessible name to each count group, or provide visually hidden labels.

Proposed fix
-          <span className="flex items-center gap-1 text-body-m">
+          <span
+            role="img"
+            aria-label={`${task.forks} forks`}
+            className="flex items-center gap-1 text-body-m"
+          >
             {task.forks}
             <ForkIcon className="size-4" />
           </span>
-          <span className="flex items-center gap-1 text-body-m">
+          <span
+            role="img"
+            aria-label={`${task.comments} comments`}
+            className="flex items-center gap-1 text-body-m"
+          >
             {task.comments}
             <ChatIcon className="size-4" />
           </span>
🤖 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 `@src/features/tasks/TaskCard.tsx` around lines 42 - 53, The fork and comment
count groups in TaskCard need accessible names while their icons remain
decorative. Update the respective count wrappers around task.forks and
task.comments to include descriptive accessible labels or visually hidden text
identifying “forks” and “comments.”
🤖 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 @.npmrc:
- Line 2: Ensure the CI/tooling configuration pins npm to version 11.10.0 or
newer, or fails when the installed npm version is below that minimum before
relying on the min-release-age setting in .npmrc. Validate the npm CLI version
directly rather than using npm config get min-release-age, which may report null
after npm converts the setting.

---

Outside diff comments:
In `@src/features/tasks/TaskCard.tsx`:
- Around line 42-53: The fork and comment count groups in TaskCard need
accessible names while their icons remain decorative. Update the respective
count wrappers around task.forks and task.comments to include descriptive
accessible labels or visually hidden text identifying “forks” and “comments.”
🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 2ee28132-d1b2-4890-b940-32e249e1b28f

📥 Commits

Reviewing files that changed from the base of the PR and between e60622f and df6d649.

📒 Files selected for processing (12)
  • .npmrc
  • README.md
  • src/app/router.test.tsx
  • src/app/router.tsx
  • src/components/layout/Header.tsx
  • src/components/layout/Sidebar.tsx
  • src/components/ui/icons.tsx
  • src/features/tasks/TaskBoard.tsx
  • src/features/tasks/TaskCard.tsx
  • src/features/tasks/Toolbar.tsx
  • src/features/tasks/sample-tasks.ts
  • src/features/tasks/types.ts
💤 Files with no reviewable changes (1)
  • src/app/router.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
  • src/features/tasks/TaskBoard.tsx
  • src/components/layout/Sidebar.tsx
  • src/features/tasks/Toolbar.tsx
  • src/app/router.test.tsx

Comment thread .npmrc

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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 `@package.json`:
- Around line 7-8: Align the package engine constraints by updating the node and
npm requirements in package.json: either raise the node minimum to >=24.14.1
while retaining npm >=11.10.0, or lower the npm minimum to >=11.3.0 while
retaining node >=24.
🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 90b1ef36-e2b5-46f7-abd5-193ad39e8e4d

📥 Commits

Reviewing files that changed from the base of the PR and between df6d649 and 84c24d4.

📒 Files selected for processing (1)
  • package.json

Comment thread package.json Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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 `@README.md`:
- Line 29: Update the Node/npm version note in the README to state that
min-release-age was introduced in npm 11.10.0, while retaining the Node 24.14.1
and bundled npm 11.11.0 details as applicable. Remove the inaccurate claim that
npm 11.11.0 is the first enforcing release.
🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0534024e-7392-4999-adbd-e3ed46232216

📥 Commits

Reviewing files that changed from the base of the PR and between 84c24d4 and bf15ba4.

📒 Files selected for processing (2)
  • README.md
  • package.json
🚧 Files skipped from review as they are similar to previous changes (1)
  • package.json

Comment thread README.md Outdated
@Alejandroq12
Alejandroq12 merged commit ea0f914 into dev Aug 6, 2026
1 check passed
@Alejandroq12 Alejandroq12 added this to the UI milestone Aug 6, 2026
@Alejandroq12 Alejandroq12 moved this from Done to In Progress in @Alejandroq12's Task Manager Aug 6, 2026
@Alejandroq12 Alejandroq12 added the ui Phase 2 - dashboard UI label Aug 6, 2026
@Alejandroq12 Alejandroq12 self-assigned this Aug 6, 2026
@Alejandroq12 Alejandroq12 moved this from In Progress to Done in @Alejandroq12's Task Manager Aug 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui Phase 2 - dashboard UI

Projects

Development

Successfully merging this pull request may close these issues.

1 participant