feat: basic alt text edit

components/publish/PublishAttachment.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Attachment } from 'masto'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   attachment: Attachment
   alt?: string
   removable?: boolean
@@ -11,7 +11,11 @@ withDefaults(defineProps<{
 
 defineEmits<{
   (evt: 'remove'): void
+  (evt: 'setDescription', description: string): void
 }>()
+
+const isEditDialogOpen = ref(false)
+const description = ref(props.attachment.description)
 </script>
 
 <template>
@@ -29,5 +33,29 @@ defineEmits<{
         <div i-ri:close-line text-3 :class="[isSmallScreen ? 'text-6' : 'text-3']" />
       </div>
     </div>
+    <div absolute right-2 bottom-2>
+      <button class="bg-black/75" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
+        Edit
+      </button>
+    </div>
+    <ModalDialog v-model="isEditDialogOpen" py-6 px-6 max-w-300>
+      <div flex gap-5>
+        <div flex flex-col gap-2 justify-between>
+          <h1 font-bold>
+            Description
+          </h1>
+          <div flex flex-col gap-2>
+            <textarea v-model="description" p-3 w-100 h-50 bg-base rounded-2 border-strong border-1 />
+            <button btn-outline @click="$emit('setDescription', description)">
+              Apply
+            </button>
+          </div>
+          <button btn-outline @click="isEditDialogOpen = false">
+            Close
+          </button>
+        </div>
+        <StatusAttachment :attachment="attachment" w-full />
+      </div>
+    </ModalDialog>
   </div>
 </template>