Tag upload auf den Buzzer, Sync-Status in der Webapp

webpage/src/components/FileListItem.svelte

@@ -10,6 +10,9 @@
     QuestionIcon,
     TagIcon,
     UserIcon,
+    CheckCircleIcon,
+    WarningIcon,
+    WarningCircleIcon,
   } from "phosphor-svelte";
   import {
     isFetchingRemote,
@@ -43,6 +46,52 @@
 
   $: syncStatus = $syncStateMap[type][file.name] || { state: SyncState.UNKNOWN, linkedFiles: [] };
 
+  $: statusConfig = (() => {
+    switch (syncStatus.state) {
+      case SyncState.UNKNOWN:
+        return {
+          icon: QuestionIcon,
+          color: "text-amber-500",
+          variant: "warning",
+          text: "Prüfsumme fehlt. Bitte Metadaten aktualisieren.",
+        };
+      case SyncState.SINGLE_SIDED:
+        return {
+          icon: CircleIcon,
+          color: "text-green-600",
+          variant: "info",
+          text: `Datei existiert nur ${type === "buzzer" ? "auf dem Buzzer" : "lokal"}.`,
+        };
+      case SyncState.SYNCED:
+        return {
+          icon: CheckCircleIcon,
+          color: "text-green-600",
+          variant: "info",
+          text: "Datei ist synchronisiert.",
+        };
+      case SyncState.CONFLICT:
+        return {
+          icon: WarningIcon,
+          color: "text-amber-600",
+          variant: "warning",
+          text: `Konflikt: Name/Tags weichen ab. Vergleiche mit <span class="text-medium text-on-surface bg-white rounded px-1">${syncStatus.linkedFiles[0]}</span>  ${type === "buzzer" ? "lokal" : "auf dem Buzzer"}`,
+        };
+      case SyncState.DUPLICATE:
+        const duplicateText =
+          syncStatus.linkedFiles.length === 0
+            ? `Diese Datei ist hier ok, aber ${type === "buzzer" ? "lokal" : "auf dem Buzzer"} existieren mehrere identische Versionen.`
+            : `Mehrfach vorhanden: Gleicher Inhalt auch in <span class="text-medium text-on-surface bg-white rounded px-1">${syncStatus.linkedFiles.join("</span>  <span class='text-medium text-on-surface bg-white rounded px-1'>")}</span>`;
+        return {
+          icon: WarningCircleIcon,
+          color: "text-red-600",
+          variant: "danger",
+          text: duplicateText,
+        };
+      default:
+        return null;
+    }
+  })();
+
   function toggleSelection() {
     if ($isFetchingRemote) return;
 
@@ -102,16 +151,19 @@
       </div>
 
       <div class="flex items-center gap-0 text-xs text-text-muted mt-0.5 min-w-0">
-        {#if syncStatus.state === SyncState.UNKNOWN}
+        {#if statusConfig}
           <span
             use:tooltip={{
-              text:
-                "Dieser Datei fehlt der CRC32-Tag. Bitte aktualisiere über das Menu die Metadaten.",
-                pos: "right",
-                variant: "warning",
+              text: statusConfig.text,
+              pos: "right",
+              variant: statusConfig.variant,
             }}
           >
-            <CircleIcon weight="fill" class="mr-1 shrink-0 text-emerald-600 w-3.5 h-3.5" />
+            <svelte:component
+              this={statusConfig.icon}
+              weight="fill"
+              class="mr-1 shrink-0 w-3.5 h-3.5 {statusConfig.color}"
+            />
           </span>
         {/if}