Handle empty pages

app/app.config.ts

@@ -7,10 +7,23 @@ export default defineAppConfig({
 		nuxtSite: "https://nuxt.com",
 		nuxtUiSite: "https://ui3.nuxt.dev"
 	},
-	icons: {
+	pageCategories: {
-		system: "lucide:square-terminal",
+		system: {
-		storage: "lucide:archive",
+			label: "System",
-		interface: "lucide:app-window-mac"
+			icon: "lucide:square-terminal"
+		},
+		storage: {
+			label: "Storage",
+			icon: "lucide:archive"
+		},
+		interface: {
+			label: "Interface",
+			icon: "lucide:app-window-mac"
+		},
+		other: {
+			label: "Other",
+			icon: "lucide:folder"
+		}
 	},
 	ui: {
 		colors: {

app/composables/pages.ts

@@ -1,26 +1,26 @@
 export const usePages = () => {
 	const router = useRouter();
-	const { icons } = useAppConfig();
+	const { pageCategories } = useAppConfig();
 
 	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;
+		const category = route.meta.category as string || "other";
 		if (!category) return acc;
 
 		if (!acc[category]) {
 			acc[category] = {
-				label: category.charAt(0).toUpperCase() + category.slice(1),
+				label: pageCategories[category as keyof typeof pageCategories]?.label,
-				icon: icons[category as keyof typeof icons] || "i-lucide-folder",
+				icon: pageCategories[category as keyof typeof pageCategories]?.icon || "i-lucide-folder",
 				to: route.path,
 				children: []
 			};
 		}
 
 		acc[category].children.push({
-			label: route.meta.name as string,
+			label: route.meta.name as string || route.name,
 			description: route.meta.description as string,
-			icon: route.meta.icon,
+			icon: route.meta.icon || "i-lucide-file",
 			to: route.path
 		});