feat: add high-density emoji overlay panel

[Vagventure]

Description

This Pull Request introduces a brand-new, dedicated "Elements" section to the configuration sidebar panel, focusing initially on an interactive Emoji Overlay configuration system.

To optimize performance and match standard mobile keypad user experiences, the layout drops legacy category dividers and flattens all assets into a continuous, high-density, center-aligned viewport grid.

Key Changes

• Mobile Keypad Architecture: Re-engineered the element layout view from a loose grid to a highly packed flex-wrap framework (w-8 h-8 cells), maximizing available viewport space.
• Unified Flattened Dataset: Mapped out 105 official Unicode yellow-faced emoticons into an automated data stream, utilizing an external CDN on-demand pipeline to guarantee a zero-kilobyte repository bundle bloat impact.
• Custom Viewport Scrollbar Styling: Injected local, scoped structural CSS rules to ensure the viewport scroll thumb blends elegantly into the dark-themed user interface without breaking repository global rules.
• Core Processing Sync: Wired layout coordinate percentages into the client-side WebAssembly video processing pipeline to guarantee smooth graphic placement on output video files.

Note: This PR deliberately isolates the foundational layout grid and core emoji stickers layer. Upcoming intermediate asset extensions (custom static illustration stickers and looping animated reaction GIFs) will be raised as separate, standalone feature requests to preserve strict modularity.

Related Issue

Closes #1039

Type of Contribution

• Bug fix
• New feature
• Documentation update
• Refactor
• GSSoC contribution

Participant Info

• GitHub username: Vagventure
• Contribution level (Beginner/Intermediate/Advanced): Advanced

Screen Recording

Screen.Recording.2026-05-24.132842.mp4

Checklist

• I have read the contribution guidelines
• My changes follow the project structure
• I have tested my changes in Chrome, Firefox, and Safari
• bun run lint passes (no ESLint errors)
• bunx tsc --noEmit passes (no TypeScript errors)
• New interactive elements have aria-label / accessible names
• No console.log statements left in
• This PR is related to a valid issue
• Screen recording attached above (required for UI/feature/design changes)

[vercel]

@Vagventure is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

✅ PR Format Check Passed — @Vagventure

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[github-actions]

👋 Thanks for your PR, @Vagventure!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉