[BUG]: Keyboard Shortcuts Button is Non-Functional — Add Working Shortcuts Panel

[shivani11jadhav]

🐛 Bug Description

The Reframe UI displays a ⌨ Keyboard Shortcuts button clearly visible
in the main interface, but clicking it does nothing — no modal opens,
no panel appears, no tooltip shows. The button is completely non-functional
in the current live deployment.

Steps to Reproduce:

1. Open https://reframe-lilac.vercel.app
2. Look for the ⌨ Keyboard Shortcuts button in the UI
3. Click it
4. ❌ Nothing happens

Expected: A modal/panel listing all available keyboard shortcuts
Actual: No response — dead button

---

🧠 Proposed Fix + Feature

Implement a fully working Keyboard Shortcuts Panel that:

1. Modal/Drawer UI: Opens a clean overlay when the button is clicked
   showing all shortcuts in a two-column layout (Action | Shortcut Key)

2. Suggested Shortcuts to Document & Implement:

   Action	Shortcut
   Open video file	Ctrl/Cmd + O
   Export video	Ctrl/Cmd + E
   Reset all settings	Ctrl/Cmd + R
   Toggle fit/fill mode	F
   Close modal	Escape

3. Keyboard Event Listeners: Wire up keydown event handlers in JS
   for each shortcut so they actually work — not just documented

4. Close on Escape / Outside Click: Standard modal UX behavior

---

🎬 Expected Behavior

• User clicks ⌨ Keyboard Shortcuts → clean modal appears instantly
• Modal lists all shortcuts clearly
• Pressing Escape closes the modal
• All listed shortcuts actually function when pressed

---

🔧 Evidence

The button is visible in the live UI at:
https://reframe-lilac.vercel.app
but has no onClick handler or associated modal component implemented.

---

🚧 Working Status

I have reviewed the codebase and can implement both the modal UI and
the keyboard event listeners cleanly. Please assign this to me under
GSSoC 2026! 🚀

Labels: bug feature enhancement good first issue

[github-actions]

👋 Thanks for opening an issue, @shivani11jadhav!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[shivani11jadhav]

/assign

[github-actions]

Hey @shivani11jadhav, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.