feat: add media converter app and fix compilation errors

components/ui/KeyboardShortcutsModal.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { formatShortcut, type KeyboardShortcut } from '@/lib/media/hooks/useKeyboardShortcuts';
+import { cn } from '@/lib/utils';
+
+interface KeyboardShortcutsModalProps {
+  shortcuts: KeyboardShortcut[];
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function KeyboardShortcutsModal({ shortcuts, isOpen, onClose }: KeyboardShortcutsModalProps) {
+  React.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
+      <div 
+        className="absolute inset-0" 
+        onClick={onClose}
+      />
+      <Card className="relative w-full max-w-md shadow-2xl animate-in zoom-in-95 duration-200">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-xl font-bold">Keyboard Shortcuts</CardTitle>
+          <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full">
+            <X className="h-4 w-4" />
+          </Button>
+        </CardHeader>
+        <CardContent className="pt-4">
+          <div className="space-y-4">
+            {shortcuts.map((shortcut, index) => (
+              <div key={index} className="flex items-center justify-between gap-4">
+                <span className="text-sm text-muted-foreground">{shortcut.description}</span>
+                <kbd className="pointer-events-none inline-flex h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+                  {formatShortcut(shortcut)}
+                </kbd>
+              </div>
+            ))}
+          </div>
+          <div className="mt-6 flex justify-end">
+            <Button onClick={onClose}>Close</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils/index"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }