JDownloader 2-style UI overhaul, multi-select, hoster display, settings sidebar
Some checks are pending
Build and Release / build (push) Waiting to run
Some checks are pending
Build and Release / build (push) Waiting to run
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sucukdeluxe
parent
09bc354c18
commit
84d5c0f13f
@ -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",
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -73,6 +73,8 @@ export function defaultSettings(): AppSettings {
|
||||
clipboardWatch: false,
|
||||
minimizeToTray: false,
|
||||
theme: "dark" as const,
|
||||
collapseNewPackages: true,
|
||||
autoSkipExtracted: false,
|
||||
bandwidthSchedules: []
|
||||
};
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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)
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
1255
src/renderer/App.tsx
1255
src/renderer/App.tsx
File diff suppressed because it is too large
Load Diff
@ -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 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
/* ── Menu Bar ───────────────────────────────────────────────── */
|
||||
|
||||
.header-spacer {
|
||||
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 {
|
||||
.menu-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
color: var(--muted);
|
||||
align-items: center;
|
||||
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 {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
.update-popup {
|
||||
position: fixed;
|
||||
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-install-progress-verifying,
|
||||
.update-install-progress-launching,
|
||||
.update-install-progress-starting {
|
||||
.update-popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
align-content: start;
|
||||
.update-popup-bar-track {
|
||||
margin-top: 6px;
|
||||
height: 4px;
|
||||
background: var(--progress-track);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
gap: 6px;
|
||||
.update-popup-bar-fill {
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.pkg-toggle:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--text);
|
||||
background: var(--button-bg-hover);
|
||||
}
|
||||
|
||||
.pkg-name-row input[type="checkbox"] {
|
||||
@ -538,8 +1001,18 @@ body,
|
||||
}
|
||||
|
||||
.rename-input {
|
||||
min-width: 220px;
|
||||
max-width: 440px;
|
||||
flex: 1;
|
||||
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 {
|
||||
width: 34%;
|
||||
.item-row {
|
||||
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 {
|
||||
width: 14%;
|
||||
.item-row:hover {
|
||||
background: color-mix(in srgb, var(--accent) 5%, transparent);
|
||||
}
|
||||
|
||||
.col-status {
|
||||
width: 26%;
|
||||
.item-row .pkg-col {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.col-progress {
|
||||
width: 8%;
|
||||
.item-row .pkg-col-name {
|
||||
color: var(--text);
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.col-speed {
|
||||
width: 12%;
|
||||
.item-remove {
|
||||
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 {
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
.item-remove:hover {
|
||||
opacity: 1;
|
||||
background: rgba(244, 63, 94, 0.1);
|
||||
}
|
||||
|
||||
.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,
|
||||
.settings-grid {
|
||||
.grid-two {
|
||||
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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -73,6 +73,8 @@ export interface AppSettings {
|
||||
clipboardWatch: boolean;
|
||||
minimizeToTray: boolean;
|
||||
theme: AppTheme;
|
||||
collapseNewPackages: boolean;
|
||||
autoSkipExtracted: boolean;
|
||||
bandwidthSchedules: BandwidthScheduleEntry[];
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user