Anujcodecraft / Anujcodecraft/notes-online
## ✨ Feature Request: Add Visual Guidance & Toast Warnings for Filter Dependencies
- Dominant language
- JavaScript
- Stars
- 7
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
### 📋 Description
Currently, `Branch` and `Subject` filters are dependent on `Year` and `Branch` selections respectively — and users **cannot select them until the prerequisite is chosen**, which is good.
**Make sure to implement this in both notes and pyqs page**
However, the UI doesn't clearly indicate that the dropdowns are **disabled for a reason**, and users may not understand what to do next.
---
### ✅ Expected Behavior
- Filters that depend on other selections (`Branch`, `Subject`) should:
- Remain **visible and clickable**
- Show a **toast warning** if clicked too early
- Appear **visually dimmed** or **gray-colored**
- Optionally include a **tooltip or helper text** (e.g., "Select year first")
---
### 🔁 Flow Rules
1. If user tries to select **Branch** without selecting **Year**:
- Show a **toast**: `"Please select a year first"`
- Visually indicate `Branch` dropdown is disabled (gray border or text)
- Allow click (for feedback), but no action taken
2. If user tries to select **Subject** without selecting **Branch**:
- Show a **toast**: `"Please select a branch first"`
- Same visual and feedback pattern
3. Once the required filter is selected:
- Remove gray styling
- Enable actual selection
---
### 🔔 Toast Messages
- `"Please select a year first"` → On clicking Branch too early
- `"Please select a branch first"` → On clicking Subject too early
---
### 🎨 Suggested UI Enhancements
- Use Tailwind to apply:
- `opacity-50 cursor-not-allowed` for disabled look
- `hover:tooltip` or `Select year first`
- Tooltip on hover or info icon using `title=""` or UI library
---
### 📂 Affected Areas
- Filter component logic (e.g., `FilterBar.jsx`, `FilterDropdown.jsx`)
- Possibly shared state from Context or useState chain
---
### 🏷️ Labels
`enhancement` `UX` `frontend` `good first issue`
---
### 🧑💻 Ideal For
- Frontend contributors with React + Tailwind experience
- Anyone looking to improve guidance & usability for filter UI
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.