disclaimer message

website/package-lock.json

@@ -10,7 +10,7 @@
             "dependencies": {
                 "@internationalized/date": "^3.5.4",
                 "@mapbox/mapbox-gl-geocoder": "^5.0.2",
-                "bits-ui": "^0.21.11",
+                "bits-ui": "^0.21.12",
                 "chart.js": "^4.4.3",
                 "clsx": "^2.1.1",
                 "dexie": "^4.0.7",
@@ -2419,9 +2419,9 @@
             }
         },
         "node_modules/bits-ui": {
-            "version": "0.21.11",
-            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.11.tgz",
-            "integrity": "sha512-pFS/9z1qLaPZwb+9Tm0YS4iBp+ClsJBARMZWFOjv0lGCYpzAN7lx4eNk3SbSB5QMBUKwoVjr9Rai71ROq3RD1Q==",
+            "version": "0.21.12",
+            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.12.tgz",
+            "integrity": "sha512-Cf0iB+ZKwA0ZjkpixrhrZK9PC6pGPFleW/65Xc/z0lpGvWaFtdOhiYEntCHHxZ0VihP3aJaG0OBhUBIbmAePaA==",
             "dependencies": {
                 "@internationalized/date": "^3.5.1",
                 "@melt-ui/svelte": "0.76.2",

website/package.json

@@ -48,7 +48,7 @@
     "dependencies": {
         "@internationalized/date": "^3.5.4",
         "@mapbox/mapbox-gl-geocoder": "^5.0.2",
-        "bits-ui": "^0.21.11",
+        "bits-ui": "^0.21.12",
         "chart.js": "^4.4.3",
         "clsx": "^2.1.1",
         "dexie": "^4.0.7",

website/src/lib/components/Welcome.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { settings } from '$lib/db';
+
+	const { showWelcomeMessage } = settings;
+</script>
+
+<AlertDialog.Root
+	open={$showWelcomeMessage === true}
+	closeOnEscape={false}
+	closeOnOutsideClick={false}
+	onOpenChange={() => ($showWelcomeMessage = false)}
+>
+	<AlertDialog.Trigger class="hidden"></AlertDialog.Trigger>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>
+				Welcome to the new version of <b>gpx.studio</b>!
+			</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-1">
+				<p>The website is still under development and may contain bugs.</p>
+				<p>Please report any issues you find by email or on GitHub.</p>
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Action>Let's go!</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.ActionProps;
+	type $$Events = AlertDialogPrimitive.ActionEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Action
+	class={cn(buttonVariants(), className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Action>

website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.CancelProps;
+	type $$Events = AlertDialogPrimitive.CancelEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Cancel
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Cancel>

website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import * as AlertDialog from "./index.js";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.ContentProps;
+
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialog.Portal>
+	<AlertDialog.Overlay />
+	<AlertDialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+	</AlertDialogPrimitive.Content>
+</AlertDialog.Portal>

website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</AlertDialogPrimitive.Description>

website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>

website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
+	{...$$restProps}
+/>

website/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	type $$Props = AlertDialogPrimitive.PortalProps;
+</script>
+
+<AlertDialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</AlertDialogPrimitive.Portal>

website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h3";
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+	<slot />
+</AlertDialogPrimitive.Title>

website/src/lib/components/ui/alert-dialog/index.ts

@@ -0,0 +1,40 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+};

website/src/lib/db.ts

@@ -108,6 +108,7 @@ export const settings = {
     defaultWeight: dexieSettingStore('defaultWeight', 5),
     bottomPanelSize: dexieSettingStore('bottomPanelSize', 170),
     rightPanelSize: dexieSettingStore('rightPanelSize', 240),
+    showWelcomeMessage: dexieUninitializedSettingStore('showWelcomeMessage', true),
 };
 
 // Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber

website/src/routes/[...language]/app/+page.svelte

@@ -17,6 +17,7 @@
 	import { page } from '$app/stores';
 	import { languages } from '$lib/languages';
 	import { getURLForLanguage } from '$lib/utils';
+	import Welcome from '$lib/components/Welcome.svelte';
 
 	const {
 		verticalFileView,
@@ -99,6 +100,7 @@
 		<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
 		<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
 	{/if}
+	<Welcome />
 </div>
 
 <!-- hidden links for svelte crawling -->