style(templates): modernize JS to arrow functions and const/let

Convert all remaining function declarations, var usage, and string
concatenation across base, add, checkin, and data templates.

templates/add.html

@@ -7,7 +7,7 @@
   let _searchTimeout = null;
   let _nearbyCafes = [];
 
-  function locateUser(btn) {
+  const locateUser = (btn) => {
     const errorEl = document.getElementById('nearby-error');
     const searchWrap = document.getElementById('nearby-search-wrap');
     errorEl.classList.add('hidden');
@@ -44,9 +44,9 @@
       },
       { enableHighAccuracy: true, timeout: 15000 }
     );
-  }
+  };
 
-  function onSearchInput(input) {
+  const onSearchInput = (input) => {
     clearTimeout(_searchTimeout);
     const resultsEl = document.getElementById('nearby-results');
 
@@ -59,9 +59,9 @@
     _searchTimeout = setTimeout(() => {
       searchNearby(input.value.trim());
     }, 350);
-  }
+  };
 
-  function toggleCitySearch(checkbox) {
+  const toggleCitySearch = (checkbox) => {
     const locateBtn = document.getElementById('locate-btn');
     const cityWrap = document.getElementById('city-search-wrap');
     const searchWrap = document.getElementById('nearby-search-wrap');
@@ -84,9 +84,9 @@
       resultsEl.classList.add('hidden');
       resultsEl.innerHTML = '';
     }
-  }
+  };
 
-  async function searchNearby(query) {
+  const searchNearby = async (query) => {
     const resultsEl = document.getElementById('nearby-results');
     const errorEl = document.getElementById('nearby-error');
     const spinnerEl = document.getElementById('nearby-spinner');
@@ -135,9 +135,9 @@
     } finally {
       spinnerEl.classList.add('hidden');
     }
-  }
+  };
 
-  function selectPlace(index) {
+  const selectPlace = (index) => {
     const cafe = _nearbyCafes[index];
     if (!cafe) return;
 
@@ -151,13 +151,13 @@
 
     document.getElementById('nearby-results').classList.add('hidden');
     document.getElementById('nearby-search').value = '';
-  }
+  };
 
-  function escapeHtml(text) {
+  const escapeHtml = (text) => {
     const el = document.createElement('span');
     el.textContent = text;
     return el.innerHTML;
-  }
+  };
 </script>
 {% endblock %}
 

templates/base.html

@@ -12,23 +12,23 @@
     ></script>
     {% block head %}{% endblock %}
     <script>
-      document.addEventListener("DOMContentLoaded", function () {
+      document.addEventListener("DOMContentLoaded", () => {
-        var mobileQuery = window.matchMedia("(max-width: 767px)");
+        const mobileQuery = window.matchMedia("(max-width: 767px)");
         if (!mobileQuery.matches) return;
 
-        function setupInfiniteScroll() {
+        const setupInfiniteScroll = () => {
-          document.querySelectorAll("[data-infinite-scroll]").forEach(function (container) {
+          document.querySelectorAll("[data-infinite-scroll]").forEach((container) => {
-            var sentinel = container.querySelector(".infinite-scroll-sentinel");
+            const sentinel = container.querySelector(".infinite-scroll-sentinel");
             if (!sentinel || sentinel.dataset.observed) return;
             sentinel.dataset.observed = "true";
 
-            var observer = new IntersectionObserver(
+            const observer = new IntersectionObserver(
-              function (entries) {
+              (entries) => {
-                entries.forEach(function (entry) {
+                entries.forEach((entry) => {
                   if (!entry.isIntersecting) return;
 
-                  var nextUrl = container.getAttribute("data-next-url");
+                  const nextUrl = container.getAttribute("data-next-url");
-                  var targetSelector = container.getAttribute("data-target");
+                  const targetSelector = container.getAttribute("data-target");
                   if (!nextUrl || !targetSelector) {
                     observer.disconnect();
                     return;
@@ -40,27 +40,27 @@
                   fetch(nextUrl, {
                     headers: { "datastar-request": "true" },
                   })
-                    .then(function (res) { return res.text(); })
+                    .then((res) => res.text())
-                    .then(function (html) {
+                    .then((html) => {
-                      var doc = new DOMParser().parseFromString(html, "text/html");
+                      const doc = new DOMParser().parseFromString(html, "text/html");
-                      var newTarget = doc.querySelector(targetSelector);
+                      const newTarget = doc.querySelector(targetSelector);
                       if (!newTarget) return;
 
                       // Append new rows to existing tbody
-                      var existingTbody = container.querySelector("tbody");
+                      const existingTbody = container.querySelector("tbody");
-                      var newTbody = newTarget.querySelector("tbody");
+                      const newTbody = newTarget.querySelector("tbody");
                       if (existingTbody && newTbody) {
-                        Array.from(newTbody.children).forEach(function (row) {
+                        Array.from(newTbody.children).forEach((row) => {
                           existingTbody.appendChild(document.adoptNode(row));
                         });
                       }
 
                       // Check if there are more pages
-                      var newContainer = newTarget.querySelector("[data-infinite-scroll]");
+                      const newContainer = newTarget.querySelector("[data-infinite-scroll]");
-                      var newNextUrl = newContainer && newContainer.getAttribute("data-next-url");
+                      const newNextUrl = newContainer && newContainer.getAttribute("data-next-url");
                       if (newNextUrl) {
                         container.setAttribute("data-next-url", newNextUrl);
-                        var newSentinel = document.createElement("div");
+                        const newSentinel = document.createElement("div");
                         newSentinel.className = "infinite-scroll-sentinel h-4 md:hidden";
                         newSentinel.setAttribute("aria-hidden", "true");
                         container.appendChild(newSentinel);
@@ -77,11 +77,11 @@
 
             observer.observe(sentinel);
           });
-        }
+        };
 
         setupInfiniteScroll();
 
-        var bodyObserver = new MutationObserver(function () {
+        const bodyObserver = new MutationObserver(() => {
           setupInfiniteScroll();
         });
         bodyObserver.observe(document.body, { childList: true, subtree: true });

templates/checkin.html

@@ -2,7 +2,7 @@
 
 {% block head %}
 <script>
-function locateUser() {
+const locateUser = () => {
   const root = document.getElementById('checkin-root');
   const emit = (name, detail) =>
     root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
@@ -27,7 +27,7 @@ function locateUser() {
     },
     { enableHighAccuracy: true, timeout: 15000 },
   );
-}
+};
 </script>
 {% endblock %}
 

templates/data.html

@@ -81,24 +81,24 @@
 <div id="detail-panel"></div>
 
 <script>
-(function() {
+(() => {
-  var searchInput = document.getElementById('data-search');
+  const searchInput = document.getElementById('data-search');
   if (!searchInput) return;
 
-  var debounceTimer;
+  let debounceTimer;
-  searchInput.addEventListener('input', function() {
+  searchInput.addEventListener('input', () => {
     clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(function() {
+    debounceTimer = setTimeout(() => {
-      var params = new URLSearchParams(window.location.search);
+      const params = new URLSearchParams(window.location.search);
-      var activeTab = params.get('type') || 'brews';
+      const activeTab = params.get('type') || 'brews';
-      var query = searchInput.value;
+      const query = searchInput.value;
-      var url = '/data?type=' + activeTab + '&q=' + encodeURIComponent(query);
+      const url = `/data?type=${activeTab}&q=${encodeURIComponent(query)}`;
 
       history.pushState(null, '', url);
 
       fetch(url, { headers: { 'datastar-request': 'true' } })
-        .then(function(res) { return res.text(); })
+        .then((res) => res.text())
-        .then(function(html) {
+        .then((html) => {
           document.getElementById('data-content').innerHTML = html;
         });
     }, 300);