From 061de4354cf56303fd9e344a10f9610d9932b305 Mon Sep 17 00:00:00 2001
From: silberengel <silberengel7@protonmail.com>
Date: Mon, 11 Aug 2025 01:23:09 +0200
Subject: [PATCH] Added confirmation dialog to checkbox

---
 src/routes/+page.svelte | 71 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 781332b..2563fda 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,23 +1,54 @@
 <script lang="ts">
-  import { Input, Checkbox } from "flowbite-svelte";
+  import { Input, Modal, Button } from "flowbite-svelte";
   import PublicationFeed from "$lib/components/publications/PublicationFeed.svelte";
   import { userStore } from "$lib/stores/userStore.ts";
 
   let searchQuery = $state("");
   let showOnlyMyPublications = $state(false);
   let eventCount = $state({ displayed: 0, total: 0 });
+  let showClearSearchModal = $state(false);
+  let pendingCheckboxState = $state(false);
 
   function handleEventCountUpdate(counts: { displayed: number; total: number }) {
     eventCount = counts;
   }
 
-  // AI-NOTE: Clear search when checkbox is toggled to start fresh
+  // Debug: Log state changes
   $effect(() => {
-    if (showOnlyMyPublications && searchQuery.trim()) {
-      // If checkbox is being checked and there's a search query, clear the search
-      searchQuery = "";
-    }
+    console.log('showOnlyMyPublications changed to:', showOnlyMyPublications);
   });
+
+  function handleCheckboxChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const newState = target.checked;
+    
+    // If checkbox is being checked and there's a search query, show confirmation
+    if (newState && searchQuery.trim()) {
+      pendingCheckboxState = newState;
+      showClearSearchModal = true;
+      // Revert the checkbox to its previous state
+      target.checked = showOnlyMyPublications;
+      return;
+    } else {
+      // If unchecking or no search query, proceed normally
+      showOnlyMyPublications = newState;
+    }
+  }
+
+  function confirmClearSearch() {
+    searchQuery = "";
+    showClearSearchModal = false;
+    // Force the state update by reassigning
+    showOnlyMyPublications = false;
+    showOnlyMyPublications = true;
+  }
+
+  function cancelClearSearch() {
+    // Don't change showOnlyMyPublications - it should remain as it was
+    showClearSearchModal = false;
+  }
+
+  // AI-NOTE: Removed automatic search clearing - now handled with confirmation dialog
 </script>
 
 <main class="leather flex flex-col flex-grow-0 space-y-4 p-4">
@@ -38,9 +69,12 @@
       <!-- AI-NOTE: Show filter checkbox only when user is logged in -->
       {#if $userStore.signedIn}
         <div class="flex items-center gap-2">
-          <Checkbox
-            bind:checked={showOnlyMyPublications}
+          <input
+            type="checkbox"
+            checked={showOnlyMyPublications}
+            onchange={handleCheckboxChange}
             id="show-my-publications"
+            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
           />
           <label for="show-my-publications" class="text-sm cursor-pointer">
             Show only my publications
@@ -56,3 +90,24 @@
     onEventCountUpdate={handleEventCountUpdate}
   />
 </main>
+
+<!-- Confirmation Modal -->
+<Modal bind:open={showClearSearchModal} size="md">
+  <div class="p-6">
+    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
+      Clear Search?
+    </h3>
+    <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
+      Switching to "Show only my publications" will clear your current search. 
+      Are you sure you want to continue?
+    </p>
+    <div class="flex justify-end gap-3">
+      <Button color="light" onclick={cancelClearSearch}>
+        Cancel
+      </Button>
+      <Button color="primary" onclick={confirmClearSearch}>
+        Clear Search
+      </Button>
+    </div>
+  </div>
+</Modal>