Anujcodecraft / Anujcodecraft/notes-online

## ✨ Feature Request: Add Visual Guidance & Toast Warnings for Filter Dependencies

Ouverte
#24 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
enhancement good first issue ReactJs UI
Langage dominant
JavaScript
Étoiles
7
Forks
7
Métriques de merge des PR
Aucune PR mergée en 30 j

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

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.