perf(renderer): lazy render task tooltip content

src/renderer/components/team/TaskTooltip.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 
 import { useAppTranslation } from '@features/localization/renderer';
 import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
@@ -65,16 +65,36 @@ interface TaskTooltipProps {
   side?: 'top' | 'bottom' | 'left' | 'right';
 }
 
-/**
- * Tooltip that shows task summary on hover over any #taskId link.
- * Reads task data from the current team in the store.
- */
 export const TaskTooltip = memo(function TaskTooltip({
   taskId,
   teamName,
   children,
   side = 'top',
 }: TaskTooltipProps): React.JSX.Element {
+  const [open, setOpen] = useState(false);
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    setOpen(nextOpen);
+  }, []);
+
+  return (
+    <Tooltip open={open} onOpenChange={handleOpenChange}>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      {open ? <TaskTooltipContent taskId={taskId} teamName={teamName} side={side} /> : null}
+    </Tooltip>
+  );
+});
+
+interface TaskTooltipContentProps {
+  taskId: string;
+  teamName?: string;
+  side: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const TaskTooltipContent = memo(function TaskTooltipContent({
+  taskId,
+  teamName,
+  side,
+}: TaskTooltipContentProps): React.JSX.Element | null {
   const { t } = useAppTranslation('team');
   const { selectedTeamName, selectedTeamData, selectedTeamMembers, globalTasks, teamByName } =
     useStore(
@@ -127,7 +147,7 @@ export const TaskTooltip = memo(function TaskTooltip({
   );
 
   // If task not found, render children without tooltip
-  if (!task) return children;
+  if (!task) return null;
 
   const column = getEffectiveColumn(task);
   const statusColor = STATUS_COLORS[column] ?? STATUS_COLORS.pending;
@@ -142,8 +162,6 @@ export const TaskTooltip = memo(function TaskTooltip({
     : null;
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>{children}</TooltipTrigger>
     <TooltipContent side={side} className="max-w-xs space-y-1.5 p-2.5">
       {resolvedTeamName ? (
         <div className="text-[10px] uppercase tracking-wide text-[var(--color-text-muted)]">
@@ -199,6 +217,5 @@ export const TaskTooltip = memo(function TaskTooltip({
         </div>
       ) : null}
     </TooltipContent>
-    </Tooltip>
   );
 });