✨ Added Quiz-ID to dashboard with an option to copy it to the clipboard

frontend/src/lib/dashboard/main_slider.svelte

@@ -9,11 +9,13 @@
 	import 'swiper/css/pagination';
 	import 'swiper/css/navigation';
 	import { Pagination, EffectCoverflow, Keyboard, Mousewheel, Navigation } from 'swiper';
+	import { fly } from 'svelte/transition';
 	import { QuizQuestionType } from '$lib/quiz_types.js';
 	import { getLocalization } from '$lib/i18n';
 	import StartGamePopup from './start_game.svelte';
 	import { onMount } from 'svelte';
 
+	let copy_toast_open = false;
 	let start_game = null;
 	const { t } = getLocalization();
 	export let quizzes;
@@ -32,11 +34,54 @@
 			start_game = null;
 		}
 	};
+
+	const copy_id = (quiz_id: string) => {
+		navigator.clipboard.writeText(quiz_id);
+		copy_toast_open = true;
+		setTimeout(() => {
+			copy_toast_open = false;
+		}, 2000);
+	};
 	onMount(() => {
 		document.body.addEventListener('keydown', close_start_game_if_esc_is_pressed);
 	});
 </script>
 
+{#if copy_toast_open}
+	<div class="fixed w-screen top-10 z-50 flex justify-center" transition:fly={{ y: -100 }}>
+		<div
+			class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+			role="alert"
+		>
+			<div class="ml-3 text-sm font-normal">ID copied to clipboard!</div>
+			<button
+				type="button"
+				class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+				data-dismiss-target="#toast-default"
+				aria-label="Close"
+				on:click={() => {
+					copy_toast_open = false;
+				}}
+			>
+				<span class="sr-only">Close</span>
+				<svg
+					aria-hidden="true"
+					class="w-5 h-5"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		</div>
+	</div>
+{/if}
+
 <div class="w-screen p-8">
 	<Swiper
 		grabCursor={true}
@@ -57,7 +102,7 @@
 			clickable: true
 		}}
 	>
-		{#each quizzes as quiz}
+		{#each quizzes as quiz, i}
 			<SwiperSlide>
 				<div class="flex justify-center pt-4 px-4">
 					<a href="/edit?quiz_id={quiz.id}" class="text-3xl">{quiz.title}</a>
@@ -187,6 +232,14 @@
 												/>
 											</svg>
 										</button>
+										<p
+											class="text-sm font-mono select-all cursor-pointer"
+											on:click={() => {
+												copy_id(quiz.id);
+											}}
+										>
+											{quiz.id}
+										</p>
 									</div>
 								</div>
 							</SwiperSlide>