diff --git a/public/css/style.css b/public/css/style.css index 744e78e..da41d19 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -445,14 +445,35 @@ body { min-width: 22px; text-align: center; position: relative; - z-index: 1; + z-index: 2; display: none; + cursor: pointer; + user-select: none; + transition: transform 0.15s ease, opacity 0.15s ease; +} + +.nav-badge:hover { + transform: scale(1.1); + filter: brightness(1.15); } .nav-badge:not(:empty) { display: inline-block; } +.nav-badge.hidden-badge { + display: inline-block !important; + opacity: 0.6; + background: var(--bg-tertiary) !important; + color: var(--text-muted) !important; + min-width: 22px; +} + +.nav-badge.hidden-badge::after { + content: "🙈"; + font-size: 0.75rem; +} + .sidebar-footer { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border-subtle); diff --git a/public/js/app.js b/public/js/app.js index 64fae29..07a28c3 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -209,6 +209,39 @@ const App = { refreshBtn.addEventListener('click', () => this.refreshLookups()); } + // Reset old global hide setting if present + localStorage.removeItem('hide_sidebar_badges'); + document.body.classList.remove('badges-hidden'); + + // Helper to check if a specific badge is hidden + this.isBadgeHidden = (badgeId) => localStorage.getItem(`hide_badge_${badgeId}`) === 'true'; + + // Bind click event on nav-badges to toggle individual visibility + document.querySelectorAll('.nav-badge').forEach(badge => { + if (!badge.id) return; + + badge.title = 'Clicca per nascondere/mostrare questo contatore'; + badge.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + + const isCurrentlyHidden = this.isBadgeHidden(badge.id); + const newHiddenState = !isCurrentlyHidden; + localStorage.setItem(`hide_badge_${badge.id}`, newHiddenState ? 'true' : 'false'); + + if (newHiddenState) { + badge.classList.add('hidden-badge'); + Toast.info('Contatore nascosto'); + } else { + badge.classList.remove('hidden-badge'); + Toast.info('Contatore visibile'); + } + + // Refresh display text for badges + this.updateSidebarBadges(); + }); + }); + // Bind button close end of day tickets const btnCloseEod = document.getElementById('btn-close-end-of-day'); if (btnCloseEod) { @@ -842,19 +875,40 @@ const App = { const badge = document.getElementById('open-ticket-count'); if (badge) { - badge.textContent = stats.total_open > 0 ? stats.total_open : ''; + const isHidden = this.isBadgeHidden ? this.isBadgeHidden('open-ticket-count') : false; + if (isHidden) { + badge.classList.add('hidden-badge'); + badge.textContent = ''; + } else { + badge.classList.remove('hidden-badge'); + badge.textContent = stats.total_open > 0 ? stats.total_open : ''; + } } const myBadge = document.getElementById('my-ticket-count'); if (myBadge) { - myBadge.textContent = stats.total_my_open > 0 ? stats.total_my_open : ''; + const isHidden = this.isBadgeHidden ? this.isBadgeHidden('my-ticket-count') : false; + if (isHidden) { + myBadge.classList.add('hidden-badge'); + myBadge.textContent = ''; + } else { + myBadge.classList.remove('hidden-badge'); + myBadge.textContent = stats.total_my_open > 0 ? stats.total_my_open : ''; + } } try { const notes = await this.api('/api/notes'); const notesBadge = document.getElementById('temp-notes-count'); if (notesBadge) { - notesBadge.textContent = (notes && notes.length > 0) ? notes.length : ''; + const isHidden = this.isBadgeHidden ? this.isBadgeHidden('temp-notes-count') : false; + if (isHidden) { + notesBadge.classList.add('hidden-badge'); + notesBadge.textContent = ''; + } else { + notesBadge.classList.remove('hidden-badge'); + notesBadge.textContent = (notes && notes.length > 0) ? notes.length : ''; + } } } catch (_) {} } catch (e) { diff --git a/public/js/views/dashboard.js b/public/js/views/dashboard.js index 0478e37..c81f5da 100644 --- a/public/js/views/dashboard.js +++ b/public/js/views/dashboard.js @@ -481,17 +481,8 @@ const DashboardView = { }); } - // Update open ticket count in sidebar badge - const badge = document.getElementById('open-ticket-count'); - if (badge) { - badge.textContent = stats.total_open > 0 ? stats.total_open : ''; - } - - // Update my ticket count in sidebar badge - const myBadge = document.getElementById('my-ticket-count'); - if (myBadge) { - myBadge.textContent = stats.total_my_open > 0 ? stats.total_my_open : ''; - } + // Update sidebar counts using centralized method + App.updateSidebarBadges(); } catch (err) { container.innerHTML = `