// V2Chips — выбор тегов новостей. // // Пропсы для production (интеграция с сервером): // categories — массив категорий в формате CATEGORIES[] (из маппера tagNodesToCategories) // initialSelected — Set серверных ключей (загружается из /api/preferences) // onSave(selected) — вызывается при нажатии кнопки сохранения // // Если categories/initialSelected не переданы — использует window.CATEGORIES // и хардкоденный набор для дизайн-превью. function V2Chips({ dark = true, onClose, categories, initialSelected, onSave, onDone }) { const t = dark ? window.TG.dark : window.TG.light; const cats = categories || window.CATEGORIES; const [selected, setSelected] = React.useState(() => { if (initialSelected) return new Set(initialSelected); // Стартовый набор для дизайн-превью const s = new Set(); s.add('macro:_:Инфляция'); s.add('macro:_:Ключевая ставка'); s.add('geo:_:Европа'); s.add('geo:_:США'); s.add('tech:themes:Искусственный интеллект'); s.add('markets:banks:Сбербанк'); s.add('markets:banks:Т-Банк'); s.add('markets:oilgas:Газпром'); return s; }); const [query, setQuery] = React.useState(''); const [keyboard, setKeyboard] = React.useState(false); const [saveStatus, setSaveStatus] = React.useState('idle'); // 'idle'|'pending'|'saving'|'saved'|'error' const saveTimerRef = React.useRef(null); const selectedRef = React.useRef(selected); React.useEffect(() => { selectedRef.current = selected; }, [selected]); const doSave = React.useCallback(async (sel) => { if (!onSave) return true; setSaveStatus('saving'); try { await onSave(sel); setSaveStatus('saved'); return true; } catch { setSaveStatus('error'); return false; } }, [onSave]); const scheduleSave = React.useCallback(() => { clearTimeout(saveTimerRef.current); setSaveStatus('pending'); saveTimerRef.current = setTimeout(() => { saveTimerRef.current = null; doSave(selectedRef.current); }, 1500); }, [doSave]); const handleMain = React.useCallback(async () => { const hasPending = saveTimerRef.current !== null; clearTimeout(saveTimerRef.current); saveTimerRef.current = null; if (hasPending || saveStatus === 'error') { const ok = await doSave(selectedRef.current); if (!ok) return; // сохранение не удалось — не закрываем } if (onDone) onDone(); }, [saveStatus, doSave, onDone]); // Свёрнутые подкатегории: set 'catId:groupId' const [collapsedGroups, setCollapsedGroups] = React.useState(new Set()); // Свёрнутые категории целиком: set 'catId' const [collapsedCats, setCollapsedCats] = React.useState(new Set()); const toggle = (key) => { const next = new Set(selected); next.has(key) ? next.delete(key) : next.add(key); setSelected(next); scheduleSave(); }; const toggleGroupCollapse = (gk) => { const next = new Set(collapsedGroups); next.has(gk) ? next.delete(gk) : next.add(gk); setCollapsedGroups(next); }; const toggleCatCollapse = (cid) => { const next = new Set(collapsedCats); next.has(cid) ? next.delete(cid) : next.add(cid); setCollapsedCats(next); }; const collapseAll = () => { setCollapsedCats(new Set(cats.map((c) => c.id))); }; const expandAll = () => setCollapsedCats(new Set()); const selectAllCat = (cat) => { const all = window.flattenCat(cat); const next = new Set(selected); const allIn = all.every((it) => next.has(it.key)); all.forEach((it) => { allIn ? next.delete(it.key) : next.add(it.key); }); setSelected(next); scheduleSave(); }; const selectAllGroup = (cat, group) => { const keys = group.tags.map((tg) => { const o = window.tagObj(tg); return o.key || `${cat.id}:${group.id}:${o.label}`; }); const next = new Set(selected); const allIn = keys.every((k) => next.has(k)); keys.forEach((k) => { allIn ? next.delete(k) : next.add(k); }); setSelected(next); scheduleSave(); }; // Поиск const q = query.trim().toLowerCase(); const matchTag = (it) => !q || it.label.toLowerCase().includes(q) || (it.code && it.code.toLowerCase().includes(q)); // Для отображения: фильтруем категории по попаданию const filtered = cats.map((cat) => { const all = window.flattenCat(cat); const catHit = cat.title.toLowerCase().includes(q); const tagHits = all.filter(matchTag); return { ...cat, all, catHit, tagHits, hidden: q && !catHit && tagHits.length === 0, }; }); return ( <> { document.activeElement && document.activeElement.blur(); }} >
setKeyboard(true)} onBlur={() => setKeyboard(false)} />
{/* Панель управления */}
Категории
{filtered.map((cat) => { if (cat.hidden) return null; const count = cat.all.filter((it) => selected.has(it.key)).length; const allIn = count === cat.all.length; const hasGroups = !!cat.groups; const catCollapsed = collapsedCats.has(cat.id) && !q; return (
{/* Шапка категории: чекбокс слева (выбрать все), вся остальная шапка — свернуть */}
{/* Чекбокс (tri-state) */} 0 ? 'partial' : 'off'} hue={cat.hue} onClick={() => selectAllCat(cat)} /> {/* Основной toggle-area: иконка, заголовок, счётчик, шеврон */}
!q && toggleCatCollapse(cat.id)} style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, cursor: q ? 'default' : 'pointer', minWidth: 0, padding: '4px 0', }}>
{cat.title}
{count} из {cat.all.length}
{!q && ( )}
{catCollapsed ? null : hasGroups ? (
{cat.groups.map((g) => { const gKey = `${cat.id}:${g.id}`; const collapsed = collapsedGroups.has(gKey) && !q; const groupTags = g.tags.map((tg) => { const o = window.tagObj(tg); return { ...o, key: o.key || `${cat.id}:${g.id}:${o.label}` }; }); const visibleTags = q ? groupTags.filter(matchTag) : groupTags; if (q && visibleTags.length === 0 && !cat.catHit && !g.title.toLowerCase().includes(q)) return null; const gCount = groupTags.filter((it) => selected.has(it.key)).length; const gAll = gCount === groupTags.length; return (
{!collapsed && (
{visibleTags.map((it) => ( toggle(it.key)} dark={dark} q={q} /> ))}
)}
); })}
) : (
{(q ? cat.tagHits : cat.all).map((it) => ( toggle(it.key)} dark={dark} q={q} /> ))}
)}
); })} {filtered.every((c) => c.hidden) && (
Ничего не найдено по запросу «{query}»
)}
v11
); } function TagChip({ item, cat, on, onClick, dark, q }) { const t = dark ? window.TG.dark : window.TG.light; return ( ); } function highlight(text, q, onBg) { if (!q) return text; const i = text.toLowerCase().indexOf(q.toLowerCase()); if (i < 0) return text; const hlStyle = { fontWeight: 700, textDecoration: 'underline', textUnderlineOffset: 2 }; return ( <> {text.slice(0, i)} {text.slice(i, i + q.length)} {text.slice(i + q.length)} ); } function CatCheckbox({ dark, state, hue, onClick }) { const on = state === 'on'; const partial = state === 'partial'; const active = on || partial; const color = `oklch(${dark ? 60 : 55}% 0.16 ${hue})`; return ( ); } Object.assign(window, { V2Chips });