feat: show shopping list items in cards

assets/js/htmx-csrf.js

@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', function() {
+	// Listen for htmx requests and add CSRF token header
+	document.body.addEventListener('htmx:configRequest', function(event) {
+		// Get CSRF token from meta tag
+		const meta = document.querySelector('meta[name="csrf-token"]');
+		if (meta) {
+			// Add token as X-CSRF-Token header to all HTMX requests
+			event.detail.headers['X-CSRF-Token'] = meta.getAttribute('content');
+		}
+	});
+});

assets/js/smooth-scroll.js

@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+		anchor.addEventListener('click', function (e) {
+			// Only prevent default for same-page anchors
+			const href = this.getAttribute('href');
+			if (href && href !== '#' && href.startsWith('#')) {
+				const target = document.querySelector(href);
+				if (target) {
+					e.preventDefault();
+					target.scrollIntoView({
+						behavior: 'smooth',
+						block: 'start'
+					});
+				}
+			}
+		});
+	});
+});

assets/js/theme.js

@@ -0,0 +1,13 @@
+// Apply saved theme or system preference on load
+if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+	document.documentElement.classList.add('dark');
+}
+
+// Theme toggle handler
+document.addEventListener('click', (e) => {
+	if (e.target.closest('[data-theme-switcher]')) {
+		e.preventDefault();
+		const isDark = document.documentElement.classList.toggle('dark');
+		localStorage.theme = isDark ? 'dark' : 'light';
+	}
+});