feat: enhanced notes app with theme toggle, UI/UX improvements, and new productivity features

[Pramod-Munnoli]

📝 Enhanced Notes App — Premium Feature Upgrade

This PR brings a major UI/UX and functional enhancement to the Notes App, including a refined theme toggle, modern visual design, and advanced productivity features.

---

✅ Acceptance Criteria (Already Implemented)

• 🌗 Theme Toggle Button — Implemented with SVG icons (🌞 / 🌙)
• 💾 LocalStorage Integration — Saves and restores theme preference
• 🧩 Consistent Styling — Uniform light/dark themes across all components
• 🎞️ Smooth Transitions — 0.4s fade animation
• ♿ Accessibility — ARIA labels, proper contrast ratios, and keyboard navigation

---

🚀 New Features & Enhancements Added

💡 UI/UX Improvements

• 🗑️ Custom Delete Confirmation Modal — Replaced browser alert() with a beautiful modal that includes:

  • Note title in the message (e.g., “Are you sure you want to delete Meeting Notes?”)
  • Smooth fade-in/fade-out animation
  • Styled confirm (Delete) and cancel (Keep) buttons

• 📌 Pin Notes — Keep important notes at the top with a 📍 toggle

• 🔍 Live Search — Real-time search across title, content, and tags

• 🏷️ Tag Filtering — Filter notes by tag/category

• ✍️ Character Counters — For title (100) and content (1000)

• ⏳ Loading State — “Adding…” animation during note creation

• ✅ Success Animation — Scale effect on successful add

• 🎯 Auto-Focus — Focuses title field automatically

---

🎨 Visual & Design Upgrades

• 🪟 Glassmorphism Design — Blur + transparency on panels
• 🌈 Hover Effects — Smooth scale + shadow on hover
• 🧭 Gradient Scrollbar — Matches app color scheme
• 💙 Modern Color Palette — Blue/orange gradient replacing purple/amber
• 📱 Responsive Layout — Fully mobile-friendly

---

⚙️ Technical Enhancements

• 🧮 Unique IDs — Uses crypto.randomUUID()
• 💾 Instant Save — Notes auto-saved on create/delete
• 🔐 XSS Protection — Escapes all user inputs
• 🏷️ Dynamic Tag Management — Tags auto-created from notes
• 🕒 Debounced Search — 300ms delay for performance
• ⌨️ Keyboard Shortcuts:
  • Ctrl + / → Focus search
  • Ctrl + K → Clear form
  • Ctrl + Shift + T → Toggle theme
  • Esc → Clear search or close modal

---

🖼️ Screenshots

Before (Old UI)	After (Enhanced UI)

🗑️ Delete Confirmation Modal

Before	After

---

🔗 Related Issue

Related to #100 — “Add Light & Dark Theme Support to Notes App”
Closes #100

---

🧠 Summary

This PR not only fulfills the base theme toggle requirement but modernizes the entire app — making it more polished, user-friendly, and visually appealing.

---

🙏 Request

If this PR meets the project guidelines, kindly mark it as
hacktoberfest-accepted ✅

[vercel]

@Pramod-Munnoli is attempting to deploy a commit to the hrishikesh-dalal's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Pramod-Munnoli]

Hi @venisha-kalola 👋

Thank you for merging my PR! 🙌
Could you please add the hacktoberfest-accepted label so that it’s counted towards Hacktoberfest? 😊

Really appreciate your time and support!