Feat: Add Smart Search Bar with Voice Search Button for Quick Navigation

[ParikhShreya]

🎤 Add Smart Search Bar with Voice Search Button for Quick Navigation

Overview

Currently, PictoPy users manually browse through the sidebar to access features like AI Tagging, Videos, or Albums.
Adding a Smart Search Bar with a small microphone button will make it easier for users to quickly find and open sections or search their uploaded images.

This enhancement will improve accessibility, enhance user experience, and give a modern, interactive touch to the PictoPy interface.

Goals

• Simplify navigation across different pages.
• Allow users to search images, tags, or pages directly.
• Provide the foundation for future voice-based controls.

Feature Details

🔹 Smart Search Bar

• Positioned at the top navigation bar or header area.
• Accepts text input to search for:
  • Image names or tags
  • Pages like “AI Tagging”, “Videos”, “Albums”, etc.
• Optionally displays dropdown results.

🔹 Voice Search Button

• Small microphone icon (<FaMicrophone /> or Lucide icon) inside or next to the search bar.
• On click → activates basic browser speech recognition (SpeechRecognition API).
• Converts the voice input into text within the search field (no heavy AI processing).

Implementation Plan

1. Create a new SearchBar component.
2. Add an input field with a placeholder like "Search images or pages...".
3. Include a microphone icon button next to the field.
4. Implement simple voice-to-text using the Web Speech API.

✅ Expected Outcome

• Clean and fast navigation experience.
• Convenient for users who prefer voice interaction.
• Visually modern UI improvement that fits PictoPy’s theme.
• Provides a base for future smart/AI search features.

Next Steps

If approved, I will open a PR that:

• Adds the new Search Bar component.
• Includes a microphone button for basic speech input.
• Maintains consistency with existing PictoPy UI and design standards.

Add ScreenShots

Record

• I agree to follow this project's Code of Conduct
• I want to work on this issue

Checklist before Submitting.

• Have you updated docs for it?.
• Have you added unit tests?.
• Have you made sure unit tests pass?
• Have you made sure code formatting is correct?
• Does it contain any style related issues?

[ParikhShreya]

Hello @rahulharpal1603 Sir,
I would really like to work on this issue. I’m also open to any feedback or suggestions you may have to improve the idea further.
Could you please assign this issue to me?

[Codersintu]

Hi! 👋
I would like to work on this issue.
I have experience with React, TypeScript and implementing browser APIs like Web Speech API, so I can build the Smart Search Bar and voice search button on the frontend.
This issue looks suitable for my current skill set.

Could you please assign it to me? 😊

[rahulharpal1603]

You can work on this once this PR is merged: #579 is merged.

[ParikhShreya]

OK Sir @rahulharpal1603 , do you have any suggestions on this issue? I’d like to know if there’s anything I can improve.