feat(accounts): show current account check status

This commit is contained in:
Sucukdeluxe
2026-08-21 00:41:40 +02:00
parent 9ceea828ec
commit 18fa58002c
8 changed files with 101 additions and 23 deletions
@@ -373,9 +373,10 @@ function AccountRow({
<small>{row.mode}</small>
</span>
</span>
<span className="settings-account-status" role="cell">
<span className={`settings-account-status-badge is-${row.status.tone}`}>{row.status.text}</span>
</span>
<span className="settings-account-status" role="cell">
<span className={`settings-account-status-badge is-${row.status.tone}`}>{row.status.text}</span>
{row.status.checkedAgo ? <small className="settings-account-status-checked"><span>Geprüft</span> {row.status.checkedAgo}</small> : null}
</span>
<span className="settings-account-traffic" role="cell">{row.traffic}</span>
{renderAccountIdentityCell({ className: "settings-account-username", label: "Benutzername", onCopy: actions.onCopyIdentity, value: row.username })}
{renderAccountIdentityCell({ className: "settings-account-email", label: "E-Mail", onCopy: actions.onCopyIdentity, value: row.email })}
+23 -1
View File
@@ -140,6 +140,7 @@ export interface AccountRowSource {
state: AccountStatusSourceState;
message: string;
premiumUntilMs: number | null;
checkedAt?: number;
username?: string;
email?: string;
};
@@ -161,6 +162,7 @@ export interface AccountRowViewModel {
status: {
tone: AccountStatusTone;
text: string;
checkedAgo: string;
};
traffic: string;
username: string;
@@ -634,6 +636,26 @@ function formatExpiry(premiumUntilMs: number | null): string {
return new Intl.DateTimeFormat("de-DE").format(new Date(premiumUntilMs));
}
function formatCheckedAgo(checkedAt: number | undefined, nowMs: number): string {
if (!checkedAt || !Number.isFinite(checkedAt) || checkedAt <= 0) {
return "";
}
const deltaMs = Math.max(0, nowMs - checkedAt);
const minutes = Math.floor(deltaMs / 60_000);
if (minutes < 1) {
return "gerade eben";
}
if (minutes < 60) {
return `vor ${minutes} Min`;
}
const hours = Math.floor(minutes / 60);
if (hours < 24) {
return `vor ${hours} Std`;
}
const days = Math.floor(hours / 24);
return `vor ${days} Tag${days === 1 ? "" : "en"}`;
}
function projectStatus(source: AccountRowSource): { tone: AccountStatusTone; text: string } {
if (!source.enabled || source.status.state === "disabled") {
return { tone: "disabled", text: "Deaktiviert" };
@@ -691,7 +713,7 @@ export function projectAccountRows(
icon: ACCOUNT_SERVICE_ICONS[source.service],
enabled: source.enabled,
selected: selected.has(id),
status,
status: { ...status, checkedAgo: formatCheckedAgo(source.status.checkedAt, nowMs) },
traffic: formatTraffic(source.dailyLimitBytes, source.dailyUsageBytes),
username: identity.username,
email: identity.email,
+14
View File
@@ -723,6 +723,20 @@
white-space: nowrap;
}
.settings-account-status {
display: grid;
align-content: center;
gap: 2px;
}
.settings-account-status-checked {
overflow: hidden;
color: var(--ui-text-muted);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-account-status-badge::before {
width: 7px;
height: 7px;