Added basic module support

app/components/ModuleItem.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { modules } from '../modules/index';
+
+const props = defineProps<{
+  item: any
+}>();
+
+const moduleDef = computed(() => modules[props.item.moduleName]);
+
+// Create a render function component on the fly
+const RenderedModule = () => {
+  if (moduleDef.value && typeof moduleDef.value.render === 'function') {
+    return moduleDef.value.render();
+  }
+  return null;
+};
+</script>
+
+<template>
+  <div 
+    v-if="moduleDef"
+    :style="{ gridColumn: `span ${moduleDef.width} / span ${moduleDef.width}`, gridRow: `span ${moduleDef.height} / span ${moduleDef.height}` }"
+  >
+    <RenderedModule />
+  </div>
+  <div 
+    v-else 
+    class="flex items-center justify-center p-5 rounded-2xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm"
+  >
+    Unknown Module: {{ item.moduleName }}
+  </div>
+</template>

app/dashboard.yml

@@ -1,3 +1,8 @@
+- id: clock-widget
+  type: module
+  moduleName: clock
+  parentId: null
+  order: -1
 - id: media-folder
   type: folder
   parentId: null

app/modules/clock.ts

@@ -0,0 +1,35 @@
+import { h, ref, onMounted, onUnmounted, defineComponent } from 'vue';
+import type { DashboardModule } from '../types/module';
+
+export const ClockModule: DashboardModule = {
+  name: 'clock',
+  width: 2,
+  height: 1,
+  render() {
+    return h(defineComponent({
+      setup() {
+        const time = ref(new Date().toLocaleTimeString());
+        let interval: any;
+        
+        onMounted(() => {
+          interval = setInterval(() => {
+            time.value = new Date().toLocaleTimeString();
+          }, 1000);
+        });
+        
+        onUnmounted(() => {
+          clearInterval(interval);
+        });
+        
+        return () => h(
+          'div',
+          { class: 'w-full h-full flex flex-col items-center justify-center p-5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/10 shadow-lg text-white group cursor-default transition-all' },
+          [
+            h('span', { class: 'text-sm text-white/50 mb-1 uppercase tracking-widest' }, 'Local Time'),
+            h('span', { class: 'text-3xl font-light tracking-tight text-shadow' }, time.value)
+          ]
+        );
+      }
+    }));
+  }
+};

app/modules/index.ts

@@ -0,0 +1,7 @@
+import type { DashboardModule } from '../types/module';
+import { ClockModule } from './clock';
+
+// Register all modules here
+export const modules: Record<string, DashboardModule> = {
+  [ClockModule.name]: ClockModule
+};

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

@@ -70,8 +70,11 @@ const backUrl = computed(() => {
           </span>
         </NuxtLink>
 
-        <!-- Folder Items -->
+        <!-- Grid Items -->
-        <DesktopItem v-for="item in items" :key="item.id" :item="item" />
+        <template v-for="item in items" :key="item.id">
+          <ModuleItem v-if="item.type === 'module'" :item="item" />
+          <DesktopItem v-else :item="item" />
+        </template>
       </div>
       
       <div v-if="items.length === 0 && slugPath.length === 0" class="text-white/50 flex items-center justify-center h-64 text-lg">

app/types/module.ts

@@ -0,0 +1,8 @@
+import type { VNode } from 'vue';
+
+export interface DashboardModule {
+  name: string;
+  width: number; // Number of grid columns to span
+  height: number; // Number of grid rows to span
+  render: () => VNode | any;
+}