fix: use modal for settings layout

Author: nsarrazin

src/lib/components/Modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 	import { cubicOut } from "svelte/easing";
-	import { fade } from "svelte/transition";
+	import { fade, fly } from "svelte/transition";
 	import Portal from "./Portal.svelte";
 	import { browser } from "$app/environment";
 
@@ -63,7 +63,11 @@
 			tabindex="-1"
 			bind:this={modalEl}
 			onkeydown={handleKeydown}
-			class="max-h-[90dvh] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none sm:-mt-10 {width}"
+			in:fly={{ y: 100 }}
+			class={[
+				"max-h-[90dvh] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none sm:-mt-10",
+				width,
+			]}
 		>
 			{@render children?.()}
 		</div>

src/routes/settings/+layout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { base } from "$app/paths";
-	import { clickOutside } from "$lib/actions/clickOutside";
 	import { afterNavigate, goto } from "$app/navigation";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import CarbonCheckmark from "~icons/carbon/checkmark";
 
-	import { fade, fly } from "svelte/transition";
+	import Modal from "$lib/components/Modal.svelte";
 	interface Props {
 		children?: import("svelte").Snippet;
 	}
@@ -23,29 +22,17 @@
 	const settings = useSettingsStore();
 </script>
 
-<div
-	class="fixed inset-0 z-20 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
-	in:fade
+<Modal
+	on:close={() => goto(previousPage)}
+	width="!h-[95dvh] !w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:!h-[85dvh] xl:!w-[1200px] 2xl:!h-[75dvh]"
 >
-	<dialog
-		in:fly={{ y: 100 }}
-		open
-		use:clickOutside={() => {
-			if (window?.getSelection()?.toString()) {
-				return;
-			}
-			goto(previousPage);
-		}}
-		class="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[85dvh] xl:w-[1200px] 2xl:h-[75dvh]"
-	>
-		{@render children?.()}
-		{#if $settings.recentlySaved}
-			<div
-				class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
-			>
-				<CarbonCheckmark class="text-green-500" />
-				Saved
-			</div>
-		{/if}
-	</dialog>
-</div>
+	{@render children?.()}
+	{#if $settings.recentlySaved}
+		<div
+			class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
+		>
+			<CarbonCheckmark class="text-green-500" />
+			Saved
+		</div>
+	{/if}
+</Modal>