diff --git a/src/main.ts b/src/main.ts index 2a3690a..e80e969 100644 --- a/src/main.ts +++ b/src/main.ts @@ -87,29 +87,27 @@ function renderWordGroups(grouped: GroupedWords[]) { return; } - for (const entry of grouped) { - const groupEl = document.createElement('div'); - groupEl.className = 'word-group'; + // Табы групп + const tabsContainer = document.createElement('div'); + tabsContainer.className = 'group-tabs'; - const header = document.createElement('div'); - header.className = 'word-group-header'; - header.innerHTML = ` - ${escapeHtml(entry.group.name)} - ${entry.tags.reduce((s, t) => s + t.words.length, 0)} слов - `; + const panelsContainer = document.createElement('div'); + panelsContainer.className = 'group-panels'; - // Коллапс по клику на заголовке - let collapsed = false; - header.addEventListener('click', () => { - collapsed = !collapsed; - tagsContainer.style.display = collapsed ? 'none' : ''; - header.classList.toggle('collapsed', collapsed); - }); + let activeIndex = 0; - groupEl.appendChild(header); + for (let i = 0; i < grouped.length; i++) { + const entry = grouped[i]; - const tagsContainer = document.createElement('div'); - tagsContainer.className = 'word-group-tags'; + // Кнопка таба + const tabBtn = document.createElement('button'); + tabBtn.className = 'group-tab' + (i === activeIndex ? ' active' : ''); + const totalWords = entry.tags.reduce((s, t) => s + t.words.length, 0); + tabBtn.innerHTML = `${escapeHtml(entry.group.name)} ${totalWords}`; + + // Панель с тегами + const panel = document.createElement('div'); + panel.className = 'group-panel' + (i === activeIndex ? ' active' : ''); for (const tagEntry of entry.tags) { const tagBlock = document.createElement('div'); @@ -156,12 +154,24 @@ function renderWordGroups(grouped: GroupedWords[]) { tagBlock.appendChild(tagHeader); tagBlock.appendChild(wordsContainer); - tagsContainer.appendChild(tagBlock); + panel.appendChild(tagBlock); } - groupEl.appendChild(tagsContainer); - containerEl.appendChild(groupEl); + tabBtn.addEventListener('click', () => { + // Деактивируем все + tabsContainer.querySelectorAll('.group-tab').forEach((b) => b.classList.remove('active')); + panelsContainer.querySelectorAll('.group-panel').forEach((p) => p.classList.remove('active')); + // Активируем текущие + tabBtn.classList.add('active'); + panel.classList.add('active'); + }); + + tabsContainer.appendChild(tabBtn); + panelsContainer.appendChild(panel); } + + containerEl.appendChild(tabsContainer); + containerEl.appendChild(panelsContainer); } function renderSetsPage() { diff --git a/src/style.css b/src/style.css index 4640919..8e3ad10 100644 --- a/src/style.css +++ b/src/style.css @@ -300,55 +300,64 @@ body { opacity: 0.6; } -/* ──── Группировка слов ──── */ +/* ──── Группировка слов (табы) ──── */ -.word-group { - margin-bottom: 1rem; +.group-tabs { + display: flex; + gap: 0; + border-bottom: 1px solid var(--border); + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; } -.word-group-header { +.group-tabs::-webkit-scrollbar { + display: none; +} + +.group-tab { + flex: 1; + min-width: 0; + font-family: var(--sans); + font-size: 0.85rem; + font-weight: 600; + padding: 0.65rem 0.5rem; + border: none; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--text); + cursor: pointer; + transition: all 0.2s; + -webkit-tap-highlight-color: transparent; + white-space: nowrap; display: flex; align-items: center; - justify-content: space-between; - padding: 10px 12px; - background: var(--card-bg); - border: 1px solid var(--border); - border-radius: 10px; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - transition: background 0.15s; - min-height: 48px; + gap: 0.5rem; } -.word-group-header:hover { +.group-tab.active { + color: var(--accent); + border-bottom-color: var(--accent); background: var(--accent-light); } -.word-group-header::after { - content: '▾'; - font-size: 0.8rem; - color: var(--text); - transition: transform 0.2s; +.group-tab-count { + font-size: 0.7rem; + background: var(--accent-light); + color: var(--accent); + padding: 1px 6px; + border-radius: 8px; + font-weight: 500; + margin-left: auto; } -.word-group-header.collapsed::after { - transform: rotate(-90deg); +.group-panel { + display: none; + padding-top: 0.75rem; } -.word-group-name { - font-weight: 600; - color: var(--text-h); - font-size: 0.95rem; -} - -.word-group-count { - font-size: 0.8rem; - color: var(--text); - margin-right: 0.5rem; -} - -.word-group-tags { - padding-top: 0.5rem; +.group-panel.active { + display: block; } .word-tag-block {