feat: deliver the redesigned desktop workspace
Rebuild downloads, link collection, settings, history, and statistics around a responsive desktop shell with compact account and queue tables, contextual navigation, persistent update affordances, unified overlays, and accessible keyboard interactions. Add safe history-folder reveal IPC, responsive 2560/1920/1366/1120 coverage, deterministic visual fixtures, focused component regressions, and release-tree exclusions for internal working files. Bump the public application version to 2.0.13.
This commit is contained in:
Sucukdeluxe
@@ -0,0 +1,226 @@
|
||||
import type { ReactElement, ReactNode } from "react";
|
||||
import type {
|
||||
StatisticsMetric,
|
||||
StatisticsProviderScope,
|
||||
StatisticsRange,
|
||||
StatisticsViewModel
|
||||
} from "./statistics-model";
|
||||
import "./statistics.css";
|
||||
|
||||
export interface StatisticsViewActions {
|
||||
onRangeChange: (range: StatisticsRange) => void;
|
||||
onResetSession: () => void;
|
||||
onResetAll: () => void;
|
||||
onResetErrors: () => void;
|
||||
}
|
||||
|
||||
export interface StatisticsViewProps {
|
||||
model: StatisticsViewModel;
|
||||
actions: StatisticsViewActions;
|
||||
chart: ReactNode;
|
||||
}
|
||||
|
||||
const rangeItems: Array<{ id: StatisticsRange; label: string }> = [
|
||||
{ id: "session", label: "Sitzung" },
|
||||
{ id: "today", label: "Heute" },
|
||||
{ id: "week", label: "Sieben Tage" },
|
||||
{ id: "month", label: "30 Tage" },
|
||||
{ id: "all", label: "Gesamt" }
|
||||
];
|
||||
|
||||
const numberFormatter = new Intl.NumberFormat("de-DE", { maximumFractionDigits: 1 });
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
const safe = Math.max(0, Number.isFinite(bytes) ? bytes : 0);
|
||||
if (safe < 1024) {
|
||||
return `${Math.round(safe)} B`;
|
||||
}
|
||||
const units = ["KB", "MB", "GB", "TB", "PB"];
|
||||
let value = safe / 1024;
|
||||
let unitIndex = 0;
|
||||
while (value >= 1024 && unitIndex < units.length - 1) {
|
||||
value /= 1024;
|
||||
unitIndex += 1;
|
||||
}
|
||||
return `${numberFormatter.format(value)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
function formatMetric(metric: StatisticsMetric, kind: "bytes" | "count" | "percent" | "speed"): string {
|
||||
if (!metric.available || metric.value === null) {
|
||||
return "–";
|
||||
}
|
||||
if (kind === "bytes") {
|
||||
return formatBytes(metric.value);
|
||||
}
|
||||
if (kind === "speed") {
|
||||
return `${formatBytes(metric.value)}/s`;
|
||||
}
|
||||
if (kind === "percent") {
|
||||
return `${numberFormatter.format(metric.value)} %`;
|
||||
}
|
||||
return numberFormatter.format(metric.value);
|
||||
}
|
||||
|
||||
function providerScopeLabel(scope: StatisticsProviderScope | null): string {
|
||||
if (scope === "current-queue") {
|
||||
return "Aktuelle Queue";
|
||||
}
|
||||
if (scope === "today") {
|
||||
return "Heute";
|
||||
}
|
||||
if (scope === "all") {
|
||||
return "Gesamt";
|
||||
}
|
||||
return "Nicht verfügbar";
|
||||
}
|
||||
|
||||
function emptyProviderMessage(model: StatisticsViewModel): string {
|
||||
if (model.coverage === "unavailable") {
|
||||
return model.message;
|
||||
}
|
||||
if (model.providerScope === "today") {
|
||||
return "Heute wurden noch keine Providerbytes erfasst.";
|
||||
}
|
||||
if (model.providerScope === "all") {
|
||||
return "Noch keine gespeicherten Providerbytes vorhanden.";
|
||||
}
|
||||
return "In der aktuellen Queue sind noch keine Providerwerte vorhanden.";
|
||||
}
|
||||
|
||||
function StatisticsMetricCard({
|
||||
label,
|
||||
metric,
|
||||
kind
|
||||
}: {
|
||||
label: string;
|
||||
metric: StatisticsMetric;
|
||||
kind: "bytes" | "count" | "percent" | "speed";
|
||||
}): ReactElement {
|
||||
return (
|
||||
<article className={`statistics-kpi${metric.tone === "danger" ? " statistics-kpi-danger" : ""}`}>
|
||||
<span className="statistics-kpi-label">{label}</span>
|
||||
<strong className="statistics-kpi-value">{formatMetric(metric, kind)}</strong>
|
||||
<span className="statistics-kpi-source">{metric.sourceLabel}</span>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatisticsSidebar({ model, actions }: Pick<StatisticsViewProps, "model" | "actions">): ReactElement {
|
||||
return (
|
||||
<nav aria-label="Statistik-Zeitraum" className="statistics-sidebar" data-visual-region="statistics-sidebar">
|
||||
<strong className="statistics-sidebar-heading">Zeitraum</strong>
|
||||
<div className="statistics-range-list">
|
||||
{rangeItems.map((item) => (
|
||||
<button
|
||||
aria-current={model.range === item.id ? "page" : undefined}
|
||||
className={`statistics-range${model.range === item.id ? " statistics-range-active" : ""}`}
|
||||
key={item.id}
|
||||
onClick={() => actions.onRangeChange(item.id)}
|
||||
type="button"
|
||||
>{item.label}</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="statistics-sidebar-message">{model.message}</p>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatisticsSidebarStatus({ model }: Pick<StatisticsViewProps, "model">): ReactElement | null {
|
||||
const metrics = model.metrics;
|
||||
const rows = [
|
||||
metrics.downloadedBytes.available ? `Daten: ${formatMetric(metrics.downloadedBytes, "bytes")}` : null,
|
||||
metrics.files.available ? `Dateien: ${formatMetric(metrics.files, "count")}` : null,
|
||||
metrics.successRate.available ? `Erfolg: ${formatMetric(metrics.successRate, "percent")}` : null,
|
||||
metrics.errors.available ? `Fehler: ${formatMetric(metrics.errors, "count")}` : null,
|
||||
model.providerScope ? `Provider: ${model.providers.length}` : null
|
||||
].filter((value): value is string => value !== null);
|
||||
if (rows.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="statistics-sidebar-status">
|
||||
{rows.map((row) => <span key={row}>{row}</span>)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatisticsContent({ model, actions, chart }: StatisticsViewProps): ReactElement {
|
||||
return (
|
||||
<section aria-label="Statistik-Dashboard" className="statistics-content">
|
||||
<header className="statistics-heading">
|
||||
<div>
|
||||
<h2>Statistiken</h2>
|
||||
<p>{model.message}</p>
|
||||
</div>
|
||||
<div aria-label="Statistiken zurücksetzen" className="statistics-reset-actions">
|
||||
<button className="statistics-reset" onClick={actions.onResetSession} type="button">Sitzung zurücksetzen</button>
|
||||
<button className="statistics-reset" onClick={actions.onResetAll} type="button">Gesamt zurücksetzen</button>
|
||||
<button
|
||||
className="statistics-reset statistics-reset-danger"
|
||||
disabled={!model.errorResetAvailable}
|
||||
onClick={actions.onResetErrors}
|
||||
type="button"
|
||||
>Fehler zurücksetzen</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="statistics-kpis" data-visual-region="statistics-kpis">
|
||||
<StatisticsMetricCard kind="bytes" label="Datenmenge" metric={model.metrics.downloadedBytes} />
|
||||
<StatisticsMetricCard kind="count" label="Dateien" metric={model.metrics.files} />
|
||||
<StatisticsMetricCard kind="percent" label="Erfolgsquote" metric={model.metrics.successRate} />
|
||||
<StatisticsMetricCard kind="speed" label="Durchschnitt" metric={model.metrics.averageSpeedBps} />
|
||||
<StatisticsMetricCard kind="count" label="Fehler" metric={model.metrics.errors} />
|
||||
</div>
|
||||
|
||||
<div className="statistics-detail-grid">
|
||||
<section className="statistics-chart" data-visual-region="statistics-chart">
|
||||
<div className="statistics-section-heading">
|
||||
<h3>Bandbreitenverlauf</h3>
|
||||
<span>Live aus der aktuellen Renderer-Sitzung</span>
|
||||
</div>
|
||||
<div className="statistics-chart-canvas">{chart}</div>
|
||||
</section>
|
||||
|
||||
<section className="statistics-providers">
|
||||
<div className="statistics-section-heading">
|
||||
<h3>Provider</h3>
|
||||
<span>{providerScopeLabel(model.providerScope)}</span>
|
||||
</div>
|
||||
<div aria-label="Provider-Nutzung" className="statistics-provider-table" role="table">
|
||||
<div className="statistics-provider-header" role="row">
|
||||
<span role="columnheader">Provider</span>
|
||||
<span role="columnheader">Daten</span>
|
||||
<span role="columnheader">Ergebnisse</span>
|
||||
</div>
|
||||
<div className="statistics-provider-body" role="rowgroup">
|
||||
{model.providers.length > 0 ? model.providers.map((provider) => (
|
||||
<div className="statistics-provider-row" key={provider.id} role="row">
|
||||
<span className="statistics-provider-name" role="cell">{provider.label}</span>
|
||||
<span role="cell">{formatBytes(provider.bytes)}</span>
|
||||
<span className={provider.failed && provider.failed > 0 ? "statistics-provider-errors" : undefined} role="cell">
|
||||
{provider.completed === null || provider.failed === null
|
||||
? "–"
|
||||
: `${provider.completed} fertig · ${provider.failed} Fehler`}
|
||||
</span>
|
||||
</div>
|
||||
)) : (
|
||||
<div className="statistics-provider-empty" role="row">
|
||||
<span aria-colspan={3} role="cell">{emptyProviderMessage(model)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatisticsView({ model, actions, chart }: StatisticsViewProps): ReactElement {
|
||||
return (
|
||||
<div className="statistics-composed-view">
|
||||
<StatisticsSidebar actions={actions} model={model} />
|
||||
<StatisticsContent actions={actions} chart={chart} model={model} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user