trimmer jsx cleanup

electron-ui/src/renderer/components/Trimmer/dialogs/DeleteClipDialog.tsx

@@ -0,0 +1,45 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from '@mui/material';
+
+export default function DeleteClipDialog({
+  open,
+  onCancel,
+  onDelete,
+}: {
+  open: boolean;
+  onCancel: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onCancel}
+      slotProps={{
+        paper: { sx: { backgroundColor: '#1a1a1a', color: 'white' } },
+      }}
+    >
+      <DialogTitle>Confirm Delete</DialogTitle>
+      <DialogContent>Are you sure you want to delete this clip?</DialogContent>
+      <DialogActions>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={onDelete}
+          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
+        >
+          Delete
+        </button>
+      </DialogActions>
+    </Dialog>
+  );
+}

electron-ui/src/renderer/components/Trimmer/dialogs/NameEditDialog.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from '@mui/material';
+
+export default function NameEditDialog({
+  open,
+  startValue,
+  onCancel,
+  onSave,
+}: {
+  open: boolean;
+  startValue: string;
+  onCancel: () => void;
+  onSave: (newName: string) => void;
+}) {
+  const [input, setInput] = useState(startValue);
+
+  useEffect(() => {
+    if (open) {
+      setInput(startValue);
+    }
+  }, [open, startValue]);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onCancel}
+      slotProps={{
+        paper: { sx: { backgroundColor: '#1a1a1a', color: 'white' } },
+      }}
+    >
+      <DialogTitle>Edit Clip Name</DialogTitle>
+      <DialogContent>
+        <textarea
+          autoFocus
+          className="font-bold text-lg bg-transparent outline-none border-b border-plum focus:border-plumDark text-white mb-1 w-full text-center resize-y"
+          value={input}
+          onChange={(e) => {
+            setInput(e.target.value);
+          }}
+          rows={3}
+          onFocus={(event) => event.target.select()}
+          aria-label="Edit clip name"
+          style={{ minHeight: '3em' }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={() => onSave(input)}
+          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
+        >
+          Save
+        </button>
+      </DialogActions>
+    </Dialog>
+  );
+}