coderaph 0.1.0

package/src/web/controls.js

@@ -0,0 +1,732 @@
+import {
+  switchMode, getGraphData, getCurrentEdges, getNodeMeshes,
+  focusNode, highlightNodes, clearHighlights, setFilteredView, clearFilter,
+  setTheme, setDimension, setGroups, setShowArrows, setNodeSize, setEdgeThickness, setNodeDistance, setLabelsVisible, setLabelFontSize,
+  setNodeVisibility, clearConnectedHighlight
+} from './app.js';
+
+// ── DOM References ──────────────────────────────────────────────────
+const viewToggle = document.getElementById('view-toggle');
+const infoPanel = document.getElementById('info-panel');
+const infoName = document.getElementById('info-name');
+const infoKind = document.getElementById('info-kind');
+const infoFile = document.getElementById('info-file');
+const infoClose = document.getElementById('info-close');
+const canvas = document.getElementById('canvas');
+const searchInput = document.getElementById('search-input');
+const legend = document.getElementById('legend');
+
+// Settings
+const settingsBtn = document.getElementById('settings-btn');
+const settingsPanel = document.getElementById('settings-panel');
+const settingsClose = document.getElementById('settings-close');
+const settingTheme = document.getElementById('setting-theme');
+const settingNodeSize = document.getElementById('setting-node-size');
+const settingEdgeThickness = document.getElementById('setting-edge-thickness');
+const settingNodeDistance = document.getElementById('setting-node-distance');
+const settingDimension = document.getElementById('setting-dimension');
+const settingLabels = document.getElementById('setting-labels');
+const settingArrows = document.getElementById('setting-arrows');
+const valNodeSize = document.getElementById('val-node-size');
+const valEdgeThickness = document.getElementById('val-edge-thickness');
+const valNodeDistance = document.getElementById('val-node-distance');
+const settingFontSize = document.getElementById('setting-font-size');
+const valFontSize = document.getElementById('val-font-size');
+
+// Filter
+const filterKindCheckboxes = document.querySelectorAll('#filter-kinds input[type="checkbox"]');
+const filterPath = document.getElementById('filter-path');
+
+// ── Settings Persistence (localStorage) ─────────────────────────────
+const STORAGE_KEY = 'coderaph-settings';
+
+const defaults = {
+  theme: 'dark',
+  dimension: '3d',
+  groups: [],
+  nodeSize: 1.0,
+  edgeThickness: 1.0,
+  nodeDistance: 30,
+  fontSize: 10,
+  showLabels: true,
+  showArrows: false,
+};
+
+function loadSettings() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return { ...defaults, ...JSON.parse(raw) };
+  } catch { /* ignore */ }
+  return { ...defaults };
+}
+
+function saveSettings() {
+  const settings = {
+    theme: settingTheme.value,
+    dimension: settingDimension.value,
+    groups: getGroupDefs(),
+    nodeSize: parseFloat(settingNodeSize.value),
+    edgeThickness: parseFloat(settingEdgeThickness.value),
+    nodeDistance: parseInt(settingNodeDistance.value, 10),
+    fontSize: parseInt(settingFontSize.value, 10),
+    showLabels: settingLabels.checked,
+    showArrows: settingArrows.checked,
+  };
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+}
+
+function applySettings(s) {
+  settingTheme.value = s.theme;
+  document.documentElement.dataset.theme = s.theme === 'light' ? 'light' : '';
+  setTheme(s.theme);
+
+  settingDimension.value = s.dimension;
+  setDimension(s.dimension);
+
+  restoreGroups(s.groups || []);
+
+  settingNodeSize.value = s.nodeSize;
+  valNodeSize.textContent = s.nodeSize.toFixed(1);
+  setNodeSize(s.nodeSize);
+
+  settingEdgeThickness.value = s.edgeThickness;
+  valEdgeThickness.textContent = s.edgeThickness.toFixed(1);
+  setEdgeThickness(s.edgeThickness);
+
+  settingNodeDistance.value = s.nodeDistance;
+  valNodeDistance.textContent = s.nodeDistance;
+  setNodeDistance(s.nodeDistance);
+
+  settingFontSize.value = s.fontSize;
+  valFontSize.textContent = s.fontSize;
+  setLabelFontSize(s.fontSize);
+
+  settingLabels.checked = s.showLabels;
+  setLabelsVisible(s.showLabels);
+
+  settingArrows.checked = s.showArrows;
+  setShowArrows(s.showArrows);
+}
+
+// Apply saved settings after data loads
+canvas.addEventListener('graph-ready', () => {
+  const s = loadSettings();
+  applySettings(s);
+});
+
+// ── 1. View Mode Toggle ────────────────────────────────────────────
+viewToggle.addEventListener('click', () => {
+  const current = viewToggle.dataset.mode;
+  const next = current === 'file' ? 'symbol' : 'file';
+  viewToggle.dataset.mode = next;
+  viewToggle.textContent = next === 'file' ? 'File View' : 'Symbol View';
+  switchMode(next);
+  clearInfoPanel();
+  buildLegend(next);
+  applyFilter();
+});
+
+// ── 2. Settings Panel ──────────────────────────────────────────────
+settingsBtn.addEventListener('click', () => settingsPanel.classList.toggle('hidden'));
+settingsClose.addEventListener('click', () => settingsPanel.classList.add('hidden'));
+
+settingTheme.addEventListener('change', () => {
+  document.documentElement.dataset.theme = settingTheme.value === 'light' ? 'light' : '';
+  setTheme(settingTheme.value);
+  saveSettings();
+});
+
+settingDimension.addEventListener('change', () => {
+  setDimension(settingDimension.value);
+  saveSettings();
+});
+
+
+settingNodeSize.addEventListener('input', () => {
+  const val = parseFloat(settingNodeSize.value);
+  valNodeSize.textContent = val.toFixed(1);
+  setNodeSize(val);
+  saveSettings();
+});
+
+settingEdgeThickness.addEventListener('input', () => {
+  const val = parseFloat(settingEdgeThickness.value);
+  valEdgeThickness.textContent = val.toFixed(1);
+  setEdgeThickness(val);
+  saveSettings();
+});
+
+settingNodeDistance.addEventListener('input', () => {
+  const val = parseInt(settingNodeDistance.value, 10);
+  valNodeDistance.textContent = val;
+  setNodeDistance(val);
+  saveSettings();
+});
+
+settingFontSize.addEventListener('input', () => {
+  const val = parseInt(settingFontSize.value, 10);
+  valFontSize.textContent = val;
+  setLabelFontSize(val);
+  saveSettings();
+});
+
+settingLabels.addEventListener('change', () => {
+  setLabelsVisible(settingLabels.checked);
+  saveSettings();
+});
+
+settingArrows.addEventListener('change', () => {
+  setShowArrows(settingArrows.checked);
+  saveSettings();
+});
+
+// ── 3. Info Panel ──────────────────────────────────────────────────
+function showInfoPanel(node) {
+  infoName.textContent = node.name || node.id;
+  infoKind.textContent = node.kind ? 'Kind: ' + node.kind : 'File';
+  infoFile.textContent = node.fileId ? 'File: ' + node.fileId : node.id;
+  infoPanel.classList.remove('hidden');
+}
+
+function clearInfoPanel() {
+  infoPanel.classList.add('hidden');
+}
+
+infoClose.addEventListener('click', clearInfoPanel);
+
+canvas.addEventListener('node-click', (e) => {
+  const { nodeId } = e.detail;
+  const data = getGraphData();
+  const mode = viewToggle.dataset.mode;
+  let node;
+  if (mode === 'file') node = data.files.find(f => f.id === nodeId);
+  else node = data.symbols.find(s => s.id === nodeId);
+  if (node) showInfoPanel(node);
+});
+
+canvas.addEventListener('node-deselect', () => clearInfoPanel());
+
+// ── 4. Dependency Chain Filtering (dblclick) ────────────────────────
+canvas.addEventListener('node-dblclick', (e) => {
+  const { nodeId } = e.detail;
+  const edges = getCurrentEdges();
+  const chain = computeDependencyChain(nodeId, edges);
+  const visible = new Set([nodeId, ...chain.upstream, ...chain.downstream]);
+  setFilteredView(visible);
+});
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    clearFilter();
+    clearHighlights();
+    clearConnectedHighlight();
+  }
+});
+
+export function computeDependencyChain(nodeId, edges) {
+  const forward = new Map();
+  const reverse = new Map();
+  for (const edge of edges) {
+    if (!forward.has(edge.source)) forward.set(edge.source, []);
+    forward.get(edge.source).push(edge.target);
+    if (!reverse.has(edge.target)) reverse.set(edge.target, []);
+    reverse.get(edge.target).push(edge.source);
+  }
+  function bfs(startId, adjacencyMap) {
+    const visited = new Set();
+    const queue = [startId];
+    while (queue.length > 0) {
+      const current = queue.shift();
+      if (visited.has(current)) continue;
+      visited.add(current);
+      const neighbors = adjacencyMap.get(current) || [];
+      for (const n of neighbors) { if (!visited.has(n)) queue.push(n); }
+    }
+    visited.delete(startId);
+    return visited;
+  }
+  return {
+    downstream: bfs(nodeId, forward),
+    upstream: bfs(nodeId, reverse),
+  };
+}
+
+// ── Autocomplete Helper ─────────────────────────────────────────────
+
+function getAutocompleteCandidates() {
+  const data = getGraphData();
+  if (!data) return [];
+  const mode = viewToggle.dataset.mode;
+  const items = mode === 'file' ? data.files : data.symbols;
+  return items;
+}
+
+function createAutocomplete(inputEl, getCandidatesFn, onSelect) {
+  const list = document.createElement('div');
+  list.className = 'autocomplete-list hidden';
+  document.body.appendChild(list);
+  let activeIdx = -1;
+  let items = [];
+
+  function show(query) {
+    const q = query.trim().toLowerCase();
+    list.replaceChildren();
+    activeIdx = -1;
+    if (!q || q.length < 1) { list.classList.add('hidden'); return; }
+
+    const candidates = getCandidatesFn();
+    items = [];
+    for (const c of candidates) {
+      const name = (c.name || c.id.split('/').pop()).toLowerCase();
+      const id = c.id.toLowerCase();
+      const file = (c.fileId || '').toLowerCase();
+      const kind = (c.kind || '').toLowerCase();
+      if (name.includes(q) || id.includes(q) || file.includes(q) || kind.includes(q)) {
+        items.push(c);
+        if (items.length >= 8) break;
+      }
+    }
+
+    if (items.length === 0) { list.classList.add('hidden'); return; }
+
+    for (let i = 0; i < items.length; i++) {
+      const c = items[i];
+      const el = document.createElement('div');
+      el.className = 'autocomplete-item';
+      const displayName = c.name || c.id.split('/').pop();
+      const sub = c.fileId ? ' \u2014 ' + c.fileId : (c.kind ? ' \u2014 ' + c.kind : '');
+
+      // Highlight match
+      const lowerName = displayName.toLowerCase();
+      const matchStart = lowerName.indexOf(q);
+      if (matchStart >= 0) {
+        el.appendChild(document.createTextNode(displayName.slice(0, matchStart)));
+        const mark = document.createElement('span');
+        mark.className = 'ac-match';
+        mark.textContent = displayName.slice(matchStart, matchStart + q.length);
+        el.appendChild(mark);
+        el.appendChild(document.createTextNode(displayName.slice(matchStart + q.length)));
+      } else {
+        el.appendChild(document.createTextNode(displayName));
+      }
+      if (sub) {
+        const small = document.createTextNode(sub);
+        el.appendChild(small);
+      }
+
+      el.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        onSelect(c, inputEl);
+        hide();
+      });
+      list.appendChild(el);
+    }
+
+    const rect = inputEl.getBoundingClientRect();
+    list.style.left = rect.left + 'px';
+    list.style.top = (rect.bottom + 2) + 'px';
+    list.style.minWidth = rect.width + 'px';
+    list.classList.remove('hidden');
+  }
+
+  function hide() {
+    list.classList.add('hidden');
+    activeIdx = -1;
+  }
+
+  function navigate(delta) {
+    const children = list.querySelectorAll('.autocomplete-item');
+    if (children.length === 0) return false;
+    if (activeIdx >= 0 && children[activeIdx]) children[activeIdx].classList.remove('active');
+    activeIdx = (activeIdx + delta + children.length) % children.length;
+    children[activeIdx].classList.add('active');
+    children[activeIdx].scrollIntoView({ block: 'nearest' });
+    return true;
+  }
+
+  function selectActive() {
+    if (activeIdx >= 0 && items[activeIdx]) {
+      onSelect(items[activeIdx], inputEl);
+      hide();
+      return true;
+    }
+    return false;
+  }
+
+  inputEl.addEventListener('input', () => show(inputEl.value));
+  inputEl.addEventListener('blur', () => setTimeout(hide, 150));
+  inputEl.addEventListener('focus', () => { if (inputEl.value.trim()) show(inputEl.value); });
+
+  return { show, hide, navigate, selectActive };
+}
+
+// ── 5. Search ──────────────────────────────────────────────────────
+const searchNav = document.getElementById('search-nav');
+const searchCount = document.getElementById('search-count');
+const searchPrev = document.getElementById('search-prev');
+const searchNext = document.getElementById('search-next');
+
+let searchTimeout = null;
+let searchResults = [];
+let searchIndex = 0;
+
+function runSearch() {
+  const query = searchInput.value.trim().toLowerCase();
+  clearHighlights();
+  searchResults = [];
+  searchIndex = 0;
+
+  if (!query) {
+    searchNav.classList.add('hidden');
+    return;
+  }
+
+  const data = getGraphData();
+  const mode = viewToggle.dataset.mode;
+  const items = mode === 'file' ? data.files : data.symbols;
+  for (const item of items) {
+    const name = (item.name || '').toLowerCase();
+    const id = item.id.toLowerCase();
+    const file = (item.fileId || '').toLowerCase();
+    if (name.includes(query) || id.includes(query) || file.includes(query)) searchResults.push(item.id);
+  }
+
+  if (searchResults.length > 0) {
+    updateSearchNav();
+    searchNav.classList.remove('hidden');
+  } else {
+    searchNav.classList.add('hidden');
+  }
+}
+
+function updateSearchNav() {
+  searchCount.textContent = (searchIndex + 1) + ' / ' + searchResults.length;
+  clearHighlights();
+  highlightNodes(searchResults, searchResults[searchIndex]);
+  focusNode(searchResults[searchIndex]);
+}
+
+function searchGo(delta) {
+  if (searchResults.length === 0) return;
+  searchIndex = (searchIndex + delta + searchResults.length) % searchResults.length;
+  updateSearchNav();
+}
+
+searchInput.addEventListener('input', () => {
+  clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(runSearch, 300);
+});
+
+searchInput.addEventListener('keydown', (e) => {
+  if (e.key === 'ArrowDown') { e.preventDefault(); searchAc.navigate(1); return; }
+  if (e.key === 'ArrowUp') { e.preventDefault(); searchAc.navigate(-1); return; }
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    if (!searchAc.selectActive() && searchResults.length > 0) {
+      searchGo(e.shiftKey ? -1 : 1);
+    }
+  }
+});
+
+searchPrev.addEventListener('click', () => searchGo(-1));
+searchNext.addEventListener('click', () => searchGo(1));
+
+const searchAc = createAutocomplete(
+  searchInput,
+  getAutocompleteCandidates,
+  (item) => {
+    searchInput.value = item.name || item.id.split('/').pop();
+    runSearch();
+  }
+);
+
+// ── 6. Filter ──────────────────────────────────────────────────────
+
+function applyFilter() {
+  const data = getGraphData();
+  if (!data) return;
+
+  const mode = viewToggle.dataset.mode;
+  const pathQuery = filterPath.value.trim().toLowerCase();
+
+  if (mode === 'file') {
+    // File mode: only path filter applies
+    if (!pathQuery) {
+      setNodeVisibility(null);
+      return;
+    }
+    const visible = new Set();
+    for (const f of data.files) {
+      if (f.id.toLowerCase().includes(pathQuery)) visible.add(f.id);
+    }
+    setNodeVisibility(visible);
+  } else {
+    // Symbol mode: kind checkboxes + path filter
+    const enabledKinds = new Set();
+    for (const cb of filterKindCheckboxes) {
+      if (cb.checked) enabledKinds.add(cb.dataset.kind);
+    }
+
+    const allKindsEnabled = enabledKinds.size === filterKindCheckboxes.length;
+    const noPathFilter = !pathQuery;
+
+    if (allKindsEnabled && noPathFilter) {
+      setNodeVisibility(null);
+      return;
+    }
+
+    const visible = new Set();
+    for (const s of data.symbols) {
+      if (!enabledKinds.has(s.kind)) continue;
+      if (pathQuery) {
+        const filePath = (s.fileId || '').toLowerCase();
+        const name = (s.name || '').toLowerCase();
+        if (!filePath.includes(pathQuery) && !name.includes(pathQuery)) continue;
+      }
+      visible.add(s.id);
+    }
+    setNodeVisibility(visible);
+  }
+}
+
+for (const cb of filterKindCheckboxes) {
+  cb.addEventListener('change', applyFilter);
+}
+
+let filterPathTimeout = null;
+filterPath.addEventListener('input', () => {
+  clearTimeout(filterPathTimeout);
+  filterPathTimeout = setTimeout(applyFilter, 300);
+});
+
+const filterAc = createAutocomplete(
+  filterPath,
+  getAutocompleteCandidates,
+  (item) => {
+    // For filter, use the path/fileId
+    filterPath.value = item.fileId || item.id;
+    applyFilter();
+  }
+);
+
+filterPath.addEventListener('keydown', (e) => {
+  if (e.key === 'ArrowDown') { e.preventDefault(); filterAc.navigate(1); return; }
+  if (e.key === 'ArrowUp') { e.preventDefault(); filterAc.navigate(-1); return; }
+  if (e.key === 'Enter') { e.preventDefault(); filterAc.selectActive(); }
+});
+
+// ── 7. Legend ───────────────────────────────────────────────────────
+function createLegendItem(color, label) {
+  const item = document.createElement('div');
+  const dot = document.createElement('span');
+  dot.style.cssText = 'display:inline-block;width:10px;height:10px;border-radius:50%;background:' + color + ';margin-right:6px;vertical-align:middle;';
+  item.appendChild(dot);
+  item.appendChild(document.createTextNode(label));
+  return item;
+}
+
+function buildLegend(mode) {
+  legend.replaceChildren();
+  if (mode === 'symbol') {
+    const kinds = [
+      { color: '#4488ff', label: 'Class' },
+      { color: '#44cc66', label: 'Function' },
+      { color: '#aa66cc', label: 'Interface' },
+      { color: '#ff8844', label: 'Type' },
+      { color: '#ee4444', label: 'Enum' },
+      { color: '#888888', label: 'Variable' },
+    ];
+    for (const { color, label } of kinds) legend.appendChild(createLegendItem(color, label));
+  } else {
+    legend.appendChild(createLegendItem('#4488ff', 'File'));
+  }
+}
+
+buildLegend('file');
+
+// ── 8. Multi-Group Panel ──────────────────────────────────────────
+
+const groupList = document.getElementById('group-list');
+const groupAdd = document.getElementById('group-add');
+
+const GROUP_COLORS = [
+  0xee4444, 0xccaa33, 0x44cc66, 0x4488ff, 0xaa66cc,
+  0x44bbbb, 0xff8844, 0xff66aa, 0x66aaff, 0x88cc88,
+];
+let groupIdCounter = 0;
+
+function colorToHex(c) {
+  return '#' + c.toString(16).padStart(6, '0');
+}
+
+function createGroupRow(query, colorNum) {
+  const id = ++groupIdCounter;
+  const row = document.createElement('div');
+  row.className = 'group-row';
+  row.dataset.groupId = id;
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.className = 'group-query';
+  input.placeholder = '검색어 입력... (path: file: kind:)';
+  input.value = query || '';
+
+  const colorInput = document.createElement('input');
+  colorInput.type = 'color';
+  colorInput.className = 'group-color-input';
+  colorInput.value = colorToHex(colorNum);
+
+  const colorDot = document.createElement('span');
+  colorDot.className = 'group-color';
+  colorDot.style.background = colorInput.value;
+
+  colorDot.addEventListener('click', () => colorInput.click());
+  colorInput.addEventListener('input', () => {
+    colorDot.style.background = colorInput.value;
+    syncGroups();
+    saveSettings();
+  });
+
+  const removeBtn = document.createElement('button');
+  removeBtn.className = 'group-remove';
+  removeBtn.textContent = '\u00d7';
+
+  row.appendChild(input);
+  row.appendChild(colorInput);
+  row.appendChild(colorDot);
+  row.appendChild(removeBtn);
+  groupList.appendChild(row);
+
+  let debounce = null;
+  input.addEventListener('input', () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => { syncGroups(); saveSettings(); }, 400);
+  });
+
+  // Autocomplete for group query (after prefix)
+  const groupAc = createAutocomplete(
+    input,
+    () => getGroupQueryCandidates(input.value),
+    (item, el) => {
+      const val = el.value.trim().toLowerCase();
+      if (val.startsWith('path:')) {
+        el.value = 'path:' + (item.fileId || item.id).split('/').slice(0, -1).join('/');
+      } else if (val.startsWith('file:')) {
+        el.value = 'file:' + (item.fileId || item.id).split('/').pop();
+      } else if (val.startsWith('kind:')) {
+        el.value = 'kind:' + (item.kind || 'file');
+      } else {
+        el.value = item.name || item.id.split('/').pop();
+      }
+      syncGroups();
+      saveSettings();
+    }
+  );
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); groupAc.navigate(1); return; }
+    if (e.key === 'ArrowUp') { e.preventDefault(); groupAc.navigate(-1); return; }
+    if (e.key === 'Enter') { e.preventDefault(); groupAc.selectActive(); }
+  });
+
+  // Show hint dropdown on focus (only when empty)
+  input.addEventListener('focus', () => showGroupHint(input));
+  input.addEventListener('blur', () => setTimeout(hideGroupHint, 150));
+
+  removeBtn.addEventListener('click', () => {
+    row.remove();
+    syncGroups();
+    saveSettings();
+  });
+
+  return row;
+}
+
+function getGroupQueryCandidates(rawQuery) {
+  const data = getGraphData();
+  if (!data) return [];
+  const mode = viewToggle.dataset.mode;
+  const items = mode === 'file' ? data.files : data.symbols;
+
+  const q = rawQuery.trim().toLowerCase();
+  // For kind: prefix, return unique kinds as pseudo-items
+  if (q.startsWith('kind:')) {
+    const val = q.slice(5);
+    const kinds = new Set();
+    for (const item of items) kinds.add(item.kind || 'file');
+    return [...kinds].filter(k => k.includes(val)).map(k => ({ id: k, name: k, kind: k }));
+  }
+  return items;
+}
+
+let hintEl = null;
+function showGroupHint(inputEl) {
+  hideGroupHint();
+  if (inputEl.value.length > 0) return; // only show when empty
+  hintEl = document.createElement('div');
+  hintEl.className = 'group-hint';
+  const options = [
+    { prefix: 'path:', desc: '일치하는 파일 경로' },
+    { prefix: 'file:', desc: '일치하는 파일 이름' },
+    { prefix: 'kind:', desc: 'class, function, interface 등' },
+  ];
+  for (const opt of options) {
+    const item = document.createElement('div');
+    const bold = document.createElement('b');
+    bold.textContent = opt.prefix;
+    item.appendChild(bold);
+    item.appendChild(document.createTextNode(' ' + opt.desc));
+    item.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      inputEl.value = opt.prefix;
+      inputEl.focus();
+      hideGroupHint();
+    });
+    hintEl.appendChild(item);
+  }
+  const rect = inputEl.getBoundingClientRect();
+  hintEl.style.left = rect.left + 'px';
+  hintEl.style.top = (rect.bottom + 4) + 'px';
+  document.body.appendChild(hintEl);
+}
+
+function hideGroupHint() {
+  if (hintEl) { hintEl.remove(); hintEl = null; }
+}
+
+function syncGroups() {
+  const rows = groupList.querySelectorAll('.group-row');
+  const groups = [];
+  for (const row of rows) {
+    const query = row.querySelector('.group-query').value.trim();
+    const color = parseInt(row.querySelector('.group-color-input').value.slice(1), 16);
+    if (query) groups.push({ query, color });
+  }
+  setGroups(groups);
+}
+
+function getGroupDefs() {
+  const rows = groupList.querySelectorAll('.group-row');
+  const defs = [];
+  for (const row of rows) {
+    const query = row.querySelector('.group-query').value;
+    const color = parseInt(row.querySelector('.group-color-input').value.slice(1), 16);
+    defs.push({ query, color });
+  }
+  return defs;
+}
+
+function restoreGroups(defs) {
+  groupList.replaceChildren();
+  for (let i = 0; i < defs.length; i++) {
+    const color = defs[i].color || GROUP_COLORS[i % GROUP_COLORS.length];
+    createGroupRow(defs[i].query || '', color);
+  }
+  syncGroups();
+}
+
+groupAdd.addEventListener('click', () => {
+  const idx = groupList.querySelectorAll('.group-row').length;
+  const color = GROUP_COLORS[idx % GROUP_COLORS.length];
+  createGroupRow('', color);
+});