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 {