From 5151204c6a9333246b2e11dbf56622c0a0401b58 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 14 Feb 2024 14:34:36 +0400
Subject: [PATCH 1/8] Add emit and handling for single-clear event

---
 .../VHeader/VSearchBar/VSearchBar.vue           |  7 +++++++
 .../VRecentSearches/VRecentSearches.vue         | 17 ++++++++++++++++-
 .../meta/VRecentSearches.stories.mdx            |  3 +++
 frontend/src/locales/scripts/en.json5           |  3 +++
 frontend/src/stores/search.ts                   |  3 +++
 5 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
index 54fcba7dc9a..250050b20cc 100644
--- a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -50,6 +50,7 @@
         :class="recentClasses"
         @select="handleSelect"
         @clear="handleClear"
+        @clear-single="handleClearSingle"
         @keydown.tab.native="hideRecentSearches"
       />
     </ClientOnly>
@@ -227,6 +228,11 @@ export default defineComponent({
       inputFieldRef.value?.focusInput()
       searchStore.clearRecentSearches()
     }
+    /* Clear a specific recent search from the store. */
+    const handleClearSingle = (idx: number) => {
+      inputFieldRef.value?.focusInput()
+      searchStore.clearRecentSearch(idx)
+    }
 
     return {
       searchBarEl,
@@ -247,6 +253,7 @@ export default defineComponent({
       handleKeydown,
       handleSelect,
       handleClear,
+      handleClearSingle,
     }
   },
 })
diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index 1e7b76d8b39..851be483b18 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -43,6 +43,15 @@
         @click="handleClick(idx)"
       >
         {{ entry }}
+        <VIconButton
+          variant="transparent-gray"
+          :icon-props="{ name: 'close-small' }"
+          size="small"
+          :label="$t('recentSearches.clearSingle.label', { entry }).toString()"
+          class="ms-auto group-focus-within/entry:opacity-100 group-hover/entry:opacity-100"
+          :class="{ 'opacity-0': bordered }"
+          @click.stop="handleClearSingle(idx)"
+        />
       </li>
       <!-- eslint-enable -->
     </ul>
@@ -62,6 +71,7 @@ import { defineComponent, type PropType } from "vue"
 import { defineEvent } from "~/types/emits"
 
 import VButton from "~/components/VButton.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 /**
  * List the recent searches of the user allowing them to go back to a previous
@@ -69,7 +79,7 @@ import VButton from "~/components/VButton.vue"
  */
 export default defineComponent({
   name: "VRecentSearches",
-  components: { VButton },
+  components: { VIconButton, VButton },
   props: {
     /**
      * the list of saved past searches
@@ -95,6 +105,7 @@ export default defineComponent({
   emits: {
     select: defineEvent<[number]>(),
     clear: defineEvent(),
+    "clear-single": defineEvent<[number]>(),
   },
   setup(_, { emit }) {
     const handleClick = (idx: number) => {
@@ -103,10 +114,14 @@ export default defineComponent({
     const handleClear = () => {
       emit("clear")
     }
+    const handleClearSingle = (idx: number) => {
+      emit("clear-single", idx)
+    }
 
     return {
       handleClick,
       handleClear,
+      handleClearSingle,
     }
   },
 })
diff --git a/frontend/src/components/VRecentSearches/meta/VRecentSearches.stories.mdx b/frontend/src/components/VRecentSearches/meta/VRecentSearches.stories.mdx
index a5a6c4a10a2..5a6c5d1ef67 100644
--- a/frontend/src/components/VRecentSearches/meta/VRecentSearches.stories.mdx
+++ b/frontend/src/components/VRecentSearches/meta/VRecentSearches.stories.mdx
@@ -18,6 +18,9 @@ import VRecentSearches from "~/components/VRecentSearches/VRecentSearches.vue"
     clear: {
       action: "clear",
     },
+    clearSingle: {
+      action: "clearSingle",
+    },
   }}
 />
 
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index 9cab04500bf..4c07c8328e5 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -744,6 +744,9 @@
       text: "Clear",
       label: "Clear recent searches",
     },
+    clearSingle: {
+      label: "Clear recent search '{entry}'",
+    },
     none: "No recent searches to show.",
     disclaimer: "Openverse does not store your recent searches, this information is kept locally in your browser.",
   },
diff --git a/frontend/src/stores/search.ts b/frontend/src/stores/search.ts
index 6c15534fb10..9c26eddfa28 100644
--- a/frontend/src/stores/search.ts
+++ b/frontend/src/stores/search.ts
@@ -331,6 +331,9 @@ export const useSearchStore = defineStore("search", {
     clearRecentSearches() {
       this.recentSearches = []
     },
+    clearRecentSearch(idx: number) {
+      this.recentSearches.splice(idx, 1)
+    },
     /**
      * Initial filters do not include the provider filters. We create the provider filters object
      * when we fetch the provider data on the Nuxt server initialization.

From 072fb4e4c69c49bedc2a3452b08d2689b6e712f2 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 14 Feb 2024 21:43:07 +0400
Subject: [PATCH 2/8] Update appearance to match mockups

---
 .../VRecentSearches/VRecentSearches.vue       | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index 851be483b18..e5a0381d960 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -1,15 +1,15 @@
 <template>
   <div
-    class="flex flex-col gap-1 rounded-sm border bg-white"
-    :class="bordered ? 'border-dark-charcoal-20 p-4 shadow-el-2' : 'border-tx'"
+    class="flex flex-col rounded-sm bg-white"
+    :class="bordered ? 'border border-dark-charcoal-20 p-2 shadow-el-2' : 'p-3'"
     data-testid="recent-searches"
   >
     <div
-      class="flex flex-row items-center justify-between py-2"
-      :class="{ 'pe-2': !bordered }"
+      class="flex h-10 flex-row items-center justify-between ps-3"
+      :class="{ 'pe-1': !bordered }"
     >
       <!-- Left margin to align with the text of recent searches. -->
-      <span class="category mx-2 my-1">
+      <span class="category">
         {{ $t("recentSearches.heading") }}
       </span>
       <VButton
@@ -37,29 +37,37 @@
         :id="`option-${idx}`"
         :key="idx"
         role="option"
-        class="description-regular my-1 rounded-sm border-1.5 p-2 hover:bg-dark-charcoal-10"
+        class="group/entry description-regular flex h-10 flex-row items-center gap-2 rounded-sm border-1.5 pe-1 ps-2 hover:bg-dark-charcoal-10"
         :class="idx === selectedIdx ? 'border-pink' : 'border-tx'"
         :aria-selected="idx === selectedIdx"
         @click="handleClick(idx)"
       >
+        <VIcon name="search" />
         {{ entry }}
         <VIconButton
           variant="transparent-gray"
           :icon-props="{ name: 'close-small' }"
           size="small"
           :label="$t('recentSearches.clearSingle.label', { entry }).toString()"
-          class="ms-auto group-focus-within/entry:opacity-100 group-hover/entry:opacity-100"
-          :class="{ 'opacity-0': bordered }"
+          class="ms-auto group-hover/entry:flex"
+          :class="{ hidden: bordered }"
           @click.stop="handleClearSingle(idx)"
         />
       </li>
       <!-- eslint-enable -->
     </ul>
-    <span v-else class="description-regular mx-2 my-3">
+    <span
+      v-else
+      class="description-regular flex h-10 flex-row items-center ps-3"
+      :class="{ 'pe-1': !bordered }"
+    >
       {{ $t("recentSearches.none") }}
     </span>
 
-    <span class="caption-regular mx-2 my-3 text-dark-charcoal-70">
+    <span
+      class="caption-regular mt-auto flex flex-row items-center px-3 pt-3 text-dark-charcoal-70"
+      :class="{ 'h-10': bordered }"
+    >
       {{ $t("recentSearches.disclaimer") }}
     </span>
   </div>
@@ -71,6 +79,7 @@ import { defineComponent, type PropType } from "vue"
 import { defineEvent } from "~/types/emits"
 
 import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 /**
@@ -79,7 +88,7 @@ import VIconButton from "~/components/VIconButton/VIconButton.vue"
  */
 export default defineComponent({
   name: "VRecentSearches",
-  components: { VIconButton, VButton },
+  components: { VIconButton, VIcon, VButton },
   props: {
     /**
      * the list of saved past searches

From fc15ab9e666d5b0be23aa51b04da9aae7c3fa180 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Thu, 15 Feb 2024 22:08:12 +0400
Subject: [PATCH 3/8] Fix conflict of height and padding in bordered mode

---
 frontend/src/components/VRecentSearches/VRecentSearches.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index e5a0381d960..14da183ffd7 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -64,10 +64,7 @@
       {{ $t("recentSearches.none") }}
     </span>
 
-    <span
-      class="caption-regular mt-auto flex flex-row items-center px-3 pt-3 text-dark-charcoal-70"
-      :class="{ 'h-10': bordered }"
-    >
+    <span class="caption-regular mt-auto p-3 text-dark-charcoal-70">
       {{ $t("recentSearches.disclaimer") }}
     </span>
   </div>

From a2677cc0cdf15aadc6b0c480a41f3b0e9e5ca9b3 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Fri, 16 Feb 2024 16:28:03 +0400
Subject: [PATCH 4/8] Introduce a new Tailwind constant for 1.4 line height

---
 frontend/tailwind.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index ee79136a8ad..8f2e8274ddb 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -212,6 +212,7 @@ export default {
         relaxed: "1.8",
         large: "1.7",
         normal: "1.5",
+        close: "1.4",
         snug: "1.3",
         tight: "1.2",
         none: "1.0",

From e60982f19b9c3e65bca5771fd692d3b8cce11a38 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Fri, 16 Feb 2024 16:36:32 +0400
Subject: [PATCH 5/8] Update text style and line height to match mockups

---
 frontend/src/components/VRecentSearches/VRecentSearches.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index 14da183ffd7..34850208247 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -37,7 +37,7 @@
         :id="`option-${idx}`"
         :key="idx"
         role="option"
-        class="group/entry description-regular flex h-10 flex-row items-center gap-2 rounded-sm border-1.5 pe-1 ps-2 hover:bg-dark-charcoal-10"
+        class="group/entry label-regular flex h-10 flex-row items-center gap-2 rounded-sm border-1.5 pe-1 ps-2 hover:bg-dark-charcoal-10"
         :class="idx === selectedIdx ? 'border-pink' : 'border-tx'"
         :aria-selected="idx === selectedIdx"
         @click="handleClick(idx)"
@@ -64,7 +64,9 @@
       {{ $t("recentSearches.none") }}
     </span>
 
-    <span class="caption-regular mt-auto p-3 text-dark-charcoal-70">
+    <span
+      class="mt-auto p-3 text-sm leading-close text-dark-charcoal-70 lg:leading-snug"
+    >
       {{ $t("recentSearches.disclaimer") }}
     </span>
   </div>

From 5e0fd66bc45d84103c9a9d8bb7c77a32c6644c17 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Fri, 16 Feb 2024 16:37:51 +0400
Subject: [PATCH 6/8] Fix misalignment due to padding in the mobile view

---
 frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue | 2 +-
 frontend/src/components/VModal/VInputModal.vue                  | 2 +-
 frontend/src/components/VRecentSearches/VRecentSearches.vue     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 69414ab266e..64a62402473 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -10,7 +10,7 @@
       aria-label="inputmodal"
       @close="deactivate"
     >
-      <div class="flex w-full" :class="{ 'px-2': isRecentSearchesModalOpen }">
+      <div class="flex w-full" :class="{ 'px-3': isRecentSearchesModalOpen }">
         <!-- Form action is a fallback for when JavaScript is disabled. -->
         <form
           action="/search"
diff --git a/frontend/src/components/VModal/VInputModal.vue b/frontend/src/components/VModal/VInputModal.vue
index 3f64834c725..5896dc805f8 100644
--- a/frontend/src/components/VModal/VInputModal.vue
+++ b/frontend/src/components/VModal/VInputModal.vue
@@ -10,7 +10,7 @@
         <div
           ref="dialogRef"
           v-bind="$attrs"
-          class="flex w-full flex-col px-4 py-4"
+          class="flex w-full flex-col px-3 py-4"
           role="dialog"
           aria-modal="true"
           @keydown="onKeyDown"
diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index 34850208247..19a65d279cc 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex flex-col rounded-sm bg-white"
-    :class="bordered ? 'border border-dark-charcoal-20 p-2 shadow-el-2' : 'p-3'"
+    :class="{ 'border border-dark-charcoal-20 shadow-el-2': bordered }"
     data-testid="recent-searches"
   >
     <div

From 89eec45394c45d5ce7ed95fc3f05269aa211a552 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Feb 2024 18:26:10 +0400
Subject: [PATCH 7/8] Add spacing for desktop dropdown UI

---
 frontend/src/components/VRecentSearches/VRecentSearches.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index 19a65d279cc..5abcff2df87 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex flex-col rounded-sm bg-white"
-    :class="{ 'border border-dark-charcoal-20 shadow-el-2': bordered }"
+    :class="{ 'border border-dark-charcoal-20 p-2 shadow-el-2': bordered }"
     data-testid="recent-searches"
   >
     <div

From f5c7db41d9ab9da44f8b44aff738cd8a1d1ef9f7 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Thu, 7 Mar 2024 13:04:06 +0800
Subject: [PATCH 8/8] Support removal of single recent search in mobile UI

---
 .../components/VHeader/VHeaderMobile/VHeaderMobile.vue   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 64a62402473..a6d9bedb62d 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -104,6 +104,7 @@
           class="mt-4"
           @select="handleSelect"
           @clear="handleClear"
+          @clear-single="handleClearSingle"
         />
       </ClientOnly>
     </VInputModal>
@@ -278,6 +279,13 @@ export default defineComponent({
         ensureFocus(searchInputRef.value)
       }
     }
+    /* Clear a specific recent search from the store. */
+    const handleClearSingle = (idx: number) => {
+      searchStore.clearRecentSearch(idx)
+      if (searchInputRef.value) {
+        ensureFocus(searchInputRef.value)
+      }
+    }
 
     const showRecentSearches = computed(
       () => isRecentSearchesModalOpen.value && entries.value.length > 0
@@ -330,6 +338,7 @@ export default defineComponent({
       handleKeydown,
       handleSelect,
       handleClear,
+      handleClearSingle,
     }
   },
 })