fix(ui): add unread badge for Notifications in sidebar

[mpiton]

Summary

• load GitHub notifications in the sidebar and count unread items
• show the unread count badge on the Notifications nav item using the existing NavItem badge UI
• update sidebar and app tests to cover the new query and badge rendering

Validation

• npm run test -- src/components/Sidebar/Sidebar.test.tsx
• npm run test -- src/App.test.tsx
• ./node_modules/.bin/tsc --noEmit
• ./node_modules/.bin/oxlint src/components/Sidebar/Sidebar.tsx src/components/Sidebar/Sidebar.test.tsx src/App.test.tsx

Closes #248

---

Summary by cubic

Shows an unread count badge on the Notifications nav item by fetching GitHub notifications and counting unread items. Adds tests and gates the fetch behind GitHub auth, fixing #248.

• New Features
  • Fetch notifications via listNotifications with React Query (staleTime: 60s), enabled only when connected to GitHub.
  • Compute unread count and pass it to NavItem for the Notifications view.

^{Written for commit 3bfee63. Summary will update on new commits.}

Summary by CodeRabbit

Release Notes

• New Features

  • Sidebar now displays a notifications counter showing your unread GitHub notification count in real-time.

• Tests

  • Added test coverage for the notifications counter functionality to verify accurate unread count tracking.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added a notifications count badge to the sidebar navigation by implementing a React Query hook that fetches notifications via the Tauri backend, filters for unread items, and displays the unread count. Updated corresponding test mocks and added assertions validating the badge display.

Changes

Cohort / File(s)	Summary
Test Mocks src/App.test.tsx, src/components/Sidebar/Sidebar.test.tsx	Extended Tauri mock with listNotifications function; added mock notification data (3 items with unread flags) and new test asserting "notifications (2)" badge renders correctly.
Sidebar Implementation src/components/Sidebar/Sidebar.tsx	Imported listNotifications binding, added React Query hook (notificationsQuery) with 60-second staleTime, computed unreadNotificationsCount from query results, and wired count into NavItem for notifications view.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• feat(ui): add Sidebar component with navigation, workspaces and repos (T-057) #57: Extends Sidebar component to fetch and display notifications with unread count logic, directly modifying the same Sidebar.tsx and test files.
• feat(notifications): add GitHub notifications view (closes #197) #232: Implements the listNotifications backend function and notification type definitions that this PR integrates into the Sidebar component.

Poem

🐰 A badge now glows where silence dwelt,
Notifications counted, clearly felt!
Unread whispers, two in sight,
The sidebar shines with info's light! ✨

🚥 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
Title check	✅ Passed	The title accurately describes the main change: adding an unread badge for Notifications in the sidebar.
Linked Issues check	✅ Passed	All requirements from issue #248 are met: unread notifications are counted from query data, passed to NavItem, and use the same badge styling as other items.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with the linked issue #248 objectives; no unrelated modifications are present.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/248-notifications-badge

---

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

[greptile-apps]

Greptile Summary

This PR adds an unread notification badge to the Notifications sidebar item by introducing a new useQuery call for listNotifications (guarded by isGitHubConnected), computing the unread count, and passing it as the count prop to NavItem. The query key ["github", "notifications"] correctly aligns with the existing key used by Notifications.tsx and invalidated by useGitHubData, so both consumers share the same cache entry.

Confidence Score: 5/5

Safe to merge — the change is a well-scoped UI enhancement with no logic errors, correct type usage, and adequate test coverage.

No P0/P1 findings. The new query correctly shares the existing cache key, is gated on auth state, and all three changed files are in good shape. Previously flagged notificationType casing issues are already resolved in this diff.

No files require special attention.

Important Files Changed

Filename	Overview
src/components/Sidebar/Sidebar.tsx	Adds listNotifications query guarded by isGitHubConnected, computes unreadNotificationsCount, and threads it into the NavItem count prop for the notifications view; implementation is clean and shares the correct query key.
src/components/Sidebar/Sidebar.test.tsx	Adds mock for listNotifications with 3 items (2 unread) and a new test asserting the badge shows (2); mock data types are correct ("pullRequest" camelCase matches NotificationSubjectType).
src/App.test.tsx	Adds listNotifications mock returning [] to prevent the App-level tests from failing due to an unmocked call added to the Sidebar.

Sequence Diagram

sequenceDiagram
    participant S as Sidebar
    participant AQ as authQuery [auth, status]
    participant NQ as notificationsQuery [github, notifications]
    participant T as tauri (listNotifications)
    participant NI as NavItem (Notifications)

    S->>AQ: useQuery authGetStatus
    AQ-->>S: { connected: true }
    note over S: isGitHubConnected = true
    S->>NQ: useQuery (enabled=true, staleTime=60s)
    NQ->>T: listNotifications()
    T-->>NQ: GithubNotification[]
    NQ-->>S: data
    note over S: unreadNotificationsCount = data.filter(unread).length
    S->>NI: count={unreadNotificationsCount}
    NI-->>S: renders badge if count > 0

Loading

_{Reviews (2): Last reviewed commit: "fix: address PR review comments" | Re-trigger Greptile}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/Sidebar/Sidebar.tsx`:
- Around line 57-61: Extract isGitHubConnected by evaluating
authQuery.data?.connected === true, then pass enabled: isGitHubConnected into
the notificationsQuery useQuery call (notificationsQuery) so it only runs when
authenticated; also update the unreadNotificationsCount usage to use a nullish
fallback (unreadNotificationsCount ?? 0) to avoid undefined badge counts. Ensure
you reference notificationsQuery and unreadNotificationsCount in Sidebar.tsx
when making these changes.

🪄 Autofix (Beta)

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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4c50afd7-78c2-4b00-9855-813e751aad19

📥 Commits

Reviewing files that changed from the base of the PR and between 5d086c6 and c2f9189.

📒 Files selected for processing (3)

• src/App.test.tsx
• src/components/Sidebar/Sidebar.test.tsx
• src/components/Sidebar/Sidebar.tsx

[cubic-dev-ai]

No issues found across 3 files