refactor: ♻️ Improve alt text editor UI

components/composer/autocomplete-suggestbox.vue

@@ -1,7 +1,4 @@
 <template>
-    <Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
-        enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
-        leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
     <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
         left: `${x}px`,
         top: `${y}px`,
@@ -16,7 +13,6 @@
             </div>
         </OverlayScrollbarsComponent>
     </div>
-    </Transition>
 </template>
 
 <script lang="ts" setup>

components/composer/uploader/alt-text-editor.vue

@@ -1,16 +1,30 @@
 <template>
     <Popover.Root :positioning="{
         strategy: 'fixed',
-    }" @update:open="o => !o && $emit('update-alt-text', fileData.alt_text)">
+    }" @update:open="o => !o && $emit('update-alt-text', fileData.alt_text)" :close-on-interact-outside="false">
         <Popover.Trigger aria-hidden="true"
             class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
             <iconify-icon icon="tabler:alt" width="none" class="size-4" />
         </Popover.Trigger>
         <Popover.Positioner class="!z-[100]">
             <Popover.Content
-                class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 !min-w-72">
+                class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 w-72 space-y-2">
+                <div class="flex items-center justify-between px-1 pt-1 gap-x-1">
+                    <Popover.CloseTrigger :as-child="true">
+                    <Button theme="outline" aria-label="Close" class="text-xs !p-1">
+                        <iconify-icon icon="tabler:x" width="1rem" height="1rem" />
+                    </Button>
+                    </Popover.CloseTrigger>
+                    <h3 class="text-xs font-semibold">Alt Text</h3>
+                    <a :href="`https://www.w3.org/WAI/tutorials/images/decision-tree/`" target="_blank"
+                        class="text-xs text-gray-300 ml-auto mr-1" title="Learn more about alt text">
+                        <iconify-icon icon="tabler:info-circle" width="1rem" height="1rem" />
+                    </a>
+                </div>
+                <PreviewContent :file="fileData.file" class="rounded" />
                 <textarea :disabled="fileData.uploading" @keydown.enter.stop v-model="fileData.alt_text"
-                    placeholder="Add alt text"
+                    placeholder="Describe this image for screen readers"
+                    rows="5"
                     class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
                 <Button theme="secondary" @click="$emit('update-alt-text', fileData.alt_text)" class="w-full"
                     :loading="fileData.uploading">
@@ -24,6 +38,7 @@
 <script lang="ts" setup>
 import { Popover } from "@ark-ui/vue";
 import Button from "~/packages/ui/components/buttons/button.vue";
+import PreviewContent from "./preview-content.vue";
 import type { FileData } from "./uploader.vue";
 
 const props = defineProps<{

components/composer/uploader/file-preview.vue

@@ -1,7 +1,6 @@
 <template>
     <div role="button" tabindex="0" :class="[
         'size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden',
-        fileData.uploading && 'animate-pulse'
     ]" @keydown.enter="$emit('remove', fileData.id)">
         <PreviewContent :file="fileData.file" />
         <FileShadowOverlay />