Categorize routes

app/components/Site/Navbar.vue

@@ -13,6 +13,7 @@
 				variant="link"
 				:ui="{
 					root: 'hidden md:flex',
+					viewportWrapper: 'max-w-2xl absolute-center-h',
 					list: 'md:gap-x-2'
 				}"
 			/>

app/composables/pages.ts

@@ -1,13 +1,32 @@
 export const usePages = () => {
 	const router = useRouter();
 
-	const pages = router.getRoutes().filter((route) => route.name !== "index" && route.name !== "all").map((route) => {
-		return {
-			label: route.meta.name,
-			to: route.path,
-			icon: route.meta.icon
-		};
-	});
+	const routes = router.getRoutes().filter((route) => route.name !== "index" && route.name !== "all");
+
+	const categorizedRoutes = routes.reduce((acc, route) => {
+		const category = route.meta.category as string;
+		if (!category) return acc;
+
+		if (!acc[category]) {
+			acc[category] = {
+				label: category.charAt(0).toUpperCase() + category.slice(1),
+				icon: route.meta.categoryIcon || "i-lucide-folder",
+				to: route.path,
+				children: []
+			};
+		}
+
+		acc[category].children.push({
+			label: route.meta.name as string,
+			description: route.meta.description as string,
+			icon: `i-${route.meta.icon}`,
+			to: route.path
+		});
+
+		return acc;
+	}, {} as Record<string, any>);
+
+	const pages = Object.values(categorizedRoutes);
 
 	return {
 		pages

app/pages/commands.vue

@@ -25,8 +25,11 @@
 
 <script lang="ts" setup>
 	definePageMeta({
-		name: "Commands",
-		icon: "lucide:square-terminal"
+		name: "Shell commands",
+		icon: "lucide:terminal",
+		description: "Execute shell commands",
+		category: "system",
+		categoryIcon: "lucide:square-terminal"
 	});
 
 	const schema = z.object({

app/pages/file.vue

@@ -22,7 +22,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "Files",
-		icon: "lucide:file-text"
+		icon: "lucide:file-text",
+		category: "storage",
+		categoryIcon: "lucide:database",
+		description: "Create and manage files"
 	});
 
 	const schema = z.object({

app/pages/notifications.vue

@@ -22,7 +22,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "Notifications",
-		icon: "lucide:message-square-more"
+		icon: "lucide:message-square-more",
+		category: "interface",
+		categoryIcon: "lucide:app-window-mac",
+		description: "Send native notifications"
 	});
 
 	const schema = z.object({

app/pages/os.vue

@@ -10,7 +10,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "OS Informations",
-		icon: "lucide:info"
+		icon: "lucide:info",
+		category: "system",
+		categoryIcon: "lucide:square-terminal",
+		description: "Read operating system informations."
 	});
 
 	const items = ref([

app/pages/store.vue

@@ -26,7 +26,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "Store",
-		icon: "lucide:database"
+		icon: "lucide:database",
+		category: "storage",
+		categoryIcon: "lucide:database",
+		description: "Handle file creation in the file system"
 	});
 
 	const schema = z.object({

app/pages/webview.vue

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