feat: initialize Convert UI - browser-based file conversion app

- Add Next.js 16 with Turbopack and React 19
- Add Tailwind CSS 4 with OKLCH color system
- Implement FFmpeg.wasm for video/audio conversion
- Implement ImageMagick WASM for image conversion
- Add file upload with drag-and-drop
- Add format selector with fuzzy search
- Add conversion preview and download
- Add conversion history with localStorage
- Add dark/light theme support
- Support 22+ file formats across video, audio, and images

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-17 10:44:49 +01:00
commit 1771ca42eb
32 changed files with 7098 additions and 0 deletions

69
app/page.tsx Normal file
View File

@@ -0,0 +1,69 @@
'use client';
import { FileConverter } from '@/components/converter/FileConverter';
import { ThemeToggle } from '@/components/layout/ThemeToggle';
import { ToastProvider } from '@/components/ui/Toast';
export default function Home() {
return (
<ToastProvider>
<div className="min-h-screen bg-background">
{/* Header */}
<header className="border-b border-border">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-foreground">Convert UI</h1>
<p className="text-sm text-muted-foreground">
File conversion in your browser
</p>
</div>
<ThemeToggle />
</div>
</header>
{/* Main content */}
<main className="container mx-auto px-4 py-8 md:py-16">
<FileConverter />
</main>
{/* Footer */}
<footer className="border-t border-border mt-16">
<div className="container mx-auto px-4 py-6 text-center text-sm text-muted-foreground">
<p>
Powered by{' '}
<a
href="https://github.com/ffmpegwasm/ffmpeg.wasm"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline"
>
FFmpeg.wasm
</a>
,{' '}
<a
href="https://github.com/dlemstra/magick-wasm"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline"
>
ImageMagick WASM
</a>
{' '}&{' '}
<a
href="https://nextjs.org"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline"
>
Next.js 16
</a>
</p>
<p className="mt-2">
All conversions happen locally in your browser. No files are uploaded to any server.
</p>
</div>
</footer>
</div>
</ToastProvider>
);
}