Skip to content

feat: Phase 4.9.8 #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AliAlaa88 merged 2 commits into from
Dec 16, 2025
Merged

feat: Phase 4.9.8 #331

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd11a2e
feat: add expandable text feature for tweet content
Amrhanysayed Dec 16, 2025
ca98a86
feat:add show more on tweets content
AliAlaa88 Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 33 additions & 4 deletions app/modules/tweets/components/Tweet/subComponents/Content/Content.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="
Expand All @@ -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>
Expand All @@ -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'

Expand All @@ -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
Expand Down