From cd11a2ec95b177a01d8d8a794d82741ec81721d3 Mon Sep 17 00:00:00 2001
From: Amrhanysayed <amrhanyseed@gmail.com>
Date: Tue, 16 Dec 2025 02:20:17 +0200
Subject: [PATCH] feat: add expandable text feature for tweet content

---
 .../Tweet/subComponents/Content/Content.vue   | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/app/modules/tweets/components/Tweet/subComponents/Content/Content.vue b/app/modules/tweets/components/Tweet/subComponents/Content/Content.vue
index 15d14c3b..d41b37ba 100644
--- a/app/modules/tweets/components/Tweet/subComponents/Content/Content.vue
+++ b/app/modules/tweets/components/Tweet/subComponents/Content/Content.vue
@@ -4,10 +4,17 @@
         <p
             class="mb-3 whitespace-pre-wrap wrap-break-word"
             style="unicode-bidi: plaintext"
-            v-html="parseLinks(content.text, false, false, content.mentions)"
+            v-html="displayText"
         />
 
-        <!-- Media (Images and Videos) -->
+        <button
+            v-if="shouldShowMore"
+            @click.stop="toggleExpanded"
+            class="text-accent hover:underline font-medium text-sm mt-1"
+        >
+            {{ isExpanded ? 'Show less' : 'Show more' }}
+        </button>
+
         <div @click.stop>
             <TweetMedia
                 v-if="
@@ -22,7 +29,7 @@
         <!-- Quoted Tweet -->
         <QuotedTweet
             v-if="content.parentTweet || content.quotedTweet"
-            :tweet="content.parentTweet || content.quotedTweet"
+            :tweet="(content.parentTweet || content.quotedTweet)!"
         />
     </div>
 </template>
@@ -32,7 +39,7 @@ import type { Content } from '~/modules/tweets/types'
 import TweetMedia from '../TweetMedia/TweetMedia.vue'
 import QuotedTweet from '../QuotedTweet/QuotedTweet.vue'
 
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 import { parseLinks } from '~/lib/utils'
 
@@ -42,6 +49,28 @@ const props = defineProps<{
 
 const root = ref<HTMLElement | null>(null)
 const router = useRouter()
+const isExpanded = ref(false)
+const MAX_LENGTH = 200
+
+const shouldShowMore = computed(() => {
+    return props.content.text.length > MAX_LENGTH
+})
+
+const displayText = computed(() => {
+    const text = props.content.text
+    const parsedText = parseLinks(text, false, false, props.content.mentions)
+
+    if (!shouldShowMore.value || isExpanded.value) {
+        return parsedText
+    }
+
+    const truncatedText = text.substring(0, MAX_LENGTH)
+    return parseLinks(truncatedText, false, false, props.content.mentions)
+})
+
+const toggleExpanded = () => {
+    isExpanded.value = !isExpanded.value
+}
 
 function onRootClick(e: Event) {
     const target = e.target as HTMLElement | null