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>

components/converter/FileUpload.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import * as React from 'react';
+import { Upload, X } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { formatFileSize } from '@/lib/utils/fileUtils';
+import { Button } from '@/components/ui/Button';
+
+export interface FileUploadProps {
+  onFileSelect: (file: File) => void;
+  onFileRemove: () => void;
+  selectedFile?: File;
+  accept?: string;
+  maxSizeMB?: number;
+  disabled?: boolean;
+}
+
+export function FileUpload({
+  onFileSelect,
+  onFileRemove,
+  selectedFile,
+  accept,
+  maxSizeMB = 500,
+  disabled = false,
+}: FileUploadProps) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    if (disabled) return;
+
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      handleFile(files[0]);
+    }
+  };
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      handleFile(files[0]);
+    }
+  };
+
+  const handleFile = (file: File) => {
+    // Check file size
+    const maxBytes = maxSizeMB * 1024 * 1024;
+    if (file.size > maxBytes) {
+      alert(`File size exceeds ${maxSizeMB}MB limit. Please choose a smaller file.`);
+      return;
+    }
+
+    onFileSelect(file);
+  };
+
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  const handleRemove = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onFileRemove();
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <input
+        ref={fileInputRef}
+        type="file"
+        className="hidden"
+        accept={accept}
+        onChange={handleFileInput}
+        disabled={disabled}
+      />
+
+      {selectedFile ? (
+        <div className="border-2 border-border rounded-lg p-6 bg-card">
+          <div className="flex items-center justify-between">
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground truncate">{selectedFile.name}</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {formatFileSize(selectedFile.size)}
+              </p>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleRemove}
+              disabled={disabled}
+              className="ml-4"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Remove file</span>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div
+          onClick={handleClick}
+          onDragEnter={handleDragEnter}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          className={cn(
+            'border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors',
+            'hover:border-primary hover:bg-primary/5',
+            {
+              'border-primary bg-primary/10': isDragging,
+              'border-border bg-background': !isDragging,
+              'opacity-50 cursor-not-allowed': disabled,
+            }
+          )}
+        >
+          <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+          <p className="text-sm font-medium text-foreground mb-1">
+            Drop your file here or click to browse
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Maximum file size: {maxSizeMB}MB
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}