persist selections to Local Storage

assets/js/hooks.js

@@ -1,18 +1,51 @@
-const Hooks = {};
+const Hooks = {
+	EnterToNewline: {
+		mounted() {
+			this.el.addEventListener('keydown', (e) => {
+				if (e.key === 'Enter' && !e.shiftKey) {
+					e.preventDefault();
 
-Hooks.EnterToNewline = {
-	mounted() {
-		this.el.addEventListener('keydown', (e) => {
-			if (e.key === 'Enter' && !e.shiftKey) {
-				e.preventDefault();
+					const cursorPos = this.el.selectionStart;
+					const value = this.el.value;
 
-				const cursorPos = this.el.selectionStart;
-				const value = this.el.value;
+					this.el.value = value.slice(0, cursorPos) + '\\n' + value.slice(cursorPos);
+					this.el.selectionStart = this.el.selectionEnd = cursorPos + 2;
+				}
+			});
+		},
+	},
 
-				this.el.value = value.slice(0, cursorPos) + '\\n' + value.slice(cursorPos);
-				this.el.selectionStart = this.el.selectionEnd = cursorPos + 2;
+	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));
+			});
+		},
 	},
 };
 

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