Merge branch 'feat/add-alt-indicator' into 'develop'

feat: add alt indicator in post form attachments

Co-authored-by: Lhcfl <Lhcfl@outlook.com>

See merge request firefish/firefish!10710

packages/client/src/components/MkDriveFileThumbnail.vue

@@ -4,9 +4,10 @@
 			v-if="isThumbnailAvailable"
 			:hash="file.blurhash"
 			:src="file.thumbnailUrl"
-			:alt="file.name"
+			:alt="file.comment"
 			:title="file.name"
 			:cover="fit !== 'contain'"
+			:show-alt-indicator="showAltIndicator"
 		/>
 		<i v-else-if="is === 'image'" :class="icon('ph-file-image icon')"></i>
 		<i v-else-if="is === 'video'" :class="icon('ph-file-video icon')"></i>
@@ -33,10 +34,16 @@ import type { entities } from "firefish-js";
 import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import icon from "@/scripts/icon";
 
-const props = defineProps<{
-	file: entities.DriveFile;
-	fit: string;
-}>();
+const props = withDefaults(
+	defineProps<{
+		file: entities.DriveFile;
+		fit: string;
+		showAltIndicator?: boolean
+	}>(),
+	{
+		showAltIndicator: false,
+	}
+);
 
 const is = computed(() => {
 	if (props.file.type.startsWith("image/")) return "image";

packages/client/src/components/MkImgWithBlurhash.vue

@@ -21,30 +21,46 @@
 		loading="lazy"
 		@load="onLoad"
 	/>
+	<i
+		class="alt-indicator"
+		:class="icon('ph-subtitles')"
+		v-if="alt && showAltIndicator"
+		v-tooltip.noLabel="
+			`${i18n.ts.alt}: ${
+				alt.length > 200
+					? alt.trim().slice(0, 200) + '...'
+					: alt.trim()
+			}`
+		"
+	></i>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 import { decodeBlurHash } from "fast-blurhash";
+import icon from "@/scripts/icon";
+import { i18n } from "@/i18n";
 
 const props = withDefaults(
 	defineProps<{
 		src?: string | null;
 		hash?: string;
-		alt?: string;
+		alt?: string | null;
 		type?: string | null;
 		title?: string | null;
 		size?: number;
 		cover?: boolean;
 		largestDimension?: "width" | "height";
+		showAltIndicator?: boolean
 	}>(),
 	{
 		src: null,
 		type: null,
-		alt: "",
+		alt: null,
 		title: null,
 		size: 64,
 		cover: true,
+		showAltIndicator: false
 	},
 );
 
@@ -96,4 +112,21 @@ img {
 		height: 100%;
 	}
 }
+
+i.alt-indicator {
+	display: flex;
+	gap: 4px;
+	position: absolute;
+	border-radius: 6px;
+	overflow: hidden;
+	top: 0;
+	right: 0;
+	background-color: var(--accentedBg);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	color: var(--accent);
+	font-size: 1em;
+	padding: 6px 8px;
+	text-align: center;
+}
 </style>

packages/client/src/components/MkPostFormAttaches.vue

@@ -19,6 +19,7 @@
 					class="thumbnail"
 					:file="element"
 					fit="cover"
+					:show-alt-indicator="true"
 				/>
 				<div v-if="element.isSensitive" class="sensitive">
 					<i :class="icon('ph-warning icon')"></i>