Update recent searches to match updated mockups

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,
     }
   },
 })

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,20 +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-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>
@@ -62,14 +79,16 @@ 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"
 
 /**
  * List the recent searches of the user allowing them to go back to a previous
  * search. These searches are saved locally and never shared with the server.
  */
 export default defineComponent({
   name: "VRecentSearches",
-  components: { VButton },
+  components: { VIconButton, VIcon, VButton },
   props: {
     /**
      * the list of saved past searches
@@ -95,6 +114,7 @@ export default defineComponent({
   emits: {
     select: defineEvent<[number]>(),
     clear: defineEvent(),
+    "clear-single": defineEvent<[number]>(),
   },
   setup(_, { emit }) {
     const handleClick = (idx: number) => {
@@ -103,10 +123,14 @@ export default defineComponent({
     const handleClear = () => {
       emit("clear")
     }
+    const handleClearSingle = (idx: number) => {
+      emit("clear-single", idx)
+    }
 
     return {
       handleClick,
       handleClear,
+      handleClearSingle,
     }
   },
 })

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",
+    },
   }}
 />
 

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.",
   },

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.