style: match editing experience to match capcut

1 files changed, 0 insertions, 425 deletions

diff --git a/apps/web/src/components/keybinding-editor.tsx b/apps/web/src/components/keybinding-editor.tsx
deleted file mode 100644
index bc98c5fd..00000000
--- a/apps/web/src/components/keybinding-editor.tsx
+++ /dev/null
@@ -1,425 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { useKeybindingsStore } from "@/stores/keybindings-store";
-import { Action } from "@/constants/actions";
-import { KeyboardShortcut } from "@/hooks/use-keyboard-shortcuts-help";
-import {
-  Settings,
-  RotateCcw,
-  Download,
-  Upload,
-  X,
-  Check,
-  AlertTriangle,
-} from "lucide-react";
-import { toast } from "sonner";
-
-interface KeybindingEditorProps {
-  shortcuts: KeyboardShortcut[];
-  onClose: () => void;
-}
-
-interface KeyRecorderProps {
-  value: string;
-  onValueChange: (value: string) => void;
-  onCancel: () => void;
-}
-
-const KeyRecorder = ({ value, onValueChange, onCancel }: KeyRecorderProps) => {
-  const [isRecording, setIsRecording] = useState(false);
-  const [recordedKey, setRecordedKey] = useState("");
-  const { getKeybindingString } = useKeybindingsStore();
-
-  useEffect(() => {
-    if (!isRecording) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      e.preventDefault();
-
-      const keyString = getKeybindingString(e);
-      if (keyString) {
-        setRecordedKey(keyString);
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isRecording, getKeybindingString]);
-
-  const handleStartRecording = () => {
-    setIsRecording(true);
-    setRecordedKey("");
-  };
-
-  const handleConfirm = () => {
-    onValueChange(recordedKey);
-    setIsRecording(false);
-    setRecordedKey("");
-  };
-
-  const handleCancel = () => {
-    setIsRecording(false);
-    setRecordedKey("");
-    onCancel();
-  };
-
-  const displayKey = recordedKey || value;
-
-  return (
-    <div className="flex items-center gap-2">
-      <Input
-        value={displayKey}
-        readOnly
-        placeholder={isRecording ? "Press keys..." : "Click to record"}
-        className="font-mono text-sm"
-        onClick={handleStartRecording}
-      />
-      {isRecording ? (
-        <div className="flex gap-1">
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={handleConfirm}
-            disabled={!recordedKey}
-          >
-            <Check className="w-4 h-4" />
-          </Button>
-          <Button size="sm" variant="outline" onClick={handleCancel}>
-            <X className="w-4 h-4" />
-          </Button>
-        </div>
-      ) : (
-        <Button size="sm" variant="outline" onClick={handleStartRecording}>
-          Record
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export const KeybindingEditor = ({
-  shortcuts,
-  onClose,
-}: KeybindingEditorProps) => {
-  const {
-    keybindings,
-    updateKeybinding,
-    removeKeybinding,
-    resetToDefaults,
-    isCustomized,
-    validateKeybinding,
-    getKeybindingsForAction,
-    exportKeybindings,
-    importKeybindings,
-  } = useKeybindingsStore();
-
-  const [editingShortcut, setEditingShortcut] = useState<string | null>(null);
-  const [newKeyBinding, setNewKeyBinding] = useState("");
-  const [showResetDialog, setShowResetDialog] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState("all");
-
-  const categories = [
-    "all",
-    ...Array.from(new Set(shortcuts.map((s) => s.category))),
-  ];
-
-  const filteredShortcuts = shortcuts.filter((shortcut) => {
-    const matchesSearch =
-      shortcut.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      shortcut.keys.some((key) =>
-        key.toLowerCase().includes(searchTerm.toLowerCase())
-      );
-    const matchesCategory =
-      selectedCategory === "all" || shortcut.category === selectedCategory;
-    return matchesSearch && matchesCategory;
-  });
-
-  const handleEditShortcut = (shortcut: KeyboardShortcut) => {
-    setEditingShortcut(shortcut.id);
-    setNewKeyBinding(shortcut.keys[0] || "");
-  };
-
-  const handleSaveShortcut = () => {
-    if (!editingShortcut || !newKeyBinding) return;
-
-    const shortcut = shortcuts.find((s) => s.id === editingShortcut);
-    if (!shortcut) return;
-
-    // Validate the new keybinding
-    const conflict = validateKeybinding(newKeyBinding, shortcut.action);
-    if (conflict) {
-      toast.error(
-        `Key "${newKeyBinding}" is already bound to "${conflict.existingAction}"`
-      );
-      return;
-    }
-
-    // Remove old keybindings for this action
-    const oldKeys = getKeybindingsForAction(shortcut.action);
-    oldKeys.forEach((key) => removeKeybinding(key));
-
-    // Add new keybinding
-    updateKeybinding(newKeyBinding, shortcut.action);
-
-    setEditingShortcut(null);
-    setNewKeyBinding("");
-    toast.success("Keybinding updated successfully");
-  };
-
-  const handleCancelEdit = () => {
-    setEditingShortcut(null);
-    setNewKeyBinding("");
-  };
-
-  const handleRemoveShortcut = (shortcut: KeyboardShortcut) => {
-    const keys = getKeybindingsForAction(shortcut.action);
-    keys.forEach((key) => removeKeybinding(key));
-    toast.success("Keybinding removed");
-  };
-
-  const handleResetToDefaults = () => {
-    resetToDefaults();
-    setShowResetDialog(false);
-    toast.success("Keybindings reset to defaults");
-  };
-
-  const handleExportKeybindings = () => {
-    const config = exportKeybindings();
-    const blob = new Blob([JSON.stringify(config, null, 2)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "opencut-keybindings.json";
-    a.click();
-    URL.revokeObjectURL(url);
-    toast.success("Keybindings exported");
-  };
-
-  const handleImportKeybindings = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const config = JSON.parse(e.target?.result as string);
-        // Validate config structure
-        if (!config || typeof config !== "object") {
-          throw new Error("Invalid configuration format");
-        }
-
-        // Validate each keybinding
-        for (const [key, action] of Object.entries(config)) {
-          if (typeof key !== "string" || typeof action !== "string") {
-            throw new Error(`Invalid keybinding: ${key} -> ${action}`);
-          }
-        }
-        importKeybindings(config);
-        toast.success("Keybindings imported successfully");
-      } catch (error) {
-        toast.error(`Failed to import keybindings: ${error}`);
-      }
-    };
-    reader.readAsText(file);
-  };
-
-  return (
-    <div className="max-w-4xl mx-auto p-6 space-y-6">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Settings className="w-5 h-5" />
-          <h2 className="text-xl font-semibold">
-            Customize Keyboard Shortcuts
-          </h2>
-          {isCustomized && (
-            <Badge variant="secondary" className="ml-2">
-              Modified
-            </Badge>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={handleExportKeybindings}>
-            <Download className="w-4 h-4 mr-2" />
-            Export
-          </Button>
-          <input
-            type="file"
-            accept=".json"
-            onChange={handleImportKeybindings}
-            className="hidden"
-            id="import-keybindings"
-          />
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() =>
-              document.getElementById("import-keybindings")?.click()
-            }
-          >
-            <Upload className="w-4 h-4 mr-2" />
-            Import
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowResetDialog(true)}
-            disabled={!isCustomized}
-          >
-            <RotateCcw className="w-4 h-4 mr-2" />
-            Reset to Defaults
-          </Button>
-          <Button variant="outline" size="sm" onClick={onClose}>
-            <X className="w-4 h-4 mr-2" />
-            Close
-          </Button>
-        </div>
-      </div>
-
-      <div className="flex gap-4 items-center">
-        <Input
-          placeholder="Search shortcuts..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="flex-1"
-        />
-        <Tabs value={selectedCategory} onValueChange={setSelectedCategory}>
-          <TabsList>
-            {categories.map((category) => (
-              <TabsTrigger key={category} value={category}>
-                {category === "all" ? "All" : category}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
-      </div>
-
-      <div className="space-y-4">
-        {filteredShortcuts.map((shortcut) => (
-          <Card key={shortcut.id}>
-            <CardContent className="p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex-1">
-                  <div className="flex items-center gap-3">
-                    <div>
-                      <h3 className="font-medium">{shortcut.description}</h3>
-                      <p className="text-sm text-muted-foreground">
-                        {shortcut.category}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center gap-2">
-                    {editingShortcut === shortcut.id ? (
-                      <KeyRecorder
-                        value={newKeyBinding}
-                        onValueChange={setNewKeyBinding}
-                        onCancel={handleCancelEdit}
-                      />
-                    ) : (
-                      <div className="flex items-center gap-1">
-                        {shortcut.keys.map((key, index) => (
-                          <Badge
-                            key={index}
-                            variant="secondary"
-                            className="font-mono text-xs"
-                          >
-                            {key}
-                          </Badge>
-                        ))}
-                        {shortcut.keys.length === 0 && (
-                          <Badge
-                            variant="outline"
-                            className="text-muted-foreground"
-                          >
-                            No binding
-                          </Badge>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-2">
-                    {editingShortcut === shortcut.id ? (
-                      <>
-                        <Button size="sm" onClick={handleSaveShortcut}>
-                          Save
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={handleCancelEdit}
-                        >
-                          Cancel
-                        </Button>
-                      </>
-                    ) : (
-                      <>
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => handleEditShortcut(shortcut)}
-                        >
-                          Edit
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => handleRemoveShortcut(shortcut)}
-                          disabled={shortcut.keys.length === 0}
-                        >
-                          Remove
-                        </Button>
-                      </>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <AlertDialog open={showResetDialog} onOpenChange={setShowResetDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="w-5 h-5 text-amber-500" />
-              Reset Keyboard Shortcuts?
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              This will reset all keyboard shortcuts to their default values.
-              Any custom keybindings will be lost.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleResetToDefaults}>
-              Reset to Defaults
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-};