JDownloader 2-style UI overhaul, multi-select, hoster display, settings sidebar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "real-debrid-downloader",
-  "version": "1.4.90",
+  "version": "1.4.95",
   "description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
   "main": "build/main/main/main.js",
   "author": "Sucukdeluxe",

src/main/app-controller.ts

@@ -19,7 +19,7 @@ import { DownloadManager } from "./download-manager";
 import { parseCollectorInput } from "./link-parser";
 import { configureLogger, getLogFilePath, logger } from "./logger";
 import { MegaWebFallback } from "./mega-web-fallback";
-import { createStoragePaths, loadSession, loadSettings, normalizeSettings, saveSettings } from "./storage";
+import { createStoragePaths, loadSession, loadSettings, normalizeSettings, saveSession, saveSettings } from "./storage";
 import { abortActiveUpdateDownload, checkGitHubUpdate, installLatestUpdate } from "./update";
 import { startDebugServer, stopDebugServer } from "./debug-server";
 
@@ -237,6 +237,31 @@ export class AppController {
     return this.manager.getSessionStats();
   }
 
+  public exportBackup(): string {
+    const settings = this.settings;
+    const session = this.manager.getSession();
+    return JSON.stringify({ version: 1, settings, session }, null, 2);
+  }
+
+  public importBackup(json: string): { restored: boolean; message: string } {
+    let parsed: Record<string, unknown>;
+    try {
+      parsed = JSON.parse(json) as Record<string, unknown>;
+    } catch {
+      return { restored: false, message: "Ungültiges JSON" };
+    }
+    if (!parsed || typeof parsed !== "object" || !parsed.settings || !parsed.session) {
+      return { restored: false, message: "Kein gültiges Backup (settings/session fehlen)" };
+    }
+    const restoredSettings = normalizeSettings(parsed.settings as AppSettings);
+    this.settings = restoredSettings;
+    saveSettings(this.storagePaths, this.settings);
+    this.manager.setSettings(this.settings);
+    const restoredSession = parsed.session as ReturnType<typeof loadSession>;
+    saveSession(this.storagePaths, restoredSession);
+    return { restored: true, message: "Backup wiederhergestellt. Bitte App neustarten." };
+  }
+
   public shutdown(): void {
     stopDebugServer();
     abortActiveUpdateDownload();

src/main/constants.ts

@@ -73,6 +73,8 @@ export function defaultSettings(): AppSettings {
     clipboardWatch: false,
     minimizeToTray: false,
     theme: "dark" as const,
+    collapseNewPackages: true,
+    autoSkipExtracted: false,
     bandwidthSchedules: []
   };
 }

src/main/download-manager.ts

@@ -867,7 +867,7 @@ export class DownloadManager extends EventEmitter {
       summary: snapshotSummary,
       stats: this.getStats(now),
       speedText: `Geschwindigkeit: ${humanSize(Math.max(0, Math.floor(speedBps)))}/s`,
-      etaText: paused ? "ETA: --" : `ETA: ${formatEta(eta)}`,
+      etaText: paused || !this.session.running ? "ETA: --" : `ETA: ${formatEta(eta)}`,
       canStart: !this.session.running,
       canStop: this.session.running,
       canPause: this.session.running,

src/main/main.ts

@@ -1,9 +1,10 @@
+import fs from "node:fs";
 import path from "node:path";
 import { app, BrowserWindow, clipboard, dialog, ipcMain, IpcMainInvokeEvent, Menu, shell, Tray } from "electron";
 import { AddLinksPayload, AppSettings, UpdateInstallProgress } from "../shared/types";
 import { AppController } from "./app-controller";
 import { IPC_CHANNELS } from "../shared/ipc";
-import { logger } from "./logger";
+import { getLogFilePath, logger } from "./logger";
 import { APP_NAME } from "./constants";
 import { extractHttpLinksFromText } from "./utils";
 
@@ -86,6 +87,9 @@ function createWindow(): BrowserWindow {
     });
   }
 
+  window.setMenuBarVisibility(false);
+  window.setAutoHideMenuBar(true);
+
   if (isDevMode()) {
     void window.loadURL("http://localhost:5173");
   } else {
@@ -346,6 +350,51 @@ function registerIpcHandlers(): void {
   });
   ipcMain.handle(IPC_CHANNELS.GET_SESSION_STATS, () => controller.getSessionStats());
 
+  ipcMain.handle(IPC_CHANNELS.RESTART, () => {
+    app.relaunch();
+    app.quit();
+  });
+
+  ipcMain.handle(IPC_CHANNELS.QUIT, () => {
+    app.quit();
+  });
+
+  ipcMain.handle(IPC_CHANNELS.EXPORT_BACKUP, async () => {
+    const options = {
+      defaultPath: `mdd-backup-${new Date().toISOString().slice(0, 10)}.json`,
+      filters: [{ name: "Backup", extensions: ["json"] }]
+    };
+    const result = mainWindow ? await dialog.showSaveDialog(mainWindow, options) : await dialog.showSaveDialog(options);
+    if (result.canceled || !result.filePath) {
+      return { saved: false };
+    }
+    const json = controller.exportBackup();
+    await fs.promises.writeFile(result.filePath, json, "utf8");
+    return { saved: true };
+  });
+
+  ipcMain.handle(IPC_CHANNELS.OPEN_LOG, async () => {
+    const logPath = getLogFilePath();
+    await shell.openPath(logPath);
+  });
+
+  ipcMain.handle(IPC_CHANNELS.IMPORT_BACKUP, async () => {
+    const options = {
+      properties: ["openFile"] as Array<"openFile">,
+      filters: [
+        { name: "Backup", extensions: ["json"] },
+        { name: "Alle Dateien", extensions: ["*"] }
+      ]
+    };
+    const result = mainWindow ? await dialog.showOpenDialog(mainWindow, options) : await dialog.showOpenDialog(options);
+    if (result.canceled || result.filePaths.length === 0) {
+      return { restored: false, message: "Abgebrochen" };
+    }
+    const filePath = result.filePaths[0];
+    const json = await fs.promises.readFile(filePath, "utf8");
+    return controller.importBackup(json);
+  });
+
   controller.onState = (snapshot) => {
     if (!mainWindow || mainWindow.isDestroyed()) {
       return;

src/main/storage.ts

@@ -106,6 +106,8 @@ export function normalizeSettings(settings: AppSettings): AppSettings {
     updateRepo: asText(settings.updateRepo) || defaults.updateRepo,
     clipboardWatch: Boolean(settings.clipboardWatch),
     minimizeToTray: Boolean(settings.minimizeToTray),
+    collapseNewPackages: settings.collapseNewPackages !== undefined ? Boolean(settings.collapseNewPackages) : defaults.collapseNewPackages,
+    autoSkipExtracted: settings.autoSkipExtracted !== undefined ? Boolean(settings.autoSkipExtracted) : defaults.autoSkipExtracted,
     theme: VALID_THEMES.has(settings.theme) ? settings.theme : defaults.theme,
     bandwidthSchedules: normalizeBandwidthSchedules(settings.bandwidthSchedules)
   };

src/preload/preload.ts

@@ -42,6 +42,11 @@ const api: ElectronApi = {
   pickFolder: (): Promise<string | null> => ipcRenderer.invoke(IPC_CHANNELS.PICK_FOLDER),
   pickContainers: (): Promise<string[]> => ipcRenderer.invoke(IPC_CHANNELS.PICK_CONTAINERS),
   getSessionStats: (): Promise<SessionStats> => ipcRenderer.invoke(IPC_CHANNELS.GET_SESSION_STATS),
+  restart: (): Promise<void> => ipcRenderer.invoke(IPC_CHANNELS.RESTART),
+  quit: (): Promise<void> => ipcRenderer.invoke(IPC_CHANNELS.QUIT),
+  exportBackup: (): Promise<{ saved: boolean }> => ipcRenderer.invoke(IPC_CHANNELS.EXPORT_BACKUP),
+  importBackup: (): Promise<{ restored: boolean; message: string }> => ipcRenderer.invoke(IPC_CHANNELS.IMPORT_BACKUP),
+  openLog: (): Promise<void> => ipcRenderer.invoke(IPC_CHANNELS.OPEN_LOG),
   onStateUpdate: (callback: (snapshot: UiSnapshot) => void): (() => void) => {
     const listener = (_event: unknown, snapshot: UiSnapshot): void => callback(snapshot);
     ipcRenderer.on(IPC_CHANNELS.STATE_UPDATE, listener);

src/renderer/styles.css

@@ -62,47 +62,222 @@ body,
 
 .app-shell {
   display: grid;
-  grid-template-rows: auto auto auto 1fr;
+  grid-template-rows: auto auto auto 1fr auto;
   height: 100%;
   padding: 12px 14px 10px;
   gap: 8px;
 }
 
-.top-header {
+/* ── Menu Bar ───────────────────────────────────────────────── */
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 10px;
-}
 
-.header-spacer {
+.menu-bar {
-  min-height: 1px;
-}
-
-.title-block {
-  text-align: center;
-}
-
-.title-block h1 {
-  margin: 0;
-  font-size: 25px;
-  font-weight: 700;
-  letter-spacing: 0.2px;
-}
-
-.title-block span {
-  color: var(--muted);
-  font-size: 13px;
-}
-
-.metrics {
   display: flex;
-  gap: 12px;
+  align-items: center;
-  color: var(--muted);
+  gap: 0;
+  user-select: none;
   font-size: 13px;
-  justify-self: end;
+  font-weight: 600;
+  margin: -8px -6px 0;
 }
 
+.menu-bar-item {
+  position: relative;
+}
+
+.menu-bar-trigger {
+  background: none;
+  border: none;
+  color: var(--text);
+  padding: 5px 12px;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 600;
+  border-radius: 6px;
+  transition: background 0.1s;
+}
+
+.menu-bar-trigger:hover,
+.menu-bar-trigger.open {
+  background: var(--button-bg-hover);
+}
+
+.menu-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  min-width: max-content;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px 0;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  white-space: nowrap;
+}
+
+.menu-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--text);
+  padding: 7px 16px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.menu-dropdown-item:hover {
+  background: var(--button-bg-hover);
+}
+
+.menu-dropdown-item .shortcut {
+  color: var(--muted);
+  font-size: 12px;
+  margin-left: 24px;
+  white-space: nowrap;
+}
+
+.menu-separator {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 8px;
+}
+
+.menu-submenu {
+  position: relative;
+}
+
+.menu-submenu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--text);
+  padding: 7px 16px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.menu-submenu-trigger:hover {
+  background: var(--button-bg-hover);
+}
+
+.menu-submenu-trigger::after {
+  content: "\25B6";
+  font-size: 8px;
+  color: var(--muted);
+  margin-left: 12px;
+}
+
+.menu-submenu-dropdown {
+  position: absolute;
+  top: -4px;
+  left: 100%;
+  z-index: 1001;
+  min-width: max-content;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px 0;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.menu-settings-grid {
+  display: grid;
+  grid-template-columns: 1fr auto auto auto;
+  align-items: center;
+  gap: 6px 8px;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.menu-spinner {
+  display: flex;
+  align-items: stretch;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  height: 28px;
+}
+
+.menu-spinner.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.menu-spinner input[type="text"] {
+  width: 38px;
+  background: var(--field);
+  color: var(--text);
+  border: none;
+  padding: 0 6px;
+  font: inherit;
+  font-size: 13px;
+  text-align: center;
+  outline: none;
+}
+
+.menu-spinner-arrows {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border);
+}
+
+.menu-spinner-arrows button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--button-bg);
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 0;
+  width: 18px;
+  flex: 1;
+  font-size: 8px;
+  line-height: 1;
+  transition: background 0.1s;
+}
+
+.menu-spinner-arrows button:hover {
+  background: var(--button-bg-hover);
+  color: var(--text);
+}
+
+.menu-spinner-arrows button:first-child {
+  border-bottom: 1px solid var(--border);
+}
+
+.menu-settings-grid input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--accent);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.menu-speed-unit {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+
+
 .control-strip {
   display: flex;
   justify-content: space-between;
@@ -113,6 +288,79 @@ body,
   padding: 10px 12px;
 }
 
+.ctrl-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--button-bg);
+  color: var(--muted);
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
+}
+
+.ctrl-icon-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: var(--accent);
+  background: var(--button-bg-hover);
+  color: var(--text);
+}
+
+.ctrl-icon-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.ctrl-icon-btn.ctrl-play:not(:disabled) {
+  color: #4ade80;
+}
+
+.ctrl-icon-btn.ctrl-play:hover:not(:disabled) {
+  border-color: #4ade80;
+  background: rgba(74, 222, 128, 0.1);
+}
+
+.ctrl-icon-btn.ctrl-pause.active {
+  color: var(--accent);
+}
+
+.ctrl-icon-btn.ctrl-pause:not(:disabled):hover {
+  border-color: #f59e0b;
+  color: #f59e0b;
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.ctrl-icon-btn.ctrl-stop:not(:disabled) {
+  color: var(--danger);
+}
+
+.ctrl-icon-btn.ctrl-stop:hover:not(:disabled) {
+  border-color: var(--danger);
+  background: rgba(244, 63, 94, 0.1);
+}
+
+.ctrl-icon-btn.ctrl-speed.active {
+  color: #f59e0b;
+  border-color: rgba(245, 158, 11, 0.5);
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.ctrl-icon-btn.ctrl-speed:hover:not(:disabled) {
+  border-color: #f59e0b;
+  color: #f59e0b;
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.ctrl-separator {
+  width: 1px;
+  height: 24px;
+  background: var(--border);
+  margin: 0 2px;
+}
+
 .buttons,
 .speed-config,
 .link-actions,
@@ -174,9 +422,36 @@ body,
 
 .tabs {
   display: flex;
+  align-items: center;
   gap: 8px;
 }
 
+.tab-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.tab-action-btn {
+  font-size: 12px;
+  padding: 5px 10px;
+}
+
+.downloads-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.search-input.tab-search {
+  width: 330px;
+  min-width: 330px;
+  position: relative;
+  z-index: 1;
+}
+
 .tab {
   background: var(--tab-bg);
   border: 1px solid var(--border);
@@ -294,6 +569,65 @@ body,
   margin-left: auto;
 }
 
+.pkg-column-header {
+  display: grid;
+  grid-template-columns: 1fr 100px 220px 180px 100px;
+  gap: 8px;
+  padding: 5px 12px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--muted);
+  user-select: none;
+}
+
+.pkg-column-header .sortable {
+  cursor: pointer;
+}
+
+.pkg-column-header .sortable:hover {
+  color: var(--text);
+}
+
+.pkg-column-header .sort-active {
+  color: var(--accent);
+}
+
+.pkg-columns {
+  display: grid;
+  grid-template-columns: 1fr 100px 220px 180px 100px;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+}
+
+.pkg-columns .pkg-col-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.pkg-columns .pkg-col-name h4 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pkg-columns .pkg-col-size,
+.pkg-columns .pkg-col-hoster,
+.pkg-columns .pkg-col-status,
+.pkg-columns .pkg-col-speed {
+  font-size: 13px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .search-input {
   width: min(360px, 100%);
   background: var(--field);
@@ -377,12 +711,18 @@ body,
   font-size: 13px;
 }
 
-.stats-bar {
+.status-bar {
   display: flex;
   flex-wrap: wrap;
-  gap: 14px;
+  gap: 16px;
+  align-items: center;
   color: var(--muted);
-  font-size: 13px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  padding: 5px 14px;
+  margin: 0 -14px -10px;
 }
 
 .settings-shell {
@@ -425,37 +765,135 @@ body,
   gap: 6px;
 }
 
-.update-install-progress {
+.update-popup {
-  color: var(--muted);
+  position: fixed;
-  font-size: 12px;
+  right: 20px;
+  bottom: 56px;
+  background: var(--toast-bg);
+  border: 1px solid var(--toast-border);
+  border-radius: 12px;
+  padding: 10px 14px;
+  min-width: 260px;
+  max-width: 340px;
+  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
+  z-index: 30;
   font-variant-numeric: tabular-nums;
 }
 
-.update-install-progress-downloading,
+.update-popup-header {
-.update-install-progress-verifying,
+  display: flex;
-.update-install-progress-launching,
+  align-items: center;
-.update-install-progress-starting {
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.update-popup-title {
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--text);
+}
+
+.update-popup-close {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.update-popup-close:hover {
+  color: var(--text);
+}
+
+.update-popup-message {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.update-popup-downloading .update-popup-message,
+.update-popup-verifying .update-popup-message,
+.update-popup-launching .update-popup-message,
+.update-popup-starting .update-popup-message {
   color: color-mix(in srgb, var(--accent) 75%, var(--text));
 }
 
-.update-install-progress-done {
+.update-popup-done .update-popup-message {
   color: color-mix(in srgb, var(--accent) 65%, var(--text));
 }
 
-.update-install-progress-error {
+.update-popup-error .update-popup-message {
   color: color-mix(in srgb, var(--danger) 65%, var(--text));
 }
 
-.settings-grid {
+.update-popup-bar-track {
-  display: grid;
+  margin-top: 6px;
-  gap: 10px;
+  height: 4px;
-  min-height: 0;
+  background: var(--progress-track);
-  overflow: auto;
+  border-radius: 2px;
-  align-content: start;
+  overflow: hidden;
 }
 
-.settings-card {
+.update-popup-bar-fill {
-  gap: 6px;
+  height: 100%;
+  background: var(--accent);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.settings-body {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.settings-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 8px 4px 0;
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+}
+
+.settings-sidebar-tab {
+  background: none;
+  border: none;
+  border-left: 3px solid transparent;
+  color: var(--muted);
+  padding: 8px 12px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+  border-radius: 0 8px 8px 0;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+.settings-sidebar-tab:hover {
+  background: var(--button-bg-hover);
+  color: var(--text);
+}
+
+.settings-sidebar-tab.active {
+  border-left-color: var(--accent);
+  color: var(--text);
+  background: var(--tab-active);
+}
+
+.settings-content {
+  overflow-y: auto;
+  padding: 4px 0 4px 14px;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
 }
 
 .field-grid {
@@ -490,7 +928,7 @@ body,
   border: 1px solid var(--border);
   border-radius: 14px;
   background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
-  padding: 12px;
+  padding: 8px 12px;
 }
 
 .package-card[draggable="true"] {
@@ -505,6 +943,15 @@ body,
   opacity: 0.72;
 }
 
+.pkg-selected {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+.item-selected {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
 .package-card header {
   display: flex;
   justify-content: space-between;
@@ -522,14 +969,30 @@ body,
   font-size: 13px;
 }
 
-.pkg-info {
+
-  min-width: 0;
+.pkg-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--button-bg);
+  color: var(--muted);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
 }
 
-.pkg-name-row {
+.pkg-toggle:hover {
-  display: flex;
+  border-color: var(--accent);
-  align-items: center;
+  color: var(--text);
-  gap: 8px;
+  background: var(--button-bg-hover);
 }
 
 .pkg-name-row input[type="checkbox"] {
@@ -538,8 +1001,18 @@ body,
 }
 
 .rename-input {
-  min-width: 220px;
+  flex: 1;
-  max-width: 440px;
+  min-width: 0;
+  background: transparent;
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  color: var(--text);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 600;
+  padding: 1px 4px;
+  margin: -2px 0;
+  outline: none;
 }
 
 .pkg-speed {
@@ -604,32 +1077,49 @@ td {
   font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
 }
 
-.col-file {
+.item-row {
-  width: 34%;
+  display: grid;
+  grid-template-columns: 1fr 100px 220px 180px 100px;
+  gap: 8px;
+  align-items: center;
+  margin: 0 -12px;
+  padding: 4px 12px;
+  font-size: 13px;
+  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
 }
 
-.col-provider {
+.item-row:hover {
-  width: 14%;
+  background: color-mix(in srgb, var(--accent) 5%, transparent);
 }
 
-.col-status {
+.item-row .pkg-col {
-  width: 26%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-size: 13px;
 }
 
-.col-progress {
+.item-row .pkg-col-name {
-  width: 8%;
+  color: var(--text);
+  padding-left: 32px;
 }
 
-.col-speed {
+.item-remove {
-  width: 12%;
+  background: none;
+  border: none;
+  color: var(--danger);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 2px 4px;
+  border-radius: 4px;
+  opacity: 0.6;
 }
 
-.col-retries {
+.item-remove:hover {
-  width: 6%;
+  opacity: 1;
-}
+  background: rgba(244, 63, 94, 0.1);
-
-.settings-grid {
-  grid-template-columns: 1.1fr 1fr;
 }
 
 .statistics-view {
@@ -835,6 +1325,101 @@ td {
   box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
 }
 
+.ctx-menu {
+  position: fixed;
+  z-index: 100;
+  min-width: 200px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px 0;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.ctx-menu-item {
+  display: block;
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--text);
+  padding: 7px 14px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.ctx-menu-item:hover {
+  background: var(--button-bg-hover);
+}
+
+.ctx-menu-item.ctx-danger {
+  color: var(--danger);
+}
+
+.ctx-menu-sep {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 8px;
+}
+
+.link-popup {
+  width: min(720px, 90vw);
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.link-popup-list {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--field);
+  max-height: 50vh;
+}
+
+.link-popup-row {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: 12px;
+  padding: 6px 10px;
+  font-size: 12px;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
+}
+
+.link-popup-row:last-child {
+  border-bottom: none;
+}
+
+.link-popup-name,
+.link-popup-url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-popup-name {
+  color: var(--text);
+}
+
+.link-popup-url {
+  color: var(--muted);
+}
+
+.link-popup-click {
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 1px 3px;
+  margin: -1px -3px;
+  transition: background 0.1s;
+}
+
+.link-popup-click:hover {
+  background: var(--button-bg-hover);
+}
+
 .drop-overlay {
   position: fixed;
   inset: 0;
@@ -892,32 +1477,11 @@ td {
 }
 
 @media (max-width: 1100px) {
-  .top-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-  }
-
-  .header-spacer {
-    display: none;
-  }
-
-  .title-block {
-    text-align: center;
-  }
-
   .control-strip {
     flex-direction: column;
     align-items: flex-start;
   }
 
-  .metrics {
-    flex-direction: column;
-    align-items: center;
-    justify-self: center;
-  }
-
   .buttons-right {
     width: 100%;
     margin-left: 0;
@@ -943,11 +1507,14 @@ td {
     align-items: flex-start;
   }
 
-  .grid-two,
+  .grid-two {
-  .settings-grid {
     grid-template-columns: 1fr;
   }
 
+  .settings-body {
+    grid-template-columns: 140px 1fr;
+  }
+
   .field-grid.two,
   .field-grid.three {
     grid-template-columns: 1fr;
@@ -966,6 +1533,25 @@ td {
     align-items: flex-start;
   }
 
+  .pkg-columns,
+  .pkg-column-header {
+    grid-template-columns: 1fr;
+  }
+
+  .pkg-column-header .pkg-col-size,
+  .pkg-column-header .pkg-col-hoster,
+  .pkg-column-header .pkg-col-status,
+  .pkg-column-header .pkg-col-speed {
+    display: none;
+  }
+
+  .pkg-columns .pkg-col-size,
+  .pkg-columns .pkg-col-hoster,
+  .pkg-columns .pkg-col-status,
+  .pkg-columns .pkg-col-speed {
+    display: none;
+  }
+
   .pkg-actions {
     width: 100%;
     justify-content: flex-start;

src/shared/ipc.ts

@@ -26,5 +26,10 @@ export const IPC_CHANNELS = {
   STATE_UPDATE: "state:update",
   CLIPBOARD_DETECTED: "clipboard:detected",
   TOGGLE_CLIPBOARD: "clipboard:toggle",
-  GET_SESSION_STATS: "stats:get-session-stats"
+  GET_SESSION_STATS: "stats:get-session-stats",
+  RESTART: "app:restart",
+  QUIT: "app:quit",
+  EXPORT_BACKUP: "app:export-backup",
+  IMPORT_BACKUP: "app:import-backup",
+  OPEN_LOG: "app:open-log"
 } as const;

src/shared/preload-api.ts

@@ -37,6 +37,11 @@ export interface ElectronApi {
   pickFolder: () => Promise<string | null>;
   pickContainers: () => Promise<string[]>;
   getSessionStats: () => Promise<SessionStats>;
+  restart: () => Promise<void>;
+  quit: () => Promise<void>;
+  exportBackup: () => Promise<{ saved: boolean }>;
+  importBackup: () => Promise<{ restored: boolean; message: string }>;
+  openLog: () => Promise<void>;
   onStateUpdate: (callback: (snapshot: UiSnapshot) => void) => () => void;
   onClipboardDetected: (callback: (links: string[]) => void) => () => void;
   onUpdateInstallProgress: (callback: (progress: UpdateInstallProgress) => void) => () => void;

src/shared/types.ts

@@ -73,6 +73,8 @@ export interface AppSettings {
   clipboardWatch: boolean;
   minimizeToTray: boolean;
   theme: AppTheme;
+  collapseNewPackages: boolean;
+  autoSkipExtracted: boolean;
   bandwidthSchedules: BandwidthScheduleEntry[];
 }