Centralize page category icons

app/app.config.ts

@@ -7,6 +7,11 @@ export default defineAppConfig({
 		nuxtSite: "https://nuxt.com",
 		nuxtUiSite: "https://ui3.nuxt.dev"
 	},
+	icons: {
+		system: "lucide:square-terminal",
+		storage: "lucide:archive",
+		interface: "lucide:app-window-mac"
+	},
 	ui: {
 		colors: {
 			primary: "green",
@@ -37,11 +42,11 @@ export default defineAppConfig({
 			slots: {
 				trigger: "cursor-pointer",
 				item: "md:py-2"
-			},
+			}
 		},
 		navigationMenu: {
 			slots: {
-				link: "cursor-pointer",
+				link: "cursor-pointer"
 			},
 			variants: {
 				disabled: {

app/composables/pages.ts

@@ -1,5 +1,6 @@
 export const usePages = () => {
 	const router = useRouter();
+	const { icons } = useAppConfig();
 
 	const routes = router.getRoutes().filter((route) => route.name !== "index" && route.name !== "all");
 
@@ -10,7 +11,7 @@ export const usePages = () => {
 		if (!acc[category]) {
 			acc[category] = {
 				label: category.charAt(0).toUpperCase() + category.slice(1),
-				icon: route.meta.categoryIcon || "i-lucide-folder",
+				icon: icons[category as keyof typeof icons] || "i-lucide-folder",
 				to: route.path,
 				children: []
 			};
@@ -19,7 +20,7 @@ export const usePages = () => {
 		acc[category].children.push({
 			label: route.meta.name as string,
 			description: route.meta.description as string,
-			icon: `i-${route.meta.icon}`,
+			icon: route.meta.icon,
 			to: route.path
 		});
 

app/pages/commands.vue

@@ -28,8 +28,7 @@
 		name: "Shell commands",
 		icon: "lucide:terminal",
 		description: "Execute shell commands",
-		category: "system",
+		category: "system"
-		categoryIcon: "lucide:square-terminal"
 	});
 
 	const schema = z.object({

app/pages/file.vue

@@ -24,7 +24,6 @@
 		name: "Files",
 		icon: "lucide:file-text",
 		category: "storage",
-		categoryIcon: "lucide:database",
 		description: "Create and manage files"
 	});
 

app/pages/notifications.vue

@@ -24,7 +24,6 @@
 		name: "Notifications",
 		icon: "lucide:message-square-more",
 		category: "interface",
-		categoryIcon: "lucide:app-window-mac",
 		description: "Send native notifications"
 	});
 

app/pages/os.vue

@@ -12,7 +12,6 @@
 		name: "OS Informations",
 		icon: "lucide:info",
 		category: "system",
-		categoryIcon: "lucide:square-terminal",
 		description: "Read operating system informations."
 	});
 

app/pages/store.vue

@@ -28,7 +28,6 @@
 		name: "Store",
 		icon: "lucide:database",
 		category: "storage",
-		categoryIcon: "lucide:database",
 		description: "Handle file creation in the file system"
 	});
 

app/pages/webview.vue

@@ -17,9 +17,8 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "Webview",
-		icon: "lucide:app-window-mac",
+		icon: "lucide:app-window",
 		category: "interface",
-		categoryIcon: "lucide:app-window-mac",
 		description: "Create new webview in a detached window"
 	});