Implement clear button functionality for bookmark search input

Author: JonathanPiaget

src/entrypoints/popup/components/FolderSelector.vue

@@ -2,7 +2,7 @@
   <div class="folder-selector">
     <div class="form-group">
       <label for="folder-search">{{ i18n.t('folder') }}</label>
-      <div class="search-container">
+      <div class="search-container input-with-clear">
         <input
           ref="folderInput"
           id="folder-search"
@@ -355,35 +355,6 @@ onMounted(async () => {
   position: relative;
 }
 
-.form-input.has-clear {
-  padding-right: 32px;
-}
-
-.clear-button {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.clear-button:hover {
-  background: var(--text-secondary);
-  color: var(--bg-primary);
-}
-
 .dropdown-header {
   display: flex;
   justify-content: space-between;

src/entrypoints/popup/components/SearchView.vue

@@ -21,13 +21,23 @@
     </div>
 
     <div v-if="!error" class="filter-container">
-      <div class="filter-input-wrapper">
+      <div class="filter-input-wrapper input-with-clear">
         <input
           v-model="filterQuery"
           type="text"
           class="form-input"
+          :class="{ 'has-clear': filterQuery }"
           :placeholder="selectedFolderId ? i18n.t('filterBookmarks') : i18n.t('searchAllBookmarks')"
         >
+        <button
+          v-if="filterQuery"
+          type="button"
+          class="clear-button"
+          @mousedown.prevent="filterQuery = ''"
+          :title="i18n.t('clearSelection')"
+        >
+          ×
+        </button>
       </div>
       <label class="fuzzy-toggle" @mousedown.prevent>
         <input

src/entrypoints/popup/style.css

@@ -72,3 +72,39 @@ body {
 .tab-label {
 	user-select: none;
 }
+
+/* Clear button for inputs */
+.input-with-clear {
+	position: relative;
+}
+
+.input-with-clear .form-input.has-clear {
+	padding-right: 32px;
+}
+
+.clear-button {
+	position: absolute;
+	right: 8px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 20px;
+	height: 20px;
+	border: none;
+	background: var(--bg-tertiary);
+	color: var(--text-secondary);
+	border-radius: 50%;
+	cursor: pointer;
+	font-size: 14px;
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition:
+		background-color 0.15s ease,
+		color 0.15s ease;
+}
+
+.clear-button:hover {
+	background: var(--text-secondary);
+	color: var(--bg-primary);
+}