display last scanned id on frontend

web/src/App.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import IDTable from "./lib/IDTable.svelte";
+  import LastId from "./lib/LastID.svelte";
+
+  let lastID: string = $state("");
+
+  onMount(() => {
+    let sse = new EventSource("/api/idevent");
+
+    sse.onmessage = (e) => {
+      lastID = e.data;
+    };
+  });
 </script>
 
 <main
@@ -17,7 +29,15 @@
     Download CSV
   </a>
 
-  <div class="py-3">
+  <div class="pt-3 pb-2">
+    <LastId
+      id={lastID}
+      onAdd={(id) => {
+        console.debug("Add id " + id);
+      }}
+    />
+  </div>
+  <div>
     <IDTable />
   </div>
 </main>

web/src/lib/LastID.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  let { id, onAdd }: { id: string; onAdd?: (id: string) => void } = $props();
+
+  let lastID = id;
+  let flashing = $state(false);
+
+  $effect(() => {
+    if (lastID != id) {
+      flashing = true;
+
+      setTimeout(() => {
+        flashing = false;
+      }, 1100);
+    }
+    lastID = id;
+  });
+</script>
+
+<div class=" text-xl text-center">
+  Letzte ID
+  <div class="flex justify-center">
+    <span
+      class="{flashing
+        ? 'flash'
+        : ''} font-bold rounded-md px-1 font-mono min-w-36">{id}</span
+    >
+    <button
+      class="bg-indigo-500 rounded-2xl px-2 cursor-pointer mx-2"
+      onclick={() => {
+        if (onAdd && id != "") {
+          onAdd(id);
+        }
+      }}>+</button
+    >
+  </div>
+</div>
+
+<style scoped>
+  .flash {
+    animation: flash-green 1s;
+  }
+
+  @keyframes flash-green {
+    0% {
+      background-color: transparent;
+    }
+    40% {
+      background-color: oklch(59.6% 0.145 163.225);
+    }
+    60% {
+      background-color: oklch(59.6% 0.145 163.225);
+    }
+    100% {
+      background-color: transparent;
+    }
+  }
+</style>