perf(renderer): share sidebar task theme state

src/renderer/components/sidebar/GlobalTaskList.tsx

@@ -6,6 +6,7 @@ import { confirm } from '@renderer/components/common/ConfirmDialog';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { useCollapsedGroups } from '@renderer/hooks/useCollapsedGroups';
 import { useTaskLocalState } from '@renderer/hooks/useTaskLocalState';
+import { useTheme } from '@renderer/hooks/useTheme';
 import { cn } from '@renderer/lib/utils';
 import { markTaskUnread } from '@renderer/services/commentReadStorage';
 import { useStore } from '@renderer/store';
@@ -347,6 +348,7 @@ interface GlobalTaskRowProps {
   hideTeamName?: boolean;
   hideProjectName?: boolean;
   showTeamName?: boolean;
+  isLight: boolean;
   onTogglePin: TaskRowAction;
   onToggleArchive: TaskRowAction;
   onMarkUnread: TaskRowAction;
@@ -409,6 +411,7 @@ const GlobalTaskRow = memo(
     hideTeamName,
     hideProjectName,
     showTeamName,
+    isLight,
     onTogglePin,
     onToggleArchive,
     onMarkUnread,
@@ -459,6 +462,7 @@ const GlobalTaskRow = memo(
             hideTeamName={hideTeamName}
             hideProjectName={hideProjectName}
             showTeamName={showTeamName}
+            isLight={isLight}
             teamOffline={teamOffline}
             renamingKey={effectiveRenamingKey}
             onRenameComplete={onRenameComplete}
@@ -481,6 +485,7 @@ const GlobalTaskRow = memo(
     prev.hideTeamName === next.hideTeamName &&
     prev.hideProjectName === next.hideProjectName &&
     prev.showTeamName === next.showTeamName &&
+    prev.isLight === next.isLight &&
     prev.onTogglePin === next.onTogglePin &&
     prev.onToggleArchive === next.onToggleArchive &&
     prev.onMarkUnread === next.onMarkUnread &&
@@ -504,6 +509,7 @@ interface TaskRowsProps {
   hideTeamName?: boolean;
   hideProjectName?: boolean;
   showTeamName?: boolean;
+  isLight: boolean;
   showTeamHeader?: boolean;
   pinnedOverride?: boolean;
   archivedOverride?: boolean;
@@ -594,6 +600,7 @@ const TaskRows = memo(function TaskRows({
   hideTeamName,
   hideProjectName,
   showTeamName,
+  isLight,
   showTeamHeader,
   pinnedOverride,
   archivedOverride,
@@ -625,6 +632,7 @@ const TaskRows = memo(function TaskRows({
             hideTeamName={hideTeamName}
             hideProjectName={hideProjectName}
             showTeamName={showTeamName}
+            isLight={isLight}
             teamOffline={isTeamOffline(task.teamName)}
             ownerColorName={getOwnerColorName(task)}
             renamingKey={renamingKey}
@@ -668,6 +676,7 @@ function areTaskRowsPropsEqual(prev: TaskRowsProps, next: TaskRowsProps): boolea
     prev.hideTeamName === next.hideTeamName &&
     prev.hideProjectName === next.hideProjectName &&
     prev.showTeamName === next.showTeamName &&
+    prev.isLight === next.isLight &&
     prev.showTeamHeader === next.showTeamHeader &&
     prev.pinnedOverride === next.pinnedOverride &&
     prev.archivedOverride === next.archivedOverride &&
@@ -710,6 +719,7 @@ interface ProjectTaskGroupProps {
   isNewTask: (task: GlobalTask) => boolean;
   isTeamOffline: TeamBooleanResolver;
   renamingKey: string | null;
+  isLight: boolean;
   formatTeamHeader: TeamHeaderFormatter;
   onToggleGroup: (projectKey: string) => void;
   onVisibleCountChange: ProjectGroupVisibleCountChange;
@@ -737,6 +747,7 @@ const ProjectTaskGroup = memo(
     isNewTask,
     isTeamOffline,
     renamingKey,
+    isLight,
     formatTeamHeader,
     onToggleGroup,
     onVisibleCountChange,
@@ -799,6 +810,7 @@ const ProjectTaskGroup = memo(
             isArchived={isArchived}
             isNewTask={isNewTask}
             isTeamOffline={isTeamOffline}
+            isLight={isLight}
             hideTeamName
             hideProjectName
             showTeamHeader
@@ -860,6 +872,7 @@ const ProjectTaskGroup = memo(
     prev.showMoreLabel === next.showMoreLabel &&
     prev.showLessLabel === next.showLessLabel &&
     prev.renamingKey === next.renamingKey &&
+    prev.isLight === next.isLight &&
     prev.formatTeamHeader === next.formatTeamHeader &&
     prev.onToggleGroup === next.onToggleGroup &&
     prev.onVisibleCountChange === next.onVisibleCountChange &&
@@ -902,6 +915,7 @@ export const GlobalTaskList = memo(function GlobalTaskList({
   onFiltersPopoverOpenChange: externalOnFiltersPopoverOpenChange,
 }: GlobalTaskListProps = {}): React.JSX.Element {
   const { t } = useAppTranslation('common');
+  const { isLight } = useTheme();
   const {
     globalTasks,
     globalTasksLoading,
@@ -1498,6 +1512,7 @@ export const GlobalTaskList = memo(function GlobalTaskList({
             isArchived={taskLocalState.isArchived}
             isNewTask={isNewTask}
             isTeamOffline={isTeamOffline}
+            isLight={isLight}
             pinnedOverride={true}
             archivedOverride={false}
             showTeamName
@@ -1601,6 +1616,7 @@ export const GlobalTaskList = memo(function GlobalTaskList({
             isArchived={taskLocalState.isArchived}
             isNewTask={isNewTask}
             isTeamOffline={isTeamOffline}
+            isLight={isLight}
             showTeamName
             renamingKey={renamingTaskKey}
             onTogglePin={handleToggleTaskPin}
@@ -1634,6 +1650,7 @@ export const GlobalTaskList = memo(function GlobalTaskList({
                 isArchived={taskLocalState.isArchived}
                 isNewTask={isNewTask}
                 isTeamOffline={isTeamOffline}
+                isLight={isLight}
                 renamingKey={renamingTaskKey}
                 formatTeamHeader={formatTeamHeader}
                 onToggleGroup={handleToggleProjectGroup}
@@ -1682,6 +1699,7 @@ export const GlobalTaskList = memo(function GlobalTaskList({
                     isArchived={taskLocalState.isArchived}
                     isNewTask={isNewTask}
                     isTeamOffline={isTeamOffline}
+                    isLight={isLight}
                     showTeamHeader
                     formatTeamHeader={formatTeamHeader}
                     renamingKey={renamingTaskKey}

src/renderer/components/sidebar/SidebarTaskItem.tsx

@@ -69,6 +69,8 @@ interface SidebarTaskItemProps {
   hideTeamName?: boolean;
   hideProjectName?: boolean;
   showTeamName?: boolean;
+  /** Optional theme value from list parents to avoid one theme subscription per row. */
+  isLight?: boolean;
   /** Pauses the in-progress spinner when the parent team is offline. */
   teamOffline?: boolean;
   /** The composite key "teamName:taskId" of the task being renamed, or null */
@@ -82,18 +84,19 @@ interface SidebarTaskItemProps {
   ownerColorName?: string | null;
 }
 
-export const SidebarTaskItem = memo(function SidebarTaskItem({
+const SidebarTaskItemContent = ({
   task,
   hideTeamName,
   hideProjectName,
   showTeamName,
+  isLight,
   teamOffline = false,
   renamingKey,
   onRenameComplete,
   onRenameCancel,
   getDisplaySubject,
   ownerColorName,
-}: SidebarTaskItemProps): React.JSX.Element {
+}: SidebarTaskItemProps & { isLight: boolean }): React.JSX.Element => {
   const { t } = useAppTranslation('team');
   const { t: tCommon } = useAppTranslation('common');
   const openGlobalTaskDetail = useStore((s) => s.openGlobalTaskDetail);
@@ -104,7 +107,6 @@ export const SidebarTaskItem = memo(function SidebarTaskItem({
     )
   );
   const unreadCount = useUnreadCommentCount(task.teamName, task.id, task.comments);
-  const { isLight } = useTheme();
 
   const isRenaming = renamingKey === `${task.teamName}:${task.id}`;
   const displaySubject = getDisplaySubject?.(task) ?? task.subject;
@@ -317,4 +319,18 @@ export const SidebarTaskItem = memo(function SidebarTaskItem({
       )}
     </button>
   );
+};
+
+const ThemedSidebarTaskItem = (props: SidebarTaskItemProps): React.JSX.Element => {
+  const { isLight } = useTheme();
+  return <SidebarTaskItemContent {...props} isLight={isLight} />;
+};
+
+export const SidebarTaskItem = memo(function SidebarTaskItem(
+  props: SidebarTaskItemProps
+): React.JSX.Element {
+  if (typeof props.isLight === 'boolean') {
+    return <SidebarTaskItemContent {...props} isLight={props.isLight} />;
+  }
+  return <ThemedSidebarTaskItem {...props} />;
 });