Add per-tab tutorials, profile expand/collapse, and fix card animation

- Add sub-tutorials for Dashboard, Targets, Sources, and Profiles tabs
  with ? trigger buttons, en/ru/zh translations, and hidden-ancestor
  skip via offsetParent check
- Add expand/collapse all buttons to Profiles tab toolbar
- Move dashboard poll slider from section header to toolbar
- Fix cardEnter animation forcing opacity:1 on disabled profile cards
- Use data-card-section selectors instead of data-cs-toggle to avoid
  z-index misalignment during tutorial spotlight
- Add tutorial sync convention to CLAUDE.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 14:15:41 +03:00
parent 111bfe743a
commit efb6cf7ce6
11 changed files with 166 additions and 7 deletions

View File

@@ -76,11 +76,20 @@ export async function loadProfiles() {
}
}
export function expandAllProfileSections() {
CardSection.expandAll([csProfiles]);
}
export function collapseAllProfileSections() {
CardSection.collapseAll([csProfiles]);
}
function renderProfiles(profiles, runningTargetIds = new Set()) {
const container = document.getElementById('profiles-content');
const items = csProfiles.applySortOrder(profiles.map(p => ({ key: p.id, html: createProfileCard(p, runningTargetIds) })));
container.innerHTML = csProfiles.render(items);
const toolbar = `<div class="stream-tab-bar"><span class="cs-expand-collapse-group"><button class="btn-expand-collapse" onclick="expandAllProfileSections()" title="${t('section.expand_all')}">⊞</button><button class="btn-expand-collapse" onclick="collapseAllProfileSections()" title="${t('section.collapse_all')}">⊟</button><button class="tutorial-trigger-btn" onclick="startProfilesTutorial()" title="${t('tour.restart')}">?</button></span></div>`;
container.innerHTML = toolbar + csProfiles.render(items);
csProfiles.bind();
// Localize data-i18n elements within the profiles container only