move web components to web/

2025-10-10 23:13:03 -07:00
parent 623b562e8d
commit 52968df567
46 changed files with 0 additions and 0 deletions
--- a/web/frontend/src/components/RenameFavoriteModal.tsx
+++ b/web/frontend/src/components/RenameFavoriteModal.tsx
@@ -0,0 +1,97 @@
+import React, { useState, KeyboardEvent, useEffect } from 'react';
+import { FaTimes, FaCheck } from 'react-icons/fa';
+import { API, PlaylistItem, getDisplayTitle } from '../api/player';
+
+interface RenameFavoriteModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  favorite: PlaylistItem | null;
+}
+
+const RenameFavoriteModal: React.FC<RenameFavoriteModalProps> = ({ isOpen, onClose, favorite }) => {
+  const [title, setTitle] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (favorite) {
+      setTitle(getDisplayTitle(favorite));
+    }
+  }, [favorite]);
+
+  const handleSave = async () => {
+    if (!favorite || !title.trim()) return;
+    
+    setIsSaving(true);
+
+    try {
+      await API.updateFavoriteTitle(favorite.filename, title);
+      onClose();
+    } catch (error) {
+      console.error('Failed to rename favorite:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSave();
+    } else if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  if (!isOpen || !favorite) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-violet-900 w-full max-w-md rounded-lg p-4 shadow-lg">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-white text-xl font-bold">Rename Favorite</h2>
+
+          <button onClick={onClose} className="text-white/60 hover:text-white">
+            <FaTimes size={24} />
+          </button>
+        </div>
+
+        <div className="mb-4">
+          <label className="text-white/80 block mb-2">Original filename:</label>
+          <div className="text-white/60 text-sm truncate bg-black/20 p-2 rounded-lg mb-4">
+            {favorite.filename}
+          </div>
+          
+          <label className="text-white/80 block mb-2">Title:</label>
+          <input
+            type="text"
+            autoFocus
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Enter new title..."
+            className="p-2 rounded-lg border-2 border-violet-500 w-full bg-black/20 text-white"
+          />
+        </div>
+
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="bg-black/30 text-white p-2 rounded-lg px-4 hover:bg-black/40"
+          >
+            Cancel
+          </button>
+          
+          <button
+            onClick={handleSave}
+            disabled={isSaving || !title.trim()}
+            className="bg-violet-500 text-white p-2 rounded-lg px-4 disabled:opacity-50 flex items-center gap-2"
+          >
+            <FaCheck size={16} />
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RenameFavoriteModal;