Add OS page

src-tauri/capabilities/main.json

@@ -30,6 +30,10 @@
 			]
 		},
 		"notification:default",
-		"os:allow-platform"
+		"os:allow-platform",
+		"os:allow-arch",
+		"os:allow-family",
+		"os:allow-version",
+		"os:allow-locale"
 	]
 }

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"main":{"identifier":"main","description":"Capabilities for the main window","local":true,"windows":["main"],"permissions":["path:default","event:default","window:default","app:default","resources:default","menu:default","shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":["-c",{"validator":"\\S+"}],"cmd":"sh","name":"exec-sh","sidecar":false}]},"notification:default","os:allow-platform"]}}
+{"main":{"identifier":"main","description":"Capabilities for the main window","local":true,"windows":["main"],"permissions":["path:default","event:default","window:default","app:default","resources:default","menu:default","shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":["-c",{"validator":"\\S+"}],"cmd":"sh","name":"exec-sh","sidecar":false}]},"notification:default","os:allow-platform","os:allow-arch","os:allow-family","os:allow-version","os:allow-locale"]}}

src/components/Layout/Tile.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="grid grid-cols-1 lg:grid-cols-2">
+		<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
+			<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
+				<h2 class="text-3xl text-white font-bold tracking-tight">
+					{{ props.title }}
+				</h2>
+				<p class="mt-6 text-lg text-gray-300 leading-8">
+					{{ props.description }}
+				</p>
+			</div>
+		</div>
+		<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	const props = defineProps<{
+		title: string
+		description: string
+	}>();
+</script>

src/components/Tab/Row.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+		<dt class="flex items-center text-sm text-light-200 font-medium">
+			{{ props.heading }}
+		</dt>
+		<dd class="flex items-center text-sm text-neutral-300 leading-6 sm:col-span-2 sm:mt-0">
+			{{ props.body }}
+		</dd>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	const props = defineProps<{
+		heading: string
+		body: string
+	}>();
+</script>

src/pages/command.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="isolate">
 		<div class="grid grid-cols-1 lg:grid-cols-2">
-			<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
+			<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
 				<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
 					<h2 class="text-3xl text-white font-bold tracking-tight">
 						Command
@@ -11,7 +11,7 @@
 					</p>
 				</div>
 			</div>
-			<form class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16" @submit.prevent="sendCommand()">
+			<form class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16" @submit.prevent="sendCommand()">
 				<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
 					<div class="grid grid-cols-1 gap-x-8 gap-y-6">
 						<div>

src/pages/os.vue

@@ -1,5 +1,21 @@
 <template>
-	<div>
+	<LayoutTile
-		<p>WIP: os</p>
+		title="OS Information"
-	</div>
+		description="Read information about the operating system using the OS Information plugin."
+	>
+		<div class="overflow-hidden bg-neutral-800 shadow sm:rounded-lg">
+			<dl class="divide-y divide-neutral-600">
+				<TabRow heading="Platform" :body="`${currentPlatform} ${currentVersion}`" />
+				<TabRow heading="Arch" :body="currentArch" />
+				<TabRow heading="Locale" :body="currentLocale" />
+			</dl>
+		</div>
+	</LayoutTile>
 </template>
+
+<script lang="ts" setup>
+	const currentPlatform = await platform();
+	const currentArch = await arch();
+	const currentVersion = await version();
+	const currentLocale = await locale() || "Not detectable";
+</script>