release: Multi-Hoster-Upload 2.1.0

Refine navigation feedback, settings controls, application dialogs, history actions, and development reload behavior. Restore hardware-accelerated rendering and expand release verification for the packaged source manifest.

renderer/app.js

@@ -526,13 +526,26 @@ function _isHistoryTabActive() {
     const nextView = viewsById[`${tab.dataset.view}-view`];
     if (nextView) nextView.classList.add('active');
     activeTab = tab;
+    syncTabIndicator(tab);
     if (tab.dataset.view === 'history' && (_historyDirty || !_historyEverLoaded)) {
       loadHistory();
     }
   };
 
   const tabBar = tabs[0] && tabs[0].parentElement;
+  const tabIndicator = tabBar?.querySelector('.tab-indicator');
+  function syncTabIndicator(tab) {
+    if (!tabIndicator || !tab) return;
+    tabIndicator.style.width = `${tab.offsetWidth}px`;
+    tabIndicator.style.transform = `translateX(${tab.offsetLeft}px)`;
+  }
   if (tabBar) {
+    if (tabIndicator) {
+      tabIndicator.style.transition = 'none';
+      syncTabIndicator(activeTab);
+      requestAnimationFrame(() => { tabIndicator.style.transition = ''; });
+      window.addEventListener('resize', () => syncTabIndicator(activeTab));
+    }
     tabBar.addEventListener('click', (e) => handle(e.target));
     tabBar.addEventListener('keydown', (e) => {
       if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return;
@@ -562,19 +575,45 @@ function initMenuBar() {
   menuBar.querySelectorAll('[data-menu-dropdown]').forEach(d => { dropdowns[d.dataset.menuDropdown] = d; });
   const triggers = {};
   menuBar.querySelectorAll('[data-menu-trigger]').forEach(t => { triggers[t.dataset.menuTrigger] = t; });
+  const panelTokens = new WeakMap();
+
+  function openPanel(panel) {
+    if (!panel) return;
+    panelTokens.set(panel, (panelTokens.get(panel) || 0) + 1);
+    panel.classList.remove('menu-closing', 'menu-opening');
+    panel.style.display = '';
+    void panel.offsetHeight;
+    panel.classList.add('menu-opening');
+  }
+
+  function closePanel(panel) {
+    if (!panel || window.getComputedStyle(panel).display === 'none') return;
+    const token = (panelTokens.get(panel) || 0) + 1;
+    panelTokens.set(panel, token);
+    panel.classList.remove('menu-opening', 'menu-closing');
+    void panel.offsetHeight;
+    panel.classList.add('menu-closing');
+    const finish = () => {
+      if (panelTokens.get(panel) !== token) return;
+      panel.style.display = 'none';
+      panel.classList.remove('menu-closing');
+    };
+    panel.addEventListener('animationend', finish, { once: true });
+    setTimeout(finish, 220);
+  }
 
   function closeMenus() {
     openMenu = null;
-    for (const k in dropdowns) dropdowns[k].style.display = 'none';
+    for (const k in dropdowns) closePanel(dropdowns[k]);
     for (const k in triggers) triggers[k].classList.remove('open');
-    menuBar.querySelectorAll('.menu-submenu-dropdown').forEach(s => { s.style.display = 'none'; });
+    menuBar.querySelectorAll('.menu-submenu-dropdown').forEach(closePanel);
   }
 
   function openMenuNamed(name) {
     if (openMenu === name) return;
     closeMenus();
     openMenu = name;
-    if (dropdowns[name]) dropdowns[name].style.display = '';
+    openPanel(dropdowns[name]);
     if (triggers[name]) triggers[name].classList.add('open');
     if (name === 'einstellungen') _syncMenuSettings();
   }
@@ -590,8 +629,8 @@ function initMenuBar() {
 
   menuBar.querySelectorAll('.menu-submenu').forEach(sm => {
     const sub = sm.querySelector('.menu-submenu-dropdown');
-    sm.addEventListener('mouseenter', () => { if (sub) sub.style.display = ''; });
-    sm.addEventListener('mouseleave', () => { if (sub) sub.style.display = 'none'; });
+    sm.addEventListener('mouseenter', () => openPanel(sub));
+    sm.addEventListener('mouseleave', () => closePanel(sub));
   });
 
   menuBar.querySelectorAll('[data-menu-action]').forEach(item => {
@@ -3544,6 +3583,33 @@ function renderHealthCheckResults(_results) {
   if (container) container.innerHTML = '';
 }
 
+let _appAlertResolve = null;
+
+function closeAppAlert() {
+  const modal = document.getElementById('appAlertModal');
+  if (!modal) return;
+  modal.style.display = 'none';
+  modal.setAttribute('aria-hidden', 'true');
+  const resolve = _appAlertResolve;
+  _appAlertResolve = null;
+  if (resolve) resolve();
+}
+
+function showAppAlert(message, title = 'Hinweis') {
+  const modal = document.getElementById('appAlertModal');
+  const titleEl = document.getElementById('appAlertTitle');
+  const messageEl = document.getElementById('appAlertMessage');
+  const confirm = document.getElementById('appAlertConfirmBtn');
+  if (!modal || !titleEl || !messageEl || !confirm) return Promise.resolve();
+  if (_appAlertResolve) closeAppAlert();
+  titleEl.textContent = title;
+  messageEl.textContent = String(message || '');
+  modal.style.display = 'flex';
+  modal.setAttribute('aria-hidden', 'false');
+  confirm.focus();
+  return new Promise(resolve => { _appAlertResolve = resolve; });
+}
+
 async function executeHealthCheck(hosters, _mode) {
   renderHealthCheckResults([]);
   const result = await window.api.runHealthCheck({ hosters });
@@ -3578,7 +3644,7 @@ async function runHealthCheck(mode = 'manual', requestedHosters = null) {
       .map(({ name, account }) => ({ hoster: name, accountId: account.id }));
   }
   if (hosters.length === 0) {
-    if (mode === 'manual') alert('Keine Hoster mit Zugangsdaten für einen Check.');
+    if (mode === 'manual') await showAppAlert('Keine Hoster mit Zugangsdaten für einen Check.');
     return [];
   }
   healthCheckRunning = true;
@@ -3662,7 +3728,7 @@ function renderSettings() {
       <div class="settings-search-wrap">
         <label for="settingsSearchInput">Schnell finden</label>
         <div class="settings-search-control">
-          <span class="settings-search-icon" aria-hidden="true">⌕</span>
+          <span class="settings-search-icon" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><circle cx="10.8" cy="10.8" r="5.8"></circle><path d="m15.2 15.2 4.3 4.3"></path></svg></span>
           <input type="search" id="settingsSearchInput" placeholder="Einstellungen durchsuchen" autocomplete="off" spellcheck="false">
         </div>
       </div>
@@ -3750,15 +3816,19 @@ function renderSettings() {
   pages.automatik.innerHTML = `
       ${pageHeader('Automatik', 'Wiederholungen und überwachte Ordner für unbeaufsichtigte Uploads.')}
       <div class="settings-section-label">Unbeaufsichtigter Betrieb</div>
-      <div class="settings-row">
+      <div class="settings-row automation-retry-row">
         <label for="autoRetryRoundsInput">Automatische Wiederholungsrunden</label>
-        <input type="number" class="hs-input settings-autosave" id="autoRetryRoundsInput" min="0" max="5" value="${Number(globalSettings.autoRetryRounds) || 0}">
-        <span class="hint">0 = aus. Nach Batch-Ende werden transiente Fehler (Netzwerk, Hoster-Flake) automatisch bis zu N Runden neu versucht.</span>
+        <div class="automation-retry-control">
+          <input type="number" class="hs-input settings-autosave" id="autoRetryRoundsInput" min="0" max="5" value="${Number(globalSettings.autoRetryRounds) || 0}">
+          <span class="hint">0 = aus. Nach Batch-Ende werden transiente Fehler (Netzwerk, Hoster-Flake) automatisch bis zu N Runden neu versucht.</span>
+        </div>
       </div>
-      <div class="settings-row">
+      <div class="settings-row automation-retry-row">
         <label for="autoRetryDelayMinInput">Wartezeit zwischen Runden</label>
-        <input type="number" class="hs-input settings-autosave" id="autoRetryDelayMinInput" min="1" max="120" value="${Number(globalSettings.autoRetryDelayMin) || 5}">
-        <span class="hint">Minuten · jede weitere Runde wartet entsprechend länger</span>
+        <div class="automation-retry-control">
+          <input type="number" class="hs-input settings-autosave" id="autoRetryDelayMinInput" min="1" max="120" value="${Number(globalSettings.autoRetryDelayMin) || 5}">
+          <span class="hint">Minuten · jede weitere Runde wartet entsprechend länger</span>
+        </div>
       </div>
       <div class="settings-section-label">Ordnerüberwachung <span class="panel-status${fm.enabled && fm.folderPath ? ' active' : ''}" id="folderMonitorStatusBadge">${fm.enabled && fm.folderPath ? 'Aktiv' : 'Inaktiv'}</span></div>
       <div class="settings-row">
@@ -5682,9 +5752,11 @@ function _renderHistoryVirtualRows() {
     parts.push(escapeHtml(row.filename));
     parts.push('</td><td class="col-host">');
     parts.push(escapeHtml(row.host));
-    parts.push('</td><td class="col-link">');
+    parts.push('</td><td class="col-link"><div class="history-link-cell"><span class="history-link-text" title="');
+    parts.push(escapeAttr(link));
+    parts.push('">');
     parts.push(escapeHtml(link));
-    parts.push('</td></tr>');
+    parts.push('</span><button class="history-copy-link" type="button" data-copy-link aria-label="Link kopieren" title="Link kopieren">⧉</button></div></td></tr>');
   }
   if (bottomPad > 0) parts.push(`<tr class="virtual-spacer" style="height:${bottomPad}px"><td colspan="4"></td></tr>`);
   tbody.innerHTML = parts.join('');
@@ -5750,6 +5822,13 @@ function renderHistoryTable(container) {
         renderHistoryTable(container);
         return;
       }
+      const copyButton = e.target.closest('.history-copy-link');
+      if (copyButton && container.contains(copyButton)) {
+        const link = copyButton.closest('.history-row')?.dataset.link;
+        if (link) { window.api.copyToClipboard(link); showCopyToast('Link kopiert'); }
+        e.stopPropagation();
+        return;
+      }
       const row = e.target.closest('.history-row');
       if (row && !row.classList.contains('error')) {
         const link = row.dataset.link;
@@ -5971,6 +6050,19 @@ function setupListeners() {
     });
   });
   document.getElementById('saveSettingsBtn').addEventListener('click', saveSettings);
+  document.getElementById('appAlertConfirmBtn').addEventListener('click', closeAppAlert);
+  document.getElementById('appAlertCloseBtn').addEventListener('click', closeAppAlert);
+  document.getElementById('appAlertModal').addEventListener('click', event => {
+    if (event.target.id === 'appAlertModal') closeAppAlert();
+  });
+  document.addEventListener('keydown', event => {
+    const modal = document.getElementById('appAlertModal');
+    if (modal?.style.display !== 'flex') return;
+    if (event.key === 'Escape' || event.key === 'Enter') {
+      event.preventDefault();
+      closeAppAlert();
+    }
+  }, true);
 
   document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
     if (!confirm('Verlauf wirklich löschen?')) return;

renderer/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';">
   <meta name="theme-color" content="#0f0f0f">
-  <title>Multi-Hoster-Upload</title>
+  <title>Multi Hoster Uploader</title>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
@@ -49,6 +49,7 @@
           <svg class="top-nav-icon" aria-hidden="true"><use href="#icon-history"></use></svg>
           <span class="top-nav-label">Verlauf</span>
         </button>
+        <span class="tab-indicator" aria-hidden="true"></span>
       </nav>
     </div>
     <div class="header-spacer" aria-hidden="true"></div>
@@ -128,7 +129,6 @@
         </div>
       </nav>
       <div class="version-badge" title="Installierte Version">
-        <span class="version-monogram" aria-hidden="true">U</span>
         <span class="version-label" id="versionLabel"></span>
       </div>
     </div>
@@ -462,6 +462,22 @@
     </div>
   </div>
 
+  <div class="modal-overlay app-alert-modal" id="appAlertModal" style="display:none" aria-hidden="true">
+    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="appAlertTitle" aria-describedby="appAlertMessage" style="width:min(420px,100%)">
+      <div class="modal-header">
+        <div><h3 id="appAlertTitle">Hinweis</h3></div>
+        <button class="icon-btn" id="appAlertCloseBtn" aria-label="Schließen">&times;</button>
+      </div>
+      <div class="modal-body">
+        <p id="appAlertMessage"></p>
+      </div>
+      <div class="modal-footer">
+        <span></span>
+        <button class="btn btn-primary" id="appAlertConfirmBtn">OK</button>
+      </div>
+    </div>
+  </div>
+
   <div id="settings-view" class="view" role="tabpanel" aria-labelledby="settings-tab">
     <div class="settings-container">
       <div class="settings-header">

renderer/styles.css

@@ -869,26 +869,47 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
   letter-spacing: 0.07em;
   text-transform: uppercase;
 }
-.settings-search-control { position: relative; }
+.settings-search-control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
 .settings-search-icon {
   position: absolute;
   left: 10px;
   top: 50%;
-  transform: translateY(-52%);
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
   color: var(--text-dim);
-  font-size: 17px;
   pointer-events: none;
 }
+.settings-search-icon svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+}
 #settingsSearchInput {
   width: 100%;
-  min-height: 34px;
-  padding: 7px 9px 7px 31px;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 10px 0 32px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg-input);
   color: var(--text);
   font: inherit;
   font-size: 11px;
+  line-height: 18px;
 }
 #settingsSearchInput::placeholder { color: var(--text-dim); }
 #settingsSearchInput:focus { border-color: var(--accent); outline: none; }
@@ -1012,6 +1033,32 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
 .settings-subpage .settings-row > label { min-width: 215px; color: var(--text); font-weight: 600; }
 .settings-subpage .settings-row > .key-input { max-width: none; min-width: 180px; }
 .settings-subpage .settings-row > .hint { flex: 1 1 220px; line-height: 1.45; }
+.settings-subpage .automation-retry-row {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr);
+  align-items: start;
+  column-gap: 10px;
+}
+.settings-subpage .automation-retry-row > label {
+  min-width: 0;
+  padding-top: 9px;
+}
+.settings-subpage .automation-retry-control {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
+}
+.settings-subpage .automation-retry-control > .hs-input {
+  width: 100px;
+  min-width: 0;
+  max-width: none;
+}
+.settings-subpage .automation-retry-control > .hint {
+  margin: 0;
+  padding-left: 0;
+  line-height: 1.45;
+}
 .settings-subpage .settings-row-wide { flex-wrap: wrap; }
 .settings-subpage .settings-row-wide > .hint { flex-basis: calc(100% - 223px); margin-left: 223px; }
 .settings-section-label {
@@ -1404,6 +1451,38 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   white-space: nowrap;
   max-width: 300px;
 }
+.history-link-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.history-link-text {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.history-copy-link {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 16px;
+  cursor: pointer;
+}
+.history-copy-link:hover,
+.history-copy-link:focus-visible {
+  color: var(--text);
+  border-color: var(--accent);
+  background: var(--bg-hover);
+}
 
 .empty-state { color: var(--text-dim); text-align: center; padding: 40px; font-size: 14px; }
 
@@ -1521,6 +1600,18 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
   }
+
+  .tab-indicator {
+    transition-duration: 280ms !important;
+  }
+
+  .menu-opening {
+    animation-duration: 180ms !important;
+  }
+
+  .menu-closing {
+    animation-duration: 160ms !important;
+  }
 }
 
 .online-backup-panel {
@@ -1694,7 +1785,7 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   padding: 0;
   border: 0;
   background: transparent;
-  position: static;
+  position: relative;
 }
 
 .tab {
@@ -1723,6 +1814,18 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   background: var(--bg-active);
 }
 
+.tab-indicator {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: var(--accent);
+  pointer-events: none;
+  transition: transform .2s cubic-bezier(.2, .8, .2, 1), width .2s cubic-bezier(.2, .8, .2, 1);
+}
+
 .top-nav-icon,
 .header-action-icon,
 .view-sidebar-icon,
@@ -1870,6 +1973,30 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
 }
 
+.menu-dropdown,
+.menu-submenu-dropdown {
+  transform-origin: top;
+}
+
+.menu-opening {
+  animation: menu-unfold 180ms cubic-bezier(.2, .8, .2, 1) both;
+}
+
+.menu-closing {
+  pointer-events: none;
+  animation: menu-fold 160ms cubic-bezier(.4, 0, .8, .2) both;
+}
+
+@keyframes menu-unfold {
+  from { opacity: .35; clip-path: inset(0 0 100% 0); transform: scaleY(.96); }
+  to { opacity: 1; clip-path: inset(0); transform: scaleY(1); }
+}
+
+@keyframes menu-fold {
+  from { opacity: 1; clip-path: inset(0); transform: scaleY(1); }
+  to { opacity: .2; clip-path: inset(0 0 100% 0); transform: scaleY(.96); }
+}
+
 .header-utilities .menu-dropdown {
   left: auto;
   right: 0;
@@ -2159,7 +2286,7 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   align-items: center;
   gap: 10px;
   padding: 7px 10px;
-  border: 1px solid transparent;
+  border: 1px solid var(--border);
   border-radius: 6px;
   background: transparent;
   color: var(--text-muted);
@@ -2172,12 +2299,13 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
 
 .view-sidebar-item:hover {
   color: var(--text);
+  border-color: var(--border-hover);
   background: var(--bg-raised);
 }
 
 .view-sidebar-item.active {
   color: var(--text);
-  border-color: #444548;
+  border-color: var(--border-hover);
   background: var(--bg-active);
 }
 
@@ -2564,10 +2692,8 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
 }
 
 .key-input,
-.hs-input,
-#settingsSearchInput {
+.hs-input {
   min-height: 40px;
-  padding: 8px 11px;
   border-color: var(--border);
   border-radius: 6px;
   background: var(--bg-input);
@@ -2716,6 +2842,13 @@ input[type="checkbox"] {
 
 .settings-grid-mini {
   gap: 8px;
+  margin-bottom: 8px;
+}
+
+.log-paths-list,
+.log-paths-list > div,
+.log-paths-list code {
+  min-width: 0;
 }
 
 .settings-option {
@@ -2947,9 +3080,10 @@ input[type="checkbox"] {
   flex: 1 1 auto;
 }
 
-.statusbar .sb-state::before,
-.statusbar .sb-done-count::before {
-  background: var(--success);
+.statusbar > span.sb-state::before,
+.statusbar > span.sb-done-count::before {
+  background: #43d17b;
+  box-shadow: 0 0 6px rgba(67, 209, 123, .55);
 }
 
 .statusbar .sb-speed::before,