From 19f2b5ae7ff80f01f0a6736c4008bb233fc6fe02 Mon Sep 17 00:00:00 2001
From: "s0wlz (Matthias Puchstein)" <matthias@puchstein.lu>
Date: Tue, 28 Apr 2026 19:22:30 +0200
Subject: [PATCH] fix(frontend): fix slot deprecation and a11y label warnings

---
 frontend/src/routes/admin/+layout.svelte      |  5 +++-
 .../src/routes/admin/courses/+page.svelte     |  8 +++----
 .../src/routes/admin/sessions/+page.svelte    | 24 +++++++++----------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/src/routes/admin/+layout.svelte b/frontend/src/routes/admin/+layout.svelte
index d141dbf..1700bc5 100644
--- a/frontend/src/routes/admin/+layout.svelte
+++ b/frontend/src/routes/admin/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { token, logout } from '$lib/auth';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
@@ -7,6 +8,8 @@
   import TutorShell from '$lib/components/TutorShell.svelte';
   import type { Course } from '$lib/types';
 
+  const { children }: { children: Snippet } = $props();
+
   let course = $state<Course | null>(null);
 
   onMount(async () => {
@@ -39,7 +42,7 @@
     semester={course?.semester ?? ''}
   >
     {#snippet children()}
-      <slot />
+      {@render children()}
     {/snippet}
   </TutorShell>
 {/if}
diff --git a/frontend/src/routes/admin/courses/+page.svelte b/frontend/src/routes/admin/courses/+page.svelte
index 6d20a89..d54fbb1 100644
--- a/frontend/src/routes/admin/courses/+page.svelte
+++ b/frontend/src/routes/admin/courses/+page.svelte
@@ -44,12 +44,12 @@
     </div>
     <form onsubmit={createCourse} style="padding:16px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
       <div style="display:flex;flex-direction:column;gap:4px">
-        <label class="tiny" style="color:var(--ink-3)">Kursname</label>
-        <input class="input" bind:value={newCourseName} placeholder="z.B. Funktionale Programmierung" style="width:260px" required />
+        <label for="course-name" class="tiny" style="color:var(--ink-3)">Kursname</label>
+        <input id="course-name" class="input" bind:value={newCourseName} placeholder="z.B. Funktionale Programmierung" style="width:260px" required />
       </div>
       <div style="display:flex;flex-direction:column;gap:4px">
-        <label class="tiny" style="color:var(--ink-3)">Semester</label>
-        <input class="input" bind:value={newCourseSemester} placeholder="z.B. SS2026" style="width:120px" required />
+        <label for="course-semester" class="tiny" style="color:var(--ink-3)">Semester</label>
+        <input id="course-semester" class="input" bind:value={newCourseSemester} placeholder="z.B. SS2026" style="width:120px" required />
       </div>
       <button class="btn" type="submit"><Icon name="plus" size={12} /> Kurs anlegen</button>
     </form>
diff --git a/frontend/src/routes/admin/sessions/+page.svelte b/frontend/src/routes/admin/sessions/+page.svelte
index ca1d714..43e573d 100644
--- a/frontend/src/routes/admin/sessions/+page.svelte
+++ b/frontend/src/routes/admin/sessions/+page.svelte
@@ -96,12 +96,12 @@
     </div>
     <form onsubmit={createSession} style="padding:16px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
       <div style="display:flex;flex-direction:column;gap:4px">
-        <label class="tiny" style="color:var(--ink-3)">Woche #</label>
-        <input class="input" type="number" bind:value={weekNr} min="1" style="width:80px" />
+        <label for="session-week" class="tiny" style="color:var(--ink-3)">Woche #</label>
+        <input id="session-week" class="input" type="number" bind:value={weekNr} min="1" style="width:80px" />
       </div>
       <div style="display:flex;flex-direction:column;gap:4px">
-        <label class="tiny" style="color:var(--ink-3)">Datum</label>
-        <input class="input" type="date" bind:value={date} />
+        <label for="session-date" class="tiny" style="color:var(--ink-3)">Datum</label>
+        <input id="session-date" class="input" type="date" bind:value={date} />
       </div>
       <button class="btn" type="submit"><Icon name="plus" size={12} /> Sitzung anlegen</button>
     </form>
@@ -182,12 +182,12 @@
 
       <form onsubmit={createSlot} style="margin-top:18px;display:flex;flex-direction:column;gap:12px">
         <div style="display:flex;flex-direction:column;gap:4px">
-          <label class="tiny" style="color:var(--ink-3)">Tutor-ID</label>
-          <input class="input" type="number" bind:value={slotTutorId} placeholder="1" required />
+          <label for="slot-tutor" class="tiny" style="color:var(--ink-3)">Tutor-ID</label>
+          <input id="slot-tutor" class="input" type="number" bind:value={slotTutorId} placeholder="1" required />
         </div>
         <div style="display:flex;flex-direction:column;gap:4px">
-          <label class="tiny" style="color:var(--ink-3)">Raum (optional)</label>
-          <select class="input" bind:value={slotRoomId}>
+          <label for="slot-room" class="tiny" style="color:var(--ink-3)">Raum (optional)</label>
+          <select id="slot-room" class="input" bind:value={slotRoomId}>
             <option value={null}>Kein Raum</option>
             {#each rooms as room}
               <option value={room.id}>{room.name}</option>
@@ -196,12 +196,12 @@
         </div>
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
           <div style="display:flex;flex-direction:column;gap:4px">
-            <label class="tiny" style="color:var(--ink-3)">Beginn</label>
-            <input class="input" type="time" bind:value={startTime} />
+            <label for="slot-start" class="tiny" style="color:var(--ink-3)">Beginn</label>
+            <input id="slot-start" class="input" type="time" bind:value={startTime} />
           </div>
           <div style="display:flex;flex-direction:column;gap:4px">
-            <label class="tiny" style="color:var(--ink-3)">Ende</label>
-            <input class="input" type="time" bind:value={endTime} />
+            <label for="slot-end" class="tiny" style="color:var(--ink-3)">Ende</label>
+            <input id="slot-end" class="input" type="time" bind:value={endTime} />
           </div>
         </div>
         <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px">