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 @@
-
+
+
@@ -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(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