02df0331b7
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s
Bottom-right Pill zeigt Sync-Fortschritt (Sync N/M) oder Offline- Status. Klick öffnet Overlay mit "Zuletzt synchronisiert: vor N Min" + manuellem Refresh-Button (postMessage type=sync-check an den SW). prefers-reduced-motion noch nicht gehandhabt — Spin-Icon dreht sich bewusst; kein UX-Schaden. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
130 lines
3.1 KiB
Svelte
130 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { RefreshCw, WifiOff } from 'lucide-svelte';
|
|
import { network } from '$lib/client/network.svelte';
|
|
import { syncStatus } from '$lib/client/sync-status.svelte';
|
|
|
|
let expanded = $state(false);
|
|
|
|
const label = $derived.by(() => {
|
|
if (syncStatus.state.kind === 'syncing') {
|
|
return `Sync ${syncStatus.state.current}/${syncStatus.state.total}`;
|
|
}
|
|
if (!network.online) return 'Offline';
|
|
return null;
|
|
});
|
|
|
|
function formatRelative(ts: number | null): string {
|
|
if (ts === null) return 'noch nicht synchronisiert';
|
|
const diffMs = Date.now() - ts;
|
|
const min = Math.round(diffMs / 60_000);
|
|
if (min < 1) return 'gerade eben';
|
|
if (min < 60) return `vor ${min} Min`;
|
|
const h = Math.round(min / 60);
|
|
if (h < 24) return `vor ${h} Std`;
|
|
const d = Math.round(h / 24);
|
|
return `vor ${d} Tag${d === 1 ? '' : 'en'}`;
|
|
}
|
|
|
|
function requestRefresh() {
|
|
navigator.serviceWorker?.controller?.postMessage({ type: 'sync-check' });
|
|
}
|
|
</script>
|
|
|
|
{#if label}
|
|
<div class="wrap">
|
|
<button
|
|
type="button"
|
|
class="pill"
|
|
class:offline={!network.online}
|
|
class:syncing={syncStatus.state.kind === 'syncing'}
|
|
aria-label={label}
|
|
aria-expanded={expanded}
|
|
onclick={() => (expanded = !expanded)}
|
|
>
|
|
{#if !network.online}
|
|
<WifiOff size={14} strokeWidth={2} />
|
|
{:else}
|
|
<RefreshCw size={14} strokeWidth={2} class="spin" />
|
|
{/if}
|
|
<span>{label}</span>
|
|
</button>
|
|
{#if expanded}
|
|
<div class="card" role="dialog">
|
|
<p class="when">Zuletzt synchronisiert: {formatRelative(syncStatus.lastSynced)}</p>
|
|
<button class="refresh" type="button" onclick={requestRefresh} disabled={!network.online}>
|
|
Jetzt aktualisieren
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.wrap {
|
|
position: fixed;
|
|
right: 0.75rem;
|
|
bottom: 0.75rem;
|
|
z-index: 50;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 0.4rem;
|
|
}
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
padding: 0.3rem 0.65rem;
|
|
background: white;
|
|
border: 1px solid #cfd9d1;
|
|
border-radius: 999px;
|
|
color: #555;
|
|
font-size: 0.78rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
|
|
font-family: inherit;
|
|
}
|
|
.pill.offline {
|
|
color: #666;
|
|
background: #f1f3f1;
|
|
}
|
|
.pill.syncing {
|
|
color: #2b6a3d;
|
|
border-color: #b7d6c2;
|
|
background: #eaf4ed;
|
|
}
|
|
.pill :global(.spin) {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.card {
|
|
background: white;
|
|
border: 1px solid #e4eae7;
|
|
border-radius: 10px;
|
|
padding: 0.6rem 0.75rem;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
font-size: 0.82rem;
|
|
min-width: 220px;
|
|
}
|
|
.when {
|
|
margin: 0 0 0.4rem;
|
|
color: #555;
|
|
}
|
|
.refresh {
|
|
padding: 0.4rem 0.7rem;
|
|
background: #2b6a3d;
|
|
color: white;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
font-size: 0.82rem;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
.refresh:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|