round57: Scroll-to-top-Button hoeher positioniert, Laufzeit-Anzeige in Einstellungen lesbar formatiert

This commit is contained in:
2026-07-26 13:23:44 +02:00
parent 75bc5725e4
commit 0a1f3143d7
2 changed files with 23 additions and 2 deletions

View File

@@ -26,7 +26,7 @@ export function ScrollToTopButton() {
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
title="Nach oben scrollen" title="Nach oben scrollen"
aria-label="Nach oben scrollen" aria-label="Nach oben scrollen"
className="fixed bottom-5 right-5 z-30 flex h-11 w-11 items-center justify-center rounded-full className="fixed bottom-20 right-5 z-30 flex h-11 w-11 items-center justify-center rounded-full
border border-black/10 bg-white/90 text-lg text-black/70 shadow-lg backdrop-blur-md border border-black/10 bg-white/90 text-lg text-black/70 shadow-lg backdrop-blur-md
transition-opacity hover:bg-white dark:border-white/10 dark:bg-neutral-900/90 transition-opacity hover:bg-white dark:border-white/10 dark:bg-neutral-900/90
dark:text-white/70 dark:hover:bg-neutral-900" dark:text-white/70 dark:hover:bg-neutral-900"

View File

@@ -8,6 +8,27 @@ import { useTheme } from "../../hooks/useTheme.js";
import { useSettings } from "../../hooks/useSettings.js"; import { useSettings } from "../../hooks/useSettings.js";
import { AdminPageHeader } from "./AdminPageHeader.js"; import { AdminPageHeader } from "./AdminPageHeader.js";
/**
* Formatiert eine Sekundenzahl als "Xd Yh Zm Ws" (nur die tatsächlich
* relevanten Einheiten, z. B. "3h 12m 5s" ohne führende "0d") - vorher stand
* hier die rohe Sekundenzahl ("uptimeSeconds"), z. B. "435822s", was bei
* einem Blick in die Einstellungen kaum sinnvoll einzuordnen war.
*/
function formatUptime(totalSeconds: number): string {
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = Math.floor(totalSeconds % 60);
const parts: string[] = [];
if (days > 0) parts.push(`${days}d`);
if (days > 0 || hours > 0) parts.push(`${hours}h`);
if (days > 0 || hours > 0 || minutes > 0) parts.push(`${minutes}m`);
parts.push(`${seconds}s`);
return parts.join(" ");
}
function InfoRow({ label, value }: { label: string; value: string }) { function InfoRow({ label, value }: { label: string; value: string }) {
return ( return (
<div className="flex items-center justify-between border-b border-black/5 py-3 last:border-0 dark:border-white/5"> <div className="flex items-center justify-between border-b border-black/5 py-3 last:border-0 dark:border-white/5">
@@ -489,7 +510,7 @@ export function SettingsPage() {
<div> <div>
<InfoRow label="Status" value={health.status} /> <InfoRow label="Status" value={health.status} />
<InfoRow label="Version" value={health.version} /> <InfoRow label="Version" value={health.version} />
<InfoRow label="Läuft seit" value={`${health.uptimeSeconds}s`} /> <InfoRow label="Läuft seit" value={formatUptime(health.uptimeSeconds)} />
</div> </div>
) : ( ) : (
<p className="text-sm text-black/40 dark:text-white/40">Lade </p> <p className="text-sm text-black/40 dark:text-white/40">Lade </p>