Rework commands page

2025-02-09 12:22:48 +01:00
parent bc45ecc4fc
commit 19712a41d5
7 changed files with 89 additions and 41 deletions
--- a/app/app.config.ts
+++ b/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",
--- a/app/components/Layout/Tile.vue
+++ b/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>
--- a/app/pages/commands.vue
+++ b/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>

@@ -35,21 +29,33 @@
 		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>
--- a/app/pages/index.vue
+++ b/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>
--- a/nuxt.config.ts
+++ b/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_"],
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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: {}