Add Recent Searched Words to Default View in Search Dialog

[babblebey]

We currently have a default view in our search dialog, which is displayed when the user opens the search without any input. To improve user experience, we would like to enhance this functionality by showing recently searched words if there have been any recent searches. This enhancement is inspired by the implementation found on the TailwindCSS documentation site.

Current Implementation

When a user opens the search dialog, a default view is displayed regardless of any previous searches. Below is a screenshot of our current default search dialog:

Desired Implementation

We would like to display recently searched words in place of the current default view when there have been recent searches. This change aims to make it easier for users to quickly access their recent searches.

An example of the desired implementation can be seen on the TailwindCSS documentation site. Below is a screenshot of their search dialog displaying recent searches:

Implementation Details

The enhancement will be implemented in the components/islands/search.jsx file. The steps to achieve this are as follows:

1. Utilize Stored Recent Searches: Use the existing jargons.dev:recent_searches object from localStorage to fetch recent search terms.
2. Update Default View: Modify the search dialog component to check for recent searches and display them instead of the current default view.
3. Display Logic: Ensure that the recent searches are displayed in a user-friendly manner, similar to the TailwindCSS documentation example.

Acceptance Criteria

• Recent searches are displayed in the search dialog when the user opens it and there have been recent searches.
• If no recent searches are available, the current default view is displayed.
• The implementation is done in the components/islands/search.jsx file.
• The functionality is tested and verified for consistent behavior.

Additional Information

• Feel free to ask for more details or clarifications if needed. This enhancement aims to improve the overall usability and efficiency of our search functionality.