Dashboard with YAML

app/components/CreateFolderModal.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+  open: boolean;
+  parentId?: string | null;
+}>();
+
+const emit = defineEmits(['update:open', 'created']);
+
+const name = ref('');
+const loading = ref(false);
+
+const close = () => {
+  emit('update:open', false);
+  name.value = '';
+};
+
+const create = async () => {
+  if (!name.value) return;
+  loading.value = true;
+  try {
+    await $fetch('/api/folders', {
+      method: 'POST',
+      body: { name: name.value, parentId: props.parentId }
+    });
+    emit('created');
+    close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <UModal :open="open" @update:open="$emit('update:open', $event)">
+    <template #content>
+      <UCard>
+        <template #header>
+          <h3 class="text-xl font-semibold">New Folder</h3>
+        </template>
+
+        <form @submit.prevent="create" class="space-y-4">
+          <UFormGroup label="Folder Name">
+            <UInput v-model="name" placeholder="E.g., Projects" autofocus required />
+          </UFormGroup>
+          
+          <div class="flex justify-end gap-3 mt-6">
+            <UButton color="neutral" variant="ghost" @click="close">Cancel</UButton>
+            <UButton type="submit" :loading="loading">Create</UButton>
+          </div>
+        </form>
+      </UCard>
+    </template>
+  </UModal>
+</template>