From f84c6f818a9ce9f4ae6ba23d350978352cc3d4d3 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 14:32:40 -0300
Subject: [PATCH] feat(posts): show link preview card in the X and Threads
 editors

X and Threads auto-generate link cards server-side from the URL's meta tags, so no publish-side work is needed. Reuse the shared useLinkCard composable to render the card in their editor previews, gated on no attached media.
---
 .../components/posts/previews/ThreadsPreview.vue | 16 +++++++++++++++-
 .../js/components/posts/previews/XPreview.vue    | 16 +++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/posts/previews/ThreadsPreview.vue b/resources/js/components/posts/previews/ThreadsPreview.vue
index c2fab739..72977c58 100644
--- a/resources/js/components/posts/previews/ThreadsPreview.vue
+++ b/resources/js/components/posts/previews/ThreadsPreview.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, toRef } from 'vue';
 
+import LinkCard from "@/components/posts/previews/LinkCard.vue";
 import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
+import { useLinkCard } from '@/composables/useLinkCard';
 import { isVideoMedia } from '@/composables/useMedia';
 import type { MediaItem } from '@/types/media';
 
@@ -22,6 +24,11 @@ interface Props {
 const props = defineProps<Props>();
 
 const username = computed(() => props.socialAccount.username || props.socialAccount.display_name);
+
+const { card: linkCard, loading: linkCardLoading } = useLinkCard(
+    toRef(props, 'content'),
+    toRef(props, 'media'),
+);
 </script>
 
 <template>
@@ -108,6 +115,13 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
                     </div>
                 </div>
 
+                <!-- Link preview card -->
+                <div
+                    v-if="media.length === 0 && linkCardLoading"
+                    class="mt-3 h-24 animate-pulse rounded-2xl border border-[#e0e0e0] bg-neutral-100 dark:border-[#262626] dark:bg-[#181818]"
+                ></div>
+                <LinkCard v-else-if="media.length === 0 && linkCard" :card="linkCard" />
+
                 <!-- Location (after media) -->
                 <div v-if="media.length > 0" class="mt-2 flex items-center gap-1">
                     <svg class="h-4 w-4 text-[#999999]" viewBox="0 0 24 24" fill="none" stroke="currentColor"
diff --git a/resources/js/components/posts/previews/XPreview.vue b/resources/js/components/posts/previews/XPreview.vue
index db9b1225..5f53313b 100644
--- a/resources/js/components/posts/previews/XPreview.vue
+++ b/resources/js/components/posts/previews/XPreview.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, toRef } from 'vue';
 
+import LinkCard from "@/components/posts/previews/LinkCard.vue";
 import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
+import { useLinkCard } from '@/composables/useLinkCard';
 import { isVideoMedia } from '@/composables/useMedia';
 import type { MediaItem } from '@/types/media';
 
@@ -22,6 +24,11 @@ interface Props {
 const props = defineProps<Props>();
 
 const username = computed(() => props.socialAccount.username || 'username');
+
+const { card: linkCard, loading: linkCardLoading } = useLinkCard(
+    toRef(props, 'content'),
+    toRef(props, 'media'),
+);
 </script>
 
 <template>
@@ -111,6 +118,13 @@ const username = computed(() => props.socialAccount.username || 'username');
                     </div>
                 </div>
 
+                <!-- Link preview card -->
+                <div
+                    v-if="media.length === 0 && linkCardLoading"
+                    class="mt-3 h-24 animate-pulse rounded-2xl border border-[#cfd9de] bg-[#f7f9f9] dark:border-[#2f3336] dark:bg-[#16181c]"
+                ></div>
+                <LinkCard v-else-if="media.length === 0 && linkCard" :card="linkCard" />
+
                 <!-- Timestamp & Views -->
                 <div class="mt-3 text-[15px] text-[#536471] dark:text-[#71767b]">
                     <span>4:21 PM · Jan 20, 2026</span>