Anujcodecraft / Anujcodecraft/notes-online

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

Open
#24 0 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue ReactJs UI
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.