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>

components/publish/PublishWidget.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CreateStatusParams, StatusVisibility } from 'masto'
+import type { Attachment, CreateStatusParams, StatusVisibility } from 'masto'
 import { fileOpen } from 'browser-fs-access'
 import { useDropZone } from '@vueuse/core'
 import { EditorContent } from '@tiptap/vue-3'
@@ -99,6 +99,11 @@ async function uploadAttachments(files: File[]) {
   isUploading = false
 }
 
+async function setDescription(att: Attachment, description: string) {
+  att.description = description
+  await useMasto().mediaAttachments.update(att.id, { description: att.description })
+}
+
 function removeAttachment(index: number) {
   draft.attachments.splice(index, 1)
 }
@@ -213,6 +218,7 @@ defineExpose({
             v-for="(att, idx) in draft.attachments" :key="att.id"
             :attachment="att"
             @remove="removeAttachment(idx)"
+            @set-description="setDescription(att, $event)"
           />
         </div>
       </div>