Rewrite nanostore for saved instances

src/components/instance-select.astro

@@ -66,10 +66,7 @@ const { prefilledInstance } = Astro.props;
 
 <script>
 	import { getUrlDomain, normalizeURL } from "@scripts/util";
-	import {
-		savedInstances as instanceStore,
-		saveInstance,
-	} from "@stores/saved-instances";
+	import { $savedInstances, save } from "@stores/saved-instances";
 
 	const $form = document.querySelector("#js-s2f-form") as HTMLFormElement;
 	const $instanceContainer = document.querySelector(
@@ -77,7 +74,7 @@ const { prefilledInstance } = Astro.props;
 	) as HTMLLabelElement;
 	const $instance = document.querySelector("#instance") as HTMLInputElement;
 
-	const savedInstances: Set<string> = instanceStore.get();
+	const savedInstances: Set<string> = $savedInstances.get();
 
 	if (savedInstances.size > 0) {
 		$instanceContainer.append(
@@ -110,7 +107,7 @@ const { prefilledInstance } = Astro.props;
 		if (formData.get("remember")) {
 			const instance = normalizeURL(formData.get("instance") as string);
 
-			saveInstance(instance);
+			save(instance);
 		}
 
 		return true;

src/stores/saved-instances.ts

@@ -1,33 +1,40 @@
 import { persistentAtom } from "@nanostores/persistent";
 import { getUrlDomain } from "@scripts/util";
+import { action, onMount } from "nanostores";
 
-const LOCAL_STORAGE_KEY = "recentInstances";
-const RECENT_INSTANCES_SIZE = 5;
+const OLD_LOCAL_STORAGE_KEY = "recentInstances";
+const LOCAL_STORAGE_KEY = "savedInstances";
+const CAPACITY = 5;
 
-export const savedInstances = persistentAtom<Set<string>>(
+export const $savedInstances = persistentAtom<Set<string>>(
 	LOCAL_STORAGE_KEY,
 	new Set(),
 	{
 		encode: (set) => JSON.stringify([...set]),
-		decode: (value) => {
-			return new Set(
-				// XXX: The conversion to a domain need to be done to support legacy
-				//  users, who may have full URLs in their Storage
-				JSON.parse(value).map((instanceUrl: string) =>
-					getUrlDomain(instanceUrl),
-				),
-			);
-		},
+		decode: (value) => new Set(JSON.parse(value)),
 	},
 );
 
-export const saveInstance = (instance: string) => {
-	savedInstances.set(
+onMount($savedInstances, () => {
+	// XXX: The conversion to a domain need to be done to support legacy
+	//  users, who may have full URLs in their Storage
+	const oldItem = localStorage.getItem(OLD_LOCAL_STORAGE_KEY);
+	if (!oldItem) {
+		return;
+	}
+
+	$savedInstances.set(
 		new Set(
-			[getUrlDomain(instance), ...savedInstances.get()].slice(
-				0,
-				RECENT_INSTANCES_SIZE,
+			JSON.parse(oldItem).map((instanceUrl: string) =>
+				getUrlDomain(instanceUrl),
 			),
 		),
 	);
-};
+	localStorage.removeItem(OLD_LOCAL_STORAGE_KEY);
+});
+
+export const save = action($savedInstances, "save", (store, instance) => {
+	store.set(
+		new Set([getUrlDomain(instance), ...store.get()].slice(0, CAPACITY)),
+	);
+});