From 3532d5f79d530255a3724c4239c7edee3aa1b46e Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 4 Nov 2024 21:43:54 +0100
Subject: [PATCH] refactor: :recycle: Improve alt text editor UI

---
 .../composer/autocomplete-suggestbox.vue      |  32 ++--
 .../composer/uploader/alt-text-editor.vue     |  21 ++-
 components/composer/uploader/file-preview.vue |   1 -
 package.json                                  | 154 +++++++++---------
 4 files changed, 109 insertions(+), 99 deletions(-)

diff --git a/components/composer/autocomplete-suggestbox.vue b/components/composer/autocomplete-suggestbox.vue
index eed296c..9a5a108 100644
--- a/components/composer/autocomplete-suggestbox.vue
+++ b/components/composer/autocomplete-suggestbox.vue
@@ -1,22 +1,18 @@
 <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`,
-            width: `${width}px`,
-        }" v-show="topSuggestions && topSuggestions.length > 0">
-            <OverlayScrollbarsComponent class="w-full [&>div]:flex">
-                <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
-                    @click="emit('autocomplete', suggestion.key)"
-                    :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
-                    :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
-                    <slot :suggestion="suggestion"></slot>
-                </div>
-            </OverlayScrollbarsComponent>
-        </div>
-    </Transition>
+    <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`,
+        width: `${width}px`,
+    }" v-show="topSuggestions && topSuggestions.length > 0">
+        <OverlayScrollbarsComponent class="w-full [&>div]:flex">
+            <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
+                @click="emit('autocomplete', suggestion.key)"
+                :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
+                :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
+                <slot :suggestion="suggestion"></slot>
+            </div>
+        </OverlayScrollbarsComponent>
+    </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/components/composer/uploader/alt-text-editor.vue b/components/composer/uploader/alt-text-editor.vue
index d591f33..a490e2f 100644
--- a/components/composer/uploader/alt-text-editor.vue
+++ b/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<{
diff --git a/components/composer/uploader/file-preview.vue b/components/composer/uploader/file-preview.vue
index 9cad114..62cbf13 100644
--- a/components/composer/uploader/file-preview.vue
+++ b/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 />
diff --git a/package.json b/package.json
index 1b91fb5..350215b 100644
--- a/package.json
+++ b/package.json
@@ -1,79 +1,79 @@
 {
-  "name": "versia-fe",
-  "private": true,
-  "type": "module",
-  "license": "AGPL-3.0",
-  "author": {
-    "email": "contact@cpluspatch.com",
-    "name": "CPlusPatch",
-    "url": "https://cpluspatch.com"
-  },
-  "maintainers": [
-    {
-      "email": "contact@cpluspatch.com",
-      "name": "CPlusPatch",
-      "url": "https://cpluspatch.com"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/versia-pub/frontend.git"
-  },
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bun --bun nuxt dev --https --https.cert config/versia-fe.localhost.pem --https.key config/versia-fe.localhost-key.pem --host versia-fe.localhost",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "lint": "bunx @biomejs/biome check .",
-    "check": "bunx tsc -p ."
-  },
-  "dependencies": {
-    "@ark-ui/vue": "^4.2.0",
-    "@nuxt/fonts": "^0.10.2",
-    "@tailwindcss/typography": "^0.5.15",
-    "@vee-validate/nuxt": "^4.14.6",
-    "@vee-validate/zod": "^4.14.6",
-    "@versia/client": "^0.1.0",
-    "@vite-pwa/nuxt": "^0.10.6",
-    "@vueuse/core": "^11.2.0",
-    "@vueuse/nuxt": "^11.2.0",
-    "c12": "^2.0.1",
-    "fastest-levenshtein": "^1.0.16",
-    "html-to-text": "^9.0.5",
-    "iconify-icon": "^2.1.0",
-    "magic-regexp": "^0.8.0",
-    "mitt": "^3.0.1",
-    "nanoid": "^5.0.8",
-    "nuxt": "^3.14.0",
-    "nuxt-headlessui": "^1.2.0",
-    "nuxt-security": "^2.0.0",
-    "nuxt-shiki": "^0.3.0",
-    "overlayscrollbars": "^2.10.0",
-    "overlayscrollbars-vue": "^0.5.9",
-    "shiki": "^1.22.2",
-    "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
-    "zod": "^3.23.8"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@nuxtjs/seo": "^2.0.0-rc.23",
-    "@nuxtjs/tailwindcss": "^6.12.2",
-    "@tailwindcss/forms": "^0.5.9",
-    "@types/html-to-text": "^9.0.4",
-    "@vue-email/nuxt": "^0.8.19",
-    "typescript": "^5.6.3",
-    "vue-tsc": "^2.1.10"
-  },
-  "trustedDependencies": [
-    "@biomejs/biome",
-    "@fortawesome/fontawesome-common-types",
-    "@fortawesome/free-regular-svg-icons",
-    "@fortawesome/free-solid-svg-icons",
-    "@parcel/watcher",
-    "esbuild",
-    "json-editor-vue",
-    "vue-demi"
-  ]
+    "name": "versia-fe",
+    "private": true,
+    "type": "module",
+    "license": "AGPL-3.0",
+    "author": {
+        "email": "contact@cpluspatch.com",
+        "name": "CPlusPatch",
+        "url": "https://cpluspatch.com"
+    },
+    "maintainers": [
+        {
+            "email": "contact@cpluspatch.com",
+            "name": "CPlusPatch",
+            "url": "https://cpluspatch.com"
+        }
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/versia-pub/frontend.git"
+    },
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bun --bun nuxt dev --https --https.cert config/versia-fe.localhost.pem --https.key config/versia-fe.localhost-key.pem --host versia-fe.localhost",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "lint": "bunx @biomejs/biome check .",
+        "check": "bunx tsc -p ."
+    },
+    "dependencies": {
+        "@ark-ui/vue": "^4.2.0",
+        "@nuxt/fonts": "^0.10.2",
+        "@tailwindcss/typography": "^0.5.15",
+        "@vee-validate/nuxt": "^4.14.6",
+        "@vee-validate/zod": "^4.14.6",
+        "@versia/client": "^0.1.0",
+        "@vite-pwa/nuxt": "^0.10.6",
+        "@vueuse/core": "^11.2.0",
+        "@vueuse/nuxt": "^11.2.0",
+        "c12": "^2.0.1",
+        "fastest-levenshtein": "^1.0.16",
+        "html-to-text": "^9.0.5",
+        "iconify-icon": "^2.1.0",
+        "magic-regexp": "^0.8.0",
+        "mitt": "^3.0.1",
+        "nanoid": "^5.0.8",
+        "nuxt": "^3.14.0",
+        "nuxt-headlessui": "^1.2.0",
+        "nuxt-security": "^2.0.0",
+        "nuxt-shiki": "^0.3.0",
+        "overlayscrollbars": "^2.10.0",
+        "overlayscrollbars-vue": "^0.5.9",
+        "shiki": "^1.22.2",
+        "vue": "^3.5.12",
+        "vue-router": "^4.4.5",
+        "zod": "^3.23.8"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^1.9.4",
+        "@nuxtjs/seo": "^2.0.0-rc.23",
+        "@nuxtjs/tailwindcss": "^6.12.2",
+        "@tailwindcss/forms": "^0.5.9",
+        "@types/html-to-text": "^9.0.4",
+        "@vue-email/nuxt": "^0.8.19",
+        "typescript": "^5.6.3",
+        "vue-tsc": "^2.1.10"
+    },
+    "trustedDependencies": [
+        "@biomejs/biome",
+        "@fortawesome/fontawesome-common-types",
+        "@fortawesome/free-regular-svg-icons",
+        "@fortawesome/free-solid-svg-icons",
+        "@parcel/watcher",
+        "esbuild",
+        "json-editor-vue",
+        "vue-demi"
+    ]
 }