Rework store page

app/pages/store.vue

@@ -3,29 +3,23 @@
 		title="Store"
 		description="Persistent key-value store. Allows you to handle state to a file which can be saved and loaded on demand including between app restarts."
 	>
-		<form @submit.prevent="setStoreValue()">
-			<div class="mx-auto max-w-xl" lg="mr-0 max-w-lg">
-				<div class="grid grid-cols-1 gap-x-8 gap-y-6">
-					<div>
-						<label for="store-value" class="block text-sm text-white font-semibold leading-6">Store value</label>
-						<div class="mt-2.5">
-							<input id="store-value" v-model="input" type="text" name="store-value" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset" sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset">
-						</div>
-					</div>
-					<div class="flex justify-end">
-						<Btn type="submit">
-							Send command
-						</Btn>
-					</div>
-					<div class="mt-8">
-						<label for="store-data" class="block text-sm text-white font-semibold leading-6">Current Store data</label>
-						<div class="mt-2.5">
-							<textarea id="store-data" v-model="result" name="store-data" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset" sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset" />
-						</div>
-					</div>
-				</div>
-			</div>
-		</form>
+		<div class="space-y-6 md:space-y-8">
+			<UForm :state="inputState" :schema="schema" class="flex flex-col gap-y-4 items-end" @submit="setStoreValue">
+				<UFormField label="Store value" name="value">
+					<UInput v-model="inputState.value" variant="subtle" size="lg" />
+				</UFormField>
+
+				<UButton type="submit" size="lg">
+					Set value
+				</UButton>
+			</UForm>
+
+			<UForm :state="outputState" class="flex flex-col gap-y-4 items-end">
+				<UFormField label="Store content" name="content">
+					<UTextarea v-model="outputState.content" variant="subtle" size="lg" :rows="8" readonly />
+				</UFormField>
+			</UForm>
+		</div>
 	</LayoutTile>
 </template>
 
@@ -35,8 +29,22 @@
 		icon: "lucide:database"
 	});
 
-	const input = ref("");
-	const result = ref("");
+	const schema = z.object({
+		value: z.string({
+			required_error: "Store key is required"
+		}).nonempty()
+	});
+
+	type Schema = zInfer<typeof schema>;
+
+	const inputState = ref<Partial<Schema>>({
+		value: undefined
+	});
+	const outputState = ref({
+		content: ""
+	});
+
+	const toast = useToast();
 	const autosave = ref(false);
 
 	const store = await useTauriStoreLoad("store.bin", {
@@ -45,9 +53,14 @@
 
 	const getStoreValue = async () => {
 		try {
-			result.value = await store.get<string>("myData") || "";
+			outputState.value.content = await store.get<string>("myData") || "";
 		} catch (error) {
-			result.value = JSON.stringify(error, null, 4);
+			toast.add({
+				title: "Error",
+				description: String(error),
+				color: "error"
+			});
+			outputState.value.content = JSON.stringify(error, null, 4);
 		}
 	};
 
@@ -55,12 +68,22 @@
 
 	const setStoreValue = async () => {
 		try {
-			await store.set("myData", input.value);
+			await store.set("myData", inputState.value!.value);
 			await getStoreValue();
+			toast.add({
+				title: "Success",
+				description: "Store value retieved",
+				color: "success"
+			});
 		} catch (error) {
-			result.value = JSON.stringify(error, null, 4);
+			toast.add({
+				title: "Error",
+				description: String(error),
+				color: "error"
+			});
+			outputState.value.content = JSON.stringify(error, null, 4);
 		} finally {
-			input.value = "";
+			inputState.value.value = undefined;
 		}
 	};
 </script>