feat: add SrtEditor component and initial dark-themed glassmorphism styles

src/renderer/src/components/SrtEditor.jsx

@@ -57,12 +57,15 @@ const SrtEditor = ({ filePath, onClose }) => {
     }).join('\n\n') + '\n'
   }
 
+  const [showToast, setShowToast] = useState(false)
+
   const handleSave = async () => {
     setSaving(true)
     try {
       const content = stringifySrt(segments)
       await window.api.saveSrt(filePath, content)
-      // Show some success feedback
+      setShowToast(true)
+      setTimeout(() => setShowToast(false), 3000)
     } catch (error) {
       alert('Error saving SRT: ' + error.message)
     } finally {
@@ -70,32 +73,12 @@ const SrtEditor = ({ filePath, onClose }) => {
     }
   }
 
-  const handleOptimize = async () => {
-    setSaving(true)
-    try {
-      // First save current state
-      const currentContent = stringifySrt(segments)
-      await window.api.saveSrt(filePath, currentContent)
-      
-      // Then optimize
-      const result = await window.api.optimizeSrt(filePath)
-      if (result.success) {
-        const parsed = parseSrt(result.content)
-        setSegments(parsed)
-      }
-    } catch (error) {
-      alert('Error optimizing SRT: ' + error.message)
-    } finally {
-      setSaving(false)
-    }
-  }
-
   const updateSegment = (id, field, value) => {
     setSegments(prev => prev.map(s => s.id === id ? { ...s, [field]: value } : s))
   }
 
   const handleKeyDown = (e) => {
-    if (e.shiftKey && e.key === 'S') {
+    if ((e.ctrlKey || e.metaKey || e.shiftKey) && e.key.toLowerCase() === 's') {
       e.preventDefault()
       handleSave()
     }
@@ -110,6 +93,20 @@ const SrtEditor = ({ filePath, onClose }) => {
 
   return (
     <div className="srt-editor-container glass">
+      <AnimatePresence>
+        {showToast && (
+          <motion.div 
+            initial={{ opacity: 0, y: 20, x: '-50%' }}
+            animate={{ opacity: 1, y: 0, x: '-50%' }}
+            exit={{ opacity: 0, y: 20, x: '-50%' }}
+            className="save-toast"
+          >
+            <CheckCircle size={18} />
+            SRT Saved Successfully!
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       <div className="editor-header">
         <button className="btn-back" onClick={onClose}>
           <ArrowLeft size={18} />
@@ -183,25 +180,13 @@ const SrtEditor = ({ filePath, onClose }) => {
       </div>
 
       <div className="editor-footer">
-        <div className="footer-actions-left">
-           <button className="btn-footer-secondary" onClick={handleSave} disabled={saving}>
-             <Save size={16} />
-             {saving ? 'SAVING...' : 'SAVE CORRECTIONS (Shift+S)'}
-           </button>
-           <button className="btn-footer-secondary">
-             <Download size={16} />
-             EXPORT FINISHED SRT
-             <span className="btn-subtext">(Premiere Compatible)</span>
-           </button>
-        </div>
-
-        <button className="btn-one-click-export" onClick={handleOptimize} disabled={saving}>
+        <button className="btn-one-click-export" style={{ maxWidth: '100%' }} onClick={handleSave} disabled={saving}>
           <div className="btn-content">
-             <span className="main-text">PREMIERE ONE-CLICK OPTIMIZED EXPORT</span>
-             <span className="sub-text">(Standartlara En Uygun Format - UTF-8)</span>
+             <span className="main-text">{saving ? 'SAVING...' : 'SAVE ALL CHANGES'}</span>
+             <span className="sub-text">(Ctrl + S to save instantly)</span>
           </div>
           <div className="btn-icon">
-            <Zap size={24} fill="currentColor" />
+            <Save size={24} />
           </div>
         </button>
       </div>

src/renderer/src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
 
 :root {
   --bg-color: #0b0c14;
@@ -914,40 +914,7 @@ body {
   border-top: 1px solid var(--glass-border);
 }
 
-.footer-actions-left {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
 
-.btn-footer-secondary {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--glass-border);
-  border-radius: 12px;
-  padding: 10px 20px;
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-align: left;
-}
-
-.btn-footer-secondary:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: white;
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.btn-subtext {
-  font-size: 10px;
-  opacity: 0.6;
-  font-weight: 400;
-  display: block;
-}
 
 .btn-one-click-export {
   flex: 1;
@@ -1004,3 +971,20 @@ body {
   font-size: 20px;
   color: var(--primary-cyan);
 }
+.save-toast {
+  position: absolute;
+  bottom: 120px;
+  left: 50%;
+  background: rgba(0, 242, 255, 0.95);
+  color: #0b0c14;
+  padding: 12px 24px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  z-index: 100;
+  box-shadow: 0 10px 30px rgba(0, 242, 255, 0.4);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}