delete trim ux improvement

src/components/video-editor/SettingsPanel.tsx

@@ -54,6 +54,8 @@ interface SettingsPanelProps {
   onZoomDepthChange?: (depth: ZoomDepth) => void;
   selectedZoomId?: string | null;
   onZoomDelete?: (id: string) => void;
+  selectedTrimId?: string | null;
+  onTrimDelete?: (id: string) => void;
   shadowIntensity?: number;
   onShadowChange?: (intensity: number) => void;
   showBlur?: boolean;
@@ -98,6 +100,8 @@ export function SettingsPanel({
   onZoomDepthChange, 
   selectedZoomId, 
   onZoomDelete, 
+  selectedTrimId,
+  onTrimDelete,
   shadowIntensity = 0, 
   onShadowChange, 
   showBlur, 
@@ -144,6 +148,7 @@ export function SettingsPanel({
   const [showCropDropdown, setShowCropDropdown] = useState(false);
 
   const zoomEnabled = Boolean(selectedZoomDepth);
+  const trimEnabled = Boolean(selectedTrimId);
   
   const handleDeleteClick = () => {
     if (selectedZoomId && onZoomDelete) {
@@ -151,6 +156,12 @@ export function SettingsPanel({
     }
   };
 
+  const handleTrimDeleteClick = () => {
+    if (selectedTrimId && onTrimDelete) {
+      onTrimDelete(selectedTrimId);
+    }
+  };
+
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
     if (!files || files.length === 0) return;
@@ -270,6 +281,21 @@ export function SettingsPanel({
         )}
       </div>
 
+      {/* Trim Delete Section */}
+      <div className="mb-6">
+        {trimEnabled && (
+          <Button
+            onClick={handleTrimDeleteClick}
+            variant="destructive"
+            size="sm"
+            className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all"
+          >
+            <Trash2 className="w-4 h-4" />
+            Delete Trim Region
+          </Button>
+        )}
+      </div>
+
       <div className="mb-6">
         <div className="grid grid-cols-2 gap-3">
           {/* Motion Blur Switch */}

src/components/video-editor/VideoEditor.tsx

@@ -753,6 +753,8 @@ export default function VideoEditor() {
           onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
           selectedZoomId={selectedZoomId}
           onZoomDelete={handleZoomDelete}
+          selectedTrimId={selectedTrimId}
+          onTrimDelete={handleTrimDelete}
           shadowIntensity={shadowIntensity}
           onShadowChange={setShadowIntensity}
           showBlur={showBlur}