Update from Git Manager GUI

renderer/App.jsx

@@ -4,39 +4,42 @@ import Settings from './Settings.jsx';
 export default function App() {
   const [folder, setFolder] = useState('');
   const [repoName, setRepoName] = useState('');
-  const [platform, setPlatform] = useState('github');
-  const [status, setStatus] = useState('');
+  const [platform, setPlatform] = useState('gitea');
+  const [status, setStatus] = useState('Bereit');
   const [showSettings, setShowSettings] = useState(false);
   const [branches, setBranches] = useState([]);
-  const [selectedBranch, setSelectedBranch] = useState('master');
+  const [selectedBranch, setSelectedBranch] = useState('main');
   const [logs, setLogs] = useState([]);
   const [progress, setProgress] = useState(0);
 
   async function selectFolder() {
     const selected = await window.electronAPI.selectFolder();
-    if (selected) setFolder(selected);
-    // Branches laden
-    if (selected) {
-      const branchList = await window.electronAPI.getBranches({ folder: selected });
-      setBranches(branchList);
-      if (branchList.includes('master')) setSelectedBranch('master');
-    }
+    if (!selected) return;
+    setFolder(selected);
+    const branchList = await window.electronAPI.getBranches({ folder: selected });
+    setBranches(branchList);
+    if (branchList.includes('main')) setSelectedBranch('main');
+    else if (branchList.includes('master')) setSelectedBranch('master');
+    else if (branchList.length > 0) setSelectedBranch(branchList[0]);
   }
 
   async function createRepoHandler() {
-    if (!repoName) return alert('Repo Name required!');
-    setStatus('Creating repository...');
+    if (!repoName) return alert('Repo-Name erforderlich!');
+    setStatus('Repository wird erstellt…');
     const result = await window.electronAPI.createRepo({ name: repoName, platform });
-    setStatus(result ? 'Repository created!' : 'Failed to create repository.');
+    setStatus(result ? 'Repository erstellt!' : 'Fehler beim Erstellen des Repositories.');
   }
 
   async function pushProjectHandler() {
-    if (!folder) return alert('Select a project folder first!');
-    setStatus('Pushing project...');
+    if (!folder) return alert('Bitte zuerst einen Projektordner auswählen!');
+    setStatus('Projekt wird gepusht…');
     setProgress(0);
-    const onProgress = (p) => setProgress(p); // Callback für Fortschritt
-    const result = await window.electronAPI.pushProject({ folder, branch: selectedBranch, onProgress });
-    setStatus(result ? 'Project pushed!' : 'Failed to push project.');
+    const result = await window.electronAPI.pushProject({
+      folder,
+      branch: selectedBranch,
+      onProgress: (p) => setProgress(p),
+    });
+    setStatus(result ? 'Projekt gepusht!' : 'Push fehlgeschlagen.');
     if (result) {
       const logList = await window.electronAPI.getCommitLogs({ folder });
       setLogs(logList);
@@ -44,61 +47,168 @@ export default function App() {
   }
 
   return (
-    <div style={{ padding: 20 }}>
-      <h1>Git Manager GUI - High-End</h1>
-      <button onClick={() => setShowSettings(!showSettings)}>Settings</button>
-      {showSettings && <Settings />}
+    <div id="app" style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
 
-      <div style={{ marginTop: 20 }}>
-        <label>Platform:</label>
-        <select value={platform} onChange={e => setPlatform(e.target.value)}>
-          <option value="github">GitHub</option>
-          <option value="gitea">Gitea</option>
-        </select>
+      {/* ── Toolbar ── */}
+      <div id="toolbar">
+        <div className="toolbar-row toolbar-row--top">
+          <div className="toolbar-brand">
+            <div className="toolbar-brand-mark">
+              <img src="./icon.png" alt="Git Manager Logo" className="toolbar-brand-logo" />
+            </div>
+            <div className="toolbar-brand-copy">
+              <span className="toolbar-kicker">Workspace Control</span>
+              <strong>Git Manager Explorer Pro</strong>
+            </div>
+          </div>
+
+          <div className="toolbar-top-actions">
+            <div className="tool-group tool-group--quick-actions">
+              <button onClick={createRepoHandler} title="Neues Repository erstellen">🚀 New Repo</button>
+              <button onClick={pushProjectHandler} title="Projekt pushen">⬆️ Push</button>
+            </div>
+
+            <div className="tool-group tool-group--utility">
+              <button onClick={() => setShowSettings(true)} title="Einstellungen">⚙️ Settings</button>
+            </div>
+
+            <div className="toolbar-status-wrap">
+              <span className="status-dot" aria-hidden="true" />
+              <span className="status">{status}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="toolbar-row toolbar-row--bottom">
+          <div className="tool-group tool-group--workspace">
+            <button className="accent-btn" onClick={selectFolder} title="Lokalen Ordner öffnen">
+              📂 Open Local
+            </button>
+          </div>
+
+          <div className="tool-group tool-group--repo">
+            <div className="platform-switch" role="tablist" aria-label="Plattform auswählen">
+              {['gitea', 'github'].map(p => (
+                <button
+                  key={p}
+                  type="button"
+                  className={`platform-option${platform === p ? ' active' : ''}`}
+                  data-platform={p}
+                  aria-pressed={platform === p}
+                  onClick={() => setPlatform(p)}
+                >
+                  {p === 'gitea' ? 'Gitea' : 'GitHub'}
+                </button>
+              ))}
+            </div>
+
+            {branches.length > 0 && (
+              <select
+                value={selectedBranch}
+                onChange={e => setSelectedBranch(e.target.value)}
+                title="Branch auswählen"
+              >
+                {branches.map(b => <option key={b} value={b}>{b}</option>)}
+              </select>
+            )}
+          </div>
+        </div>
       </div>
 
-      <div style={{ marginTop: 20 }}>
-        <button onClick={selectFolder}>Select Project Folder</button>
-        <span style={{ marginLeft: 10 }}>{folder}</span>
-      </div>
+      {/* ── Main ── */}
+      <main id="main">
 
-      <div style={{ marginTop: 20 }}>
-        <label>Branch:</label>
-        <select value={selectedBranch} onChange={e => setSelectedBranch(e.target.value)}>
-          {branches.map(b => <option key={b} value={b}>{b}</option>)}
-        </select>
-      </div>
+        {/* Fortschrittsbalken */}
+        {progress > 0 && progress < 100 && (
+          <div className="input-group" style={{ marginBottom: 20 }}>
+            <label>Fortschritt</label>
+            <progress value={progress} max="100" style={{ width: '100%', height: 8, borderRadius: 4 }} />
+          </div>
+        )}
 
-      <div style={{ marginTop: 20 }}>
-        <input 
-          type="text" 
-          placeholder="Repository Name" 
-          value={repoName} 
-          onChange={e => setRepoName(e.target.value)} />
-        <button onClick={createRepoHandler} style={{ marginLeft: 10 }}>Create Repo</button>
-      </div>
+        {/* Repo erstellen / Ordner */}
+        <div className="card" style={{ marginBottom: 20 }}>
+          <h2>📁 Projekt & Repository</h2>
 
-      <div style={{ marginTop: 20 }}>
-        <button onClick={pushProjectHandler}>Push / Update Project</button>
-      </div>
+          <div className="input-group">
+            <label>Lokaler Projektordner</label>
+            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+              <input
+                type="text"
+                readOnly
+                value={folder}
+                placeholder="Noch kein Ordner ausgewählt…"
+                style={{ flex: 1 }}
+              />
+              <button onClick={selectFolder} style={{ flex: '0 0 auto' }}>📂 Auswählen</button>
+            </div>
+          </div>
 
-      <div style={{ marginTop: 10 }}>
-        <label>Progress:</label>
-        <progress value={progress} max="100" style={{ width: '100%' }} />
-      </div>
+          <div className="input-group">
+            <label>Repository Name</label>
+            <input
+              type="text"
+              placeholder="mein-projekt"
+              value={repoName}
+              onChange={e => setRepoName(e.target.value)}
+            />
+          </div>
 
-      <div style={{ marginTop: 20 }}>
-        <strong>Status: </strong>{status}
-      </div>
+          <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
+            <button className="accent-btn" onClick={createRepoHandler}>🚀 Repo erstellen</button>
+            <button onClick={pushProjectHandler}>⬆️ Push / Aktualisieren</button>
+          </div>
+        </div>
 
-      <div style={{ marginTop: 20 }}>
-        <h3>Commit Logs:</h3>
-        <ul>
-          {logs.map((log, i) => (
-            <li key={i}>{log}</li>
-          ))}
-        </ul>
-      </div>
+        {/* Commit-Logs */}
+        {logs.length > 0 && (
+          <div className="card">
+            <h2>📊 Commit-Verlauf</h2>
+            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {logs.map((log, i) => (
+                <li
+                  key={i}
+                  style={{
+                    padding: '8px 12px',
+                    borderRadius: 8,
+                    background: 'rgba(255,255,255,0.04)',
+                    border: '1px solid rgba(140,173,255,0.08)',
+                    fontSize: 13,
+                    color: 'var(--text-secondary)',
+                    fontFamily: 'monospace',
+                  }}
+                >
+                  {log}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {logs.length === 0 && !folder && (
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingTop: 60,
+            gap: 16,
+            opacity: 0.55,
+          }}>
+            <div style={{ fontSize: 64, filter: 'drop-shadow(0 8px 16px rgba(88,213,255,0.2))' }}>📂</div>
+            <p style={{ color: 'var(--text-muted)', fontSize: 15, textAlign: 'center' }}>
+              Öffne einen lokalen Ordner oder lade Repos über die Toolbar.
+            </p>
+          </div>
+        )}
+      </main>
+
+      {/* ── Settings-Modal ── */}
+      {showSettings && (
+        <div id="settingsModal" className="modal" onClick={e => { if (e.target === e.currentTarget) setShowSettings(false); }}>
+          <Settings onClose={() => setShowSettings(false)} />
+        </div>
+      )}
     </div>
   );
 }