feat: add visual drag-and-drop zone for file upload and favicon fallback

[dhruv-jani-0808]

Description

Adds a clean, interactive visual drag-and-drop zone directly over the code editor, and adds a .ico favicon fallback for broader browser compatibility.

File Upload / Drag-and-Drop:

• A glassmorphic overlay with a bouncing cloud-upload icon and "Drop your file here" text appears when a file is dragged over the code editor area
• Blue dashed border + outline highlights the editor on dragenter
• Overlay smoothly fades out on dragleave or drop (uses a dragCounter to prevent flicker from nested child elements)
• dropEffect = 'copy' cursor hint shown while dragging
• On drop: file is read via the existing FileReader API, auto-populates the editor, auto-switches the language tab, and shows a success toast
• Supports .py, .js, .ts, .java, .cpp, .zip and more
• Works in both dark and light theme

Favicon:

• Added .ico fallback link (public/favicon.ico) alongside the existing assets/icon.svg link for older browsers and Windows pinned tabs — no new image generated, uses the existing QyverixAI hexagon icon

Related Issue

Fixes #289

Type of change

• Bug fix
• New feature / enhancement
• Documentation update
• Test addition
• Refactor

Checklist

• I have read CONTRIBUTING.md
• My branch is up to date with main
• I have run pytest -v and all tests pass
• I have not introduced duplicate issues or features
• My PR title follows the format: feat/fix/docs/test: short description
• I have added tests for new features (Level 2 and 3 issues)
• No hardcoded secrets or API keys in my code
• This PR is linked to a GSSoC 2026 issue

Screenshots (if frontend change)

BEFORE :

AFTER :

BEFORE :

AFTER :

---

Auto language detection proof :
https://github.com/user-attachments/assets/b080ff0c-6363-4d34-85f8-52aaf9589fab

Test evidence

This is a frontend-only change (frontend/index.html). No backend logic was modified, so pytest is not applicable. Tested

manually in browser:
✅ Dragged .py, .js, .ts, .java, .cpp files onto the editor — overlay appeared, file loaded correctly
✅ Language tab auto-switched based on file extension
✅ Overlay dismissed cleanly on dragleave and drop
✅ Favicon icon visible in browser tab (both SVG and .ico)
✅ Works in both dark and light mode

pytest -v
# No backend changes — pytest not required for this PR
# Frontend tested manually in Chrome/Edge

[dhruv-jani-0808]

Hi @imDarshanGK 👋

I've submitted this PR to address the issue. Here's a quick summary of what's implemented:

• Visual Drag-and-Drop Zone: A glassmorphic overlay with a bouncing cloud-upload icon and "Drop your file here" prompt appears over the code editor on dragenter, uses a dragCounter to prevent flicker from nested child events, and dismisses cleanly on dragleave/drop.
• Favicon fallback: Added .ico fallback alongside the existing icon.svg for older browsers and Windows pinned tabs.
• Tested locally in Chrome — drag, drop, auto-load, toast, and language tab switch all work correctly. Screenshots attached.

Would love a review when you get the chance! 🙏

[imDarshanGK]

@dhruv-jani-0808 update your branch with the latest main changes

[dhruv-jani-0808]

hey @imDarshanGK
i've updated my branch with the latest changes
please review it, thanks!

[imDarshanGK]

@dhruv-jani-0808 update your branch with the latest main changes

[dhruv-jani-0808]

@imDarshanGK i have updated my main branch with latest main changes
please review it! thanks!

[imDarshanGK]

@dhruv-jani-0808 update your branch with the latest main changes

[dhruv-jani-0808]

hey @imDarshanGK
i have updated my main branch with latest main changes
please review it! thanks!

[imDarshanGK]

@dhruv-jani-0808 update the branch with the latest main changes

[dhruv-jani-0808]

hey @imDarshanGK

updated!
please review it!