perf(renderer): lazy mount closed menu controls

src/renderer/components/layout/MoreMenu.tsx

@@ -68,12 +68,12 @@ export const MoreMenu = ({
     openTeamsTab,
   } = useStore(
     useShallow((s) => ({
-      openCommandPalette: () => s.openCommandPalette(),
-      openExtensionsTab: () => s.openExtensionsTab(),
-      openSessionReport: (tabId: string) => s.openSessionReport(tabId),
-      openSchedulesTab: () => s.openSchedulesTab(),
-      openSettingsTab: () => s.openSettingsTab(),
-      openTeamsTab: () => s.openTeamsTab(),
+      openCommandPalette: s.openCommandPalette,
+      openExtensionsTab: s.openExtensionsTab,
+      openSessionReport: s.openSessionReport,
+      openSchedulesTab: s.openSchedulesTab,
+      openSettingsTab: s.openSettingsTab,
+      openTeamsTab: s.openTeamsTab,
     }))
   );
 

src/renderer/components/team/kanban/KanbanFilterPopover.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useAppTranslation } from '@features/localization/renderer';
 import { Button } from '@renderer/components/ui/button';
@@ -46,6 +46,7 @@ export const KanbanFilterPopover = ({
   onFilterChange,
 }: KanbanFilterPopoverProps): React.JSX.Element => {
   const { t } = useAppTranslation('team');
+  const [open, setOpen] = useState(false);
   const activeCount = useMemo(() => {
     let count = 0;
     if (filter.sessionId !== null) count += 1;
@@ -83,7 +84,7 @@ export const KanbanFilterPopover = ({
   };
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <Tooltip>
         <TooltipTrigger asChild>
           <PopoverTrigger asChild>
@@ -104,111 +105,113 @@ export const KanbanFilterPopover = ({
         </TooltipTrigger>
         <TooltipContent side="bottom">{t('kanban.filter.title')}</TooltipContent>
       </Tooltip>
-      <PopoverContent align="end" className="w-72 p-0">
-        {/* Session section */}
-        <div className="border-b border-[var(--color-border)] p-3">
-          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
-            {t('kanban.filter.session')}
-          </p>
-          <div className="max-h-40 space-y-0.5 overflow-y-auto">
-            <button
-              type="button"
-              className={`w-full rounded-md px-2 py-1.5 text-left text-xs transition-colors ${
-                filter.sessionId === null
-                  ? 'bg-blue-500/15 text-blue-300'
-                  : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]'
-              }`}
-              onClick={() => handleSessionSelect(null)}
-            >
-              {t('kanban.filter.allSessions')}
-            </button>
-            {sessions.map((session) => {
-              const isLead = session.id === leadSessionId;
-              const isSelected = filter.sessionId === session.id;
-              const label = formatSessionLabel(session.firstMessage) || session.id.slice(0, 8);
-              return (
-                <button
-                  key={session.id}
-                  type="button"
-                  className={`flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors ${
-                    isSelected
-                      ? 'bg-blue-500/15 text-blue-300'
-                      : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]'
-                  }`}
-                  onClick={() => handleSessionSelect(isSelected ? null : session.id)}
+      {open ? (
+        <PopoverContent align="end" className="w-72 p-0">
+          {/* Session section */}
+          <div className="border-b border-[var(--color-border)] p-3">
+            <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+              {t('kanban.filter.session')}
+            </p>
+            <div className="max-h-40 space-y-0.5 overflow-y-auto">
+              <button
+                type="button"
+                className={`w-full rounded-md px-2 py-1.5 text-left text-xs transition-colors ${
+                  filter.sessionId === null
+                    ? 'bg-blue-500/15 text-blue-300'
+                    : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]'
+                }`}
+                onClick={() => handleSessionSelect(null)}
+              >
+                {t('kanban.filter.allSessions')}
+              </button>
+              {sessions.map((session) => {
+                const isLead = session.id === leadSessionId;
+                const isSelected = filter.sessionId === session.id;
+                const label = formatSessionLabel(session.firstMessage) || session.id.slice(0, 8);
+                return (
+                  <button
+                    key={session.id}
+                    type="button"
+                    className={`flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors ${
+                      isSelected
+                        ? 'bg-blue-500/15 text-blue-300'
+                        : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]'
+                    }`}
+                    onClick={() => handleSessionSelect(isSelected ? null : session.id)}
+                  >
+                    {isLead && <Crown size={11} className="shrink-0 text-blue-400" />}
+                    <span className="truncate">{label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Teammate section */}
+          <div className="border-b border-[var(--color-border)] p-3">
+            <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+              {t('kanban.filter.teammate')}
+            </p>
+            <div className="space-y-1.5">
+              {members.map((member) => (
+                <label
+                  key={member.name}
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]"
                 >
-                  {isLead && <Crown size={11} className="shrink-0 text-blue-400" />}
-                  <span className="truncate">{label}</span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* Teammate section */}
-        <div className="border-b border-[var(--color-border)] p-3">
-          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
-            {t('kanban.filter.teammate')}
-          </p>
-          <div className="space-y-1.5">
-            {members.map((member) => (
-              <label
-                key={member.name}
-                className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]"
-              >
+                  <Checkbox
+                    checked={filter.selectedOwners.has(member.name)}
+                    onCheckedChange={() => handleOwnerToggle(member.name)}
+                  />
+                  {displayMemberName(member.name)}
+                </label>
+              ))}
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- Radix Checkbox renders a button, not a native input */}
+              <label className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs italic text-[var(--color-text-muted)] hover:bg-[var(--color-surface-raised)]">
                 <Checkbox
-                  checked={filter.selectedOwners.has(member.name)}
-                  onCheckedChange={() => handleOwnerToggle(member.name)}
+                  checked={filter.selectedOwners.has(UNASSIGNED_OWNER)}
+                  onCheckedChange={() => handleOwnerToggle(UNASSIGNED_OWNER)}
                 />
-                {displayMemberName(member.name)}
+                {t('kanban.filter.unassigned')}
               </label>
-            ))}
-            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- Radix Checkbox renders a button, not a native input */}
-            <label className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs italic text-[var(--color-text-muted)] hover:bg-[var(--color-surface-raised)]">
-              <Checkbox
-                checked={filter.selectedOwners.has(UNASSIGNED_OWNER)}
-                onCheckedChange={() => handleOwnerToggle(UNASSIGNED_OWNER)}
-              />
-              {t('kanban.filter.unassigned')}
-            </label>
+            </div>
           </div>
-        </div>
 
-        {/* Column section */}
-        <div className="border-b border-[var(--color-border)] p-3">
-          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
-            {t('kanban.filter.column')}
-          </p>
-          <div className="space-y-1.5">
-            {KANBAN_COLUMNS.map((col) => (
-              <label
-                key={col.id}
-                className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs hover:bg-[var(--color-surface-raised)]"
-                style={{ color: col.color }}
-              >
-                <Checkbox
-                  checked={filter.columns.has(col.id)}
-                  onCheckedChange={() => handleColumnToggle(col.id)}
-                />
-                {t(col.labelKey)}
-              </label>
-            ))}
+          {/* Column section */}
+          <div className="border-b border-[var(--color-border)] p-3">
+            <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+              {t('kanban.filter.column')}
+            </p>
+            <div className="space-y-1.5">
+              {KANBAN_COLUMNS.map((col) => (
+                <label
+                  key={col.id}
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs hover:bg-[var(--color-surface-raised)]"
+                  style={{ color: col.color }}
+                >
+                  <Checkbox
+                    checked={filter.columns.has(col.id)}
+                    onCheckedChange={() => handleColumnToggle(col.id)}
+                  />
+                  {t(col.labelKey)}
+                </label>
+              ))}
+            </div>
           </div>
-        </div>
 
-        {/* Footer */}
-        <div className="flex justify-end p-2">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-6 px-2 text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
-            disabled={activeCount === 0}
-            onClick={handleClearAll}
-          >
-            {t('kanban.filter.clearAll')}
-          </Button>
-        </div>
-      </PopoverContent>
+          {/* Footer */}
+          <div className="flex justify-end p-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+              disabled={activeCount === 0}
+              onClick={handleClearAll}
+            >
+              {t('kanban.filter.clearAll')}
+            </Button>
+          </div>
+        </PopoverContent>
+      ) : null}
     </Popover>
   );
 };

src/renderer/components/team/kanban/KanbanSortPopover.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { useAppTranslation } from '@features/localization/renderer';
 import { Button } from '@renderer/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
@@ -53,10 +55,11 @@ export const KanbanSortPopover = ({
   onSortChange,
 }: KanbanSortPopoverProps): React.JSX.Element => {
   const { t } = useAppTranslation('team');
+  const [open, setOpen] = useState(false);
   const isNonDefault = sort.field !== 'updatedAt';
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <Tooltip>
         <TooltipTrigger asChild>
           <PopoverTrigger asChild>
@@ -77,66 +80,68 @@ export const KanbanSortPopover = ({
         </TooltipTrigger>
         <TooltipContent side="bottom">{t('kanban.sort.title')}</TooltipContent>
       </Tooltip>
-      <PopoverContent align="end" className="w-56 p-0">
-        <div className="p-3">
-          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
-            {t('kanban.sort.sortBy')}
-          </p>
-          <div className="space-y-0.5">
-            {SORT_OPTIONS.map((option) => {
-              const isSelected = sort.field === option.field;
-              return (
-                <button
-                  key={option.field}
-                  type="button"
-                  className={cn(
-                    'flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors',
-                    isSelected
-                      ? 'bg-blue-500/15 text-blue-300'
-                      : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]'
-                  )}
-                  onClick={() => onSortChange({ field: option.field })}
-                >
-                  <span
+      {open ? (
+        <PopoverContent align="end" className="w-56 p-0">
+          <div className="p-3">
+            <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+              {t('kanban.sort.sortBy')}
+            </p>
+            <div className="space-y-0.5">
+              {SORT_OPTIONS.map((option) => {
+                const isSelected = sort.field === option.field;
+                return (
+                  <button
+                    key={option.field}
+                    type="button"
                     className={cn(
-                      'shrink-0',
-                      isSelected ? 'text-blue-400' : 'text-[var(--color-text-muted)]'
+                      'flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors',
+                      isSelected
+                        ? 'bg-blue-500/15 text-blue-300'
+                        : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]'
                     )}
+                    onClick={() => onSortChange({ field: option.field })}
                   >
-                    {option.icon}
-                  </span>
-                  <div className="min-w-0">
-                    <div className="font-medium">{t(option.labelKey)}</div>
-                    <div
+                    <span
                       className={cn(
-                        'text-[10px]',
-                        isSelected ? 'text-blue-300/70' : 'text-[var(--color-text-muted)]'
+                        'shrink-0',
+                        isSelected ? 'text-blue-400' : 'text-[var(--color-text-muted)]'
                       )}
                     >
-                      {t(option.descriptionKey)}
+                      {option.icon}
+                    </span>
+                    <div className="min-w-0">
+                      <div className="font-medium">{t(option.labelKey)}</div>
+                      <div
+                        className={cn(
+                          'text-[10px]',
+                          isSelected ? 'text-blue-300/70' : 'text-[var(--color-text-muted)]'
+                        )}
+                      >
+                        {t(option.descriptionKey)}
+                      </div>
                     </div>
-                  </div>
-                  {isSelected && (
-                    <ArrowDownUp size={12} className="ml-auto shrink-0 text-blue-400" />
-                  )}
-                </button>
-              );
-            })}
+                    {isSelected && (
+                      <ArrowDownUp size={12} className="ml-auto shrink-0 text-blue-400" />
+                    )}
+                  </button>
+                );
+              })}
+            </div>
           </div>
-        </div>
-        {isNonDefault && (
-          <div className="flex justify-end border-t border-[var(--color-border)] p-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-6 px-2 text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
-              onClick={() => onSortChange({ field: 'updatedAt' })}
-            >
-              {t('kanban.sort.reset')}
-            </Button>
-          </div>
-        )}
-      </PopoverContent>
+          {isNonDefault && (
+            <div className="flex justify-end border-t border-[var(--color-border)] p-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+                onClick={() => onSortChange({ field: 'updatedAt' })}
+              >
+                {t('kanban.sort.reset')}
+              </Button>
+            </div>
+          )}
+        </PopoverContent>
+      ) : null}
     </Popover>
   );
 };

src/renderer/components/team/kanban/KanbanTaskCard.tsx

@@ -206,32 +206,34 @@ const CancelTaskButton = ({
         </TooltipTrigger>
         <TooltipContent side="top">{t('kanban.taskCard.cancel')}</TooltipContent>
       </Tooltip>
-      <PopoverContent
-        className="w-56 p-3"
-        side="top"
-        align="start"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <p className="mb-3 text-xs text-[var(--color-text-secondary)]">
-          {t('kanban.taskCard.moveBackToTodoConfirm')}
-        </p>
-        <div className="flex gap-2">
-          <Button
-            variant="destructive"
-            size="sm"
-            className="flex-1"
-            onClick={() => {
-              setOpen(false);
-              onConfirm(taskId);
-            }}
-          >
-            {t('kanban.taskCard.confirm')}
-          </Button>
-          <Button variant="outline" size="sm" className="flex-1" onClick={() => setOpen(false)}>
-            {t('kanban.taskCard.keep')}
-          </Button>
-        </div>
-      </PopoverContent>
+      {open ? (
+        <PopoverContent
+          className="w-56 p-3"
+          side="top"
+          align="start"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <p className="mb-3 text-xs text-[var(--color-text-secondary)]">
+            {t('kanban.taskCard.moveBackToTodoConfirm')}
+          </p>
+          <div className="flex gap-2">
+            <Button
+              variant="destructive"
+              size="sm"
+              className="flex-1"
+              onClick={() => {
+                setOpen(false);
+                onConfirm(taskId);
+              }}
+            >
+              {t('kanban.taskCard.confirm')}
+            </Button>
+            <Button variant="outline" size="sm" className="flex-1" onClick={() => setOpen(false)}>
+              {t('kanban.taskCard.keep')}
+            </Button>
+          </div>
+        </PopoverContent>
+      ) : null}
     </Popover>
   );
 };