feat: custom preset save/load — let users name and save their own export presets

[magic-peach]

Power users who export to the same non-standard settings repeatedly (e.g. 1080x1350 at CRF 20 in WebM) have to re-enter these values every time. Saving custom presets to localStorage would make Reframe stickier for regular users.

What to build

Allow users to save the current EditRecipe as a named custom preset:

1. A "Save preset" button near the preset selector
2. A text input modal to name the preset (e.g. "Instagram portrait 1080p")
3. The saved preset appears in the preset dropdown under a "Custom" section
4. A delete button (x) on each custom preset removes it
5. Custom presets stored in localStorage as a JSON array

Files to modify

• src/components/PresetSelector.tsx — add custom preset section + save button
• src/lib/presets.ts — separate built-in from custom presets
• src/hooks/useVideoEditor.ts — add save/delete/load custom preset actions

Acceptance criteria

• Users can save the current settings as a named custom preset
• Custom presets appear in the preset dropdown below built-in presets
• Custom presets persist across page reloads via localStorage
• Users can delete individual custom presets
• Selecting a custom preset restores all saved settings correctly
• Max 10 custom presets with a helpful message if the limit is reached

---

Screen Recording Required

Your PR for this issue must include a screen recording showing the feature working on your local machine (bun run dev → http://localhost:3000). PRs without a recording will not be merged.

See CONTRIBUTING.md for how to record.

[github-actions]

👋 Thanks for opening an issue, @magic-peach!

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!

[github-actions]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[Pranav-IIITM]

Hi, I am a GSSoC 2026 contributor and would like to work on this issue.

/assign under GSSoC

[github-actions]

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