Rework commands page

app/app.config.ts

@@ -17,6 +17,22 @@ export default defineAppConfig({
 				base: "cursor-pointer"
 			}
 		},
+		formField: {
+			slots: {
+				root: "w-full"
+			}
+		},
+		input: {
+			slots: {
+				root: "w-full"
+			}
+		},
+		textarea: {
+			slots: {
+				root: "w-full",
+				base: "resize-none"
+			}
+		},
 		navigationMenu: {
 			slots: {
 				link: "cursor-pointer",

app/components/Layout/Tile.vue

@@ -2,10 +2,10 @@
 	<div class="grid grid-cols-1 lg:grid-cols-2">
 		<div class="px-6 pb-10 pt-12 sm:pt-16 lg:px-8 lg:pt-22">
 			<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
-				<h2 class="text-3xl text-white font-bold tracking-tight">
+				<h2 class="text-3xl font-bold tracking-tight">
 					{{ props.title }}
 				</h2>
-				<p class="mt-6 text-lg text-gray-300 leading-8">
+				<p class="mt-6 text-lg text-(--ui-text-muted) leading-8">
 					{{ props.description }}
 				</p>
 			</div>

app/pages/commands.vue

@@ -3,29 +3,23 @@
 		title="Commands"
 		description="Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application."
 	>
-		<form @submit.prevent="sendCommand()">
+		<div class="space-y-6 md:space-y-8">
-			<div class="mx-auto max-w-xl" lg="mr-0 max-w-lg">
+			<UForm :state="inputState" :schema="schema" class="flex flex-col gap-y-4 items-end" @submit="sendCommand">
-				<div class="grid grid-cols-1 gap-x-8 gap-y-6">
+				<UFormField label="Command input" name="input">
-					<div>
+					<UInput v-model="inputState.input" variant="subtle" size="lg" />
-						<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
+				</UFormField>
-						<div mt="2.5">
+
-							<input id="command-input" v-model="input" type="text" name="command-input" 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">
+				<UButton type="submit" size="lg">
-						</div>
-					</div>
-					<div class="flex justify-end">
-						<Btn type="submit">
 					Send command
-						</Btn>
+				</UButton>
+			</UForm>
+
+			<UForm :state="outputState" class="flex flex-col gap-y-4 items-end">
+				<UFormField label="Command output" name="command-output">
+					<UTextarea v-model="outputState.output" variant="subtle" size="lg" :rows="8" :resize="false" readonly />
+				</UFormField>
+			</UForm>
 		</div>
-					<div class="mt-8">
-						<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
-						<div class="mt-2.5">
-							<textarea id="command-output" v-model="result" name="command-output" 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>
 	</LayoutTile>
 </template>
 
@@ -35,21 +29,33 @@
 		icon: "lucide:square-terminal"
 	});
 
-	const input = ref("");
+	const schema = z.object({
-	const result = ref("");
+		input: z.string({
+			required_error: "Input is required"
+		}).nonempty()
+	});
+
+	type Schema = zInfer<typeof schema>;
+
+	const inputState = ref<Partial<Schema>>({
+		input: undefined
+	});
+	const outputState = ref({
+		output: ""
+	});
 
 	const sendCommand = async () => {
 		try {
 			const response = await useTauriShellCommand.create("exec-sh", [
 				"-c",
-				input.value
+				inputState.value.input!
 			]).execute();
 
-			result.value = JSON.stringify(response, null, 4);
+			outputState.value.output = JSON.stringify(response, null, 4);
 		} catch (error) {
-			result.value = JSON.stringify(error, null, 4);
+			outputState.value.output = JSON.stringify(error, null, 4);
 		} finally {
-			input.value = "";
+			inputState.value.input = undefined;
 		}
 	};
 </script>

app/pages/index.vue

@@ -4,10 +4,10 @@
 			<SvgoLogo :filled="true" :font-controlled="false" class="mx-auto size-40" />
 
 			<div class="flex flex-col items-center gap-y-3">
-				<h1 class="animate-pulse text-3xl sm:text-4xl text-pretty font-bold text-(--ui-text-highlighted) font-heading md:mb-5">
+				<h1 class="animate-pulse text-3xl sm:text-4xl text-pretty font-bold font-heading md:mb-5">
 					{{ app.name.toUpperCase() }}
 				</h1>
-				<p class="leading-7 text-pretty text-center">
+				<p class="leading-7 text-pretty">
 					Powered by
 				</p>
 
@@ -17,7 +17,7 @@
 						size="xl"
 						:to="app.nuxtSite"
 						target="_blank"
-						:external="true"
+						external
 					>
 						Nuxt 3
 					</UButton>
@@ -26,7 +26,7 @@
 						size="xl"
 						:to="app.tauriSite"
 						target="_blank"
-						:external="true"
+						external
 					>
 						Tauri 2
 					</UButton>
@@ -35,7 +35,7 @@
 						size="xl"
 						:to="app.nuxtUiSite"
 						target="_blank"
-						:external="true"
+						external
 					>
 						NuxtUI 3
 					</UButton>
@@ -52,9 +52,14 @@
 		</div>
 
 		<div class="fixed bottom-6 text-sm absolute-center-h">
-			<p class="text-sm text-(--ui-text-muted)">
+			<div class="flex items-center gap-1 text-(--ui-text-muted)">
-				Made by {{ app.author }}
+				<p class="text-sm">
+					Made by
 				</p>
+				<ULink :to="app.repo" external target="_blank">
+					{{ app.author }}
+				</ULink>
+			</div>
 		</div>
 	</UContainer>
 </template>

nuxt.config.ts

@@ -42,6 +42,18 @@ export default defineNuxtConfig({
 	dir: {
 		modules: "app/modules"
 	},
+	imports: {
+		presets: [
+			{
+				from: "zod",
+				imports: ["z", {
+					name: "infer",
+					as: "zInfer",
+					type: true
+				}]
+			}
+		]
+	},
 	vite: {
 		clearScreen: false,
 		envPrefix: ["VITE_", "TAURI_"],

package.json

@@ -32,7 +32,8 @@
 		"@tauri-apps/plugin-store": "^2.2.0",
 		"nuxt": "^3.15.4",
 		"vue": "^3.5.13",
-		"vue-router": "^4.5.0"
+		"vue-router": "^4.5.0",
+		"zod": "^3.24.1"
 	},
 	"devDependencies": {
 		"@antfu/eslint-config": "^4.1.1",

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       vue-router:
         specifier: ^4.5.0
         version: 4.5.0(vue@3.5.13(typescript@5.7.3))
+      zod:
+        specifier: ^3.24.1
+        version: 3.24.1
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^4.1.1
@@ -4627,6 +4630,9 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -10017,4 +10023,6 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.7.0
 
+  zod@3.24.1: {}
+
   zwitch@2.0.4: {}