Rework os info page

app/app.config.ts

@@ -33,6 +33,12 @@ export default defineAppConfig({
 				base: "resize-none"
 			}
 		},
+		accordion: {
+			slots: {
+				trigger: "cursor-pointer",
+				item: "md:py-2"
+			},
+		},
 		navigationMenu: {
 			slots: {
 				link: "cursor-pointer",

app/pages/os.vue

@@ -3,13 +3,7 @@
 		title="OS Information"
 		description="Read information about the operating system using the OS Information plugin."
 	>
-		<div class="overflow-hidden rounded-lg bg-neutral-800 shadow">
+		<UAccordion :items="items" type="multiple" />
-			<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>
 
@@ -19,8 +13,21 @@
 		icon: "lucide:info"
 	});
 
-	const currentPlatform = await useTauriOsPlatform();
+	const items = ref([
-	const currentArch = await useTauriOsArch();
+		{
-	const currentVersion = await useTauriOsVersion();
+			label: "System",
-	const currentLocale = await useTauriOsLocale() || "Not detectable";
+			icon: "lucide:monitor",
+			content: `${useTauriOsPlatform()} ${useTauriOsVersion()}`
+		},
+		{
+			label: "Arch",
+			icon: "lucide:microchip",
+			content: useTauriOsArch()
+		},
+		{
+			label: "Locale",
+			icon: "lucide:globe",
+			content: await useTauriOsLocale() || "Not detectable"
+		}
+	]);
 </script>