diff --git a/src/renderer/components/team/UnreadCommentsBadge.test.tsx b/src/renderer/components/team/UnreadCommentsBadge.test.tsx index 9559a621..671c7dc0 100644 --- a/src/renderer/components/team/UnreadCommentsBadge.test.tsx +++ b/src/renderer/components/team/UnreadCommentsBadge.test.tsx @@ -117,4 +117,24 @@ describe('UnreadCommentsBadge', () => { await flushReact(); }); }); + + it('does not mount tooltip content while closed', async () => { + vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true); + const host = document.createElement('div'); + document.body.appendChild(host); + const root = createRoot(host); + + await act(async () => { + root.render(React.createElement(UnreadCommentsBadge, { unreadCount: 2, totalCount: 3 })); + await flushReact(); + }); + + expect(host.textContent).not.toContain('unread comments'); + expect(host.textContent).not.toContain('total'); + + await act(async () => { + root.unmount(); + await flushReact(); + }); + }); }); diff --git a/src/renderer/components/team/UnreadCommentsBadge.tsx b/src/renderer/components/team/UnreadCommentsBadge.tsx index 363f54eb..da702cae 100644 --- a/src/renderer/components/team/UnreadCommentsBadge.tsx +++ b/src/renderer/components/team/UnreadCommentsBadge.tsx @@ -1,3 +1,5 @@ +import { type JSX, memo, useCallback, useState } from 'react'; + import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip'; import { MessageSquare } from 'lucide-react'; @@ -7,17 +9,22 @@ interface UnreadCommentsBadgeProps { pulseKey?: number; } -export const UnreadCommentsBadge = ({ +export const UnreadCommentsBadge = memo(function UnreadCommentsBadge({ unreadCount, totalCount, pulseKey, -}: UnreadCommentsBadgeProps): React.JSX.Element | null => { +}: UnreadCommentsBadgeProps): JSX.Element | null { + const [open, setOpen] = useState(false); + const handleOpenChange = useCallback((nextOpen: boolean) => { + setOpen(nextOpen); + }, []); + if (totalCount === 0) return null; const shouldPulse = (pulseKey ?? 0) > 0; return ( - + - - {unreadCount > 0 - ? `${unreadCount} unread comments, ${totalCount} total` - : `${totalCount} comments`} - + {open ? ( + + {unreadCount > 0 + ? `${unreadCount} unread comments, ${totalCount} total` + : `${totalCount} comments`} + + ) : null} ); -}; +});