Dashboard with YAML

app/pages/[...slug].vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+// @ts-ignore
+import dashboardData from '~/dashboard.yml';
+
+const route = useRoute();
+const slugPath = Array.isArray(route.params.slug) ? route.params.slug.filter(Boolean) : (route.params.slug ? route.params.slug.split('/').filter(Boolean) : []);
+
+// The imported data is an array of items
+const allItems = computed(() => dashboardData || []);
+
+let currentFolderId: string | null = null;
+let currentFolder: any = null;
+
+// Resolve current folder based on the slug path
+for (const part of slugPath) {
+  const folder = allItems.value.find((item: any) => item.type === 'folder' && item.slug === part && item.parentId === currentFolderId);
+  if (folder) {
+    currentFolder = folder;
+    currentFolderId = folder.id;
+  }
+}
+
+// Get children of the current folder
+const items = computed(() => {
+  return allItems.value
+    .filter((item: any) => item.parentId === currentFolderId)
+    .sort((a: any, b: any) => (a.order || 0) - (b.order || 0));
+});
+
+const breadcrumbs = computed(() => {
+  let path = '';
+  const crumbs = [{ label: 'Desktop', to: '/' }];
+  
+  slugPath.forEach(part => {
+    path += `/${part}`;
+    crumbs.push({ label: part, to: path });
+  });
+  
+  return crumbs;
+});
+</script>
+
+<template>
+  <div class="h-full flex flex-col p-6">
+    <div class="flex items-center justify-between mb-8">
+      <UBreadcrumb :items="breadcrumbs" class="text-xl" />
+    </div>
+
+    <!-- Grid -->
+    <div class="flex-1 overflow-auto">
+      <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-6">
+        <DesktopItem v-for="item in items" :key="item.id" :item="item" />
+      </div>
+      
+      <div v-if="items.length === 0" class="text-white/50 flex items-center justify-center h-64 text-lg">
+        This folder is empty.
+      </div>
+    </div>
+  </div>
+</template>