From 297019f9a9fad25fe5d95f94ee18ee619983cebf Mon Sep 17 00:00:00 2001
From: Nonimart <martinon.toinou@protonmail.com>
Date: Mon, 12 Jan 2026 12:26:53 +0100
Subject: [PATCH] FEATURE Handling a rest button for the search on single

---
 resources/css/pages/singles.css               | 23 +++++++++++++++-
 .../icons/carhop-reset-search-cross-green.svg |  5 ++++
 resources/js/singles/search-revue.ts          | 24 +++++++++++++++++
 single-revues.php                             | 26 +++++++++++--------
 4 files changed, 66 insertions(+), 12 deletions(-)
 create mode 100644 resources/img/icons/carhop-reset-search-cross-green.svg

diff --git a/resources/css/pages/singles.css b/resources/css/pages/singles.css
index b873cab..ff3349b 100644
--- a/resources/css/pages/singles.css
+++ b/resources/css/pages/singles.css
@@ -71,6 +71,13 @@
     }
     .search-field {
       @apply relative;
+      .reset-search-button {
+        @apply absolute top-1/2 right-0 -translate-y-1/2;
+        @apply mr-2 w-8 h-8;
+        @apply bg-contain hidden;
+        background-image: url('../resources/img/icons/carhop-reset-search-cross-green.svg');
+      }
+
       &:after {
         content: ' ';
         @apply block w-8 h-8;
@@ -79,6 +86,16 @@
         @apply bg-contain;
         background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
       }
+
+      &:has(input:not(:placeholder-shown)) {
+        .reset-search-button {
+          @apply block;
+        }
+        &:after {
+          @apply hidden;
+        }
+      }
+
       input {
         @apply border border-primary text-primary w-full;
         @apply w-full p-4 relative;
@@ -91,8 +108,12 @@
     .tags {
       @apply hidden lg:block;
     }
+    .search-field + .article-tags,
+    .search-field + .revue-tags {
+      @apply mt-8;
+    }
     .tags__title {
-      @apply text-lg uppercase font-semibold mt-8 my-4 nunito;
+      @apply text-lg uppercase font-semibold mt-0 my-4 nunito;
     }
     .tags-list {
       @apply flex flex-wrap gap-4;
diff --git a/resources/img/icons/carhop-reset-search-cross-green.svg b/resources/img/icons/carhop-reset-search-cross-green.svg
new file mode 100644
index 0000000..2585f88
--- /dev/null
+++ b/resources/img/icons/carhop-reset-search-cross-green.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="17" stroke="#136F63" stroke-width="2"/>
+<path d="M11.8828 25L26.0005 11" stroke="#136F63" stroke-width="2"/>
+<path d="M25.1172 25L10.9995 11" stroke="#136F63" stroke-width="2"/>
+</svg>
diff --git a/resources/js/singles/search-revue.ts b/resources/js/singles/search-revue.ts
index 795e87d..8abfd0a 100644
--- a/resources/js/singles/search-revue.ts
+++ b/resources/js/singles/search-revue.ts
@@ -6,9 +6,26 @@ export default function handleSearchRevue() {
   const currentRevueId = document
     .querySelector('.page--single-revue')
     ?.getAttribute('data-revue-id') as string;
+  const revueToolbarButtons = document.querySelectorAll(
+    '.page--single-revue .revue-toolbar button'
+  ) as NodeListOf<HTMLButtonElement>;
 
   if (!searchRevue || !contentArea) return;
 
+  const resetSearchButton = document.querySelector(
+    '.page--single-revue .sidebar .search-field .reset-search-button'
+  ) as HTMLButtonElement;
+  if (!resetSearchButton) return;
+
+  function resetSearch() {
+    searchRevue.value = '';
+    contentArea.innerHTML = originalContent;
+  }
+
+  resetSearchButton.addEventListener('click', () => {
+    resetSearch();
+  });
+
   // Sauvegarder le contenu original
   const originalContent = contentArea.innerHTML;
 
@@ -40,4 +57,11 @@ export default function handleSearchRevue() {
       `;
     }
   });
+
+  revueToolbarButtons.forEach((button) => {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      resetSearch();
+    });
+  });
 }
diff --git a/single-revues.php b/single-revues.php
index 3594d97..e86be09 100644
--- a/single-revues.php
+++ b/single-revues.php
@@ -23,22 +23,26 @@ $articles = get_field('articles', $current_issue->ID);
 				<div class="sidebar">
 					<div class="search-field">
 						<input type="text" placeholder="Rechercher dans la revue">
+						<button type="button" class="reset-search-button" title="Réinitialiser la recherche"></button>
+
 					</div>
 					<?php
 					$tags = get_revue_terms($current_issue->ID, 'etiquettes');
 					?>
 					<?php if ($tags) : ?>
-						<div class="tags">
-							<h3 class="tags__title">Tags</h3>
-							<ul class="tags-list">
-								<?php foreach ($tags as $tag) : ?>
-									<li>
-										<a class="article-tag" href="<?php echo add_query_arg('etiquette', $tag->slug, get_post_type_archive_link('articles')); ?>">
-											<?php echo $tag->name; ?>
-										</a>
-									</li>
-								<?php endforeach; ?>
-							</ul>
+						<div id="revue-tags" class="revue-tags">
+							<div class="tags">
+								<h3 class="tags__title">Tags</h3>
+								<ul class="tags-list">
+									<?php foreach ($tags as $tag) : ?>
+										<li>
+											<a class="article-tag" href="<?php echo add_query_arg('etiquette', $tag->slug, get_post_type_archive_link('articles')); ?>">
+												<?php echo $tag->name; ?>
+											</a>
+										</li>
+									<?php endforeach; ?>
+								</ul>
+							</div>
 						</div>
 					<?php endif; ?>
 				</div>