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

[Jatin917]

📋 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 <span className="text-xs text-gray-500">Select year first</span>
• 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