Initial commit

src/components/editors/EventEditorLabel.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  mode: 'edit' | 'view'
+  label?: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:label': [label: string | null]
+}>()
+
+const labelValue = computed({
+  get: () => props.label ?? '',
+  set: (value) => emit('update:label', value || null)
+})
+</script>
+
+<template>
+  <div class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Title</div>
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'" class="mb-4">
+      <div class="mb-2 pa-2">{{ labelValue || 'Untitled Event' }}</div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <v-text-field
+        v-model="labelValue"
+        label="Title"
+        variant="outlined"
+        density="compact"
+        :rules="[v => !!v || 'Title is required']"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>