Migrate app to Node Electron with modern React UI
Build and Release / build (push) Has been cancelled
Build and Release / build (push) Has been cancelled
This commit is contained in:
Sucukdeluxe
@@ -0,0 +1,386 @@
|
||||
import { DragEvent, ReactElement, useEffect, useMemo, useState } from "react";
|
||||
import type { AppSettings, DownloadItem, PackageEntry, UiSnapshot } from "../shared/types";
|
||||
|
||||
type Tab = "collector" | "downloads" | "settings";
|
||||
|
||||
const emptySnapshot = (): UiSnapshot => ({
|
||||
settings: {
|
||||
token: "",
|
||||
rememberToken: true,
|
||||
outputDir: "",
|
||||
packageName: "",
|
||||
autoExtract: true,
|
||||
extractDir: "",
|
||||
createExtractSubfolder: true,
|
||||
hybridExtract: true,
|
||||
cleanupMode: "none",
|
||||
extractConflictMode: "overwrite",
|
||||
removeLinkFilesAfterExtract: false,
|
||||
removeSamplesAfterExtract: false,
|
||||
enableIntegrityCheck: true,
|
||||
autoResumeOnStart: true,
|
||||
autoReconnect: false,
|
||||
reconnectWaitSeconds: 45,
|
||||
completedCleanupPolicy: "never",
|
||||
maxParallel: 4,
|
||||
speedLimitEnabled: false,
|
||||
speedLimitKbps: 0,
|
||||
speedLimitMode: "global",
|
||||
updateRepo: "",
|
||||
autoUpdateCheck: true
|
||||
},
|
||||
session: {
|
||||
version: 2,
|
||||
packageOrder: [],
|
||||
packages: {},
|
||||
items: {},
|
||||
runStartedAt: 0,
|
||||
totalDownloadedBytes: 0,
|
||||
summaryText: "",
|
||||
reconnectUntil: 0,
|
||||
reconnectReason: "",
|
||||
paused: false,
|
||||
running: false,
|
||||
updatedAt: Date.now()
|
||||
},
|
||||
summary: null,
|
||||
speedText: "Geschwindigkeit: 0 B/s",
|
||||
etaText: "ETA: --",
|
||||
canStart: true,
|
||||
canStop: false,
|
||||
canPause: false
|
||||
});
|
||||
|
||||
const cleanupLabels: Record<string, string> = {
|
||||
never: "Nie",
|
||||
immediate: "Sofort",
|
||||
on_start: "Beim App-Start",
|
||||
package_done: "Sobald Paket fertig ist"
|
||||
};
|
||||
|
||||
export function App(): ReactElement {
|
||||
const [snapshot, setSnapshot] = useState<UiSnapshot>(emptySnapshot);
|
||||
const [tab, setTab] = useState<Tab>("collector");
|
||||
const [linksRaw, setLinksRaw] = useState("");
|
||||
const [statusToast, setStatusToast] = useState("");
|
||||
const [settingsDraft, setSettingsDraft] = useState<AppSettings>(emptySnapshot().settings);
|
||||
|
||||
useEffect(() => {
|
||||
let unsubscribe: (() => void) | null = null;
|
||||
void window.rd.getSnapshot().then((state) => {
|
||||
setSnapshot(state);
|
||||
setSettingsDraft(state.settings);
|
||||
});
|
||||
unsubscribe = window.rd.onStateUpdate((state) => {
|
||||
setSnapshot(state);
|
||||
});
|
||||
return () => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const packages = useMemo(() => snapshot.session.packageOrder
|
||||
.map((id: string) => snapshot.session.packages[id])
|
||||
.filter(Boolean), [snapshot]);
|
||||
|
||||
const onSaveSettings = async (): Promise<void> => {
|
||||
await window.rd.updateSettings(settingsDraft);
|
||||
setStatusToast("Settings gespeichert");
|
||||
setTimeout(() => setStatusToast(""), 1800);
|
||||
};
|
||||
|
||||
const onAddLinks = async (): Promise<void> => {
|
||||
await window.rd.updateSettings(settingsDraft);
|
||||
const result = await window.rd.addLinks({ rawText: linksRaw, packageName: settingsDraft.packageName });
|
||||
if (result.addedLinks > 0) {
|
||||
setStatusToast(`${result.addedPackages} Paket(e), ${result.addedLinks} Link(s) hinzugefügt`);
|
||||
setLinksRaw("");
|
||||
} else {
|
||||
setStatusToast("Keine gültigen Links gefunden");
|
||||
}
|
||||
setTimeout(() => setStatusToast(""), 2200);
|
||||
};
|
||||
|
||||
const onImportDlc = async (): Promise<void> => {
|
||||
const files = await window.rd.pickContainers();
|
||||
if (files.length === 0) {
|
||||
return;
|
||||
}
|
||||
const result = await window.rd.addContainers(files);
|
||||
setStatusToast(`DLC importiert: ${result.addedPackages} Paket(e), ${result.addedLinks} Link(s)`);
|
||||
setTimeout(() => setStatusToast(""), 2200);
|
||||
};
|
||||
|
||||
const onDrop = async (event: DragEvent<HTMLTextAreaElement>): Promise<void> => {
|
||||
event.preventDefault();
|
||||
const files = Array.from(event.dataTransfer.files ?? []) as File[];
|
||||
const dlc = files
|
||||
.filter((file) => file.name.toLowerCase().endsWith(".dlc"))
|
||||
.map((file) => (file as unknown as { path?: string }).path)
|
||||
.filter((value): value is string => !!value);
|
||||
if (dlc.length === 0) {
|
||||
return;
|
||||
}
|
||||
const result = await window.rd.addContainers(dlc);
|
||||
setStatusToast(`Drag-and-Drop: ${result.addedPackages} Paket(e), ${result.addedLinks} Link(s)`);
|
||||
setTimeout(() => setStatusToast(""), 2200);
|
||||
};
|
||||
|
||||
const setBool = (key: keyof AppSettings, value: boolean): void => {
|
||||
setSettingsDraft((prev: AppSettings) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const setText = (key: keyof AppSettings, value: string): void => {
|
||||
setSettingsDraft((prev: AppSettings) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const setNum = (key: keyof AppSettings, value: number): void => {
|
||||
setSettingsDraft((prev: AppSettings) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<header className="top-header">
|
||||
<div className="title-block">
|
||||
<h1>Real-Debrid Download Manager</h1>
|
||||
<span>JDownloader-Style Workflow</span>
|
||||
</div>
|
||||
<div className="metrics">
|
||||
<div>{snapshot.speedText}</div>
|
||||
<div>{snapshot.etaText}</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="control-strip">
|
||||
<div className="buttons">
|
||||
<button className="btn accent" disabled={!snapshot.canStart} onClick={() => window.rd.start()}>Start</button>
|
||||
<button className="btn" disabled={!snapshot.canPause} onClick={() => window.rd.togglePause()}>
|
||||
{snapshot.session.paused ? "Resume" : "Pause"}
|
||||
</button>
|
||||
<button className="btn" disabled={!snapshot.canStop} onClick={() => window.rd.stop()}>Stop</button>
|
||||
<button className="btn" onClick={() => window.rd.clearAll()}>Alles leeren</button>
|
||||
</div>
|
||||
<div className="speed-config">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settingsDraft.speedLimitEnabled}
|
||||
onChange={(event) => setBool("speedLimitEnabled", event.target.checked)}
|
||||
/>
|
||||
Speed-Limit
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={500000}
|
||||
value={settingsDraft.speedLimitKbps}
|
||||
onChange={(event) => setNum("speedLimitKbps", Number(event.target.value) || 0)}
|
||||
/>
|
||||
<span>KB/s</span>
|
||||
<select value={settingsDraft.speedLimitMode} onChange={(event) => setText("speedLimitMode", event.target.value)}>
|
||||
<option value="global">global</option>
|
||||
<option value="per_download">per_download</option>
|
||||
</select>
|
||||
<button className="btn" onClick={onSaveSettings}>Live speichern</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav className="tabs">
|
||||
<button className={tab === "collector" ? "tab active" : "tab"} onClick={() => setTab("collector")}>Linksammler</button>
|
||||
<button className={tab === "downloads" ? "tab active" : "tab"} onClick={() => setTab("downloads")}>Downloads</button>
|
||||
<button className={tab === "settings" ? "tab active" : "tab"} onClick={() => setTab("settings")}>Settings</button>
|
||||
</nav>
|
||||
|
||||
<main className="tab-content">
|
||||
{tab === "collector" && (
|
||||
<section className="grid-two">
|
||||
<article className="card">
|
||||
<h3>Authentifizierung</h3>
|
||||
<label>API Token</label>
|
||||
<input
|
||||
type="password"
|
||||
value={settingsDraft.token}
|
||||
onChange={(event) => setText("token", event.target.value)}
|
||||
/>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settingsDraft.rememberToken}
|
||||
onChange={(event) => setBool("rememberToken", event.target.checked)}
|
||||
/>
|
||||
Token lokal speichern
|
||||
</label>
|
||||
<label>GitHub Repo</label>
|
||||
<input value={settingsDraft.updateRepo} onChange={(event) => setText("updateRepo", event.target.value)} />
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settingsDraft.autoUpdateCheck}
|
||||
onChange={(event) => setBool("autoUpdateCheck", event.target.checked)}
|
||||
/>
|
||||
Beim Start auf Updates prüfen
|
||||
</label>
|
||||
</article>
|
||||
|
||||
<article className="card">
|
||||
<h3>Paketierung & Zielpfade</h3>
|
||||
<label>Download-Ordner</label>
|
||||
<div className="input-row">
|
||||
<input value={settingsDraft.outputDir} onChange={(event) => setText("outputDir", event.target.value)} />
|
||||
<button
|
||||
className="btn"
|
||||
onClick={async () => {
|
||||
const selected = await window.rd.pickFolder();
|
||||
if (selected) {
|
||||
setText("outputDir", selected);
|
||||
}
|
||||
}}
|
||||
>Wählen</button>
|
||||
</div>
|
||||
<label>Paketname (optional)</label>
|
||||
<input value={settingsDraft.packageName} onChange={(event) => setText("packageName", event.target.value)} />
|
||||
<label>Entpacken nach</label>
|
||||
<div className="input-row">
|
||||
<input value={settingsDraft.extractDir} onChange={(event) => setText("extractDir", event.target.value)} />
|
||||
<button
|
||||
className="btn"
|
||||
onClick={async () => {
|
||||
const selected = await window.rd.pickFolder();
|
||||
if (selected) {
|
||||
setText("extractDir", selected);
|
||||
}
|
||||
}}
|
||||
>Wählen</button>
|
||||
</div>
|
||||
<label><input type="checkbox" checked={settingsDraft.autoExtract} onChange={(event) => setBool("autoExtract", event.target.checked)} /> Auto-Extract</label>
|
||||
<label><input type="checkbox" checked={settingsDraft.hybridExtract} onChange={(event) => setBool("hybridExtract", event.target.checked)} /> Hybrid-Extract</label>
|
||||
</article>
|
||||
|
||||
<article className="card wide">
|
||||
<h3>Linksammler</h3>
|
||||
<div className="link-actions">
|
||||
<button className="btn" onClick={onImportDlc}>DLC import</button>
|
||||
<button className="btn accent" onClick={onAddLinks}>Zur Queue hinzufügen</button>
|
||||
</div>
|
||||
<textarea
|
||||
value={linksRaw}
|
||||
onChange={(event) => setLinksRaw(event.target.value)}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDrop={onDrop}
|
||||
placeholder="# package: Release-Name\nhttps://...\nhttps://..."
|
||||
/>
|
||||
<p className="hint">.dlc einfach auf das Feld ziehen oder per Button importieren.</p>
|
||||
</article>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{tab === "downloads" && (
|
||||
<section className="downloads-view">
|
||||
{packages.length === 0 && <div className="empty">Noch keine Pakete in der Queue.</div>}
|
||||
{packages.map((pkg) => (
|
||||
<PackageCard
|
||||
key={pkg.id}
|
||||
pkg={pkg}
|
||||
items={pkg.itemIds.map((id) => snapshot.session.items[id]).filter(Boolean)}
|
||||
onCancel={() => window.rd.cancelPackage(pkg.id)}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{tab === "settings" && (
|
||||
<section className="grid-two settings-grid">
|
||||
<article className="card">
|
||||
<h3>Queue & Reconnect</h3>
|
||||
<label>Max. gleichzeitige Downloads</label>
|
||||
<input type="number" min={1} max={50} value={settingsDraft.maxParallel} onChange={(event) => setNum("maxParallel", Number(event.target.value) || 1)} />
|
||||
<label><input type="checkbox" checked={settingsDraft.autoReconnect} onChange={(event) => setBool("autoReconnect", event.target.checked)} /> Automatischer Reconnect</label>
|
||||
<label>Reconnect-Wartezeit (Sek.)</label>
|
||||
<input type="number" min={10} max={600} value={settingsDraft.reconnectWaitSeconds} onChange={(event) => setNum("reconnectWaitSeconds", Number(event.target.value) || 45)} />
|
||||
<label><input type="checkbox" checked={settingsDraft.autoResumeOnStart} onChange={(event) => setBool("autoResumeOnStart", event.target.checked)} /> Auto-Resume beim Start</label>
|
||||
</article>
|
||||
|
||||
<article className="card">
|
||||
<h3>Integrität & Cleanup</h3>
|
||||
<label><input type="checkbox" checked={settingsDraft.enableIntegrityCheck} onChange={(event) => setBool("enableIntegrityCheck", event.target.checked)} /> SFV/CRC/MD5/SHA1 prüfen</label>
|
||||
<label><input type="checkbox" checked={settingsDraft.removeLinkFilesAfterExtract} onChange={(event) => setBool("removeLinkFilesAfterExtract", event.target.checked)} /> Link-Dateien nach Entpacken entfernen</label>
|
||||
<label><input type="checkbox" checked={settingsDraft.removeSamplesAfterExtract} onChange={(event) => setBool("removeSamplesAfterExtract", event.target.checked)} /> Samples nach Entpacken entfernen</label>
|
||||
<label>Fertiggestellte Downloads entfernen</label>
|
||||
<select value={settingsDraft.completedCleanupPolicy} onChange={(event) => setText("completedCleanupPolicy", event.target.value)}>
|
||||
{Object.entries(cleanupLabels).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
<label>Cleanup nach Entpacken</label>
|
||||
<select value={settingsDraft.cleanupMode} onChange={(event) => setText("cleanupMode", event.target.value)}>
|
||||
<option value="none">keine Archive löschen</option>
|
||||
<option value="trash">Archive in Papierkorb</option>
|
||||
<option value="delete">Archive löschen</option>
|
||||
</select>
|
||||
<label>Konfliktmodus beim Entpacken</label>
|
||||
<select value={settingsDraft.extractConflictMode} onChange={(event) => setText("extractConflictMode", event.target.value)}>
|
||||
<option value="overwrite">überschreiben</option>
|
||||
<option value="skip">überspringen</option>
|
||||
<option value="rename">umbenennen</option>
|
||||
<option value="ask">nachfragen</option>
|
||||
</select>
|
||||
</article>
|
||||
|
||||
<div className="settings-actions">
|
||||
<button className="btn accent" onClick={onSaveSettings}>Settings speichern</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{statusToast && <div className="toast">{statusToast}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PackageCard({ pkg, items, onCancel }: { pkg: PackageEntry; items: DownloadItem[]; onCancel: () => void }): ReactElement {
|
||||
const done = items.filter((item) => item.status === "completed").length;
|
||||
const failed = items.filter((item) => item.status === "failed").length;
|
||||
const cancelled = items.filter((item) => item.status === "cancelled").length;
|
||||
const total = Math.max(1, items.length);
|
||||
const progress = Math.floor((done / total) * 100);
|
||||
|
||||
return (
|
||||
<article className="package-card">
|
||||
<header>
|
||||
<div>
|
||||
<h4>{pkg.name}</h4>
|
||||
<span>{done}/{total} fertig · {failed} Fehler · {cancelled} abgebrochen</span>
|
||||
</div>
|
||||
<button className="btn danger" onClick={onCancel}>Paket abbrechen</button>
|
||||
</header>
|
||||
<div className="progress">
|
||||
<div style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datei</th>
|
||||
<th>Status</th>
|
||||
<th>Fortschritt</th>
|
||||
<th>Speed</th>
|
||||
<th>Retries</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>{item.fileName}</td>
|
||||
<td title={item.fullStatus}>{item.fullStatus}</td>
|
||||
<td>{item.progressPercent}%</td>
|
||||
<td>{item.speedBps > 0 ? `${Math.floor(item.speedBps / 1024)} KB/s` : "0 KB/s"}</td>
|
||||
<td>{item.retries}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Real-Debrid Download Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { App } from "./App";
|
||||
import "./styles.css";
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
if (!rootElement) {
|
||||
throw new Error("Root element fehlt");
|
||||
}
|
||||
|
||||
createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,312 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: "Segoe UI", "Inter", sans-serif;
|
||||
--bg: #040912;
|
||||
--surface: #0b1424;
|
||||
--card: #101d31;
|
||||
--field: #081120;
|
||||
--border: #233954;
|
||||
--text: #e2e8f0;
|
||||
--muted: #90a4bf;
|
||||
--accent: #38bdf8;
|
||||
--danger: #f43f5e;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at 15% 10%, #10203b 0, #050b15 45%, #040912 100%);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto 1fr;
|
||||
height: 100%;
|
||||
padding: 14px 16px 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: 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;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.control-strip {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
background: linear-gradient(180deg, rgba(20, 34, 56, 0.95), rgba(9, 16, 28, 0.95));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.buttons,
|
||||
.speed-config,
|
||||
.link-actions,
|
||||
.input-row,
|
||||
.settings-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #0d1a2c;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 7px 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--accent);
|
||||
background: #12243d;
|
||||
}
|
||||
|
||||
.btn.accent {
|
||||
background: linear-gradient(180deg, #56d6ff, #33b9f4);
|
||||
color: #07111c;
|
||||
border-color: #41c6f9;
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
border-color: rgba(244, 63, 94, 0.7);
|
||||
color: #fda4af;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
background: #0b1321;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
border-radius: 10px;
|
||||
padding: 8px 13px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--text);
|
||||
background: #14253e;
|
||||
border-color: #2c4e77;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.grid-two {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, rgba(17, 29, 49, 0.95), rgba(9, 16, 28, 0.95));
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card.wide {
|
||||
grid-column: span 2;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card label,
|
||||
.hint {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card input,
|
||||
.card select,
|
||||
.speed-config input,
|
||||
.speed-config select,
|
||||
.speed-config button,
|
||||
.card textarea {
|
||||
width: 100%;
|
||||
background: var(--field);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.card textarea {
|
||||
min-height: 220px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.input-row input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.speed-config input {
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.speed-config select {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.downloads-view {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.package-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, rgba(16, 29, 48, 0.95), rgba(7, 13, 22, 0.95));
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.package-card header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.package-card h4 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.package-card header span {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: 8px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: #0b1628;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress > div {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #3bc9ff, #22d3ee);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid rgba(35, 57, 84, 0.7);
|
||||
padding: 7px 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.settings-actions {
|
||||
grid-column: span 2;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.empty {
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 18px;
|
||||
background: #0f1f33;
|
||||
color: var(--text);
|
||||
border: 1px solid #2a4f78;
|
||||
border-radius: 12px;
|
||||
padding: 10px 14px;
|
||||
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.control-strip {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.grid-two,
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card.wide,
|
||||
.settings-actions {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
import type { ElectronApi } from "../shared/preload-api";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
rd: ElectronApi;
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
Reference in New Issue
Block a user