feat/notification-badge-component #2467
Conversation
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded@ComputelessComputer has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 8 minutes and 24 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughIntroduces a notification system with a context provider managing notification states including banner visibility, download progress tracking, and badge display. Adds a NotificationBadge UI component for animated visual indicators, and integrates the system via context wrapping in the main layout with event-driven progress updates. Changes
Sequence DiagramsequenceDiagram
participant User
participant LocalSTT as Local-STT Events
participant Provider as NotificationProvider
participant Context as useNotifications Hook
participant Badge as NotificationBadge Component
User->>LocalSTT: Initiate model download
LocalSTT->>Provider: Emit downloadProgressPayload event
Note over Provider: Update downloadingModel &<br/>downloadProgress state
Provider->>Provider: Compute shouldShowBadge<br/>(hasActiveDownload = true)
Provider->>Context: Notify subscribers of state change
Context->>Badge: Pass show & notifications state
Badge->>User: Animate badge entrance<br/>(scale + fade)
loop Download in Progress
LocalSTT->>Provider: Emit downloadProgressPayload updates
Provider->>Provider: Update downloadProgress
Provider->>Context: Notify state change
end
LocalSTT->>Provider: Download completion/error event
Provider->>Provider: Reset downloadProgress &<br/>downloadingModel<br/>Compute shouldShowBadge = false
Provider->>Context: Notify subscribers
Context->>Badge: Pass show = false
Badge->>User: Animate badge exit<br/>(scale + fade)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/desktop/src/contexts/notifications.tsx (1)
110-116: Optional: Remove constant from dependency array.Since
hasActiveEnhancementis a constantfalse(line 84), it doesn't need to be in the dependency array. However, if you plan to make it dynamic in the future, keeping it is fine for consistency.🔎 Proposed refactor
}, [ hasConfigBanner, - hasActiveEnhancement, downloadingModel, downloadProgress, isAiTab, ]);apps/desktop/src/components/ui/notification-badge.tsx (1)
11-20: Move sizeClasses outside the component.The
sizeClassesobject is recreated on every render. Move it outside the component to avoid unnecessary object allocation.🔎 Proposed refactor
+const sizeClasses = { + sm: "size-2", + md: "size-3", + lg: "size-4", +}; + export function NotificationBadge({ show, className, size = "sm", }: NotificationBadgeProps) { - const sizeClasses = { - sm: "size-2", - md: "size-3", - lg: "size-4", - }; - return (
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/desktop/src/components/main/body/index.tsxapps/desktop/src/components/ui/notification-badge.tsxapps/desktop/src/contexts/notifications.tsxapps/desktop/src/routes/app/main/_layout.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Format using
dprint fmtfrom the root. Do not usecargo fmt.
Files:
apps/desktop/src/routes/app/main/_layout.tsxapps/desktop/src/components/ui/notification-badge.tsxapps/desktop/src/components/main/body/index.tsxapps/desktop/src/contexts/notifications.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props. Just inline them.
Never do manual state management for form/mutation. UseuseFormfrom tanstack-form anduseQuery/useMutationfrom tanstack-query for 99% cases.
Files:
apps/desktop/src/routes/app/main/_layout.tsxapps/desktop/src/components/ui/notification-badge.tsxapps/desktop/src/components/main/body/index.tsxapps/desktop/src/contexts/notifications.tsx
**/*.{ts,tsx,rs,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
By default, avoid writing comments at all. If you write one, it should be about 'Why', not 'What'.
Files:
apps/desktop/src/routes/app/main/_layout.tsxapps/desktop/src/components/ui/notification-badge.tsxapps/desktop/src/components/main/body/index.tsxapps/desktop/src/contexts/notifications.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: If there are many classNames with conditional logic, usecn(import from@hypr/utils). Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/desktop/src/routes/app/main/_layout.tsxapps/desktop/src/components/ui/notification-badge.tsxapps/desktop/src/components/main/body/index.tsxapps/desktop/src/contexts/notifications.tsx
🧬 Code graph analysis (4)
apps/desktop/src/routes/app/main/_layout.tsx (1)
apps/desktop/src/contexts/notifications.tsx (1)
NotificationProvider(43-123)
apps/desktop/src/components/ui/notification-badge.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/desktop/src/components/main/body/index.tsx (3)
apps/desktop/src/contexts/notifications.tsx (1)
useNotifications(125-133)extensions/shared/types/hypr-extension.d.ts (1)
Button(159-159)apps/desktop/src/components/ui/notification-badge.tsx (1)
NotificationBadge(11-40)
apps/desktop/src/contexts/notifications.tsx (2)
apps/desktop/src/config/use-config.ts (1)
useConfigValues(42-72)crates/owhisper-client/src/adapter/parsing.rs (1)
value(104-104)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: desktop_ci (linux, depot-ubuntu-22.04-8)
- GitHub Check: desktop_ci (linux, depot-ubuntu-24.04-8)
- GitHub Check: fmt
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
🔇 Additional comments (4)
apps/desktop/src/contexts/notifications.tsx (1)
66-82: LGTM: Proper event listener cleanup and progress clamping.The event listener correctly handles the Promise-based cleanup, and the progress clamping (0-100) prevents invalid values from appearing in the UI.
apps/desktop/src/routes/app/main/_layout.tsx (1)
66-69: LGTM: Proper context provider integration.The NotificationProvider is correctly positioned in the component tree, wrapping the tool registration and routing logic to make notification state available throughout the app.
apps/desktop/src/components/main/body/index.tsx (1)
126-136: LGTM: Badge integration with proper positioning.The NotificationBadge is correctly positioned relative to the panel toggle button, and the
shouldShowBadgeflag properly controls visibility.apps/desktop/src/components/ui/notification-badge.tsx (1)
22-39: LGTM: Clean animation implementation.The badge animation is smooth and appropriate. The use of
AnimatePresencewith scale/opacity transitions provides good visual feedback, and the styling follows conventions for notification badges.
ComputelessComputer
force-pushed
the
feat/notification-badge-component
branch
from
eaa5be2 to
34c69f6
Compare
Description