Add home icon in donut center when drilled down

- Home icon appears in center only when at least one level deep
- Clicking the icon navigates back to root view
- On narrow screens (≤850px), shows only the home icon (label hidden)
- Black/white styling with hover effect
- Works on both desktop and mobile/touch devices

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.js

@@ -14,6 +14,21 @@ function updateCenterLabel(month, amount, category = null) {
     labelEl.querySelector('.center-category').textContent = category || '';
     labelEl.querySelector('.center-amount-num').textContent = formatRUB(amount);
     labelEl.querySelector('.center-rub').textContent = '\u202F₽';
+
+    // Show/hide home icon based on drill-down state
+    updateDrilledDownState();
+}
+
+// Update drilled-down visual state (home icon visibility)
+function updateDrilledDownState() {
+    const labelEl = document.getElementById('center-label');
+    if (!labelEl) return;
+
+    if (historyIndex > 0) {
+        labelEl.classList.add('drilled-down');
+    } else {
+        labelEl.classList.remove('drilled-down');
+    }
 }
 
 // Initialize the chart
@@ -1434,6 +1449,16 @@ async function loadAvailableMonths() {
             selectMonth(currentMonthIndex + 1);
         }
     });
+
+    // Set up home icon click handler (go back to root)
+    const homeIcon = document.querySelector('.center-home');
+    if (homeIcon) {
+        homeIcon.addEventListener('click', () => {
+            if (historyIndex > 0) {
+                history.back();
+            }
+        });
+    }
 }
 
 // Transform children data for drill-down (extracted from click handler)

index.html

@@ -23,6 +23,12 @@
             <div class="chart-wrapper">
                 <div id="chart-container"></div>
                 <div id="center-label" class="center-label">
+                    <div class="center-home" title="Back to overview">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                            <polyline points="9 22 9 12 15 12 15 22"/>
+                        </svg>
+                    </div>
                     <div class="center-month"></div>
                     <div class="center-category"></div>
                     <div class="center-amount"><span class="center-amount-num"></span><span class="center-rub"></span></div>

styles.css

@@ -176,6 +176,29 @@ body {
     display: none;
 }
 
+.center-home {
+    display: none;
+    justify-content: center;
+    margin-bottom: 4px;
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+.center-home svg {
+    width: 20px;
+    height: 20px;
+    color: #666;
+    transition: color 0.2s;
+}
+
+.center-home:hover svg {
+    color: #000;
+}
+
+.center-label.drilled-down .center-home {
+    display: flex;
+}
+
 .center-amount {
     font-size: 22px;
     font-weight: 700;
@@ -364,6 +387,17 @@ body {
         display: none;
     }
 
+    /* Still show home icon on narrow screens when drilled down */
+    .center-label.drilled-down {
+        display: block;
+    }
+
+    .center-label.drilled-down .center-month,
+    .center-label.drilled-down .center-category,
+    .center-label.drilled-down .center-amount {
+        display: none;
+    }
+
     .chart-eye-btn {
         display: none !important;
     }