feat: alt label dropdown for attachments (#409)

components/status/StatusAttachment.vue

@@ -54,6 +54,7 @@ const type = $computed(() => {
 </script>
 
 <template>
+  <div relative>
     <template v-if="type === 'video'">
       <video
         :poster="attachment.previewUrl"
@@ -120,4 +121,30 @@ const type = $computed(() => {
         />
       </button>
     </template>
+    <div absolute left-2 class="bottom-3.5">
+      <VDropdown v-if="attachment.description" :distance="6" placement="bottom-start">
+        <button font-bold text-sm hover:bg-black class="bg-black/65 px1.2 py0.2" rounded-1 text-white>
+          <div hidden>
+            read image description
+          </div>
+          ALT
+        </button>
+        <template #popper>
+          <div p4 flex flex-col gap-2 max-w-130>
+            <div flex justify-between>
+              <h2 font-bold text-xl text-secondary>
+                Description
+              </h2>
+              <button v-close-popper text-sm btn-outline py0 px2 text-secondary border-base>
+                Dismiss
+              </button>
+            </div>
+            <p>
+              {{ attachment.description }}
+            </p>
+          </div>
+        </template>
+      </VDropdown>
+    </div>
+  </div>
 </template>