From 00dae2ba6b03a934b04679377e42e9a2aae649ec Mon Sep 17 00:00:00 2001
From: Jannik <jannik@picoscratch.de>
Date: Mon, 1 Dec 2025 21:01:11 +0100
Subject: [PATCH] feat: use SVG for arrow

---
 web/src/routes/display/+page.svelte | 86 ++++++++++++++++++++++++++---
 1 file changed, 79 insertions(+), 7 deletions(-)

diff --git a/web/src/routes/display/+page.svelte b/web/src/routes/display/+page.svelte
index 6db2aa6..f376556 100644
--- a/web/src/routes/display/+page.svelte
+++ b/web/src/routes/display/+page.svelte
@@ -56,7 +56,23 @@
       class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-9xl font-bold bg-background text-foreground p-4 rounded-md flex flex-col gap-10"
     >
       {#each newCalls as call (call.num)}
-        <span class="mx-4">{call.num} &rarr; {call.ticket.room}</span>
+        <span class="mx-4">
+          {call.num}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+          {call.ticket.room}
+        </span>
       {/each}
     </div>
   </div>
@@ -67,14 +83,42 @@
   <table class="self-start">
     <tbody>
       <tr>
-        <th class="pr-4 font-bold">Wartenr.</th>
-        <th class="pr-4 font-bold">&rarr;</th>
+        <th class="pr-4 font-bold">Warte Nr.</th>
+        <th class="pr-4 font-bold">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+        </th>
         <th class="pr-4 font-bold">Raum</th>
       </tr>
       {#each calls.slice(0, ENTRIES_PER_TABLE) as call (call.num)}
         <tr>
           <td class="call">{call.num}</td>
-          <td class="call">&rarr;</td>
+          <td class="call">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-arrow-right-icon lucide-arrow-right"
+              ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+            >
+          </td>
           <td class="call"
             >{call.ticket.status === "no-show"
               ? "Empfang " + ENTRIES[call.num[0]]
@@ -96,14 +140,42 @@
   <table class="self-start">
     <tbody>
       <tr>
-        <th class="pr-4 font-bold">Wartenr.</th>
-        <th class="pr-4 font-bold">&rarr;</th>
+        <th class="pr-4 font-bold">Warte Nr.</th>
+        <th class="pr-4 font-bold">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+        </th>
         <th class="pr-4 font-bold">Raum</th>
       </tr>
       {#each calls.slice(ENTRIES_PER_TABLE) as call (call.num)}
         <tr>
           <td class="call">{call.num}</td>
-          <td class="call">&rarr;</td>
+          <td class="call">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-arrow-right-icon lucide-arrow-right"
+              ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+            >
+          </td>
           <td class="call"
             >{call.ticket.status === "no-show"
               ? "Empfang " + ENTRIES[call.num[0]]