initial commit

src/components/Nav.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { NavLink } from 'react-router';
+import type { QueueInfo, QueueItem } from '../../shared/api.ts';
+import { api } from '../lib/api.ts';
+
+const LINKS = [
+  ['/', 'Исходники'],
+  ['/projects', 'Проекты'],
+] as const;
+
+export function Nav() {
+  return (
+    <nav className="nav">
+      {LINKS.map(([to, text]) => <NavLink key={to} to={to} end>{text}</NavLink>)}
+      <QueueIndicator />
+    </nav>
+  );
+}
+
+function counts(list: QueueItem[]): string {
+  const c = new Map<string, number>();
+  list.forEach(x => c.set(x.kind, (c.get(x.kind) ?? 0) + 1));
+  return [...c].map(([k, n]) => k + (n > 1 ? ' ×' + n : '')).join(', ');
+}
+
+/** Состояние очереди ComfyUI: свободен / чем занят и сколько ждёт / недоступен. Обновляется каждые 2 с. */
+function QueueIndicator() {
+  const [q, setQ] = useState<QueueInfo | null>(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+    const update = async () => {
+      if (document.hidden) return;
+      try {
+        const info = await api<QueueInfo>('/api/queue');
+        if (alive) { setQ(info); setError(''); }
+      } catch (e) {
+        if (alive) setError((e as Error).message);
+      }
+    };
+    void update();
+    const t = setInterval(update, 2000);
+    document.addEventListener('visibilitychange', update);
+    return () => { alive = false; clearInterval(t); document.removeEventListener('visibilitychange', update); };
+  }, []);
+
+  if (error) return <span className="queue down" title={error}><span className="dot" />ComfyUI недоступен</span>;
+  if (!q) return <span className="queue"><span className="dot" />ComfyUI…</span>;
+  if (!q.running.length && !q.pending.length) return <span className="queue idle"><span className="dot" />ComfyUI свободен</span>;
+  return (
+    <span className="queue busy" title={q.pending.length ? 'Ждут: ' + counts(q.pending) : ''}>
+      <span className="dot" />ComfyUI: <b>{counts(q.running) || '—'}</b>
+      {q.pending.length > 0 && <> · в очереди <b>{q.pending.length}</b></>}
+    </span>
+  );
+}