Update recent searches to match updated mockups

[dhruvkb]

Fixes

Fixes #3194 by @fcoveram

Description

This PR

• adds support for removing individual queries from recent searches
• updates the UI to match the new mockups

There is a bit of a problem where the recent searches cannot individually be cleared using the keyboard because the keyboard navigation inside the popup does not cover them, but I feel that is acceptable because all recent searches can still be cleared using the keyboard and there is no navigational order that would feel natural for iterating over the popup suggestions as well as their × icons.

Testing Instructions

1. Check out the PR and run the dev server.
2. Search for some terms.
3. Try the new feature of removing individual queries from history.
4. Compare the UI against the mockups in Figma.

Checklist

• My pull request has a descriptive title (not a vague title likeUpdate index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.
• I ran the DAG documentation generator (if applicable).

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[github-actions]

Full-stack documentation: https://docs.openverse.org/_preview/3796

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

[fcoveram]

I only noticed one improvement on the popover version, but on full-screen one there are spacing differences.

[AetherUnbound]

LGTM and works as expected locally!

[fcoveram]

Regarding components, I noticed that text style in Popover item is incorrect. It should be "label regular."

In that same line, the disclaimer text is based on label regular but with line-height of 1.4 to not look tight on mobile

Small breakpoints (xs, sm, md)

This view is what needs more spacing improvement. The alignment of texts and icons is different and disclaimer aligned at the bottom is key to keep the item list clean when increases. Here is a comparison of what's on the design and what I see in dev.

Mockup	Dev

[fcoveram]

I added spec notes for the small breakpoints view in one of the XS mockups.

[dhruvkb]

It's not supported by browsers to place an element that stays above the keyboard (without resorting to hacks) because the keyboard is laid on top of the viewport instead of shrinking it. If we do move the disclaimer to the bottom of the viewport, the keyboard will cover it when opened.

Keyboard closed	Keyboard open

I tested for this behaviour in Safari on iOS and Chrome on Android and the height of the viewport remains constant whether the keyboard is open or not.

[fcoveram]

Oh I see. Then, placing the disclaimer below items is completely fine. I will update the mockups for documentation purposes.

[dhruvkb]

With 89eec45 fixing the only discrepancy between the mockups and the UI that I could find, I think this PR is good to review. Thanks for your patience @fcoveram and for pointing out all the differences between the mockups and the UI!

[openverse-bot]

Based on the medium urgency of this PR, the following reviewers are being gently reminded to review this PR:

@obulat
@fcoveram
This reminder is being automatically generated due to the urgency configuration.

Excluding weekend¹ days, this PR was ready for review 4 day(s) ago. PRs labelled with medium urgency are expected to be reviewed within 4 weekday(s)².

@dhruvkb, if this PR is not ready for a review, please draft it to prevent reviewers from getting further unnecessary pings.

Footnotes

1. Specifically, Saturday and Sunday. ↩

2. For the purpose of these reminders we treat Monday - Friday as weekdays. Please note that the operation that generates these reminders runs at midnight UTC on Monday - Friday. This means that depending on your timezone, you may be pinged outside of the expected range. ↩

[obulat]

The changes look awesome!
The one change that should be added is the clear-single action for mobile:

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

[fcoveram]

It looks great ✨

[obulat]

LGTM!