fix: improve StatusPreviewCard (#383)

components/status/StatusCard.vue

@@ -96,7 +96,12 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
           </div>
           <StatusActionsMore :status="status" mr--2 />
         </div>
-        <div :class="status.visibility === 'direct' ? 'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''">
+        <div
+          space-y-2
+          :class="{
+            'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none': status.visibility === 'direct',
+          }"
+        >
           <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
             <template #spoiler>
               <p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>

components/status/StatusPreviewCard.vue

@@ -1,49 +1,68 @@
 <script setup lang="ts">
 import type { Card } from 'masto'
 
-const prop = defineProps<{
+const props = defineProps<{
   card: Card
+  /** For the preview image, only the small image mode is displayed */
+  smallPictureOnly?: boolean
+  /** When it is root card in the list, not appear as a child card */
+  root?: boolean
 }>()
-const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
-const isSquare = $computed(() => prop.card.width === prop.card.height)
-const description = $computed(() => prop.card.description ? prop.card.description : new URL(prop.card.url).hostname)
+const alt = $computed(() => `${props.card.title} - ${props.card.title}`)
+const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height)
+const description = $computed(() => props.card.description ? props.card.description : new URL(props.card.url).hostname)
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 </script>
 
 <template>
-  <div
-    v-if="card"
-    border="~ base"
-    display-block
-    rounded-lg
+  <NuxtLink
+    block
+    of-hidden
+    hover:bg-active
+    :to="card.url"
+    :class="{
+      'flex': isSquare,
+      'p-4': root,
+      'rounded-lg border border-base': !root,
+    }"
+    target="_blank"
   >
-    <NuxtLink display-block :to="card.url" :class="{ flex: isSquare }">
+    <div
+      v-if="card.image"
+      flex flex-col
+      display-block of-hidden
+
+      border="base"
+      :class="{
+        'min-w-32 w-32 h-32 border-r': isSquare,
+        'w-full aspect-[1.91] border-b': !isSquare,
+        'rounded-lg': root,
+      }"
+    >
       <CommonBlurhash
-        v-if="card.image"
         :blurhash="card.blurhash"
         :src="card.image"
         :width="card.width"
         :height="card.height"
         :alt="alt"
-        flex flex-col
-        display-block
-        rounded-lg
-        :class="isSquare ? 'rounded-r-none w-32' : 'rounded-b-none w-full'"
-        object-cover
+        w-full h-full object-cover
       />
-      <div
-        p4 max-h-2xl
-        flex flex-col
-      >
-        <p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
-          {{ card.providerName }}
-        </p>
-        <strong v-if="card.title" line-clamp-1 text-ellipsis>{{ card.title }}</strong>
-        <p v-if="description" text-secondary line-clamp-2 text-ellipsis>
-          {{ description }}
-        </p>
-      </div>
-    </NuxtLink>
-  </div>
+    </div>
+    <div v-else min-w-32 w-32 h-32 bg="slate-500/10" flex justify-center items-center>
+      <div i-ri:profile-line w="30%" h="30%" text-secondary />
+    </div>
+    <div
+      p4 max-h-2xl
+      flex flex-col
+    >
+      <p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
+        {{ card.providerName }}
+      </p>
+      <strong v-if="card.title" line-clamp-1 text-ellipsis>{{ card.title }}</strong>
+      <p v-if="description" text-secondary line-clamp-2 text-ellipsis>
+        {{ description }}
+      </p>
+    </div>
+  </NuxtLink>
 </template>