@atlashub/smartstack-cli 3.7.0 → 3.9.0

package/templates/skills/business-analyse/html/src/scripts/06-render-consolidation.js

@@ -0,0 +1,110 @@
+/* ============================================
+   CONSOLIDATION
+   ============================================ */
+function renderConsolidation() {
+    renderConsolInteractions();
+    renderConsolPermissions();
+}
+
+function renderConsolInteractions() {
+    const container = document.getElementById('consolInteractions');
+    if (!container || data.dependencies.length === 0) return;
+
+    container.innerHTML = data.dependencies.map(d => {
+        const fromName = data.modules.find(m => m.code === d.from)?.name || d.from;
+        const toName = data.modules.find(m => m.code === d.to)?.name || d.to;
+        return `
+            <div class="interaction-item">
+                <span style="font-weight:600;color:var(--text-bright);">${fromName}</span>
+                <span class="interaction-arrow">&#8594;</span>
+                <span style="font-weight:600;color:var(--text-bright);">${toName}</span>
+                <span class="interaction-type">Dependance</span>
+                <span style="flex:1;font-size:0.8rem;color:var(--text-muted);">${d.description || ''}</span>
+            </div>`;
+    }).join('');
+}
+
+function renderConsolPermissions() {
+    const container = document.getElementById('consolPermissions');
+    if (!container || data.modules.length === 0) return;
+
+    const roles = getPermRoles();
+
+    let html = '<table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">';
+    html += '<thead><tr><th>Profil</th>';
+    data.modules.forEach(m => { html += `<th style="text-align:center;">${m.name || m.code}</th>`; });
+    html += '</tr></thead><tbody>';
+
+    roles.forEach(role => {
+        html += `<tr><td style="font-weight:500;color:var(--text-bright);">${role}</td>`;
+        data.modules.forEach(m => {
+            const allPerms = data.moduleSpecs[m.code]?.permissions || [];
+            const hasWildcard = allPerms.includes(role + '|*');
+            const perms = hasWildcard
+                ? getPermActions()
+                : allPerms.filter(p => p.startsWith(role + '|'));
+            const count = perms.length;
+            const color = count > 4 ? 'var(--success)' : count > 2 ? 'var(--warning)' : count > 0 ? 'var(--text-muted)' : 'var(--border)';
+            const label = hasWildcard ? 'Tous' : (count > 0 ? count + ' droits' : 'Aucun');
+            html += `<td style="text-align:center;color:${color};font-weight:600;">${label}</td>`;
+        });
+        html += '</tr>';
+    });
+
+    html += '</tbody></table>';
+    container.innerHTML = html;
+}
+
+/* ============================================
+   E2E FLOWS
+   ============================================ */
+function addE2EFlow() {
+    const name = document.getElementById('flow-name').value.trim();
+    if (!name) return;
+
+    const steps = document.getElementById('flow-steps').value.split('\n').filter(l => l.trim()).map(l => {
+        const parts = l.split(' - ');
+        return { module: parts[0]?.trim() || '', action: parts.slice(1).join(' - ').trim() || l.trim() };
+    });
+
+    data.consolidation.e2eFlows.push({
+        name: name,
+        steps: steps,
+        actors: document.getElementById('flow-actors').value.trim()
+    });
+
+    renderE2EFlows();
+    toggleForm('addFlowForm');
+    clearForm('addFlowForm');
+    autoSave();
+}
+
+function removeE2EFlow(index) {
+    data.consolidation.e2eFlows.splice(index, 1);
+    renderE2EFlows();
+    autoSave();
+}
+
+function renderE2EFlows() {
+    const container = document.getElementById('e2eFlowsList');
+    if (!container) return;
+
+    container.innerHTML = data.consolidation.e2eFlows.map((flow, fi) => `
+        <div class="card" style="margin-bottom:1rem;">
+            <div class="card-header">
+                <span class="card-title">${flow.name}</span>
+                <button class="btn btn-sm" onclick="removeE2EFlow(${fi})" style="opacity:0.5;">Supprimer</button>
+            </div>
+            ${flow.actors ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.5rem;">Intervenants : ${flow.actors}</div>` : ''}
+            <div class="e2e-flow">
+                ${flow.steps.map((s, i) => `
+                    <div class="e2e-step">
+                        <div class="e2e-step-module">${s.module}</div>
+                        <div class="e2e-step-action">${s.action}</div>
+                    </div>
+                    ${i < flow.steps.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
+                `).join('')}
+            </div>
+        </div>
+    `).join('');
+}

package/templates/skills/business-analyse/html/src/scripts/07-render-handoff.js

@@ -0,0 +1,90 @@
+/* ============================================
+   HANDOFF / SYNTHESE
+   ============================================ */
+function renderHandoff() {
+    renderHandoffStats();
+    renderHandoffModules();
+    renderCoverageMatrix();
+}
+
+function renderHandoffStats() {
+    const container = document.getElementById('handoffStats');
+    if (!container) return;
+
+    const totalUCs = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.useCases || []).length, 0);
+    const totalBRs = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.businessRules || []).length, 0);
+    const totalEnts = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.entities || []).length, 0);
+    const totalStakeholders = data.cadrage.stakeholders.length;
+
+    container.innerHTML = `
+        <div class="stat-card"><div class="stat-value">${data.modules.length}</div><div class="stat-label">Domaines fonctionnels</div></div>
+        <div class="stat-card"><div class="stat-value">${totalUCs}</div><div class="stat-label">Cas d'utilisation</div></div>
+        <div class="stat-card"><div class="stat-value">${totalBRs}</div><div class="stat-label">Regles metier</div></div>
+        <div class="stat-card"><div class="stat-value">${totalEnts}</div><div class="stat-label">Types de donnees</div></div>
+        <div class="stat-card"><div class="stat-value">${totalStakeholders}</div><div class="stat-label">Profils utilisateurs</div></div>
+        <div class="stat-card"><div class="stat-value">${data.dependencies.length}</div><div class="stat-label">Dependances</div></div>
+        <div class="stat-card"><div class="stat-value">${data.consolidation.e2eFlows.length}</div><div class="stat-label">Parcours bout en bout</div></div>
+        <div class="stat-card"><div class="stat-value">${data.cadrage.risks.length}</div><div class="stat-label">Risques identifies</div></div>
+    `;
+}
+
+function renderHandoffModules() {
+    const container = document.getElementById('handoffModuleList');
+    if (!container) return;
+
+    const layers = computeTopologicalLayers();
+    const order = layers ? layers.flat() : data.modules.map(m => m.code);
+
+    container.innerHTML = order.map((code, i) => {
+        const m = data.modules.find(mod => mod.code === code);
+        if (!m) return '';
+        const spec = data.moduleSpecs[code] || {};
+        return `
+            <div class="card" style="margin-bottom:0.75rem;">
+                <div style="display:flex;align-items:center;gap:0.75rem;">
+                    <div style="width:28px;height:28px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-weight:700;flex-shrink:0;">${i + 1}</div>
+                    <div style="flex:1;">
+                        <div style="font-weight:600;color:var(--text-bright);">${m.name}</div>
+                        <div style="font-size:0.8rem;color:var(--text-muted);">${m.description || ''}</div>
+                    </div>
+                    <div style="display:flex;gap:1rem;font-size:0.75rem;color:var(--text-muted);">
+                        <span>${(spec.useCases || []).length} cas d'utilisation</span>
+                        <span>${(spec.businessRules || []).length} regles</span>
+                        <span>${(spec.entities || []).length} donnees</span>
+                    </div>
+                    <span class="priority priority-${m.priority === 'must' ? 'vital' : m.priority === 'should' ? 'important' : 'optional'}">${formatModulePriority(m.priority)}</span>
+                </div>
+            </div>`;
+    }).join('');
+}
+
+function renderCoverageMatrix() {
+    const container = document.getElementById('coverageMatrix');
+    if (!container) return;
+
+    const allScope = ['vital', 'important', 'optional'].flatMap(p =>
+        (data.cadrage.scope[p] || []).map(item => ({ ...item, priority: p }))
+    );
+
+    if (allScope.length === 0) {
+        container.innerHTML = '<p style="color:var(--text-muted);font-style:italic;">Aucun element de perimetre defini dans le cadrage.</p>';
+        return;
+    }
+
+    container.innerHTML = `
+        <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
+            <thead><tr><th>Besoin</th><th>Priorite</th><th>Domaine</th><th>Couvert</th></tr></thead>
+            <tbody>
+                ${allScope.map(item => {
+                    const moduleName = data.modules.length > 0 ? data.modules[0].name : 'A definir';
+                    return `
+                        <tr>
+                            <td>${item.name}</td>
+                            <td><span class="priority priority-${item.priority}">${formatPriority(item.priority)}</span></td>
+                            <td style="color:var(--text-muted);">${moduleName}</td>
+                            <td style="text-align:center;color:var(--success);">&#10003;</td>
+                        </tr>`;
+                }).join('')}
+            </tbody>
+        </table>`;
+}

package/templates/skills/business-analyse/html/src/scripts/08-editing.js

@@ -0,0 +1,45 @@
+/* ============================================
+   PERSISTENCE
+   ============================================ */
+function autoSave() {
+    data.metadata.lastModified = new Date().toISOString();
+    localStorage.setItem(APP_KEY, JSON.stringify(data));
+}
+
+function saveToLocalStorage() {
+    autoSave();
+    showNotification('Modifications sauvegardees');
+}
+
+function loadFromLocalStorage() {
+    const saved = localStorage.getItem(APP_KEY);
+    if (saved) {
+        try {
+            const parsed = JSON.parse(saved);
+            // Deep merge with defaults
+            data.metadata = { ...data.metadata, ...parsed.metadata };
+            data.cadrage = {
+                ...data.cadrage,
+                ...parsed.cadrage,
+                scope: { ...data.cadrage.scope, ...(parsed.cadrage?.scope || {}) }
+            };
+            data.modules = parsed.modules || [];
+            data.dependencies = parsed.dependencies || [];
+            data.moduleSpecs = parsed.moduleSpecs || {};
+            data.consolidation = { ...data.consolidation, ...(parsed.consolidation || {}) };
+            data.handoff = parsed.handoff || {};
+            data.wireframeComments = parsed.wireframeComments || {};
+            data.specComments = parsed.specComments || {};
+            data.customRoles = parsed.customRoles || [];
+            data.customActions = parsed.customActions || [];
+            data.comments = parsed.comments || [];
+
+            // Restore editable fields
+            document.querySelectorAll('.editable[data-field]').forEach(el => {
+                const value = getNestedValue(data, 'cadrage.' + el.dataset.field);
+                if (value) el.textContent = value;
+            });
+            renderProcessFlow();
+        } catch (e) { console.error('Error loading saved data:', e); }
+    }
+}

package/templates/skills/business-analyse/html/src/scripts/09-export.js

@@ -0,0 +1,168 @@
+/* ============================================
+   EXPORT JSON
+   ============================================ */
+function exportJSON() {
+    // Collect all editable fields (cadrage)
+    document.querySelectorAll('.editable[data-field]').forEach(el => {
+        setNestedValue(data, 'cadrage.' + el.dataset.field, el.textContent.trim());
+    });
+
+    // Collect module editable fields
+    document.querySelectorAll('.editable[data-module-field]').forEach(el => {
+        const code = el.dataset.moduleCode;
+        const field = el.dataset.moduleField;
+        if (data.moduleSpecs[code]) {
+            data.moduleSpecs[code][field] = el.textContent.trim();
+        }
+    });
+
+    data.metadata.lastModified = new Date().toISOString();
+    data.metadata.exportedAt = new Date().toISOString();
+
+    // Build complete export with structured data
+    const exportData = {
+        metadata: data.metadata,
+        cadrage: data.cadrage,
+        modules: data.modules,
+        dependencies: data.dependencies,
+        moduleSpecifications: {},
+        consolidation: data.consolidation,
+        artifacts: EMBEDDED_ARTIFACTS,
+        wireframeComments: data.wireframeComments,
+        specComments: data.specComments,
+        customRoles: data.customRoles,
+        customActions: data.customActions,
+        comments: data.comments
+    };
+
+    // Structure module specs for export
+    data.modules.forEach(m => {
+        const spec = data.moduleSpecs[m.code] || {};
+        exportData.moduleSpecifications[m.code] = {
+            module: m,
+            useCases: (spec.useCases || []).map((uc, i) => ({
+                id: 'UC-' + String(i + 1).padStart(3, '0'),
+                ...uc
+            })),
+            businessRules: (spec.businessRules || []).map((br, i) => ({
+                id: 'BR-' + br.category.toUpperCase().substring(0, 4) + '-' + String(i + 1).padStart(3, '0'),
+                ...br
+            })),
+            entities: spec.entities || [],
+            permissions: spec.permissions || [],
+            notes: spec.notes || ''
+        };
+    });
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = (data.metadata.applicationId || 'analyse') + '-export.json';
+    a.click();
+    URL.revokeObjectURL(url);
+    showNotification('Export JSON telecharge');
+}
+
+/* ============================================
+   SAVE REVIEW JSON (corrections for new version)
+   ============================================ */
+function detectChanges(original, current) {
+    const changes = { cadrage: false, modulesAdded: [], modulesRemoved: [], modulesModified: [], commentsCount: 0 };
+
+    // Cadrage changes
+    if (JSON.stringify(original.cadrage) !== JSON.stringify(current.cadrage)) {
+        changes.cadrage = true;
+    }
+
+    // Module changes
+    const origCodes = (original.modules || []).map(m => m.code);
+    const currCodes = (current.modules || []).map(m => m.code);
+    changes.modulesAdded = currCodes.filter(c => !origCodes.includes(c));
+    changes.modulesRemoved = origCodes.filter(c => !currCodes.includes(c));
+    currCodes.filter(c => origCodes.includes(c)).forEach(code => {
+        const origSpec = JSON.stringify(original.moduleSpecs?.[code] || {});
+        const currSpec = JSON.stringify(current.moduleSpecs?.[code] || {});
+        if (origSpec !== currSpec) changes.modulesModified.push(code);
+    });
+
+    // Comments count
+    changes.commentsCount = (current.comments || []).length;
+
+    return changes;
+}
+
+function saveReviewJSON() {
+    // Collect all editable fields (same as exportJSON)
+    document.querySelectorAll('.editable[data-field]').forEach(el => {
+        setNestedValue(data, 'cadrage.' + el.dataset.field, el.textContent.trim());
+    });
+    document.querySelectorAll('.editable[data-module-field]').forEach(el => {
+        const code = el.dataset.moduleCode;
+        const field = el.dataset.moduleField;
+        if (data.moduleSpecs[code]) {
+            data.moduleSpecs[code][field] = el.textContent.trim();
+        }
+    });
+
+    const changes = detectChanges(ORIGINAL_DATA, data);
+    const hasChanges = changes.cadrage || changes.modulesAdded.length > 0
+        || changes.modulesRemoved.length > 0 || changes.modulesModified.length > 0
+        || changes.commentsCount > 0;
+
+    // Build review export with metadata envelope
+    const reviewData = {
+        _reviewMeta: {
+            sourceVersion: data.metadata.version || '1.0',
+            sourceApplicationId: data.metadata.applicationId || '',
+            exportedAt: new Date().toISOString(),
+            hasChanges: hasChanges,
+            changeSummary: {
+                cadrageModified: changes.cadrage,
+                modulesAdded: changes.modulesAdded,
+                modulesRemoved: changes.modulesRemoved,
+                modulesModified: changes.modulesModified,
+                commentsCount: changes.commentsCount
+            }
+        },
+        metadata: data.metadata,
+        cadrage: data.cadrage,
+        modules: data.modules,
+        dependencies: data.dependencies,
+        moduleSpecifications: {},
+        consolidation: data.consolidation,
+        wireframeComments: data.wireframeComments,
+        specComments: data.specComments,
+        customRoles: data.customRoles,
+        customActions: data.customActions,
+        comments: data.comments
+    };
+
+    // Structure module specs (same logic as exportJSON)
+    data.modules.forEach(m => {
+        const spec = data.moduleSpecs[m.code] || {};
+        reviewData.moduleSpecifications[m.code] = {
+            module: m,
+            useCases: (spec.useCases || []).map((uc, i) => ({
+                id: 'UC-' + String(i + 1).padStart(3, '0'),
+                ...uc
+            })),
+            businessRules: (spec.businessRules || []).map((br, i) => ({
+                id: 'BR-' + br.category.toUpperCase().substring(0, 4) + '-' + String(i + 1).padStart(3, '0'),
+                ...br
+            })),
+            entities: spec.entities || [],
+            permissions: spec.permissions || [],
+            notes: spec.notes || ''
+        };
+    });
+
+    const blob = new Blob([JSON.stringify(reviewData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'ba-review.json';
+    a.click();
+    URL.revokeObjectURL(url);
+    showNotification('ba-review.json telecharge — sauvegardez-le a cote du HTML');
+}

package/templates/skills/business-analyse/html/src/scripts/10-comments.js

@@ -0,0 +1,171 @@
+/* ============================================
+   INLINE COMMENTS SYSTEM
+   ============================================ */
+
+/**
+ * Comments are stored in data.comments[] with structure:
+ * { id, sectionId, cardIndex, author, timestamp, content, status, category }
+ *
+ * - sectionId: matches the section div id (e.g. "cadrage-problem", "module-spec-Clients")
+ * - cardIndex: index of the card within that section (0-based)
+ * - status: "to-review" | "validated"
+ * - category: "clarification" | "correction" | "suggestion"
+ */
+
+function initInlineComments() {
+    // Add comment buttons under each card and uc-item (direct children of sections)
+    document.querySelectorAll('.section').forEach(section => {
+        const sectionId = section.id;
+        section.querySelectorAll(':scope > .card, :scope > .uc-item').forEach((card, index) => {
+            if (card.querySelector('.comment-btn-container')) return;
+            card.appendChild(createCommentUI(sectionId, index));
+        });
+    });
+    // Second pass: nested list containers in module specs (ucList-*, brList-*, entList-*)
+    document.querySelectorAll('[id^="ucList-"], [id^="brList-"], [id^="entList-"]').forEach(list => {
+        const listId = list.id;
+        list.querySelectorAll(':scope > .uc-item, :scope > .entity-block, :scope > div').forEach((item, index) => {
+            if (item.querySelector('.comment-btn-container')) return;
+            item.appendChild(createCommentUI(listId, index));
+        });
+    });
+}
+
+function createCommentUI(sectionId, cardIndex) {
+    const comments = getCommentsForCard(sectionId, cardIndex);
+    const count = comments.length;
+
+    const container = document.createElement('div');
+    container.className = 'comment-btn-container';
+    container.dataset.sectionId = sectionId;
+    container.dataset.cardIndex = cardIndex;
+
+    container.innerHTML = `
+        <button class="comment-toggle-btn" onclick="toggleCommentThread('${sectionId}', ${cardIndex})">
+            Commentaires <span class="comment-count ${count === 0 ? 'empty' : ''}">${count}</span>
+        </button>
+        <div class="comment-thread" id="comment-thread-${sectionId}-${cardIndex}">
+            <div class="comment-items" id="comment-items-${sectionId}-${cardIndex}">
+                ${renderCommentItems(sectionId, cardIndex)}
+            </div>
+            <div class="comment-add-form">
+                <textarea id="comment-text-${sectionId}-${cardIndex}" placeholder="Ajouter un commentaire..."></textarea>
+                <select id="comment-cat-${sectionId}-${cardIndex}">
+                    <option value="clarification">Clarification</option>
+                    <option value="correction">Correction</option>
+                    <option value="suggestion">Suggestion</option>
+                </select>
+                <button onclick="addInlineComment('${sectionId}', ${cardIndex})">Ajouter</button>
+            </div>
+        </div>
+    `;
+
+    return container;
+}
+
+function getCommentsForCard(sectionId, cardIndex) {
+    return (data.comments || []).filter(c =>
+        c.sectionId === sectionId && c.cardIndex === cardIndex
+    );
+}
+
+function toggleCommentThread(sectionId, cardIndex) {
+    const thread = document.getElementById('comment-thread-' + sectionId + '-' + cardIndex);
+    if (thread) thread.classList.toggle('visible');
+}
+
+function renderCommentItems(sectionId, cardIndex) {
+    const comments = getCommentsForCard(sectionId, cardIndex);
+    if (comments.length === 0) {
+        return '<div style="font-size:0.8rem;color:var(--text-muted);padding:0.5rem 0;font-style:italic;">Aucun commentaire</div>';
+    }
+
+    return comments.map((c, i) => {
+        const initials = (c.author || 'U').substring(0, 2).toUpperCase();
+        const date = c.timestamp ? new Date(c.timestamp).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }) : '';
+        const globalIndex = data.comments.indexOf(c);
+
+        return `
+            <div class="comment-item">
+                <div class="comment-avatar">${initials}</div>
+                <div class="comment-body">
+                    <div class="comment-meta">
+                        <span class="comment-author">${c.author || 'Utilisateur'}</span>
+                        <span class="comment-date">${date}</span>
+                        <span class="comment-category comment-category-${c.category}">${c.category}</span>
+                        <span class="comment-status comment-status-${c.status}">${c.status === 'validated' ? 'Valide' : 'A revoir'}</span>
+                    </div>
+                    <div class="comment-text">${c.content}</div>
+                    <div class="comment-actions">
+                        <button class="comment-action-btn" onclick="toggleCommentStatus(${globalIndex})">${c.status === 'validated' ? 'Remettre a revoir' : 'Valider'}</button>
+                        <button class="comment-action-btn" onclick="deleteComment(${globalIndex})" style="color:var(--error);">Supprimer</button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function addInlineComment(sectionId, cardIndex) {
+    const textEl = document.getElementById('comment-text-' + sectionId + '-' + cardIndex);
+    const catEl = document.getElementById('comment-cat-' + sectionId + '-' + cardIndex);
+    const content = textEl.value.trim();
+    if (!content) return;
+
+    const comment = {
+        id: 'comment-' + Date.now(),
+        sectionId: sectionId,
+        cardIndex: cardIndex,
+        author: 'Utilisateur',
+        timestamp: new Date().toISOString(),
+        content: content,
+        status: 'to-review',
+        category: catEl.value
+    };
+
+    data.comments.push(comment);
+    textEl.value = '';
+
+    refreshCommentUI(sectionId, cardIndex);
+    renderReviewPanel();
+    autoSave();
+}
+
+function toggleCommentStatus(globalIndex) {
+    const comment = data.comments[globalIndex];
+    if (!comment) return;
+    comment.status = comment.status === 'validated' ? 'to-review' : 'validated';
+    refreshCommentUI(comment.sectionId, comment.cardIndex);
+    renderReviewPanel();
+    autoSave();
+}
+
+function deleteComment(globalIndex) {
+    const comment = data.comments[globalIndex];
+    if (!comment) return;
+    const sectionId = comment.sectionId;
+    const cardIndex = comment.cardIndex;
+    data.comments.splice(globalIndex, 1);
+    refreshCommentUI(sectionId, cardIndex);
+    renderReviewPanel();
+    autoSave();
+}
+
+function refreshCommentUI(sectionId, cardIndex) {
+    // Update comment items
+    const itemsContainer = document.getElementById('comment-items-' + sectionId + '-' + cardIndex);
+    if (itemsContainer) {
+        itemsContainer.innerHTML = renderCommentItems(sectionId, cardIndex);
+    }
+
+    // Update count badge
+    const count = getCommentsForCard(sectionId, cardIndex).length;
+    const container = document.querySelector(`.comment-btn-container[data-section-id="${sectionId}"][data-card-index="${cardIndex}"]`);
+    if (container) {
+        const badge = container.querySelector('.comment-count');
+        if (badge) {
+            badge.textContent = count;
+            badge.className = 'comment-count' + (count === 0 ? ' empty' : '');
+        }
+    }
+}