feat(ui): enhance drag-and-drop upload feedback with animated icon an…

[NaitikVerma6776]

🔗 Related Issue

Closes #557

---

📝 What does this PR do?

The core drag-and-drop highlight feature was already implemented in DocumentSidebar.tsx via react-dropzone's isDragActive state (border highlight, background change, "Drop files here" message in 4 languages, auto-reset on drag leave/drop).

This PR adds extra visual and accessibility polish on top of the existing feature:

Improvements:

• Icon swaps to an animated bouncing UploadCloud icon during drag (vs static Upload icon)
• "Drop files here" text turns primary color + bold during drag for stronger visual feedback
• Added aria-live="polite" so screen readers announce the drop message change

---

🗂️ Type of Change

• 🎨 UI / styling change

---

🧪 How was this tested?

• Ran the frontend locally (npm run dev inside frontend/)

Verified npm run lint (0 errors) and npm run build pass successfully.

---

📸 Screenshots (if UI change)

N/A — toolbar UI improvement, visible when dragging a file over the upload area

---

⚠️ Anything to flag for reviewers?

• Core drag-and-drop highlight/message functionality already existed and is untouched
• Only additive styling and accessibility improvements — no changes to onDrop, validation, or upload logic
• Existing upload functionality continues to work correctly

---

✅ Self-Review Checklist

• My branch is based on dev, not main
• I have not added any secrets / API keys
• I have not modified main branch or any HuggingFace deployment config
• My code follows the existing style (no unnecessary formatting changes)
• I have updated relevant docs / comments if needed

[NaitikVerma6776]

📋 PR Checklist

---

🔗 Related Issue

Closes #557

---

📝 What does this PR do?

The core drag-and-drop highlight feature was already implemented in DocumentSidebar.tsx via react-dropzone's isDragActive state (border highlight, background change, "Drop files here" message in 4 languages, auto-reset on drag leave/drop).

This PR adds extra visual and accessibility polish on top of the existing feature:

Improvements:

• Icon swaps to an animated bouncing UploadCloud icon during drag (vs static Upload icon)
• "Drop files here" text turns primary color + bold during drag for stronger visual feedback
• Added aria-live="polite" so screen readers announce the drop message change

---

🗂️ Type of Change

• 🎨 UI / styling change

---

🧪 How was this tested?

• Ran the frontend locally (npm run dev inside frontend/)

Verified npm run lint (0 errors) and npm run build pass successfully.

---

📸 Screenshots (if UI change)

N/A — toolbar UI improvement, visible when dragging a file over the upload area

---

⚠️ Anything to flag for reviewers?

• Core drag-and-drop highlight/message functionality already existed and is untouched
• Only additive styling and accessibility improvements — no changes to onDrop, validation, or upload logic
• Existing upload functionality continues to work correctly

---

✅ Self-Review Checklist

• My branch is based on dev, not main
• I have not added any secrets / API keys
• I have not modified main branch or any HuggingFace deployment config
• My code follows the existing style (no unnecessary formatting changes)
• I have updated relevant docs / comments if needed