implement features in settings menu

src/lib/components/app-sidebar.svelte

@@ -296,6 +296,12 @@
 			>
 				<PanelLeft />
 				Sidebar
+				<div class="grow"></div>
+				<kbd
+					class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none"
+				>
+					<span class="text-xs">⌘</span>B
+				</kbd>
 			</Sidebar.MenuButton>
 		</Sidebar.MenuItem>
 	</Sidebar.Footer>

src/lib/components/cloak.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { preferencesStore } from '$lib/stores';
+	import { onMount } from 'svelte';
+
+	let focused = $state(false);
+
+	let title = $derived(
+		$preferencesStore.experimentalFeatures &&
+			($preferencesStore.cloak.mode == 'on' || ($preferencesStore.cloak.mode == 'blur' && !focused))
+			? $preferencesStore.cloak.name
+			: 'EduTools'
+	);
+	let icon = $derived(
+		$preferencesStore.experimentalFeatures &&
+			($preferencesStore.cloak.mode == 'on' || ($preferencesStore.cloak.mode == 'blur' && !focused))
+			? $preferencesStore.cloak.icon
+			: '/favicon.ico'
+	);
+
+	onMount(() => {
+		document.addEventListener('blur', () => {
+			focused = false;
+		});
+
+		document.addEventListener('focus', () => {
+			focused = true;
+		});
+	});
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<link rel="icon" href={icon} type="image/x-icon" />
+</svelte:head>

src/lib/components/panic-mode.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { preferencesStore } from '$lib/stores';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		if ($preferencesStore.panic.enabled && $preferencesStore.experimentalFeatures) {
+			document.addEventListener('keydown', (event) => {
+				if (event.key === $preferencesStore.panic.key) {
+					event.preventDefault();
+					event.stopPropagation();
+					if ($preferencesStore.panic.disableExperimentalMode) {
+						$preferencesStore.experimentalFeatures = false;
+					}
+					window.open($preferencesStore.panic.url, '_self');
+				}
+			});
+		}
+	});
+</script>

src/lib/components/play.svelte

@@ -20,7 +20,6 @@
 	// App imports
 	import { getGameById } from '$lib/gmaes';
 	import { preferencesStore, favoritesStore, historyStore } from '$lib/stores';
-	import { onMount } from 'svelte';
 	import clsx from 'clsx';
 
 	function openNewTab(url: string) {
@@ -29,7 +28,7 @@
 		if ($preferencesStore.open === 'tab') {
 			openedTab = window.open('', '_blank');
 		} else if ($preferencesStore.open === 'window') {
-			openedTab = window.open('', '_blank');
+			openedTab = window.open('', '_blank', 'width=800,height=600');
 		} else {
 			$preferencesStore.open = 'tab';
 			openNewTab(url);
@@ -48,7 +47,7 @@
 
 	const gmaedata = $derived(getGameById(id));
 
-	onMount(() => {
+	if ($preferencesStore.history) {
 		let history = $historyStore;
 		if (history.includes(id)) {
 			history = history.filter((historyId) => historyId !== id);
@@ -57,7 +56,7 @@
 		history.push(id);
 
 		historyStore.set(history);
-	});
+	}
 </script>
 
 <div class="flex h-full w-full flex-col gap-3 p-3">
@@ -147,7 +146,7 @@
 				}}
 			>
 				<OpenInNewTab class="h-6 w-6" />
-				New tab
+				New {$preferencesStore.open}
 			</Button>
 			<Button
 				variant="outline"

src/lib/components/settings.svelte

@@ -12,9 +12,11 @@
 	import CircleAlertIcon from '@lucide/svelte/icons/circle-alert';
 
 	import { settingsOpen } from '$lib/state.svelte';
-	import { preferencesStore } from '$lib/stores';
+	import { preferencesStore, historyStore } from '$lib/stores';
 	import { themes } from '$lib/theme';
 	import clsx from 'clsx';
+	import Button from './ui/button/button.svelte';
+	import { toast } from 'svelte-sonner';
 
 	const themeTriggerContent = $derived(
 		themes.find((theme) => theme.value === $preferencesStore.theme)?.label ?? 'No theme :D'
@@ -62,13 +64,16 @@
 					</div>
 				</Dialog.Content>
 			</Dialog.Root>
-			Panic key
+			Panic key (requires refresh to apply)
 			<div class="flex items-center gap-3">
 				<Checkbox id="panic" bind:checked={$preferencesStore.panic.enabled} />
 				<Label for="panic">Enable Panic Key</Label>
 			</div>
 			<div class="flex items-center gap-3">
-				<Checkbox id="panic-disable-experimental" bind:checked={$preferencesStore.panic.enabled} />
+				<Checkbox
+					id="panic-disable-experimental"
+					bind:checked={$preferencesStore.panic.disableExperimentalMode}
+				/>
 				<Label for="panic-disable-experimental">Disable Experimental Mode when triggered</Label>
 			</div>
 			<div class="flex flex-row gap-3">
@@ -88,14 +93,45 @@
 				<Input bind:value={$preferencesStore.cloak.icon} placeholder="Icon URL" />
 			</div>
 			Privacy
-			<div class="flex items-center gap-3">
-				<Checkbox id="analytics" bind:checked={$preferencesStore.analytics} />
-				<Label for="analytics">Enable Analytics</Label>
-			</div>
 			<div class="flex items-center gap-3">
 				<Checkbox id="history" bind:checked={$preferencesStore.history} />
 				<Label for="history">Enable History</Label>
 			</div>
+			<div class="flex flex-row gap-3">
+				<Button
+					variant="outline"
+					onclick={() => {
+						$historyStore = [];
+						toast.success('Cleared');
+					}}
+				>
+					Clear history
+				</Button>
+				<Button
+					variant="outline"
+					onclick={() => {
+						preferencesStore.reset();
+						toast.success('Reset');
+					}}
+				>
+					Reset settings
+				</Button>
+				<Button
+					variant="destructive"
+					onclick={() => {
+						localStorage.clear();
+						sessionStorage.clear();
+						document.cookie.split(';').forEach((cookie) => {
+							const eqPos = cookie.indexOf('=');
+							const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie;
+							document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT';
+						});
+						window.location.reload();
+					}}
+				>
+					Clear everything
+				</Button>
+			</div>
 		</div>
 	</Dialog.Content>
 </Dialog.Root>

src/routes/+layout.svelte

@@ -11,6 +11,8 @@
 	import AppSidebar from '$lib/components/app-sidebar.svelte';
 	import Settings from '$lib/components/settings.svelte';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import PanicMode from '$lib/components/panic-mode.svelte';
+	import Cloak from '$lib/components/cloak.svelte';
 
 	// Third-party utilities
 	import { ModeWatcher } from 'mode-watcher';
@@ -79,6 +81,8 @@
 <!-- https://github.com/sveltejs/svelte/issues/3105#issuecomment-1868393333 -->
 <div class={clsx('hidden', $preferencesStore.theme)} id="theme"></div>
 
+<PanicMode />
+<Cloak />
 <Toaster />
 <ModeWatcher defaultMode={'dark'} />
 <Settings />