Update from Git Manager GUI

renderer/Settings.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
 
-export default function Settings() {
+export default function Settings({ onClose }) {
   const [githubToken, setGithubToken] = useState('');
   const [giteaToken, setGiteaToken] = useState('');
   const [giteaURL, setGiteaURL] = useState('');
+  const [savedOk, setSavedOk] = useState(false);
 
   function normalizeAndValidateGiteaUrl(rawUrl) {
     const value = (rawUrl || '').trim();
@@ -15,14 +16,14 @@ export default function Settings() {
     } catch (_) {
       return {
         ok: false,
-        error: 'Ungültige Gitea-URL. Beispiel für IPv6: http://[2001:db8::1]:3000'
+        error: 'Ungültige Gitea-URL. Beispiel für IPv6: http://[2001:db8::1]:3000',
       };
     }
 
     if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
       return {
         ok: false,
-        error: 'Die Gitea-URL muss mit http:// oder https:// beginnen.'
+        error: 'Die Gitea-URL muss mit http:// oder https:// beginnen.',
       };
     }
 
@@ -39,33 +40,95 @@ export default function Settings() {
     });
   }, []);
 
-  const save = () => {
+  function save() {
     const checkedUrl = normalizeAndValidateGiteaUrl(giteaURL);
     if (!checkedUrl.ok) {
       alert(checkedUrl.error);
       return;
     }
-
     window.electronAPI.saveCredentials({ githubToken, giteaToken, giteaURL: checkedUrl.value });
-    alert('Settings saved securely!');
+    setSavedOk(true);
+    setTimeout(() => setSavedOk(false), 2500);
   }
 
   return (
-    <div style={{ padding: 20 }}>
-      <h2>Settings</h2>
-      <div>
-        <label>GitHub Token:</label>
-        <input type="password" value={githubToken} onChange={e => setGithubToken(e.target.value)} />
+    <div className="modalContent card settings-modal-content">
+
+      <div className="settings-header">
+        <div>
+          <div className="settings-eyebrow">Konfiguration</div>
+          <h2>⚙️ Einstellungen</h2>
+          <p className="settings-subtitle">
+            Zugangsdaten für GitHub und Gitea hinterlegen.
+          </p>
+        </div>
       </div>
-      <div>
-        <label>Gitea Token:</label>
-        <input type="password" value={giteaToken} onChange={e => setGiteaToken(e.target.value)} />
+
+      <div className="settings-layout">
+        <div className="settings-column settings-column--left">
+          <section className="settings-panel settings-panel--credentials">
+            <div className="settings-panel-header">
+              <div>
+                <h3>Zugangsdaten</h3>
+                <p>API-Zugriffe für GitHub und Gitea konfigurieren.</p>
+              </div>
+            </div>
+
+            <div className="settings-fields-grid">
+              <div className="input-group">
+                <label htmlFor="react-githubToken">GitHub Token</label>
+                <input
+                  id="react-githubToken"
+                  type="password"
+                  placeholder="ghp_…"
+                  value={githubToken}
+                  onChange={e => setGithubToken(e.target.value)}
+                />
+              </div>
+
+              <div className="input-group">
+                <label htmlFor="react-giteaToken">Gitea Token</label>
+                <input
+                  id="react-giteaToken"
+                  type="password"
+                  placeholder="Token hier einfügen"
+                  value={giteaToken}
+                  onChange={e => setGiteaToken(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="input-group input-group--wide">
+              <label htmlFor="react-giteaURL">Gitea URL</label>
+              <input
+                id="react-giteaURL"
+                type="text"
+                placeholder="https://gitea.example.com"
+                value={giteaURL}
+                onChange={e => setGiteaURL(e.target.value)}
+              />
+              <div className="settings-connection-tools">
+                <div className="settings-inline-hint">
+                  Hinweis: IPv6 mit Klammern eingeben, z.B. http://[2001:db8::1]:3000
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
       </div>
-      <div>
-        <label>Gitea URL:</label>
-        <input type="text" value={giteaURL} onChange={e => setGiteaURL(e.target.value)} />
+
+      <div className="modal-buttons settings-modal-actions">
+        <button
+          className="accent-btn"
+          onClick={save}
+          style={savedOk ? { background: 'var(--success)', borderColor: 'var(--success)' } : {}}
+        >
+          {savedOk ? '✅ Gespeichert' : 'Speichern'}
+        </button>
+        {onClose && (
+          <button className="secondary" onClick={onClose}>Abbrechen</button>
+        )}
       </div>
-      <button onClick={save} style={{ marginTop: 10 }}>Save</button>
     </div>
   );
 }