From 02df0331b75a27cd3f99b693ff26851353b52619 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 16:29:31 +0200
Subject: [PATCH] feat(pwa): SyncIndicator-Pill mit Overlay-Karte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/lib/components/SyncIndicator.svelte | 129 ++++++++++++++++++++++++
 src/routes/+layout.svelte               |   4 +
 2 files changed, 133 insertions(+)
 create mode 100644 src/lib/components/SyncIndicator.svelte

diff --git a/src/lib/components/SyncIndicator.svelte b/src/lib/components/SyncIndicator.svelte
new file mode 100644
index 0000000..e3b7354
--- /dev/null
+++ b/src/lib/components/SyncIndicator.svelte
@@ -0,0 +1,129 @@
+<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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1e9d8f4..979546e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,6 +13,8 @@
   import SearchFilter from '$lib/components/SearchFilter.svelte';
   import UpdateToast from '$lib/components/UpdateToast.svelte';
   import Toast from '$lib/components/Toast.svelte';
+  import SyncIndicator from '$lib/components/SyncIndicator.svelte';
+  import { network } from '$lib/client/network.svelte';
   import type { SearchHit } from '$lib/server/recipes/search-local';
   import type { WebHit } from '$lib/server/search/searxng';
 
@@ -203,6 +205,7 @@
     void wishlistStore.refresh();
     void searchFilterStore.load();
     void pwaStore.init();
+    network.init();
     document.addEventListener('click', handleClickOutside);
     document.addEventListener('keydown', handleKey);
     return () => {
@@ -213,6 +216,7 @@
 </script>
 
 <Toast />
+<SyncIndicator />
 <ConfirmDialog />
 <UpdateToast />