remove scenes

src/App.vue

@@ -20,9 +20,12 @@
     </div>
 
 
-
-
-        <SceneEntry v-for="scene in scenes" :title="scene.title" :series="scene.series"/>
+        <SceneEntry 
+            v-for="(scene, index) in scenes" 
+            :title="scene.title" 
+            :series="scene.series"
+            @remove="remove(index)" 
+            />
 
     </main>
 </template>
@@ -45,6 +48,10 @@ const add = () => {
     title.value = ""
     }
 
+const remove = (index) => {
+    scenes.value.splice(index, 1)
+}
+
 const load = (e) => {
     let files = e.target.files
     files.forEach((file) =>{

src/components/SceneEntry.vue

@@ -1,7 +1,10 @@
 <template>
     <section class="scene">
 
+    <div class="header">
     <h2>{{title}}</h2>
+    <button class="remove" @click="removeScene">remove</button>
+    </div>
     
     <draggable
         tag="transition-group"
@@ -61,6 +64,8 @@ const props = defineProps({
     series: Array
     })
 
+const emit = defineEmits(['remove'])
+
 const shots = ref(props.series || [])
 
 const drag = ref(false)
@@ -82,6 +87,10 @@ const remove = (index) => {
     shots.value.splice(index, 1)
 }
 
+const removeScene = () => {
+    emit('remove')
+}
+
 const serialize = async () => {
 
     let series = await Promise.all(shots.value.map(async (shot) => {
@@ -113,6 +122,8 @@ const serialize = async () => {
     gap: 16px;
 }
 
+
+
 .ghost {
     opacity: 0.5;
 }
@@ -121,10 +132,30 @@ const serialize = async () => {
     margin-block: 32px;
 }
 
-.scene h2 {
+.header {
     margin-block: 32px;
+    display: flex;
+    gap: 8px;
     }
 
+.header h2 {
+    margin: 0;
+}
+
+.header .remove {
+    position: relative;
+    color: currentColor;
+    opacity: 0.5;
+    font-size: 0.8rem;
+
+}
+
+.header .remove:hover {
+    opacity: 1;
+    background: none;
+    color: currentColor;
+}
+
 @media print {