perf(renderer): defer message filter option work

This commit is contained in:
777genius 2026-05-31 03:03:55 +03:00
parent 808e5f73e4
commit b6308ccb42

View file

@ -6,13 +6,14 @@ import { Button } from '@renderer/components/ui/button';
import { Checkbox } from '@renderer/components/ui/checkbox';
import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
import { useStore } from '@renderer/store';
import { buildMemberColorMap } from '@renderer/utils/memberHelpers';
import { Filter } from 'lucide-react';
import { useShallow } from 'zustand/react/shallow';
import type { InboxMessage, ResolvedTeamMember } from '@shared/types';
const EMPTY_OPTIONS: string[] = [];
const EMPTY_COLOR_MAP = new Map<string, string>();
export interface MessagesFilterState {
from: Set<string>;
to: Set<string>;
@ -74,10 +75,19 @@ export const MessagesFilterPopover = ({
}
}, [open, filter.from, filter.to, filter.showNoise]);
const colorMap = useMemo(() => buildMemberColorMap(members), [members]);
const colorMap = useMemo(
() => (open ? buildMemberColorMap(members) : EMPTY_COLOR_MAP),
[members, open]
);
const fromOptions = useMemo(() => collectFromOptions(messages), [messages]);
const toOptions = useMemo(() => collectToOptions(messages), [messages]);
const fromOptions = useMemo(
() => (open ? collectFromOptions(messages) : EMPTY_OPTIONS),
[messages, open]
);
const toOptions = useMemo(
() => (open ? collectToOptions(messages) : EMPTY_OPTIONS),
[messages, open]
);
const activeCount = (filter.from.size > 0 ? 1 : 0) + (filter.to.size > 0 ? 1 : 0);
const draftCount = (draft.from.size > 0 ? 1 : 0) + (draft.to.size > 0 ? 1 : 0);
@ -133,6 +143,7 @@ export const MessagesFilterPopover = ({
</TooltipTrigger>
<TooltipContent side="bottom">{t('messages.filter.tooltip')}</TooltipContent>
</Tooltip>
{open ? (
<PopoverContent align="end" className="flex max-h-[70vh] w-72 flex-col p-0">
{/* Scrollable filter sections */}
<div className="min-h-0 flex-1 overflow-y-auto">
@ -184,7 +195,10 @@ export const MessagesFilterPopover = ({
key={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={draft.to.has(name)} onCheckedChange={() => toggleTo(name)} />
<Checkbox
checked={draft.to.has(name)}
onCheckedChange={() => toggleTo(name)}
/>
<MemberBadge
name={name}
color={colorMap.get(name)}
@ -229,6 +243,7 @@ export const MessagesFilterPopover = ({
</div>
</div>
</PopoverContent>
) : null}
</Popover>
);
};