From cf7ce027b134d55d0c802025ebba3891a54480ee Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Wed, 3 Jun 2026 10:41:59 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20support=20page=20=E2=80=94=20donate=20de?=
 =?UTF-8?q?fault=20tab,=20split=20community=20tab,=20require=20login?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/pages/support/index.astro | 409 ++++++++++++-----------------
 1 file changed, 162 insertions(+), 247 deletions(-)

diff --git a/site/src/pages/support/index.astro b/site/src/pages/support/index.astro
index 2710070..e17fb16 100644
--- a/site/src/pages/support/index.astro
+++ b/site/src/pages/support/index.astro
@@ -2,34 +2,109 @@
 import Base from '../../layouts/Base.astro';
 const baseUrl = import.meta.env.BASE_URL ?? '/';
 ---
-<Base title="Support — BincioActivity" public={true}>
+<Base title="Support — BincioActivity">
   <div class="max-w-2xl mx-auto">
     <h1 class="text-2xl font-bold text-white mb-1">Support</h1>
     <p class="text-sm text-zinc-500 mb-5">Open-source, self-hosted activity tracking</p>
 
     <!-- Tab bar -->
     <div class="flex gap-1 border-b border-zinc-800 mb-6">
-      <button data-tab="about"    class="tab-btn px-4 py-2 text-sm font-medium rounded-t transition-colors">About</button>
-      <button data-tab="donate"   class="tab-btn px-4 py-2 text-sm font-medium rounded-t transition-colors">Donate</button>
-      <button data-tab="feedback" class="tab-btn px-4 py-2 text-sm font-medium rounded-t transition-colors">Feedback</button>
+      <button data-tab="donate"    class="tab-btn px-4 py-2 text-sm font-medium rounded-t transition-colors">Donate</button>
+      <button data-tab="about"     class="tab-btn px-4 py-2 text-sm font-medium rounded-t transition-colors">About</button>
+      <button data-tab="community" class="tab-btn px-4 py-2 text-sm font-medium rounded-t transition-colors">Community</button>
+      <button data-tab="feedback"  class="tab-btn px-4 py-2 text-sm font-medium rounded-t transition-colors">Feedback</button>
+    </div>
+
+    <!-- ── DONATE ─────────────────────────────────────────────────────── -->
+    <div id="tab-donate" class="tab-panel">
+      <div class="flex flex-wrap gap-2 mb-4">
+        <a href="https://ko-fi.com/brutsalvadi" target="_blank" rel="noopener noreferrer"
+           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
+           style="background:#FF5E5B; color:#fff;">
+          ☕ Support on Ko-fi
+        </a>
+        <a href="https://web.satispay.com/download/qrcode/S6Y-CON--BE9BD345-4499-4C1D-9AC3-D62FC5FF0AD4"
+           target="_blank" rel="noopener noreferrer"
+           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
+           style="background:#E3162C; color:#fff;">
+          Satispay @brutsalvadi
+        </a>
+      </div>
+      <div class="mb-8">
+        <img src="/satispay-qr.jpg" alt="Satispay QR code — @brutsalvadi" class="w-36 h-36 rounded-xl" />
+      </div>
+
+      <!-- Budget section -->
+      <div class="border-t border-zinc-800 pt-6">
+        <div class="flex items-center justify-between mb-4">
+          <div>
+            <h2 class="text-base font-semibold text-white">Running costs</h2>
+            <p class="text-xs text-zinc-500 mt-0.5">Transparent breakdown of donations and expenses</p>
+          </div>
+          <div id="budget-admin-controls" class="hidden flex gap-2">
+            <button id="budget-set-goal-btn"
+              class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 hover:text-white text-xs font-medium transition-colors border border-zinc-700">
+              Set monthly goal
+            </button>
+            <button id="budget-add-btn"
+              class="px-3 py-1.5 rounded-lg bg-[--accent] hover:opacity-90 text-white text-xs font-medium transition-opacity">
+              + Add entry
+            </button>
+          </div>
+        </div>
+
+        <!-- Set-goal form (admin, hidden by default) -->
+        <form id="budget-goal-form" class="hidden mb-4 p-3 rounded-xl bg-zinc-900 border border-zinc-800 text-sm">
+          <label class="block text-zinc-400 mb-1 text-xs">Monthly goal (€)</label>
+          <div class="flex gap-2">
+            <input id="budget-goal-input" type="number" min="0" step="0.01" placeholder="e.g. 20"
+              class="flex-1 px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
+            <button type="submit" class="px-4 py-1.5 rounded-lg bg-[--accent] hover:opacity-90 text-white text-sm font-medium transition-opacity">Save</button>
+            <button type="button" id="budget-goal-cancel" class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 text-sm transition-colors">Cancel</button>
+          </div>
+          <p id="budget-goal-err" class="text-red-400 text-xs mt-1 hidden"></p>
+        </form>
+
+        <!-- Add-entry form (admin, hidden by default) -->
+        <form id="budget-add-form" class="hidden mb-4 p-3 rounded-xl bg-zinc-900 border border-zinc-800 text-sm space-y-2">
+          <div class="flex gap-2">
+            <button type="button" data-type="donation" class="entry-type-btn flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors">💚 Donation</button>
+            <button type="button" data-type="expense"  class="entry-type-btn flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors">🔴 Expense</button>
+          </div>
+          <input id="entry-label" type="text" placeholder="Label (e.g. VPS hosting)"
+            class="w-full px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
+          <div class="flex gap-2">
+            <div class="flex-1 relative">
+              <span class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">€</span>
+              <input id="entry-amount" type="number" min="0" step="0.01" placeholder="0.00"
+                class="w-full pl-7 pr-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
+            </div>
+            <input id="entry-month" type="month"
+              class="flex-1 px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent] [color-scheme:dark]" />
+          </div>
+          <input id="entry-note" type="text" placeholder="Note (optional)"
+            class="w-full px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
+          <p id="budget-add-err" class="text-red-400 text-xs hidden"></p>
+          <div class="flex gap-2 pt-1">
+            <button type="submit" class="px-4 py-1.5 rounded-lg bg-[--accent] hover:opacity-90 text-white text-sm font-medium transition-opacity">Add</button>
+            <button type="button" id="budget-add-cancel" class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 text-sm transition-colors">Cancel</button>
+          </div>
+        </form>
+
+        <div id="budget-list">
+          <p class="text-zinc-500 text-sm text-center py-6">Loading…</p>
+        </div>
+      </div>
     </div>
 
     <!-- ── ABOUT ──────────────────────────────────────────────────────── -->
-    <div id="tab-about" class="tab-panel">
+    <div id="tab-about" class="tab-panel" style="display:none">
       <div class="flex justify-end gap-3 text-xs text-zinc-500 mb-5">
         <span class="text-zinc-300 font-medium">EN</span>
         <a href={`${baseUrl}about/it/`} class="hover:text-white transition-colors">IT</a>
         <a href={`${baseUrl}about/es/`} class="hover:text-white transition-colors">ES</a>
         <a href={`${baseUrl}about/ca/`} class="hover:text-white transition-colors">CA</a>
       </div>
-
-      <!-- Community stats (multi-user only) -->
-      <section id="stats-section" class="mb-8" style="display:none">
-        <h2 class="text-base font-semibold text-white mb-3">Community</h2>
-        <p id="stats-summary" class="text-zinc-500 text-xs mb-4"></p>
-        <div id="stats-tree" class="text-sm"></div>
-      </section>
-
       <div class="space-y-8 text-sm text-zinc-400 leading-relaxed">
         <section>
           <h2 class="text-base font-semibold text-white mb-2">What is this?</h2>
@@ -54,8 +129,7 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
           <p class="mt-2">
             Once you have an account, you can generate up to <strong class="text-zinc-300">3 invite links</strong> to
             share with people you trust. You can manage your invites from the
-            <a href="/invites/" class="text-blue-400 hover:text-blue-300 transition-colors">invites page</a>
-            (requires login).
+            <a href="/invites/" class="text-blue-400 hover:text-blue-300 transition-colors">invites page</a>.
           </p>
         </section>
 
@@ -118,88 +192,11 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
       </div>
     </div>
 
-    <!-- ── DONATE ─────────────────────────────────────────────────────── -->
-    <div id="tab-donate" class="tab-panel" style="display:none">
-      <div class="flex flex-wrap gap-2 mb-4">
-        <a href="https://ko-fi.com/brutsalvadi" target="_blank" rel="noopener noreferrer"
-           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
-           style="background:#FF5E5B; color:#fff;">
-          ☕ Support on Ko-fi
-        </a>
-        <a href="https://web.satispay.com/download/qrcode/S6Y-CON--BE9BD345-4499-4C1D-9AC3-D62FC5FF0AD4"
-           target="_blank" rel="noopener noreferrer"
-           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
-           style="background:#E3162C; color:#fff;">
-          Satispay @brutsalvadi
-        </a>
-      </div>
-      <div class="mb-8">
-        <img src="/satispay-qr.jpg" alt="Satispay QR code — @brutsalvadi" class="w-36 h-36 rounded-xl" />
-      </div>
-
-      <!-- Budget section -->
-      <div class="border-t border-zinc-800 pt-6">
-        <div class="flex items-center justify-between mb-4">
-          <div>
-            <h2 class="text-base font-semibold text-white">Running costs</h2>
-            <p class="text-xs text-zinc-500 mt-0.5">Transparent breakdown of donations and expenses</p>
-          </div>
-          <!-- Admin controls -->
-          <div id="budget-admin-controls" class="hidden flex gap-2">
-            <button id="budget-set-goal-btn"
-              class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 hover:text-white text-xs font-medium transition-colors border border-zinc-700">
-              Set monthly goal
-            </button>
-            <button id="budget-add-btn"
-              class="px-3 py-1.5 rounded-lg bg-[--accent] hover:opacity-90 text-white text-xs font-medium transition-opacity">
-              + Add entry
-            </button>
-          </div>
-        </div>
-
-        <!-- Set-goal form (admin, hidden by default) -->
-        <form id="budget-goal-form" class="hidden mb-4 p-3 rounded-xl bg-zinc-900 border border-zinc-800 text-sm">
-          <label class="block text-zinc-400 mb-1 text-xs">Monthly goal (€)</label>
-          <div class="flex gap-2">
-            <input id="budget-goal-input" type="number" min="0" step="0.01" placeholder="e.g. 20"
-              class="flex-1 px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
-            <button type="submit" class="px-4 py-1.5 rounded-lg bg-[--accent] hover:opacity-90 text-white text-sm font-medium transition-opacity">Save</button>
-            <button type="button" id="budget-goal-cancel" class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 text-sm transition-colors">Cancel</button>
-          </div>
-          <p id="budget-goal-err" class="text-red-400 text-xs mt-1 hidden"></p>
-        </form>
-
-        <!-- Add-entry form (admin, hidden by default) -->
-        <form id="budget-add-form" class="hidden mb-4 p-3 rounded-xl bg-zinc-900 border border-zinc-800 text-sm space-y-2">
-          <div class="flex gap-2">
-            <button type="button" data-type="donation" class="entry-type-btn flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors">💚 Donation</button>
-            <button type="button" data-type="expense"  class="entry-type-btn flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors">🔴 Expense</button>
-          </div>
-          <input id="entry-label"  type="text"   placeholder="Label (e.g. VPS hosting)"
-            class="w-full px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
-          <div class="flex gap-2">
-            <div class="flex-1 relative">
-              <span class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">€</span>
-              <input id="entry-amount" type="number" min="0" step="0.01" placeholder="0.00"
-                class="w-full pl-7 pr-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
-            </div>
-            <input id="entry-month" type="month"
-              class="flex-1 px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent] [color-scheme:dark]" />
-          </div>
-          <input id="entry-note" type="text" placeholder="Note (optional)"
-            class="w-full px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
-          <p id="budget-add-err" class="text-red-400 text-xs hidden"></p>
-          <div class="flex gap-2 pt-1">
-            <button type="submit" class="px-4 py-1.5 rounded-lg bg-[--accent] hover:opacity-90 text-white text-sm font-medium transition-opacity">Add</button>
-            <button type="button" id="budget-add-cancel" class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 text-sm transition-colors">Cancel</button>
-          </div>
-        </form>
-
-        <!-- Budget list -->
-        <div id="budget-list">
-          <p class="text-zinc-500 text-sm text-center py-6">Loading…</p>
-        </div>
-      </div>
+    <!-- ── COMMUNITY ──────────────────────────────────────────────────── -->
+    <div id="tab-community" class="tab-panel" style="display:none">
+      <p id="community-summary" class="text-zinc-500 text-xs mb-4"></p>
+      <div id="community-tree" class="text-sm"></div>
+      <p id="community-empty" class="text-zinc-500 text-sm text-center py-6" style="display:none">Community stats not available.</p>
     </div>
 
     <!-- ── FEEDBACK ───────────────────────────────────────────────────── -->
@@ -215,7 +212,7 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
           <p class="text-xs text-zinc-500 mb-2">Attach up to 3 screenshots (max 2 MB each)</p>
           <div id="fb-drop"
             class="border-2 border-dashed border-zinc-700 rounded-lg p-5 text-center text-zinc-500 text-sm cursor-pointer hover:border-zinc-500 hover:text-zinc-300 transition-colors">
-            <span id="fb-drop-label">Drop images or click to browse</span>
+            <span>Drop images or click to browse</span>
             <input id="fb-input" type="file" accept="image/*" multiple class="hidden" />
           </div>
           <div id="fb-previews" class="flex gap-2 flex-wrap mt-2"></div>
@@ -239,7 +236,7 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
 
 <script>
 // ── Tabs ──────────────────────────────────────────────────────────────────────
-const TABS = ['about', 'donate', 'feedback'] as const;
+const TABS = ['donate', 'about', 'community', 'feedback'] as const;
 type TabName = typeof TABS[number];
 
 function showTab(name: TabName) {
@@ -248,41 +245,38 @@ function showTab(name: TabName) {
     const btn   = document.querySelector<HTMLElement>(`.tab-btn[data-tab="${t}"]`)!;
     const active = t === name;
     panel.style.display = active ? '' : 'none';
-    btn.classList.toggle('text-white',       active);
-    btn.classList.toggle('border-b-2',       active);
-    btn.classList.toggle('border-[--accent]',active);
-    btn.classList.toggle('-mb-px',           active);
-    btn.classList.toggle('text-zinc-400',   !active);
+    btn.classList.toggle('text-white',        active);
+    btn.classList.toggle('border-b-2',        active);
+    btn.classList.toggle('border-[--accent]', active);
+    btn.classList.toggle('-mb-px',            active);
+    btn.classList.toggle('text-zinc-400',    !active);
   });
   if (history.replaceState) history.replaceState(null, '', '#' + name);
 }
 
-const initial = (location.hash.slice(1) as TabName);
-showTab(TABS.includes(initial) ? initial : 'about');
+const hash = location.hash.slice(1) as TabName;
+showTab(TABS.includes(hash) ? hash : 'donate');
 document.querySelectorAll<HTMLElement>('.tab-btn').forEach(btn => {
   btn.addEventListener('click', () => showTab(btn.dataset.tab as TabName));
 });
 
-// ── Community tree (About tab) ────────────────────────────────────────────────
-(async () => {
-  try {
-    const me = await fetch('/api/me', { credentials: 'include' });
-    if (!me.ok) return;
-  } catch { return; }
+// ── Community tree ────────────────────────────────────────────────────────────
+let communityLoaded = false;
+
+async function loadCommunity() {
+  const summaryEl = document.getElementById('community-summary')!;
+  const treeEl    = document.getElementById('community-tree')!;
+  const emptyEl   = document.getElementById('community-empty')!;
   let data: any;
   try {
     const r = await fetch('/api/stats');
-    if (!r.ok) return;
+    if (!r.ok) { emptyEl.style.display = ''; return; }
     data = await r.json();
-  } catch { return; }
-  if (!data.user_count) return;
+  } catch { emptyEl.style.display = ''; return; }
+  if (!data.user_count) { emptyEl.style.display = ''; return; }
 
-  const section = document.getElementById('stats-section')!;
-  const summary = document.getElementById('stats-summary')!;
-  const treeEl  = document.getElementById('stats-tree')!;
   const n = data.user_count;
-  summary.textContent = `${n} ${n === 1 ? 'member' : 'members'}`;
-  section.style.display = '';
+  summaryEl.textContent = `${n} ${n === 1 ? 'member' : 'members'}`;
 
   const byHandle: Record<string, any> = {};
   for (const m of data.members) byHandle[m.handle] = m;
@@ -334,7 +328,12 @@ document.querySelectorAll<HTMLElement>('.tab-btn').forEach(btn => {
     for (const child of (children[handle] ?? [])) renderNode(child, depth + 1);
   }
   for (const root of roots) renderNode(root, 0);
-})();
+}
+
+document.querySelector<HTMLElement>('.tab-btn[data-tab="community"]')!.addEventListener('click', () => {
+  if (!communityLoaded) { communityLoaded = true; loadCommunity(); }
+});
+if (location.hash.slice(1) === 'community') { communityLoaded = true; loadCommunity(); }
 
 // ── Budget ────────────────────────────────────────────────────────────────────
 let budgetData: { monthly_target_eur: number | null; entries: any[] } | null = null;
@@ -348,10 +347,7 @@ async function loadBudget() {
       fetch('/api/me', { credentials: 'include' }),
     ]);
     budgetData = br.ok ? await br.json() : { monthly_target_eur: null, entries: [] };
-    if (mr.ok) {
-      const me = await mr.json();
-      isAdmin = !!me.is_admin;
-    }
+    if (mr.ok) { const me = await mr.json(); isAdmin = !!me.is_admin; }
   } catch {
     budgetData = { monthly_target_eur: null, entries: [] };
   }
@@ -369,15 +365,13 @@ function monthLabel(ym: string) {
 }
 
 function renderBudget() {
-  const listEl = document.getElementById('budget-list')!;
-  const adminControls = document.getElementById('budget-admin-controls')!;
-  const goalInput = document.getElementById('budget-goal-input') as HTMLInputElement;
+  const listEl       = document.getElementById('budget-list')!;
+  const adminCtrls   = document.getElementById('budget-admin-controls')!;
+  const goalInput    = document.getElementById('budget-goal-input') as HTMLInputElement;
 
   if (isAdmin) {
-    adminControls.classList.remove('hidden');
-    if (budgetData?.monthly_target_eur != null) {
-      goalInput.value = String(budgetData.monthly_target_eur);
-    }
+    adminCtrls.classList.remove('hidden');
+    if (budgetData?.monthly_target_eur != null) goalInput.value = String(budgetData.monthly_target_eur);
   }
 
   const entries = budgetData?.entries ?? [];
@@ -386,18 +380,15 @@ function renderBudget() {
     return;
   }
 
-  // Group by month, sorted descending
   const byMonth: Record<string, any[]> = {};
-  for (const e of entries) {
-    (byMonth[e.month] ??= []).push(e);
-  }
+  for (const e of entries) (byMonth[e.month] ??= []).push(e);
   const months = Object.keys(byMonth).sort().reverse();
 
   let html = '';
   for (const ym of months) {
-    const items = byMonth[ym];
+    const items   = byMonth[ym];
     const donated = items.filter(e => e.type === 'donation').reduce((s, e) => s + e.amount_eur, 0);
-    const spent   = items.filter(e => e.type === 'expense').reduce((s, e) => s + e.amount_eur, 0);
+    const spent   = items.filter(e => e.type === 'expense' ).reduce((s, e) => s + e.amount_eur, 0);
     const balance = donated - spent;
     const target  = budgetData?.monthly_target_eur;
     const pct     = target ? Math.min(100, Math.round(donated / target * 100)) : null;
@@ -405,7 +396,6 @@ function renderBudget() {
     html += `<div class="mb-6">`;
     html += `<h3 class="text-sm font-semibold text-white mb-2">${monthLabel(ym)}</h3>`;
 
-    // Progress bar
     if (pct !== null) {
       html += `<div class="mb-3">
         <div class="flex justify-between text-xs text-zinc-500 mb-1">
@@ -418,12 +408,11 @@ function renderBudget() {
       </div>`;
     }
 
-    // Entries list
     html += `<div class="divide-y divide-zinc-800/60 rounded-xl border border-zinc-800 overflow-hidden">`;
     for (const e of items) {
-      const icon   = e.type === 'donation' ? '💚' : '🔴';
-      const sign   = e.type === 'donation' ? '+' : '−';
-      const color  = e.type === 'donation' ? 'text-green-400' : 'text-red-400';
+      const icon  = e.type === 'donation' ? '💚' : '🔴';
+      const sign  = e.type === 'donation' ? '+' : '−';
+      const color = e.type === 'donation' ? 'text-green-400' : 'text-red-400';
       const adminBtns = isAdmin
         ? `<button data-edit="${e.id}" class="edit-btn text-zinc-600 hover:text-zinc-300 text-xs px-1 transition-colors">✎</button>
            <button data-del="${e.id}"  class="del-btn  text-zinc-700 hover:text-red-400  text-xs px-1 transition-colors">✕</button>`
@@ -438,8 +427,6 @@ function renderBudget() {
       </div>`;
     }
     html += `</div>`;
-
-    // Monthly totals
     html += `<div class="flex gap-4 mt-2 text-xs text-zinc-500 px-1">
       <span>Donated: <span class="text-green-400">${fmtEur(donated)}</span></span>
       <span>Spent: <span class="text-red-400">${fmtEur(spent)}</span></span>
@@ -449,22 +436,17 @@ function renderBudget() {
   }
   listEl.innerHTML = html;
 
-  // Attach edit/delete handlers
   listEl.querySelectorAll<HTMLElement>('.del-btn').forEach(btn => {
     btn.addEventListener('click', async () => {
-      const id = btn.dataset.del!;
       if (!confirm('Delete this entry?')) return;
-      const r = await fetch(`/api/budget/entries/${id}`, { method: 'DELETE', credentials: 'include' });
-      if (r.ok) {
-        budgetData!.entries = budgetData!.entries.filter(e => e.id !== id);
-        renderBudget();
-      }
+      const r = await fetch(`/api/budget/entries/${btn.dataset.del}`, { method: 'DELETE', credentials: 'include' });
+      if (r.ok) { budgetData!.entries = budgetData!.entries.filter(e => e.id !== btn.dataset.del); renderBudget(); }
     });
   });
 
   listEl.querySelectorAll<HTMLElement>('.edit-btn').forEach(btn => {
     btn.addEventListener('click', () => {
-      const id = btn.dataset.edit!;
+      const id    = btn.dataset.edit!;
       const entry = budgetData!.entries.find(e => e.id === id);
       if (!entry) return;
       const row = listEl.querySelector<HTMLElement>(`[data-entry-id="${id}"]`)!;
@@ -474,13 +456,13 @@ function renderBudget() {
             <option value="donation" ${entry.type==='donation'?'selected':''}>💚 Donation</option>
             <option value="expense"  ${entry.type==='expense' ?'selected':''}>🔴 Expense</option>
           </select>
-          <input name="label" value="${entry.label}" placeholder="Label"
+          <input name="label"      value="${entry.label}"      placeholder="Label"
             class="flex-1 min-w-24 px-2 py-1 rounded bg-zinc-800 border border-zinc-700 text-white text-xs focus:outline-none" />
           <input name="amount_eur" type="number" value="${entry.amount_eur}" step="0.01" min="0"
             class="w-20 px-2 py-1 rounded bg-zinc-800 border border-zinc-700 text-white text-xs focus:outline-none" />
-          <input name="month" type="month" value="${entry.month}"
+          <input name="month"      type="month"  value="${entry.month}"
             class="px-2 py-1 rounded bg-zinc-800 border border-zinc-700 text-white text-xs focus:outline-none [color-scheme:dark]" />
-          <input name="note" value="${entry.note}" placeholder="Note"
+          <input name="note"       value="${entry.note}"       placeholder="Note"
             class="flex-1 min-w-24 px-2 py-1 rounded bg-zinc-800 border border-zinc-700 text-white text-xs focus:outline-none" />
           <button type="submit" class="px-3 py-1 rounded bg-[--accent] text-white text-xs hover:opacity-90">Save</button>
           <button type="button" class="cancel-edit px-2 py-1 rounded bg-zinc-800 text-zinc-400 text-xs hover:bg-zinc-700">✕</button>
@@ -488,39 +470,18 @@ function renderBudget() {
 
       row.querySelector<HTMLFormElement>('.inline-edit-form')!.addEventListener('submit', async ev => {
         ev.preventDefault();
-        const fd = new FormData(ev.target as HTMLFormElement);
-        const body = {
-          type:       fd.get('type'),
-          label:      fd.get('label'),
-          amount_eur: parseFloat(fd.get('amount_eur') as string),
-          month:      fd.get('month'),
-          note:       fd.get('note'),
-        };
-        const r = await fetch(`/api/budget/entries/${id}`, {
-          method: 'PATCH', credentials: 'include',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(body),
-        });
-        if (r.ok) {
-          const updated = await r.json();
-          const idx = budgetData!.entries.findIndex(e => e.id === id);
-          if (idx !== -1) budgetData!.entries[idx] = updated;
-          renderBudget();
-        }
+        const fd   = new FormData(ev.target as HTMLFormElement);
+        const body = { type: fd.get('type'), label: fd.get('label'), amount_eur: parseFloat(fd.get('amount_eur') as string), month: fd.get('month'), note: fd.get('note') };
+        const r    = await fetch(`/api/budget/entries/${id}`, { method: 'PATCH', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+        if (r.ok) { const updated = await r.json(); const idx = budgetData!.entries.findIndex(e => e.id === id); if (idx !== -1) budgetData!.entries[idx] = updated; renderBudget(); }
       });
-
       row.querySelector('.cancel-edit')!.addEventListener('click', renderBudget);
     });
   });
 }
 
-// Load budget when donate tab is first opened
-let budgetLoaded = false;
-document.querySelector<HTMLElement>('.tab-btn[data-tab="donate"]')!.addEventListener('click', () => {
-  if (!budgetLoaded) { budgetLoaded = true; loadBudget(); }
-});
-// Also load immediately if donate is the initial tab
-if (location.hash.slice(1) === 'donate') { budgetLoaded = true; loadBudget(); }
+// Load budget on page load (donate is the default tab)
+loadBudget();
 
 // Goal form
 const goalForm   = document.getElementById('budget-goal-form') as HTMLFormElement;
@@ -533,19 +494,9 @@ goalForm.addEventListener('submit', async e => {
   e.preventDefault();
   goalErr.classList.add('hidden');
   const v = parseFloat((document.getElementById('budget-goal-input') as HTMLInputElement).value);
-  const r = await fetch('/api/budget/settings', {
-    method: 'POST', credentials: 'include',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ monthly_target_eur: isNaN(v) ? null : v }),
-  });
-  if (r.ok) {
-    if (budgetData) budgetData.monthly_target_eur = isNaN(v) ? null : v;
-    goalForm.classList.add('hidden');
-    renderBudget();
-  } else {
-    goalErr.textContent = 'Failed to save goal.';
-    goalErr.classList.remove('hidden');
-  }
+  const r = await fetch('/api/budget/settings', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ monthly_target_eur: isNaN(v) ? null : v }) });
+  if (r.ok) { if (budgetData) budgetData.monthly_target_eur = isNaN(v) ? null : v; goalForm.classList.add('hidden'); renderBudget(); }
+  else { goalErr.textContent = 'Failed to save goal.'; goalErr.classList.remove('hidden'); }
 });
 
 // Add-entry form
@@ -554,29 +505,23 @@ const addBtn    = document.getElementById('budget-add-btn')!;
 const addCancel = document.getElementById('budget-add-cancel')!;
 const addErr    = document.getElementById('budget-add-err')!;
 
-// Default month to current YYYY-MM
 const now = new Date();
 const defaultMonth = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}`;
 (document.getElementById('entry-month') as HTMLInputElement).value = defaultMonth;
 
-// Type toggle in add form
 addForm.querySelectorAll<HTMLButtonElement>('.entry-type-btn').forEach(btn => {
   btn.addEventListener('click', () => {
     addEntryType = btn.dataset.type as 'donation' | 'expense';
     addForm.querySelectorAll<HTMLButtonElement>('.entry-type-btn').forEach(b => {
-      const active = b.dataset.type === addEntryType;
-      b.classList.toggle('border-[--accent]', active);
-      b.classList.toggle('text-white',        active);
-      b.classList.toggle('bg-zinc-800',       active);
-      b.classList.toggle('border-zinc-700',  !active);
-      b.classList.toggle('text-zinc-400',    !active);
+      const a = b.dataset.type === addEntryType;
+      b.classList.toggle('border-[--accent]', a); b.classList.toggle('text-white',      a); b.classList.toggle('bg-zinc-800',    a);
+      b.classList.toggle('border-zinc-700', !a);  b.classList.toggle('text-zinc-400', !a);
     });
   });
 });
-// Activate donation type by default
 (addForm.querySelector('.entry-type-btn[data-type="donation"]') as HTMLButtonElement).click();
 
-addBtn.addEventListener('click', () => { addForm.classList.toggle('hidden'); addErr.classList.add('hidden'); });
+addBtn.addEventListener('click',    () => { addForm.classList.toggle('hidden'); addErr.classList.add('hidden'); });
 addCancel.addEventListener('click', () => addForm.classList.add('hidden'));
 
 addForm.addEventListener('submit', async e => {
@@ -586,25 +531,18 @@ addForm.addEventListener('submit', async e => {
   const amount = parseFloat((document.getElementById('entry-amount') as HTMLInputElement).value);
   const month  = (document.getElementById('entry-month')  as HTMLInputElement).value;
   const note   = (document.getElementById('entry-note')   as HTMLInputElement).value.trim();
-  if (!label) { addErr.textContent = 'Label is required.'; addErr.classList.remove('hidden'); return; }
+  if (!label)      { addErr.textContent = 'Label is required.';  addErr.classList.remove('hidden'); return; }
   if (isNaN(amount)) { addErr.textContent = 'Amount is required.'; addErr.classList.remove('hidden'); return; }
-  const r = await fetch('/api/budget/entries', {
-    method: 'POST', credentials: 'include',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ type: addEntryType, label, amount_eur: amount, month, note }),
-  });
+  const r = await fetch('/api/budget/entries', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: addEntryType, label, amount_eur: amount, month, note }) });
   if (r.ok) {
-    const entry = await r.json();
-    budgetData!.entries.push(entry);
-    addForm.classList.add('hidden');
-    addForm.reset();
+    budgetData!.entries.push(await r.json());
+    addForm.classList.add('hidden'); addForm.reset();
     (document.getElementById('entry-month') as HTMLInputElement).value = defaultMonth;
     (addForm.querySelector('.entry-type-btn[data-type="donation"]') as HTMLButtonElement).click();
     renderBudget();
   } else {
     const d = await r.json().catch(() => ({}));
-    addErr.textContent = d.detail ?? 'Failed to add entry.';
-    addErr.classList.remove('hidden');
+    addErr.textContent = d.detail ?? 'Failed to add entry.'; addErr.classList.remove('hidden');
   }
 });
 
@@ -621,14 +559,12 @@ let fbFiles: File[] = [];
 
 function fbShowErr(msg: string) { fbErr.textContent = msg; fbErr.classList.remove('hidden'); }
 function fbClearErr() { fbErr.classList.add('hidden'); }
-
 function fbRenderPreviews() {
   fbPreviews.innerHTML = '';
   fbFiles.forEach((f, i) => {
-    const url = URL.createObjectURL(f);
     const wrap = document.createElement('div');
     wrap.className = 'relative';
-    wrap.innerHTML = `<img src="${url}" class="w-20 h-20 object-cover rounded-lg border border-zinc-700" />
+    wrap.innerHTML = `<img src="${URL.createObjectURL(f)}" class="w-20 h-20 object-cover rounded-lg border border-zinc-700" />
       <button type="button" data-i="${i}" class="rm-btn absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-zinc-800 border border-zinc-600 text-zinc-300 hover:text-white text-xs flex items-center justify-center">×</button>`;
     fbPreviews.appendChild(wrap);
   });
@@ -636,7 +572,6 @@ function fbRenderPreviews() {
     b.addEventListener('click', () => { fbFiles.splice(parseInt(b.dataset.i!), 1); fbRenderPreviews(); fbClearErr(); });
   });
 }
-
 function fbAddFiles(files: FileList | File[]) {
   fbClearErr();
   for (const f of Array.from(files)) {
@@ -644,45 +579,25 @@ function fbAddFiles(files: FileList | File[]) {
     if (f.size > MAX_BYTES) { fbShowErr(`"${f.name}" exceeds 2 MB.`); continue; }
     fbFiles.push(f);
   }
-  fbRenderPreviews();
-  fbInput.value = '';
+  fbRenderPreviews(); fbInput.value = '';
 }
-
 fbDrop.addEventListener('click', () => fbInput.click());
 fbDrop.addEventListener('dragover', e => { e.preventDefault(); fbDrop.style.borderColor = 'var(--accent)'; });
 fbDrop.addEventListener('dragleave', () => { fbDrop.style.borderColor = ''; });
 fbDrop.addEventListener('drop', e => { e.preventDefault(); fbDrop.style.borderColor = ''; if (e.dataTransfer?.files.length) fbAddFiles(e.dataTransfer.files); });
 fbInput.addEventListener('change', () => { if (fbInput.files?.length) fbAddFiles(fbInput.files); });
-
 fbForm.addEventListener('submit', async e => {
-  e.preventDefault();
-  fbClearErr();
+  e.preventDefault(); fbClearErr();
   const text = (document.getElementById('fb-text') as HTMLTextAreaElement).value.trim();
   if (!text && fbFiles.length === 0) { fbShowErr('Please write something or attach an image.'); return; }
-  const fd = new FormData();
-  fd.append('text', text);
+  const fd = new FormData(); fd.append('text', text);
   for (const f of fbFiles) fd.append('images', f);
   const btn = fbForm.querySelector('button[type=submit]') as HTMLButtonElement;
   btn.disabled = true; btn.textContent = 'Sending…';
   try {
     const r = await fetch('/api/feedback', { method: 'POST', credentials: 'include', body: fd });
     if (!r.ok) { const d = await r.json().catch(() => ({})); throw new Error(d.detail ?? `Error ${r.status}`); }
-    fbForm.classList.add('hidden');
-    fbSuccess.classList.remove('hidden');
-  } catch (err: any) {
-    fbShowErr(err.message);
-    btn.disabled = false; btn.textContent = 'Send feedback';
-  }
+    fbForm.classList.add('hidden'); fbSuccess.classList.remove('hidden');
+  } catch (err: any) { fbShowErr(err.message); btn.disabled = false; btn.textContent = 'Send feedback'; }
 });
-
-// Auth check for feedback
-(async () => {
-  try {
-    const r = await fetch('/api/me', { credentials: 'include' });
-    if (r.status === 401) {
-      document.getElementById('tab-feedback')!.innerHTML =
-        `<p class="text-zinc-500 text-sm py-6">You need to <a href="/login/?next=/support/#feedback" class="text-[--accent] hover:underline">log in</a> to send feedback.</p>`;
-    }
-  } catch (_) {}
-})();
 </script>