zwischenstand

webpage/src/components/FileListItem.svelte

@@ -28,7 +28,7 @@
   import { tagEditorState } from "../lib/store";
   import { tooltip } from "../lib/actions/tooltip";
   import { deleteRemoteFile } from "../lib/transport";
-  import { deleteLocalFile } from "../lib/db";
+  import { deleteLocalFile, playLocalFile } from "../lib/db";
   import { refreshRemote, refreshLocal } from "../lib/sync";
   import { addToast } from "../lib/toast";
 
@@ -56,6 +56,7 @@
       case SyncState.UNKNOWN:
         return {
           icon: QuestionIcon,
+          weight: "fill",
           color: "text-amber-500",
           variant: "warning",
           text: "Prüfsumme fehlt. Bitte Metadaten aktualisieren.",
@@ -63,20 +64,24 @@
       case SyncState.SINGLE_SIDED:
         return {
           icon: CircleIcon,
-          color: "text-green-600",
+          weight: "bold",
+          color: "text-emerald-600",
           variant: "info",
           text: `Datei existiert nur ${type === "buzzer" ? "auf dem Buzzer" : "lokal"}.`,
         };
       case SyncState.SYNCED:
         return {
           icon: CheckCircleIcon,
-          color: "text-green-600",
+          weight: "fill",
+          color: "text-emerald-500",
           variant: "info",
           text: "Datei ist synchronisiert.",
         };
       case SyncState.CONFLICT:
         return {
           icon: WarningIcon,
+          ping: true,
+          weight: "fill",
           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"}`,
@@ -88,6 +93,8 @@
             : `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,
+          ping: true,
+          weight: "fill",
           color: "text-red-600",
           variant: "danger",
           text: duplicateText,
@@ -158,6 +165,7 @@
     ></div>
   {/if}
 
+  <!-- svelte-ignore a11y_mouse_events_have_key_events -->
   <button
     class="relative z-10 w-full text-left flex-1 px-3 py-1 pr-16 flex items-center border-l-4 transition-colors border-b border-b-border-card
          {file.selected ? 'border-l-blue-600' : 'border-l-transparent'}
@@ -169,11 +177,15 @@
          {$isTransferingRemote ? 'cursor-default' : ''}
          {state === 'pending' ? 'grayscale opacity-80' : ''}"
     on:click={toggleSelection}
+    on:mouseenter|stopPropagation={() => (menuOpen = true)}
+    on:mouseleave|stopPropagation={() => (menuOpen = false)}
+    on:blur|stopPropagation={() => (menuOpen = false)}
+    on:focus|stopPropagation={() => (menuOpen = true)}
     disabled={$isTransferingRemote}
   >
-    <MusicNotesIcon weight="fill" class="mr-3 w-5 h-5 shrink-0" />
+    <MusicNotesIcon weight="fill" class="mr-2 w-5 h-5 shrink-0" />
 
-    <div class="flex flex-col flex-1 min-w-0 overflow-hidden">
+    <div class="flex flex-col flex-1 min-w-0 overflow-hidden pl-1">
       <div class="flex items-center min-w-0">
         <span class="font-light truncate min-w-0 text-sm">
           {file.name || "Unbekannte Datei"}
@@ -193,11 +205,26 @@
               variant: statusConfig.variant,
             }}
           >
-            <svelte:component
-              this={statusConfig.icon}
-              weight="fill"
-              class="mr-1 shrink-0 w-3.5 h-3.5 {statusConfig.color}"
-            />
+            {#if statusConfig.ping}
+              <span class="mr-1 relative inline-flex size-3.5">
+                <svelte:component
+                  this={statusConfig.icon}
+                  weight={statusConfig.weight ? statusConfig.weight : "fill"}
+                  class="opacity-57 text-amber-600 absolute inline-flex h-full w-full animate-ping"
+                />
+                <svelte:component
+                  this={statusConfig.icon}
+                  weight={statusConfig.weight ? statusConfig.weight : "fill"}
+                  class="shrink-0 w-3.5 h-3.5 {statusConfig.color}"
+                />
+              </span>
+            {:else}
+              <svelte:component
+                this={statusConfig.icon}
+                weight={statusConfig.weight ? statusConfig.weight : "fill"}
+                class="mr-1 shrink-0 w-3.5 h-3.5 {statusConfig.color}"
+              />
+            {/if}
           </span>
         {/if}
 
@@ -222,26 +249,32 @@
     </div>
   </button>
 
-  <div class="menu-btn-grp group/menu" class:is-open={menuOpen}>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_mouse_events_have_key_events -->
+  <div
+    class="menu-btn-grp group/menu"
+    class:is-open={menuOpen}
+    on:mouseout|stopPropagation={() => (menuOpen = false)}
+  >
     <div
       class="flex items-center overflow-hidden transition-all duration-300 ease-in-out
              {menuOpen
         ? 'max-w-[120px] opacity-100'
         : 'max-w-0 opacity-0 group-hover/menu:max-w-[120px] group-hover/menu:opacity-100'}"
     >
-      <button
-        class="menu-btn danger"
-        title="Löschen"
-        on:click|stopPropagation={handleDeleteClick}
-      >
+      <button class="menu-btn danger" title="Löschen" on:click|stopPropagation={handleDeleteClick}>
         <TrashIcon class="list-menu-icon" />
       </button>
       <button
         class="menu-btn"
         title="Abspielen"
         on:click|stopPropagation={() => {
-          console.log("Play", file.name);
-          menuOpen = false;
+          if (type === "buzzer") {
+            addToast;
+          } else {
+            playLocalFile(file.name);
+            menuOpen = false;
+          }
         }}
       >
         <PlayIcon class="list-menu-icon" />