feat: handle v1 migration

Author: WarningImHack3r

package.json

@@ -54,6 +54,7 @@
 		"svelte-exmarkdown": "^4.0.3",
 		"svelte-meta-tags": "^4.2.0",
 		"svelte-persisted-store": "^0.12.0",
+		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^3.0.2",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.0.14",

pnpm-lock.yaml

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

src/lib/components/ui/sonner/index.ts

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...restProps}
+/>

src/lib/components/ui/sonner/sonner.svelte

@@ -4,13 +4,15 @@
 	import { dev } from "$app/environment";
 	import { page } from "$app/state";
 	import { deepMerge, MetaTags } from "svelte-meta-tags";
+	import { toast } from "svelte-sonner";
 	import { ChevronDown, type Icon, Monitor, Moon, Sun, X } from "@lucide/svelte";
 	import { ProgressBar } from "@prgm/sveltekit-progress-bar";
 	import { ModeWatcher, resetMode, setMode } from "mode-watcher";
 	import { news } from "$lib/news/news.json";
 	import { cn } from "$lib/utils";
 	import ScreenSize from "$lib/components/ScreenSize.svelte";
 	import { buttonVariants, Button } from "$lib/components/ui/button";
+	import { Toaster } from "$lib/components/ui/sonner";
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 
 	let { data, children } = $props();
@@ -58,6 +60,25 @@
 				? localStorage["mode-watcher-mode"].replace(/"/g, "")
 				: "system";
 
+		// v2 migration
+		if ("token" in localStorage) {
+			toast.success("Welcome to svelte-changelog v2!", {
+				description: "Thanks for visiting this site since v1 :)",
+				duration: 7_500
+			});
+			localStorage.removeItem("token");
+		}
+		for (const key of [
+			"displaySvelteBetaReleases",
+			"displayKitBetaReleases",
+			"displayOtherBetaReleases",
+			"svelteMostRecentUpdate",
+			"kitMostRecentUpdate",
+			"othersMostRecentUpdate"
+		]) {
+			localStorage.removeItem(key);
+		}
+
 		// News
 		const closedNews = getClosedNewsIds();
 		const now = new Date();
@@ -72,6 +93,7 @@
 {/if}
 <ModeWatcher />
 <ProgressBar class="text-primary" zIndex={100} />
+<Toaster />
 <MetaTags {...metaTags} />
 
 <header