Anujcodecraft / Anujcodecraft/notes-online

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

オープン
#24 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement good first issue ReactJs UI
主要言語
JavaScript
スター
7
フォーク
7
PR マージ指標
30日以内にマージされた PR はありません

説明

### 📋 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

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。