From 622721927b3649d7352b0b02223b16dc3c140cf8 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 30 Aug 2023 18:23:28 +0200
Subject: [PATCH] :sparkles: Resolves #250

---
 .../popover/commandpalettenotice.svelte       | 27 ++++++++++
 .../lib/components/popover/smalltop.svelte    | 52 +++++++++++--------
 .../src/lib/components/popover/smalltop.ts    |  3 +-
 frontend/src/lib/i18n/locales/de.json         |  3 +-
 frontend/src/lib/i18n/locales/en.json         |  3 +-
 frontend/src/routes/dashboard/+page.svelte    |  2 +
 6 files changed, 65 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/lib/components/popover/commandpalettenotice.svelte

diff --git a/frontend/src/lib/components/popover/commandpalettenotice.svelte b/frontend/src/lib/components/popover/commandpalettenotice.svelte
new file mode 100644
index 0000000..d0b6b3d
--- /dev/null
+++ b/frontend/src/lib/components/popover/commandpalettenotice.svelte
@@ -0,0 +1,27 @@
+<!--
+SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
+
+SPDX-License-Identifier: MPL-2.0
+-->
+
+<script lang='ts'>
+	import Smalltop from './smalltop.svelte';
+	import { PopoverTypes } from '$lib/components/popover/smalltop';
+	import Cookies from 'js-cookie';
+	import { onMount } from 'svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
+
+	let open = false;
+	onMount(() => {
+		if (Cookies.get('commandpalette_notice')) {
+			return;
+		}
+		open = true;
+		// Cookies.set('commandpalette_notice', 'shown', { expires: new Date().setDate(new Date().getDate() + 30) });
+	});
+
+</script>
+
+<Smalltop bind:open type={PopoverTypes.Generic} data={$t("dashboard.commandpalette_notice")} />
diff --git a/frontend/src/lib/components/popover/smalltop.svelte b/frontend/src/lib/components/popover/smalltop.svelte
index 32979b5..0f96737 100644
--- a/frontend/src/lib/components/popover/smalltop.svelte
+++ b/frontend/src/lib/components/popover/smalltop.svelte
@@ -4,56 +4,64 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import { fly } from 'svelte/transition';
 	import { getLocalization } from '$lib/i18n';
+	import { createEventDispatcher } from 'svelte';
 	import { PopoverTypes } from './smalltop';
 
 	const { t } = getLocalization();
 
+	const dispatch = createEventDispatcher()
+
+
 	export let open = false;
 	export let type: PopoverTypes;
-	export let data: undefined | { game_pin: number | string; game_id: string } = undefined;
+	export let data: undefined | { game_pin: number | string; game_id: string } | string = undefined;
+
+	$: dispatch("open", open)
 </script>
 
 {#if open}
-	<div class="fixed w-screen top-10 z-[60] flex justify-center" transition:fly={{ y: -100 }}>
+	<div class='fixed w-screen top-10 z-[60] 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"
+			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">
+			<div class='ml-3 text-sm font-normal'>
 				{#if type === PopoverTypes.Copy}
 					{$t('components.popover.copied_to_clipboard')}
 				{:else if type === PopoverTypes.GameInLobby}A game is currently in the lobby. Click <a
-						class="underline"
-						href="/remote?game_pin={data.game_pin}&game_id={data.game_id}">here</a
-					> to join as a remote.
+					class='underline'
+					href='/remote?game_pin={data.game_pin}&game_id={data.game_id}'>here</a
+				> to join as a remote.
+				{:else if type === PopoverTypes.Generic}
+					{@html data}
 				{:else}
 					<p>Error!!!</p>
 				{/if}
 			</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"
+				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={() => {
 					open = false;
 				}}
 			>
-				<span class="sr-only">{$t('words.close')}</span>
+				<span class='sr-only'>{$t('words.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"
+					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"
+						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>
diff --git a/frontend/src/lib/components/popover/smalltop.ts b/frontend/src/lib/components/popover/smalltop.ts
index dace44e..bde6b75 100644
--- a/frontend/src/lib/components/popover/smalltop.ts
+++ b/frontend/src/lib/components/popover/smalltop.ts
@@ -5,5 +5,6 @@
 /* eslint-disable no-unused-vars */
 export enum PopoverTypes {
 	Copy,
-	GameInLobby
+	GameInLobby,
+	Generic
 }
diff --git a/frontend/src/lib/i18n/locales/de.json b/frontend/src/lib/i18n/locales/de.json
index cdc11cf..71135ae 100644
--- a/frontend/src/lib/i18n/locales/de.json
+++ b/frontend/src/lib/i18n/locales/de.json
@@ -308,7 +308,8 @@
     "dashboard": {
         "search_for_own_quizzes": "Suche nach eigenen Quiz",
         "views_n_plays": "Aufrufe und Startversuche",
-        "info_analytics": "Die \"Startversuche\" zeigen nur wie oft das Quiz gestartet wurde (auch von dir), wobei die \"Aufrufe\" zählen, wie oft das Quiz aufgerufen wurde (Bots werden auch gezählt)."
+        "info_analytics": "Die \"Startversuche\" zeigen nur wie oft das Quiz gestartet wurde (auch von dir), wobei die \"Aufrufe\" zählen, wie oft das Quiz aufgerufen wurde (Bots werden auch gezählt).",
+        "commandpalette_notice": "Drücke <kbd>Ctr</kbd>+<kbd>k</kbd> oder <kbd>Meta</kbd>+<kbd>k</kbd> um die Befehlspalette zu öffnen"
     },
     "footer": {
         "more_details_here": "Mehr Details hier",
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index 4548f8e..22520aa 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -294,7 +294,8 @@
     "dashboard": {
         "search_for_own_quizzes": "Search for your own quizzes",
         "views_n_plays": "Views & Plays",
-        "info_analytics": "The \"Plays\" only show how often the quiz was started (you included), whereas the \"Views\" count how often the \"View\"-page was visited, so it also counts bots (sorry for that)."
+        "info_analytics": "The \"Plays\" only show how often the quiz was started (you included), whereas the \"Views\" count how often the \"View\"-page was visited, so it also counts bots (sorry for that).",
+        "commandpalette_notice": "Press <kbd>Ctr</kbd>+<kbd>k</kbd> or <kbd>Meta</kbd>+<kbd>k</kbd> to open the command palette"
     },
     "footer": {
         "self_ads": "Made with ❤️ by {{mawoka_link}} and with the help of {{others_link}}.",
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index f5ff06f..48093b7 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -9,6 +9,7 @@ SPDX-License-Identifier: MPL-2.0
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
 	import { navbarVisible, signedIn } from '$lib/stores';
+	import CommandpaletteNotice from "$lib/components/popover/commandpalettenotice.svelte"
 	// import Spinner from "$lib/Spinner.svelte";
 	import Fuse from 'fuse.js';
 	import BrownButton from '$lib/components/buttons/brown.svelte';
@@ -94,6 +95,7 @@ SPDX-License-Identifier: MPL-2.0
 	<title>ClassQuiz - Dashboard</title>
 </svelte:head>
 <Analytics bind:quiz={analytics_quiz_selected} />
+<CommandpaletteNotice />
 <div class="min-h-screen flex flex-col">
 	{#await getData()}
 		<svg class="h-8 w-8 animate-spin mx-auto my-20" viewBox="3 3 18 18">