Dashboard with YAML

app/components/DesktopItem.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const props = defineProps<{
+  item: any
+}>();
+
+const route = useRoute();
+const isFolder = computed(() => props.item.type === 'folder');
+
+const targetUrl = computed(() => {
+  if (isFolder.value) {
+    const currentSlug = route.params.slug ? (Array.isArray(route.params.slug) ? route.params.slug.join('/') : route.params.slug) : '';
+    return currentSlug ? `/${currentSlug}/${props.item.slug}` : `/${props.item.slug}`;
+  }
+  return props.item.url;
+});
+
+const defaultIcon = computed(() => isFolder.value ? 'i-lucide-folder' : 'i-lucide-link');
+const iconToUse = computed(() => props.item.icon || defaultIcon.value);
+
+</script>
+
+<template>
+  <NuxtLink
+    :to="targetUrl"
+    :target="isFolder ? '_self' : '_blank'"
+    class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/10 transition-colors cursor-pointer group select-none"
+  >
+    <UIcon 
+      :name="iconToUse" 
+      class="w-16 h-16 mb-3 drop-shadow-md transition-transform group-hover:scale-105" 
+      :style="{ color: item.color || (isFolder ? '#60A5FA' : '#9CA3AF') }"
+    />
+    <span class="text-sm font-medium text-center text-white break-words line-clamp-2 w-full text-shadow">
+      {{ isFolder ? item.name : item.title }}
+    </span>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.text-shadow {
+  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+}
+</style>