refactor: improve donation tabs code organization

- Extract logic into dedicated functions for better readability
- Create handleDonationIntervalChange() as main click handler
- Separate concerns: updateLinkInterval, updateAmountDisplay, switchActiveTab
- Remove unnecessary comments in favor of clear function names
- Update footer to link script.js instead of donation-tabs.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(cat:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

assets/js/donation-tabs.js

@@ -1,59 +0,0 @@
-/**
- * Gestion des onglets de donation (ponctuel / mensuel)
- */
-document.addEventListener('DOMContentLoaded', function() {
-    const tabButtons = document.querySelectorAll('.nav--tabs__btn');
-    const donationLinks = document.querySelectorAll('.btn--donation[data-amount]');
-
-    if (tabButtons.length === 0 || donationLinks.length === 0) return;
-
-    tabButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            // Retirer la classe is-selected de tous les boutons
-            tabButtons.forEach(btn => btn.classList.remove('is-selected'));
-
-            // Ajouter la classe is-selected au bouton cliqué
-            this.classList.add('is-selected');
-
-            // Récupérer l'intervalle (o = ponctuel, m = mensuel)
-            const interval = this.getAttribute('data-interval');
-
-            // Mettre à jour les liens de donation
-            donationLinks.forEach(link => {
-                const amount = link.getAttribute('data-amount');
-                const currentHref = link.getAttribute('href');
-
-                // Remplacer l'intervalle dans l'URL
-                const newHref = currentHref.replace(
-                    /default_interval=[om]/,
-                    `default_interval=${interval}`
-                );
-
-                link.setAttribute('href', newHref);
-
-                // Mettre à jour le texte (ajouter /mois pour mensuel)
-                const amountSpan = link.querySelector('.amount-value');
-                const boldText = link.querySelector('.bold');
-
-                if (amountSpan && boldText) {
-                    if (interval === 'm') {
-                        boldText.innerHTML = `<span class="amount-value">${amount}</span>€/mois`;
-                    } else {
-                        boldText.innerHTML = `<span class="amount-value">${amount}</span>€`;
-                    }
-                }
-            });
-
-            // Mettre à jour aussi le lien "Montant libre"
-            const freeAmountLink = document.querySelector('.btn--donation:not([data-amount])');
-            if (freeAmountLink) {
-                const currentHref = freeAmountLink.getAttribute('href');
-                const newHref = currentHref.replace(
-                    /default_interval=[om]/,
-                    `default_interval=${interval}`
-                );
-                freeAmountLink.setAttribute('href', newHref);
-            }
-        });
-    });
-});

assets/js/script.js

@@ -0,0 +1,51 @@
+function updateLinkInterval(link, interval) {
+  const currentHref = link.getAttribute("href");
+  const newHref = currentHref.replace(
+    /default_interval=[om]/,
+    `default_interval=${interval}`
+  );
+  link.setAttribute("href", newHref);
+}
+
+function updateAmountDisplay(link, amount, interval) {
+  const boldText = link.querySelector(".bold");
+  if (!boldText) return;
+
+  const suffix = interval === "m" ? "€/mois" : "€";
+  boldText.innerHTML = `<span class="amount-value">${amount}</span>${suffix}`;
+}
+
+function switchActiveTab(clickedButton, allButtons) {
+  allButtons.forEach((btn) => btn.classList.remove("is-selected"));
+  clickedButton.classList.add("is-selected");
+}
+
+function handleDonationIntervalChange(interval) {
+  const donationLinks = document.querySelectorAll(".btn--donation[data-amount]");
+  const freeAmountLink = document.querySelector(".btn--donation:not([data-amount])");
+
+  donationLinks.forEach((link) => {
+    const amount = link.getAttribute("data-amount");
+    updateLinkInterval(link, interval);
+    updateAmountDisplay(link, amount, interval);
+  });
+
+  if (freeAmountLink) {
+    updateLinkInterval(freeAmountLink, interval);
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  const tabButtons = document.querySelectorAll(".nav--tabs__btn");
+  const donationLinks = document.querySelectorAll(".btn--donation[data-amount]");
+
+  if (tabButtons.length === 0 || donationLinks.length === 0) return;
+
+  tabButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      const interval = this.getAttribute("data-interval");
+      switchActiveTab(this, tabButtons);
+      handleDonationIntervalChange(interval);
+    });
+  });
+});

site/snippets/footer.php

@@ -1,3 +1,3 @@
-  <script src="<?= url('assets/js/donation-tabs.js') ?>"></script>
+  <script src="<?= url('assets/js/script.js') ?>"></script>
 </body>
 </html>

site/snippets/header.php

@@ -11,6 +11,8 @@
     <?php endif ?>
     <?= $site->title() ?>
   </title>
+
+  <script src="<?= url('assets/js/script.js') ?>"></script>
 </head>
 <body data-template="<?= $page->template() ?>">
   <?php snippet('nav') ?>