feat: preview card for status links (#339)

components/status/StatusCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Filter, FilterAction, FilterContext, Status } from 'masto'
+import type { FilterContext, Status } from 'masto'
 
 const props = withDefaults(
   defineProps<{
@@ -108,6 +108,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
               :status="status"
               minimized
             />
+            <StatusPreviewCard v-if="status.card" :card="status.card" />
           </StatusSpoiler>
           <StatusCard
             v-if="status.reblog"
@@ -115,6 +116,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
             :actions="false"
           />
         </div>
+        <StatusLink v-if="status.card" :card="status.card" />
         <StatusActions v-if="(actions !== false && !isZenMode)" pt2 :status="status" />
       </div>
     </div>

components/status/StatusDetails.vue

@@ -42,6 +42,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
         />
       </StatusSpoiler>
     </div>
+    <StatusPreviewCard v-if="status.card" :card="status.card" />
     <div flex="~ gap-1" items-center text-secondary text-sm>
       <div flex>
         <div>{{ createdAt }}</div>

components/status/StatusPreviewCard.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { Card } from 'masto'
+
+const prop = defineProps<{
+  card: Card
+}>()
+const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
+
+// TODO: handle card.type: 'photo' | 'video' | 'rich';
+</script>
+
+<template>
+  <div
+    v-if="card"
+    border="~ base"
+    display-block
+    rounded-lg
+  >
+    <NuxtLink display-block :to="card.url">
+      <CommonBlurhash
+        v-if="card.image"
+        :blurhash="card.blurhash"
+        :src="card.image"
+        :width="card.width"
+        :height="card.height"
+        :alt="alt"
+        display-block
+        rounded-lg
+        rounded-b-none
+        object-cover
+        w-full
+      />
+      <div p4 max-h-2xl>
+        <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="card.description" text-secondary line-clamp-2 text-ellipsis>
+          {{ card.description }}
+        </p>
+        <p v-else text-secondary line-clamp-2 text-ellipsis>
+          {{ card.url }}
+        </p>
+      </div>
+    </NuxtLink>
+  </div>
+</template>