jargonsdev / jargonsdev/jargons.dev

Add Recent Searched Words to Default View in Search Dialog

Open
#67 2 comments 0 reactions 0 assignees View on GitHub
:arrow_upper_right: medium priority :sparkles: enhancement
Dominant language
MDX
Stars
56
Forks
45
PR merge metrics
No merged PRs in 30d

Description

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:

![image](https://github.com/devjargons/jargons.dev/assets/25631971/8b52c1b7-705e-4605-b5b2-dc4af9882ce1)

#### 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:

![image](https://github.com/devjargons/jargons.dev/assets/25631971/15146d81-8f25-4b43-9a40-abc99f7764c3)

#### 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.

Contributor guide

Open the contributing guide

Research direction

Start in components/islands/search.jsx by tracing the existing default view and how the jargon.dev:recent_searches localStorage object is handled. Update the open-without-input state to show recent terms when available, retain the current default view otherwise, and verify both behaviors in the search dialog.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, tailwindcss
Domain
frontend, search, web-dev
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.