From 29f989984bab400f6ef4ff44b248607d611f5c01 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 18 Dec 2022 22:38:23 +0100
Subject: [PATCH] feat: initial expanded quoted toot

---
 components/status/StatusPreviewCard.vue     |  6 ++-
 components/status/StatusPreviewCardInfo.vue |  3 +-
 components/status/StatusPreviewMastodon.vue | 46 +++++++++++++++++++++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 components/status/StatusPreviewMastodon.vue

diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
index 815ad5e8..7383908e 100644
--- a/components/status/StatusPreviewCard.vue
+++ b/components/status/StatusPreviewCard.vue
@@ -22,11 +22,15 @@ const isSquare = $computed(() => (
 const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
 
 const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCards))
+
+const isMastodonLink = true
+
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 </script>
 
 <template>
   <StatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" />
+  <StatusPreviewMastodon v-else-if="isMastodonLink" :card="card" />
   <NuxtLink
     v-else
     block
@@ -69,6 +73,6 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
     >
       <div i-ri:profile-line w="30%" h="30%" text-secondary />
     </div>
-    <StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
+    <StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" :is-square="isSquare" />
   </NuxtLink>
 </template>
diff --git a/components/status/StatusPreviewCardInfo.vue b/components/status/StatusPreviewCardInfo.vue
index 4a683959..e33f508c 100644
--- a/components/status/StatusPreviewCardInfo.vue
+++ b/components/status/StatusPreviewCardInfo.vue
@@ -7,6 +7,7 @@ const props = defineProps<{
   root?: boolean
   /** For the preview image, only the small image mode is displayed */
   provider?: string
+  isSquare?: boolean
 }>()
 </script>
 
@@ -28,7 +29,7 @@ const props = defineProps<{
     >{{ card.title }}</strong>
     <p
       v-if="card.description"
-      line-clamp-1 break-all sm:break-words text-secondary ws-pre-wrap :class="[root ? 'sm:line-clamp-2' : '']"
+      line-clamp-1 break-all sm:break-normal text-secondary ws-pre-wrap sm:line-clamp-2
     >
       {{ card.description }}
     </p>
diff --git a/components/status/StatusPreviewMastodon.vue b/components/status/StatusPreviewMastodon.vue
new file mode 100644
index 00000000..2458d559
--- /dev/null
+++ b/components/status/StatusPreviewMastodon.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Card } from 'masto'
+
+defineProps<{
+  card: Card
+}>()
+
+/**
+ *  TODO:
+ * - extract username
+ * - generate user profile link
+ * - quotation icon ?
+*/
+</script>
+
+<template>
+  <div
+    v-if="card.image"
+    flex flex-col
+    display-block of-hidden
+    bg-code
+    relative
+    border="base"
+    w-full min-h-50 md:min-h-60 border-b
+    justify-center
+    rounded-lg
+  >
+    <div p4 sm:px-8 flex flex-col justify-between min-h-50 md:min-h-60 h-full>
+      <div flex justify-between items-center gap-2 sm:gap-6 h-full mb-2 min-h-35 md:min-h-45>
+        <div flex flex-col gap-2>
+          <a flex gap-1 text-sm flex-wrap leading-none :href="card.url" target="_blank">
+            <span>{{ card.title }}</span>
+          </a>
+          <a sm:text-lg :href="card.url" target="_blank">
+            <span text-secondary leading-tight>{{ card.description }}</span>
+          </a>
+        </div>
+        <div>
+          <a :href="card.url" target="_blank">
+            <img w-30 aspect-square width="20" height="20" rounded-2 :src="card.image">
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>