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="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="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
-						<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">
-						</div>
-					</div>
-					<div class="flex justify-end">
-						<Btn type="submit">
-							Send command
-						</Btn>
-					</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>
+		<div class="space-y-6 md:space-y-8">
+			<UForm :state="inputState" :schema="schema" class="flex flex-col gap-y-4 items-end" @submit="sendCommand">
+				<UFormField label="Command input" name="input">
+					<UInput v-model="inputState.input" variant="subtle" size="lg" />
+				</UFormField>
+
+				<UButton type="submit" size="lg">
+					Send command
+				</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>
 	</LayoutTile>
 </template>
 
@@ -34,22 +28,34 @@
 		name: "Commands",
 		icon: "lucide:square-terminal"
 	});
-	
-	const input = ref("");
-	const result = ref("");
+
+	const schema = z.object({
+		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)">
-				Made by {{ app.author }}
-			</p>
+			<div class="flex items-center gap-1 text-(--ui-text-muted)">
+				<p class="text-sm">
+					Made by
+				</p>
+				<ULink :to="app.repo" external target="_blank">
+					{{ app.author }}
+				</ULink>
+			</div>
 		</div>
 	</UContainer>
 </template>