persist selections to Local Storage

assets/js/hooks.js

@@ -1,6 +1,5 @@
-const Hooks = {};
+const Hooks = {
-
+	EnterToNewline: {
-Hooks.EnterToNewline = {
 		mounted() {
 			this.el.addEventListener('keydown', (e) => {
 				if (e.key === 'Enter' && !e.shiftKey) {
@@ -14,6 +13,40 @@ Hooks.EnterToNewline = {
 				}
 			});
 		},
+	},
+
+	PersistData: {
+		mounted() {
+			const form = this.el;
+			const key = 'label';
+			const stored = JSON.parse(localStorage.getItem(key) || '{}');
+
+			let updated = false;
+
+			for (let [name, value] of Object.entries(stored)) {
+				const input = form.querySelector(`[name="${name}"]`);
+
+				if (input) {
+					input.value = value;
+					updated = true;
+				}
+			}
+
+			if (updated) {
+				this.pushEvent('update_label', stored);
+			}
+
+			form.addEventListener('input', () => {
+				const data = {};
+
+				for (let el of form.elements) {
+					if (el.name) data[el.name] = el.value;
+				}
+
+				localStorage.setItem(key, JSON.stringify(data));
+			});
+		},
+	},
 };
 
 export default Hooks;

lib/labelmaker_web/live/home.ex

@@ -74,7 +74,7 @@ defmodule LabelmakerWeb.Home do
       </div>
       <div class="flex flex-row justify-between" style="margin-top: 5px;">
         <p class="text-xs text-gray-600 dark:text-gray-400 m-0 ml-1">
-          Note: not all fonts are available for preview.
+          Note: not all fonts and colors are available for preview.
         </p>
         <div class="flex flex-row gap-1">
           <div
@@ -99,7 +99,13 @@ defmodule LabelmakerWeb.Home do
         </div>
       </div>
 
-      <form phx-change="update_label" phx-submit="make_label" class="space-y-4">
+      <form
+        id="labelmaker"
+        phx-hook="PersistData"
+        phx-change="update_label"
+        phx-submit="make_label"
+        class="space-y-4"
+      >
         <div>
           <label for="label" class="block text-sm font-medium">Label</label>
           <input