AOSSIE-Org / AOSSIE-Org/PictoPy

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

Aberta
#627 4 comentários 0 reações 1 responsável Reivindicada por @ParikhShreya Ver no GitHub
enhancement frontend
Linguagem predominante
Python
Estrelas
283
Forks
679
Merge médio
7d 2h
PRs com merge (30d)
3

Descrição

## 🎤 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** (`` 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

Image

### Record

- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue

### Checklist before Submitting.

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

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.