omni: редизайн панели + 450 источников (341 живых), health-аудит, чистка html/дат, per-source учёт

This commit is contained in:
Reform
2026-10-26 09:41:04 +03:00
parent 35be863977
commit 81f3e556c4
8 changed files with 1032 additions and 291 deletions

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
@@ -6,320 +6,630 @@
<title>omni · радар источников</title>
<style>
:root{
--bg:#0b0d10; --bg2:#11151a; --bg3:#161b22; --line:#232a33;
--tx:#e6edf3; --dim:#8b949e; --dim2:#5b6673;
--acc:#4ee39b; --acc2:#7aa2ff; --warn:#f0b429; --bad:#f85149;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
--bg:#08090c; --bg2:#0c0e13; --panel:#101319; --panel2:#141821; --line:#1d2230; --line2:#2a3140;
--txt:#e9edf5; --dim:#98a3b6; --dim2:#6b7688;
--acc:#7c6cf4; --acc2:#2dd4bf; --ok:#34d399; --bad:#fb7185; --warn:#fbbf24;
--mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Consolas,monospace;
--r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);
font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:22px 18px 60px}
html,body{margin:0;height:100%}
body{
background:
radial-gradient(1100px 520px at 76% -12%, rgba(124,108,244,.16), transparent 62%),
radial-gradient(760px 420px at 6% 8%, rgba(45,212,191,.09), transparent 60%),
var(--bg);
color:var(--txt);
font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(124,108,244,.35)}
header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.logo{font:700 20px/1 var(--mono);letter-spacing:.5px}
.logo b{color:var(--acc)}
.sub{color:var(--dim);font-size:12.5px}
.tabs{display:flex;gap:6px;margin:16px 0 18px;border-bottom:1px solid var(--line)}
.tab{padding:9px 14px;border:0;background:none;color:var(--dim);border-bottom:2px solid transparent;
font-size:13.5px;letter-spacing:.2px}
.tab.on{color:var(--tx);border-bottom-color:var(--acc)}
.tab:hover{color:var(--tx)}
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:8px;margin-bottom:18px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.stat .v{font:700 19px/1.2 var(--mono)}
.stat .k{color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;margin-top:3px}
.stat.ok .v{color:var(--acc)} .stat.bad .v{color:var(--bad)} .stat.warn .v{color:var(--warn)}
/* ---------- sidebar ---------- */
aside{
position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;
padding:20px 16px;border-right:1px solid var(--line);background:linear-gradient(180deg,#0a0c11,#08090c 60%);
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 12px}
.mark{
width:30px;height:30px;border-radius:9px;flex:0 0 auto;
background:conic-gradient(from 200deg,var(--acc),#3b82f6 40%,var(--acc2) 72%,var(--acc));
box-shadow:0 0 22px rgba(124,108,244,.5) inset,0 4px 14px rgba(0,0,0,.5);
}
.brand b{font-size:16px;letter-spacing:.2px}
.brand span{display:block;font:11px/1.3 var(--mono);color:var(--dim2);letter-spacing:.06em;text-transform:uppercase}
.bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
input[type=text],select{background:var(--bg3);border:1px solid var(--line);color:var(--tx);
border-radius:8px;padding:8px 11px;font:13px var(--mono);outline:none;min-width:0}
input[type=text]:focus,select:focus{border-color:var(--acc2)}
input[type=text]{flex:1 1 220px}
.btn{background:var(--bg3);border:1px solid var(--line);color:var(--tx);border-radius:8px;
padding:8px 13px;font-size:13px;white-space:nowrap}
.btn:hover{border-color:var(--acc2)}
.btn.pri{background:rgba(78,227,155,.12);border-color:rgba(78,227,155,.45);color:var(--acc)}
.btn.gh{background:none;color:var(--dim)}
.btn:disabled{opacity:.4;cursor:default}
.nav{display:flex;flex-direction:column;gap:4px}
.nav button{
display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
color:var(--dim);font-weight:500;transition:.15s;text-align:left;width:100%;
}
.nav button i{width:16px;height:16px;flex:0 0 auto;opacity:.75;display:grid;place-items:center;font-size:12px;line-height:1}
.nav button:hover{background:#12151d;color:var(--txt)}
.nav button.on{background:linear-gradient(90deg,rgba(124,108,244,.18),rgba(124,108,244,.05));color:#fff;box-shadow:inset 0 0 0 1px rgba(124,108,244,.3)}
.nav button b{margin-left:auto;font:11px var(--mono);color:var(--dim2)}
.add{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:16px}
.add .ttl{font:600 12px/1 var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.add .row{display:flex;gap:8px;flex-wrap:wrap}
.add .row input[type=text]{flex:1 1 180px}
.sect{font:11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);padding:0 8px}
.cats{display:flex;flex-direction:column;gap:2px;overflow:auto;margin:0 -4px;padding:0 4px;flex:1}
.cat{
display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center;
padding:8px 9px;border-radius:9px;cursor:pointer;border:1px solid transparent;
}
.cat:hover{background:#0f1218}
.cat.on{background:#12151d;border-color:var(--line2)}
.cat .cn{font-size:13.5px;color:#c3cad8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat.on .cn{color:#fff}
.cat .cc{font:11.5px var(--mono);color:var(--dim2)}
.bar{grid-column:1/-1;height:3px;border-radius:3px;background:#1a1f2b;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar .a{background:var(--ok)}
.bar .d{background:var(--bad)}
.bar .u{background:#39414f}
.listhead{display:flex;justify-content:space-between;align-items:center;color:var(--dim);
font:11.5px var(--mono);text-transform:uppercase;letter-spacing:.7px;padding:0 4px 8px}
.list{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg2)}
.src{display:grid;grid-template-columns:38px 1fr 132px 104px 62px 34px;gap:10px;align-items:center;
padding:9px 12px;border-bottom:1px solid var(--line)}
.src:last-child{border-bottom:0}
.src:hover{background:rgba(255,255,255,.022)}
.src.off{opacity:.45}
.nm{font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.u{color:var(--dim2);font:11.5px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat{font:11px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.cat.k{color:var(--acc2)}
.pill{font:11.5px var(--mono);padding:2px 8px;border-radius:20px;border:1px solid var(--line);
color:var(--dim);white-space:nowrap}
.pill.ok{color:var(--acc);border-color:rgba(78,227,155,.35);background:rgba(78,227,155,.08)}
.pill.bad{color:var(--bad);border-color:rgba(248,81,73,.35);background:rgba(248,81,73,.07)}
.pill.wait{color:var(--warn);border-color:rgba(240,180,41,.3)}
.cnt{font:12px var(--mono);color:var(--dim);text-align:right}
.del{background:none;border:0;color:var(--dim2);font-size:15px;line-height:1;padding:4px}
.del:hover{color:var(--bad)}
.sw{position:relative;width:34px;height:19px;display:inline-block}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;background:var(--bg3);border:1px solid var(--line);
border-radius:20px;transition:.15s}
.sw span:before{content:"";position:absolute;width:13px;height:13px;left:2px;top:2px;border-radius:50%;
background:var(--dim);transition:.15s}
.sw input:checked + span{background:rgba(78,227,155,.18);border-color:rgba(78,227,155,.5)}
.sw input:checked + span:before{transform:translateX(15px);background:var(--acc)}
.legend{display:flex;gap:10px;flex-wrap:wrap;padding:8px 8px 0;border-top:1px solid var(--line);font:10.5px var(--mono);color:var(--dim2)}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:7px;height:7px;border-radius:2px;display:block}
.lg-a{background:var(--ok)} .lg-d{background:var(--bad)} .lg-u{background:#39414f}
.aside-foot{border-top:1px solid var(--line);padding-top:12px;font:11.5px/1.6 var(--mono);color:var(--dim2)}
.aside-foot b{color:var(--dim);font-weight:500}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:10px}
.card h3{margin:0 0 6px;font:600 14.5px/1.35 inherit}
.card .m{color:var(--dim);font:11.5px var(--mono);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.card p{margin:0;color:#b9c2cc;font-size:13px;line-height:1.45}
.card .body{margin-top:7px;color:#8b949e;font-size:12.5px;max-height:4.4em;overflow:hidden}
.empty{color:var(--dim);text-align:center;padding:36px 10px;font:12.5px var(--mono)}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
background:var(--bg3);border:1px solid var(--line);padding:9px 15px;border-radius:9px;
font:12.5px var(--mono);opacity:0;pointer-events:none;transition:.2s;z-index:9}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.prog{font:12px var(--mono);color:var(--warn);margin-bottom:10px}
.hide{display:none!important}
@media(max-width:760px){
.src{grid-template-columns:34px 1fr 34px;grid-template-areas:"sw nm del" ". st ." ". cat .";gap:6px 10px}
.src .sw{grid-area:sw}.src .meta{grid-area:nm}.src .del{grid-area:del}
.src .catcell{grid-area:cat}.src .stcell{grid-area:st}.src .cnt{display:none}
/* ---------- main ---------- */
main{min-width:0;display:flex;flex-direction:column}
.top{
position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
padding:14px 26px;border-bottom:1px solid var(--line);
background:rgba(8,9,12,.72);backdrop-filter:blur(14px);
}
.top h1{font-size:15.5px;margin:0;font-weight:600;letter-spacing:.2px}
.top h1 small{display:block;font:11px var(--mono);color:var(--dim2);letter-spacing:.08em;text-transform:uppercase;font-weight:400;margin-top:2px}
.spacer{flex:1}
.search{
display:flex;align-items:center;gap:8px;background:#0e1117;border:1px solid var(--line);
border-radius:10px;padding:7px 11px;min-width:230px;transition:.15s;
}
.search:focus-within{border-color:rgba(124,108,244,.6);box-shadow:0 0 0 3px rgba(124,108,244,.12)}
.search input{background:none;border:0;outline:0;color:var(--txt);width:100%;font-size:13.5px}
.search kbd{font:10.5px var(--mono);color:var(--dim2);border:1px solid var(--line2);border-radius:5px;padding:1px 5px}
.btn{
display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
border:1px solid var(--line2);background:#11141b;font-size:13.5px;font-weight:500;transition:.15s;white-space:nowrap;
}
.btn:hover{background:#161a23;border-color:#39414f}
.btn.primary{background:linear-gradient(180deg,#8b7cf6,#6d5ce0);border-color:#8b7cf6;color:#fff;box-shadow:0 6px 18px rgba(109,92,224,.3)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:none}
.btn.sm{padding:5px 9px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.content{padding:28px 30px 74px;max-width:1280px;width:100%}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.kpi{
position:relative;overflow:hidden;padding:15px 16px;border-radius:var(--r);border:1px solid var(--line);
background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.kpi:after{content:"";position:absolute;inset:auto -30% -60% auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(124,108,244,.22),transparent 70%)}
.kpi .k{font:11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim2)}
.kpi .v{font:600 27px/1.25 var(--mono);letter-spacing:-.5px;margin-top:6px}
.kpi .v small{font-size:13px;color:var(--dim);font-weight:400;letter-spacing:0}
.kpi .s{font-size:12px;color:var(--dim);margin-top:2px}
/* feed cards */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{
padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:#0e1117;
font-size:12.5px;color:var(--dim);transition:.15s;
}
.chip:hover{color:var(--txt);border-color:var(--line2)}
.chip.on{background:rgba(124,108,244,.16);border-color:rgba(124,108,244,.55);color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(342px,1fr));gap:14px}
.card{
display:flex;flex-direction:column;gap:9px;padding:15px 16px;border-radius:var(--r);
border:1px solid var(--line);background:linear-gradient(180deg,#12151c,#0e1116);
transition:.16s;position:relative;
}
.card:hover{transform:translateY(-1px);border-color:#39414f;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.card .head{display:flex;align-items:baseline;gap:8px;font:11.5px var(--mono);color:var(--dim2);min-width:0}
.card .head .src{color:var(--acc2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.card .head .score{margin-left:auto;color:var(--warn);font-weight:600;min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
.card h3{margin:0;font-size:14.5px;line-height:1.4;font-weight:600;letter-spacing:.1px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card p{margin:0;font-size:13px;line-height:1.5;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:flex;gap:10px;font:11px var(--mono);color:var(--dim2);margin-top:auto;padding-top:4px}
.tag{font:10.5px var(--mono);padding:1px 6px;border-radius:5px;background:#181d27;color:#9aa5b8}
.price{color:var(--ok);border:1px solid rgba(52,211,153,.3);background:rgba(52,211,153,.08);border-radius:6px;padding:0 6px;font:11px var(--mono)}
/* sources table */
.strip{display:flex;gap:22px;flex-wrap:wrap;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:14px}
.strip div{font:12px var(--mono);color:var(--dim2)}
.strip b{display:block;font-size:17px;color:var(--txt);font-weight:600;margin-top:2px;font-family:var(--mono)}
.cbar{display:block;height:4px;border-radius:4px;background:#1a1f2b;margin-top:6px;overflow:hidden}
.cbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.strip .g b{color:var(--ok)} .strip .r b{color:var(--bad)} .strip .y b{color:var(--warn)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
select,input[type=text],input[type=url]{
background:#0e1117;border:1px solid var(--line);border-radius:9px;padding:7px 10px;color:var(--txt);font-size:13px;outline:0;
}
select:focus,input:focus{border-color:rgba(124,108,244,.6)}
.table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.thead,.row{display:grid;grid-template-columns:42px minmax(200px,1fr) 104px 96px 116px 68px 84px;gap:10px;align-items:center;padding:9px 12px}
.thead{
position:sticky;top:56px;z-index:5;background:#0d1016;border-bottom:1px solid var(--line);
font:10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);
}
.row{border-bottom:1px solid #151a23;font-size:13px}
.row:last-child{border-bottom:0}
.row:hover{background:#10141b}
.row .nm{min-width:0}
.row .nm b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm span{display:block;font:10.5px var(--mono);color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catpill{font:10.5px var(--mono);color:#a9b3c6;background:#151a24;border:1px solid #202634;border-radius:6px;padding:2px 6px;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st{display:inline-flex;align-items:center;gap:5px;font:11.5px var(--mono)}
.st i{width:6px;height:6px;border-radius:50%;background:#4b5563}
.st.ok{color:var(--ok)} .st.ok i{background:var(--ok);box-shadow:0 0 8px rgba(52,211,153,.8)}
.st.bad{color:var(--bad)} .st.bad i{background:var(--bad)}
.st.no{color:var(--dim2)}
.note{display:block;font:10px var(--mono);color:#5a6373;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num{font:12px var(--mono);color:var(--dim);text-align:right}
.acts{display:flex;gap:6px;justify-content:flex-end}
.icon{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;border:1px solid var(--line);color:var(--dim);font-size:12px}
.icon:hover{color:#fff;border-color:var(--line2);background:#151a23}
/* switch */
.sw{position:relative;width:32px;height:18px;border-radius:999px;background:#242b38;cursor:pointer;transition:.16s;justify-self:center}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#7d8798;transition:.16s}
.sw.on{background:rgba(124,108,244,.55)}
.sw.on:after{left:16px;background:#fff}
/* progress */
.prog{
position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:12px;
padding:10px 22px;border-top:1px solid var(--line2);background:rgba(10,12,17,.95);backdrop-filter:blur(10px);
font:12.5px var(--mono);color:var(--dim);
}
.prog.on{display:flex}
.prog .track{flex:1;height:4px;border-radius:4px;background:#1a1f2b;overflow:hidden}
.prog .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s}
/* modal */
.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center;background:rgba(4,5,8,.66);backdrop-filter:blur(3px)}
.modal.on{display:grid}
.sheet{width:min(520px,92vw);border:1px solid var(--line2);border-radius:16px;background:linear-gradient(180deg,#14181f,#0e1116);padding:20px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.sheet h2{margin:0 0 4px;font-size:16px}
.sheet p.hint{margin:0 0 14px;font-size:12.5px;color:var(--dim)}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.field label{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}
.field input,.field select{width:100%}
.sheet .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.toast{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toast div{
padding:10px 14px;border-radius:10px;border:1px solid var(--line2);background:#14181f;font-size:13px;
box-shadow:0 12px 30px rgba(0,0,0,.5);animation:in .18s ease-out;
}
.toast div.ok{border-color:rgba(52,211,153,.45)}
.toast div.err{border-color:rgba(251,113,133,.45)}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.empty{padding:40px;text-align:center;color:var(--dim2);font-size:13.5px}
.skel{height:96px;border-radius:var(--r);background:linear-gradient(90deg,#11151c,#151a23,#11151c);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
@media (max-width:1000px){
.app{grid-template-columns:1fr}
aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--line)}
.cats{flex-direction:row;overflow-x:auto;flex:1 0 100%}
.cat{min-width:150px}
.kpis{grid-template-columns:repeat(2,1fr)}
.thead,.row{grid-template-columns:38px minmax(140px,1fr) 84px 80px 64px}
.thead span:nth-child(4),.row .catpill{display:none}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo">omni<b>·</b>radar</div>
<div class="sub" id="sub">загрузка…</div>
</header>
<div class="tabs">
<button class="tab on" data-view="feed">лента</button>
<button class="tab" data-view="src">источники</button>
</div>
<!-- ============ FEED ============ -->
<section id="view-feed">
<div class="stats" id="stats"></div>
<div class="bar">
<input type="text" id="q" placeholder="поиск по заголовку, описанию, url…">
<select id="cat"><option value="">все категории</option></select>
<button class="btn pri" id="feed">собрать ленту</button>
<div class="app">
<aside>
<div class="brand">
<div class="mark"></div>
<div><b>omni</b><span>source radar</span></div>
</div>
<div class="prog hide" id="fprog"></div>
<div id="items"></div>
</section>
<!-- ============ SOURCES ============ -->
<section id="view-src" class="hide">
<div class="stats" id="sstats"></div>
<div class="bar">
<input type="text" id="sq" placeholder="фильтр по имени или url…">
<select id="scat"><option value="all">все категории</option></select>
<button class="btn" id="checkAll">проверить всё</button>
<button class="btn" id="checkCat">проверить категорию</button>
<button class="btn gh" id="onAll">вкл все</button>
<button class="btn gh" id="offAll">выкл все</button>
<div class="nav">
<button id="nav-feed" class="on"><i>▤</i>Лента<b id="nav-feed-n">—</b></button>
<button id="nav-src"><i>◈</i>Источники<b id="nav-src-n">—</b></button>
</div>
<div class="prog hide" id="sprog"></div>
<div class="add">
<div class="ttl">подключить источник</div>
<div class="row">
<input type="text" id="aname" placeholder="имя (латиницей, без пробелов)" style="flex:0 1 190px">
<input type="text" id="aurl" placeholder="https://example.com/feed.xml | …/latest.json | github.com/org">
<select id="acat"></select>
<button class="btn pri" id="add">подключить</button>
<div class="sect">категории</div>
<div class="cats" id="cats"></div>
<div class="legend"><span><i class="lg-a"></i>живые</span><span><i class="lg-d"></i>мёртвые</span><span><i class="lg-u"></i>не проверены</span></div>
<div class="aside-foot" id="aside-foot">загрузка…</div>
</aside>
<main>
<div class="top">
<h1 id="ttl">Лента<small>свежие записи со всех источников</small></h1>
<div class="spacer"></div>
<div class="search">
<span style="color:#5d6779">⌕</span>
<input id="q" placeholder="поиск по базе">
<kbd>/</kbd>
</div>
<button class="btn primary" id="btn-feed">Собрать ленту</button>
</div>
<div class="listhead"><span id="scount">—</span><span>статус · записей</span></div>
<div class="list" id="slist"></div>
</section>
<div class="content">
<!-- ЛЕНТА -->
<section id="view-feed">
<div class="kpis" id="kpis"></div>
<div class="toolbar" id="feed-tools"></div>
<div class="cards" id="cards"></div>
<div class="empty" id="cards-more" style="display:none"><button class="btn" id="btn-more">Показать ещё</button></div>
</section>
<!-- ИСТОЧНИКИ -->
<section id="view-src" style="display:none">
<div class="strip" id="src-strip"></div>
<div class="filters">
<select id="f-cat"><option value="all">все категории</option></select>
<select id="f-state">
<option value="">любое состояние</option>
<option value="alive">живые</option>
<option value="dead">мёртвые</option>
<option value="untested">не проверены</option>
<option value="off">выключены</option>
</select>
<input type="text" id="f-q" placeholder="фильтр по имени или url" style="min-width:220px">
<div class="spacer"></div>
<button class="btn sm" id="btn-check-cat">Проверить категорию</button>
<button class="btn sm" id="btn-check-all">Проверить все</button>
<button class="btn sm" id="btn-on">Включить все</button>
<button class="btn sm" id="btn-off">Выключить все</button>
<button class="btn sm primary" id="btn-add">+ Источник</button>
</div>
<div class="table">
<div class="thead">
<span>вкл</span><span>источник</span><span>категория</span><span>адаптер</span>
<span>состояние</span><span class="num">записей</span><span></span>
</div>
<div id="rows"></div>
</div>
</section>
</div>
</main>
</div>
<div id="toast"></div>
<div class="prog" id="prog">
<span id="prog-txt">работаю…</span>
<div class="track"><i id="prog-bar"></i></div>
<span id="prog-n"></span>
</div>
<div class="modal" id="modal">
<div class="sheet">
<h2>Добавить источник</h2>
<p class="hint">любой публичный rss / json / html. ключи не нужны.</p>
<div class="field"><label>имя</label><input id="a-name" placeholder="мой_блог"></div>
<div class="field"><label>url</label><input id="a-url" placeholder="https://example.com/feed.xml"></div>
<div class="field"><label>категория</label>
<select id="a-cat">
<option>community</option><option>papers</option><option>company</option><option>security</option>
<option>forum</option><option>models</option><option>benchmark</option><option>company_cn</option><option>company_kr</option>
</select>
</div>
<div class="field"><label>адаптер</label>
<select id="a-adapter">
<option value="">определить самому</option>
<option value="rss">rss / atom</option>
<option value="json">json (auto)</option>
<option value="discourse">discourse</option>
<option value="reddit_listing">reddit</option>
<option value="html_listing">html listing</option>
<option value="telegram_web">telegram web</option>
</select>
</div>
<div class="foot">
<button class="btn ghost" id="a-cancel">Отмена</button>
<button class="btn primary" id="a-save">Добавить</button>
</div>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
const $ = s => document.querySelector(s);
const el = (t, c, h) => { const d = document.createElement(t); if (c) d.className = c; if (h != null) d.innerHTML = h; return d; };
const esc = s => String(s == null ? "" : s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
let CATS = {}, STATE = {view: "feed", scat: "all", sq: "", cat: ""};
const el = (t, c, h) => { const n = document.createElement(t); if (c) n.className = c; if (h != null) n.innerHTML = h; return n; };
const esc = s => (s == null ? '' : String(s)).replace(/[&<>"]/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[m]));
const fmt = n => (n == null ? '—' : Number(n).toLocaleString('ru-RU'));
const api = async (p, opt) => {
const r = await fetch(p, opt);
const t = await r.text();
try { return JSON.parse(t); } catch (e) { return {error: t.slice(0, 120)}; }
};
const post = (p, b) => api(p, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(b || {})});
function toast(m){ const t = $("#toast"); t.textContent = m; t.classList.add("on"); clearTimeout(t._h); t._h = setTimeout(() => t.classList.remove("on"), 2200); }
async function api(u, b){
const r = await fetch(u, b ? {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify(b)} : undefined);
return r.json();
const S = {view: 'feed', cat: 'all', q: '', state: '', srcQ: '', offset: 0, limit: 36, sort: 'score', stats: null, sources: [], job: null};
function toast(msg, cls) {
const d = el('div', cls || '', esc(msg));
$('#toast').appendChild(d);
setTimeout(() => d.remove(), 3200);
}
/* ---------- вкладки ---------- */
document.querySelectorAll(".tab").forEach(t => t.onclick = () => {
document.querySelectorAll(".tab").forEach(x => x.classList.toggle("on", x === t));
STATE.view = t.dataset.view;
$("#view-feed").classList.toggle("hide", STATE.view !== "feed");
$("#view-src").classList.toggle("hide", STATE.view !== "src");
if (STATE.view === "src") loadSources();
});
/* ---------- лента ---------- */
async function loadStats(){
const s = await api("/api/stats");
CATS = s.categories || {};
$("#sub").textContent = `${s.sources} источников · ${s.sources_enabled} включено · ${s.items} записей · ${s.priced} с ценой`;
const box = $("#stats"); box.innerHTML = "";
[["записей", s.items, ""], ["с ценой", s.priced, ""], ["прогонов", s.runs, ""],
["источников", s.sources, "ok"], ["включено", s.sources_enabled, "ok"]]
.forEach(([k, v, c]) => { const d = el("div", "stat " + c, `<div class="v">${v ?? 0}</div><div class="k">${k}</div>`); box.appendChild(d); });
const sel = $("#cat"), cur = sel.value;
sel.innerHTML = '<option value="">все категории</option>' +
Object.entries(CATS).map(([k, v]) => `<option value="${k}">${k} · ${v}</option>`).join("");
sel.value = cur;
const scat = $("#scat"), curs = scat.value || "all";
scat.innerHTML = '<option value="all">все категории</option>' +
Object.entries(CATS).map(([k, v]) => `<option value="${k}">${k} · ${v}</option>`).join("");
scat.value = curs;
const acat = $("#acat");
acat.innerHTML = Object.keys(CATS).map(k => `<option value="${k}">${k}</option>`).join("") + '<option value="custom">custom</option>';
}
async function loadItems(){
const q = $("#q").value.trim(), cat = $("#cat").value;
const d = await api(`/api/items?q=${encodeURIComponent(q)}&category=${encodeURIComponent(cat)}&limit=80`);
const box = $("#items"); box.innerHTML = "";
if (!d.items.length) { box.appendChild(el("div", "empty", "пусто — нажми «собрать ленту»")); return; }
d.items.forEach(it => {
const c = el("div", "card");
const price = it.price ? ` · $${it.price}${it.currency ? " " + it.currency : ""}` : "";
c.innerHTML = `<h3><a href="${esc(it.url)}" target="_blank" rel="noopener">${esc(it.title)}</a></h3>
<div class="m"><span>${esc(it.provider || "—")}</span><span>${esc(it.kind || "")}</span>
<span>${esc(it.author || "")}</span><span>★ ${it.score ?? 0}</span>${price ? `<span>${esc(price)}</span>` : ""}</div>
${it.body ? `<div class="body">${esc(it.body)}</div>` : ""}`;
box.appendChild(c);
/* ---------- sidebar ---------- */
function renderCats(list) {
const box = $('#cats');
box.innerHTML = '';
const all = el('div', 'cat' + (S.cat === 'all' ? ' on' : ''));
all.innerHTML = `<span class="cn">все источники</span><span class="cc">${fmt(S.stats ? S.stats.sources : 0)}</span>`;
all.onclick = () => setCat('all');
box.appendChild(all);
(list || []).forEach(c => {
const d = el('div', 'cat' + (S.cat === c.name ? ' on' : ''));
const t = c.total || 1;
d.innerHTML = `<span class="cn">${esc(c.name)}</span><span class="cc">${fmt(c.total)}</span>
<span class="bar"><i class="a" style="width:${c.alive / t * 100}%"></i><i class="d" style="width:${c.dead / t * 100}%"></i><i class="u" style="width:${c.untested / t * 100}%"></i></span>`;
d.onclick = () => setCat(c.name);
box.appendChild(d);
});
}
$("#q").oninput = (() => { let h; return () => { clearTimeout(h); h = setTimeout(loadItems, 260); }; })();
$("#cat").onchange = loadItems;
$("#feed").onclick = async () => {
const b = $("#feed"); b.disabled = true;
const cat = $("#cat").value;
const {job} = await api("/api/feed", {category: cat || null, limit: 10});
$("#fprog").classList.remove("hide");
const tick = setInterval(async () => {
const j = await api("/api/job/" + job);
if (j.state === "running") { $("#fprog").textContent = "собираю…"; return; }
clearInterval(tick); b.disabled = false;
$("#fprog").textContent = j.state === "done"
? `источников ${j.sources} · собрано ${j.fetched} · новых ${j.new} · дублей ${j.dup} · пустых ${j.empty}`
: "ошибка: " + (j.error || "?");
setTimeout(() => $("#fprog").classList.add("hide"), 6000);
await loadStats(); await loadItems();
}, 1200);
};
function syncChips() {
document.querySelectorAll('#feed-tools .chip').forEach(b => {
const k = b.dataset.k || 'cat';
if (k === 'cat') b.classList.toggle('on', b.dataset.cat === S.cat);
if (k === 'sort') b.classList.toggle('on', b.dataset.sort === S.sort);
});
}
/* ---------- источники ---------- */
async function loadSources(){
const cat = STATE.scat, q = STATE.sq;
const d = await api(`/api/sources?category=${encodeURIComponent(cat === "all" ? "" : cat)}&q=${encodeURIComponent(q)}`);
const sb = $("#sstats"); sb.innerHTML = "";
[["всего", d.total, ""], ["в списке", d.shown, ""], ["включено", d.enabled, "ok"],
["живых", d.alive, "ok"], ["мёртвых", d.dead, "bad"], ["не проверено", d.untested, "warn"]]
.forEach(([k, v, c]) => sb.appendChild(el("div", "stat " + c, `<div class="v">${v ?? 0}</div><div class="k">${k}</div>`)));
$("#scount").textContent = `${d.shown} из ${d.total}`;
function setCat(name) {
S.cat = name; S.offset = 0;
renderCats(S.stats ? S.stats.categories : []);
syncChips();
if (S.view === 'feed') loadItems(true); else loadSources();
$('#f-cat').value = name;
}
const box = $("#slist"); box.innerHTML = "";
if (!d.items.length) { box.appendChild(el("div", "empty", "ничего не найдено")); return; }
d.items.forEach(s => {
const row = el("div", "src" + (s.enabled ? "" : " off"));
const st = s.items > 0
? `<span class="pill ok">${s.items} зап.</span>`
: (s.checked ? `<span class="pill bad">${esc(s.note || "мёртв")}</span>` : `<span class="pill">не проверен</span>`);
row.innerHTML = `
<label class="sw"><input type="checkbox" ${s.enabled ? "checked" : ""}><span></span></label>
<div class="meta"><div class="nm">${esc(s.name)}${s.custom ? ' <span class="pill wait">свой</span>' : ""}</div>
<div class="u" title="${esc(s.url)}">${esc(s.url)}</div></div>
<div class="catcell"><span class="cat">${esc(s.category)}</span> <span class="cat k">${esc(s.kind)}</span></div>
<div class="stcell">${st}</div>
<div class="cnt">${s.items || ""}</div>
<button class="del" title="удалить">${s.custom ? "✕" : ""}</button>`;
row.querySelector("input").onchange = async e => {
const on = e.target.checked;
row.classList.toggle("off", !on);
await api("/api/sources/toggle", {name: s.name, enabled: on});
toast(`${s.name}: ${on ? "включён" : "выключен"}`);
/* ---------- stats / KPI ---------- */
async function loadStats() {
const s = await api('/api/stats');
if (s.error) return toast(s.error, 'err');
S.stats = s;
$('#nav-feed-n').textContent = fmt(s.items);
$('#nav-src-n').textContent = fmt(s.sources);
$('#aside-foot').innerHTML =
`<b>${fmt(s.sources)}</b> источников · <b>${fmt(s.sources_enabled)}</b> вкл<br>` +
`<b>${fmt(s.alive)}</b> живых · <b>${fmt(s.tested)}</b> проверено<br>` +
`<b>${fmt(s.runs)}</b> прогонов · <b>${fmt(s.priced)}</b> с ценой`;
renderCats(s.categories);
const ks = [
['записей', s.items, 'в sqlite + fts5', ''],
['источников', s.sources, `${s.sources_enabled} включено`, ''],
['живых', s.alive, `из ${s.tested} проверенных`, 'g'],
['с ценой', s.priced, 'извлечено из текста', 'y'],
];
$('#kpis').innerHTML = ks.map(([k, v, sub, cls]) =>
`<div class="kpi"><div class="k">${k}</div><div class="v">${fmt(v)}</div><div class="s">${sub}</div></div>`).join('');
const sel = $('#f-cat');
sel.innerHTML = '<option value="all">все категории</option>' +
s.categories.map(c => `<option value="${esc(c.name)}">${esc(c.name)} · ${c.total}</option>`).join('');
sel.value = S.cat;
}
/* ---------- feed ---------- */
function card(it) {
const c = el('article', 'card');
const text = (it.text || '').replace(/\s+/g, ' ').trim();
const price = it.price != null ? `<span class="price">${esc(it.price)} ${esc(it.currency || '')}</span>` : '';
const pub = it.published ? String(it.published).slice(0, 16).replace('T', ' ') : '';
c.innerHTML =
`<div class="head"><span class="src">${esc(it.source)}</span><span>${esc(it.kind || '')}</span>
<span class="score">${it.score != null ? (+it.score).toFixed(1) : ''}</span></div>
<h3>${esc(it.title || '(без заголовка)')}</h3>
${text ? `<p>${esc(text)}</p>` : ''}
<div class="meta">${it.author ? `<span>${esc(String(it.author).slice(0, 22))}</span>` : ''}
${pub ? `<span>${esc(pub)}</span>` : ''}${price}</div>`;
if (it.url) c.onclick = () => window.open(it.url, '_blank', 'noopener');
c.style.cursor = it.url ? 'pointer' : 'default';
return c;
}
async function loadItems(reset) {
if (reset) { S.offset = 0; $('#cards').innerHTML = '<div class="skel"></div><div class="skel"></div><div class="skel"></div>'; }
const u = `/api/items?category=${encodeURIComponent(S.cat)}&q=${encodeURIComponent(S.q)}&limit=${S.limit}&offset=${S.offset}&sort=${S.sort}`;
const r = await api(u);
if (r.error) return toast(r.error, 'err');
if (reset) $('#cards').innerHTML = '';
if (!r.items.length && reset) {
$('#cards').innerHTML = '<div class="empty">пусто. собери ленту или добавь свои источники.</div>';
}
r.items.forEach(it => $('#cards').appendChild(card(it)));
S.offset += r.items.length;
$('#cards-more').style.display = S.offset < r.total ? 'block' : 'none';
$('#btn-more').textContent = `Показать ещё (${fmt(Math.max(0, r.total - S.offset))})`;
const t = $('#ttl');
t.innerHTML = `Лента<small>${fmt(r.total)} записей · ${S.cat === 'all' ? 'все источники' : esc(S.cat)}</small>`;
}
/* ---------- sources ---------- */
async function loadSources() {
const u = `/api/sources?category=${encodeURIComponent(S.cat)}&q=${encodeURIComponent(S.srcQ)}&state=${encodeURIComponent(S.state)}`;
const r = await api(u);
if (r.error) return toast(r.error, 'err');
S.sources = r.items;
$('#src-strip').innerHTML =
`<div>всего<b>${fmt(r.total)}</b></div><div class="g">живых<b>${fmt(r.alive)}</b></div>` +
`<div class="r">мёртвых<b>${fmt(r.dead)}</b></div><div class="y">не проверено<b>${fmt(r.untested)}</b></div>` +
`<div>включено<b>${fmt(r.enabled)}</b></div><div>в выборке<b>${fmt(r.shown)}</b></div>` +
`<div style="flex:1;min-width:180px">покрытие проверкой
<b>${Math.round((r.total - r.untested) / Math.max(1, r.total) * 100)}%</b>
<span class="cbar"><i style="width:${(r.total - r.untested) / Math.max(1, r.total) * 100}%"></i></span></div>`;
const rows = $('#rows');
rows.innerHTML = '';
if (!r.items.length) { rows.innerHTML = '<div class="empty">ничего не найдено под эти фильтры</div>'; return; }
const frag = document.createDocumentFragment();
r.items.forEach(s => {
const row = el('div', 'row');
const alive = (s.items || 0) > 0;
const stCls = alive ? 'ok' : (s.checked ? 'bad' : 'no');
const stTxt = alive ? 'живой' : (s.checked ? 'мёртвый' : 'не проверен');
row.innerHTML =
`<div class="sw ${s.enabled ? 'on' : ''}" title="вкл/выкл"></div>
<div class="nm"><b>${esc(s.name)}</b><span>${esc(s.url)}</span></div>
<div class="catpill">${esc(s.category)}</div>
<div><span class="catpill">${esc(s.adapter)}</span></div>
<div><span class="st ${stCls}"><i></i>${stTxt}</span>${!alive && s.note ? `<span class="note">${esc(String(s.note).slice(0, 22))}</span>` : ''}</div>
<div class="num">${fmt(s.stored)}</div>
<div class="acts">
<button class="icon act-check" title="проверить">↻</button>
${s.url ? `<a class="icon" href="${esc(s.url)}" target="_blank" rel="noopener" title="открыть">↗</a>` : ''}
${s.custom ? '<button class="icon act-del" title="удалить">✕</button>' : ''}
</div>`;
row.querySelector('.sw').onclick = async (e) => {
const on = !e.currentTarget.classList.contains('on');
e.currentTarget.classList.toggle('on', on);
const res = await post('/api/sources/toggle', {name: s.name, enabled: on});
if (res.error) { e.currentTarget.classList.toggle('on', !on); return toast(res.error, 'err'); }
toast(`${s.name}: ${on ? 'включён' : 'выключен'}`, 'ok');
loadStats();
};
const del = row.querySelector(".del");
if (s.custom) del.onclick = async () => {
if (!confirm(`удалить источник ${s.name}?`)) return;
await api("/api/sources/remove", {name: s.name});
toast("удалён"); loadSources(); loadStats();
row.querySelector('.act-check').onclick = () => check(null, s.name);
const del = row.querySelector('.act-del');
if (del) del.onclick = async () => {
const res = await post('/api/sources/remove', {name: s.name});
if (res.error) return toast(res.error, 'err');
toast(`${s.name} удалён`, 'ok'); loadSources(); loadStats();
};
box.appendChild(row);
frag.appendChild(row);
});
rows.appendChild(frag);
$('#ttl').innerHTML = `Источники<small>${fmt(r.total)} в реестре · ${fmt(r.shown)} в выборке</small>`;
}
$("#sq").oninput = (() => { let h; return () => { clearTimeout(h); h = setTimeout(() => { STATE.sq = $("#sq").value.trim(); loadSources(); }, 240); }; })();
$("#scat").onchange = () => { STATE.scat = $("#scat").value; loadSources(); };
async function runCheck(body, label){
const {job} = await api("/api/sources/check", body);
const p = $("#sprog"); p.classList.remove("hide");
const tick = setInterval(async () => {
const j = await api("/api/job/" + job);
if (j.state === "running") {
p.textContent = `${label}: ${j.done || 0}/${j.total || "?"} · живых ${j.alive || 0} · мёртвых ${j.dead || 0} · ${j.current || ""}`;
return;
/* ---------- jobs ---------- */
async function poll(job, label) {
S.job = job;
const box = $('#prog');
box.classList.add('on');
for (;;) {
const j = await api('/api/job/' + job);
if (j.state === 'unknown') { box.classList.remove('on'); return null; }
const total = j.total || 0, done = j.done || 0;
const pct = total ? Math.min(100, done / total * 100) : (j.state === 'done' ? 100 : 8);
$('#prog-bar').style.width = pct + '%';
$('#prog-txt').textContent = j.state === 'done' ? label + ': готово' : label + (j.current ? ` · ${j.current}` : '…');
$('#prog-n').textContent = total ? `${fmt(done)} / ${fmt(total)}` : '';
if (j.state === 'done' || j.state === 'error') {
box.classList.remove('on');
if (j.state === 'error') toast(j.error || 'ошибка джобы', 'err');
return j;
}
clearInterval(tick);
p.textContent = `готово: живых ${j.alive || 0}, мёртвых ${j.dead || 0}`;
setTimeout(() => p.classList.add("hide"), 6000);
loadSources(); loadStats();
}, 1300);
await new Promise(r => setTimeout(r, 700));
}
}
$("#checkAll").onclick = () => runCheck({all: true}, "проверка всех");
$("#checkCat").onclick = () => {
const c = STATE.scat === "all" ? "" : STATE.scat;
if (!c) return toast("выбери категорию в селекте");
runCheck({category: c}, "проверка " + c);
async function runFeed() {
$('#btn-feed').disabled = true;
const {job} = await post('/api/feed', {category: S.cat, limit: 12});
const j = await poll(job, 'сбор ленты');
$('#btn-feed').disabled = false;
if (j && j.state === 'done') {
toast(`собрано: источников ${fmt(j.sources)}, новых ${fmt(j.new)}, дублей ${fmt(j.dup)}`, 'ok');
await loadStats(); await loadItems(true);
}
}
async function check(category, name) {
const body = name ? {name} : {category: category || (S.cat === 'all' ? null : S.cat)};
const {job} = await post('/api/sources/check', body);
const j = await poll(job, 'проверка источников');
if (j && j.state === 'done') {
toast(`проверено ${fmt(j.done)}: живых ${fmt(j.alive)}, мёртвых ${fmt(j.dead)}`, 'ok');
await loadStats(); if (S.view === 'src') await loadSources();
}
}
/* ---------- view switching ---------- */
function setView(v) {
S.view = v;
$('#nav-feed').classList.toggle('on', v === 'feed');
$('#nav-src').classList.toggle('on', v === 'src');
$('#view-feed').style.display = v === 'feed' ? '' : 'none';
$('#view-src').style.display = v === 'src' ? '' : 'none';
$('#btn-feed').style.display = v === 'feed' ? '' : 'none';
$('#feed-tools').style.display = v === 'feed' ? '' : 'none';
if (v === 'feed') loadItems(true); else loadSources();
}
/* ---------- wire ---------- */
$('#nav-feed').onclick = () => setView('feed');
$('#nav-src').onclick = () => setView('src');
$('#btn-feed').onclick = runFeed;
$('#btn-more').onclick = () => loadItems(false);
$('#btn-check-all').onclick = () => check(null, null);
$('#btn-check-cat').onclick = () => check(S.cat === 'all' ? null : S.cat, null);
$('#btn-on').onclick = async () => { await post('/api/sources/toggle_all', {enabled: true, category: S.cat}); toast('все включены', 'ok'); loadSources(); loadStats(); };
$('#btn-off').onclick = async () => { await post('/api/sources/toggle_all', {enabled: false, category: S.cat}); toast('все выключены', 'ok'); loadSources(); loadStats(); };
$('#f-cat').onchange = e => { S.cat = e.target.value; renderCats(S.stats.categories); S.view === 'src' ? loadSources() : loadItems(true); };
$('#f-state').onchange = e => { S.state = e.target.value; loadSources(); };
let qt = null;
$('#q').oninput = e => {
clearTimeout(qt);
qt = setTimeout(() => {
S.q = e.target.value.trim();
if (S.view === 'feed') loadItems(true); else { S.srcQ = S.q; loadSources(); }
}, 320);
};
$("#onAll").onclick = async () => {
const d = await api(`/api/sources?category=${encodeURIComponent(STATE.scat === "all" ? "" : STATE.scat)}&q=${encodeURIComponent(STATE.sq)}`);
await Promise.all(d.items.map(s => api("/api/sources/toggle", {name: s.name, enabled: true})));
toast(`включено: ${d.items.length}`); loadSources(); loadStats();
};
$("#offAll").onclick = async () => {
const d = await api(`/api/sources?category=${encodeURIComponent(STATE.scat === "all" ? "" : STATE.scat)}&q=${encodeURIComponent(STATE.sq)}`);
await Promise.all(d.items.map(s => api("/api/sources/toggle", {name: s.name, enabled: false})));
toast(`выключено: ${d.items.length}`); loadSources(); loadStats();
};
$("#add").onclick = async () => {
const name = $("#aname").value.trim().toLowerCase().replace(/\s+/g, "_");
const url = $("#aurl").value.trim();
const category = $("#acat").value;
if (!name || !url) return toast("нужны имя и url");
const r = await api("/api/sources/add", {name, url, category});
if (r.error) return toast(r.error);
toast(`подключён: ${r.name} (${r.adapter})`);
$("#aname").value = ""; $("#aurl").value = "";
document.addEventListener('keydown', e => {
if (e.key === '/' && document.activeElement !== $('#q')) { e.preventDefault(); $('#q').focus(); }
if (e.key === 'Escape') $('#modal').classList.remove('on');
});
$('#btn-add').onclick = () => $('#modal').classList.add('on');
$('#a-cancel').onclick = () => $('#modal').classList.remove('on');
$('#modal').onclick = e => { if (e.target.id === 'modal') $('#modal').classList.remove('on'); };
$('#a-save').onclick = async () => {
const name = $('#a-name').value.trim(), url = $('#a-url').value.trim();
if (!name || !url) return toast('нужны имя и url', 'err');
const res = await post('/api/sources/add', {
name, url, category: $('#a-cat').value, adapter: $('#a-adapter').value || null
});
if (res.error) return toast(res.error, 'err');
$('#modal').classList.remove('on');
$('#a-name').value = ''; $('#a-url').value = '';
toast(`${name} добавлен`, 'ok');
loadSources(); loadStats();
};
/* ---------- старт ---------- */
loadStats().then(loadItems);
/* feed toolbar */
$('#feed-tools').innerHTML =
['all', 'community', 'papers', 'security', 'company', 'forum', 'models', 'benchmark']
.map(c => `<button class="chip" data-k="cat" data-cat="${c}">${c === 'all' ? 'всё' : c}</button>`).join('') +
'<span style="flex:1"></span>' +
'<button class="chip" data-k="sort" data-sort="score">по score</button>' +
'<button class="chip" data-k="sort" data-sort="fresh">по свежести</button>';
document.querySelectorAll('#feed-tools .chip').forEach(b => {
b.onclick = () => {
if (b.dataset.k === 'sort') { S.sort = b.dataset.sort; syncChips(); loadItems(true); }
else setCat(b.dataset.cat);
};
});
syncChips();
(async () => {
const p = new URLSearchParams(location.search);
if (p.get('cat')) S.cat = p.get('cat');
if (p.get('q')) { S.q = p.get('q'); $('#q').value = S.q; }
await loadStats();
if (p.get('view') === 'src') { setView('src'); } else { await loadItems(true); }
})();
</script>
</body>
</html>