diff --git a/src/components/SlugInput.astro b/src/components/SlugInput.astro index 3ce3081..3a5b5d3 100644 --- a/src/components/SlugInput.astro +++ b/src/components/SlugInput.astro @@ -66,6 +66,20 @@ const languages = [ +
+

Selected Comics

+ +
+
{currentSlugs.map(slug => (
@@ -116,6 +130,7 @@ const languages = [ const langSelect = document.getElementById('lang-select') as HTMLSelectElement; const feedIdInput = document.getElementById('feed-id-input') as HTMLInputElement; const importFeedButton = document.getElementById('import-feed'); + const clearAllButton = document.getElementById('clear-all'); // Load saved slugs from localStorage let slugs = new Set(JSON.parse(localStorage.getItem('comic-slugs') || '[]')); @@ -124,8 +139,23 @@ const languages = [ localStorage.setItem('comic-slugs', JSON.stringify([...slugs])); updateRSSLink(); renderSlugs(); + updateClearAllButton(); } + function updateClearAllButton() { + if (clearAllButton) { + clearAllButton.style.display = slugs.size > 0 ? 'flex' : 'none'; + } + } + + // Clear all functionality + clearAllButton?.addEventListener('click', () => { + if (confirm('Are you sure you want to clear all comics? This cannot be undone.')) { + slugs.clear(); + updateSlugs(); + } + }); + async function renderSlugs() { if (!slugList) return; @@ -490,6 +520,7 @@ const languages = [ // Initial render renderSlugs(); updateRSSLink(); + updateClearAllButton(); // Update RSS link when language changes langSelect?.addEventListener('change', () => updateRSSLink());