bbell / src / components / Feed / FeedItem.vue

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { AppBskyFeedDefs, AppBskyEmbedRecord } from '@atcute/bluesky'
import {
	IconRefreshRounded,
	IconChatBubbleOutlineRounded,
	IconRepeatRounded,
	IconFavoriteOutlineRounded,
	IconFavoriteRounded,
	IconMoreVert,
	IconBookmarkRounded,
	IconBookmarkAddedRounded,
	IconFormatQuoteRounded,
	IconContentCopyRounded,
	IconLinkRounded,
	IconOpenInNewRounded,
	IconForwardRounded,
	IconPets,
	IconBombRounded,
} from '@iconify-prerendered/vue-material-symbols'

import { useNavigationStore } from '@/stores/navigation'
import { usePostStore } from '@/stores/posts'
import { useToastStore } from '@/stores/toast'

import AppLink from '@/components/Navigation/AppLink.vue'
import BasePopover from '@/components/UI/BasePopover.vue'
import ImageEmbed from './Embeds/ImageEmbed.vue'
import EmbedRecord from './Embeds/EmbedRecord.vue'
import ExternalEmbed from './Embeds/ExternalEmbed.vue'
import VideoEmbed from './Embeds/VideoEmbed.vue'
import { tap } from '@/utils/haptics'
import { createRecord } from '@/utils/atproto'

type PostInput = AppBskyFeedDefs.PostView | AppBskyEmbedRecord.ViewRecord

const props = defineProps<{
	item?: AppBskyFeedDefs.FeedViewPost
	post?: PostInput
	embedded?: boolean
	rootPost?: boolean
	context?: 'post' | 'feed' | 'replies'
}>()

const postStore = usePostStore()
const navigationStore = useNavigationStore()
const toastStore = useToastStore()
const rootEl = ref<HTMLElement | null>(null)
const isVisible = ref(false)

const displayPost = computed(() => {
	if (props.item) return props.item.post

	if (props.post) {
		const p = props.post

		if ('value' in p && 'embeds' in p) {
			return {
				...p,
				record: p.value,
				embed: p.embeds?.[0],
			} as AppBskyFeedDefs.PostView
		}

		return p as AppBskyFeedDefs.PostView
	}

	return null
})

const embed = computed(() => displayPost.value?.embed)

const rkey = computed(() => {
	if (!displayPost.value) return null
	const uriParts = displayPost.value.uri.split('/')
	return uriParts.pop() || null
})

const formatTime = (dateString?: string) => {
	if (!dateString) return ''
	const date = new Date(dateString)
	const now = new Date()
	const diff = (now.getTime() - date.getTime()) / 1000

	if (diff < 60) return 'now'
	if (diff < 3600) return `${Math.floor(diff / 60)}m`
	if (diff < 86400) return `${Math.floor(diff / 3600)}h`
	return `${Math.floor(diff / 86400)}d`
}

const formatCount = (count?: number) => {
	if (!count) return ''
	if (count < 1000) return count.toString()
	if (count < 1000000) return `${(count / 1000).toFixed(1).replace(/\.0$/, '')}k`
	return `${(count / 1000000).toFixed(1).replace(/\.0$/, '')}M`
}

const handleLike = () => {
	if (displayPost.value && !props.embedded) {
		postStore.toggleLike(displayPost.value)
		tap()
	}
}

const handleRepost = () => {
	if (displayPost.value && !props.embedded) {
		postStore.toggleRepost(displayPost.value)
		tap()
	}
}

const handleBookmark = () => {
	if (displayPost.value && !props.embedded) {
		postStore.toggleBookmark(displayPost.value)
		toastStore.success(
			displayPost.value.viewer?.bookmarked ? 'Bookmarked post' : 'Removed bookmark',
		)
		tap()
	}
}

const actions = {
	bite: async () => {
		await createRecord(
			'net.wafrn.feed.bite',
			{
				$type: 'net.wafrn.feed.bite',
				subject: displayPost.value?.uri,
				createdAt: new Date().toISOString(),
			},
			{
				error: `failed to bite the post :c`,
				success: `bit the post!`,
			},
		)
	},
	explode: async () => {
		await createRecord(
			'net.wafrn.feed.explode',
			{
				$type: 'net.wafrn.feed.explode',
				subject: displayPost.value?.uri,
				createdAt: new Date().toISOString(),
			},
			{
				error: `failed to explode the post :c`,
				success: `exploded the post!`,
			},
		)
	},
}

const handleShare = () => {
	if (displayPost.value) {
		const url = `${window.location.origin}/profile/${displayPost.value.author.handle}/post/${rkey.value}`
		if (navigator.share) {
			navigator
				.share({
					title: 'Check out this post on Bluesky',
					url,
				})
				.then(() => tap())
				.catch((error) => console.error('Error sharing', error))
			return
		}
		tap()
	}
}

const share = {
	systemShare: () => {
		if (displayPost.value) {
			const url = `${window.location.origin}/profile/${displayPost.value.author.handle}/post/${rkey.value}`
			if (navigator.share) {
				navigator
					.share({
						title: 'Check out this post on Bluesky',
						url,
					})
					.then(() => tap())
					.catch((error) => console.error('Error sharing', error))
			}
		}
	},
	copyLink: () => {
		if (displayPost.value) {
			const url = `${window.location.origin}/profile/${displayPost.value.author.handle}/post/${rkey.value}`
			navigator.clipboard.writeText(url)
			toastStore.success('Link copied to clipboard')
			tap()
		}
	},
	copyBlueskyLink: () => {
		if (displayPost.value) {
			const bskyUrl = `https://bsky.app/profile/${displayPost.value.author.did}/post/${rkey.value}`
			navigator.clipboard.writeText(bskyUrl)
			toastStore.success('Link copied to clipboard')
			tap()
		}
	},
	copyATUri: () => {
		if (displayPost.value) {
			navigator.clipboard.writeText(displayPost.value.uri)
			toastStore.success('URI copied to clipboard')
			tap()
		}
	},
	copyDid: () => {
		if (displayPost.value) {
			navigator.clipboard.writeText(displayPost.value.author.did)
			toastStore.success('DID copied to clipboard')
			tap()
		}
	},
	openInPDSls: () => {
		if (displayPost.value) {
			const url = `https://pds.ls/${displayPost.value.uri}`
			window.open(url, '_blank')
		}
	},
}

const handleClick = (e: MouseEvent) => {
	if (window.getSelection()?.toString().length) return
	if (props.rootPost) return

	if (props.embedded) {
		e.stopPropagation()
		if (displayPost.value) navigateToPost(displayPost.value)
		return
	}

	if (displayPost.value) {
		navigateToPost(displayPost.value)
	}
}

const navigateToPost = (post: AppBskyFeedDefs.PostView, event?: MouseEvent | KeyboardEvent) => {
	const uriParts = post.uri.split('/')
	const rkey = uriParts.pop()
	const identifier = post.author.handle || post.author.did

	if (!rkey || !identifier) return

	const isModifierKey = event && (event.ctrlKey || event.metaKey || event.shiftKey)

	if (isModifierKey) {
		const url = `${window.location.origin}/profile/${identifier}/post/${rkey}`
		window.open(url, '_blank')
	} else {
		navigationStore.push('post-thread', {
			props: { identifier, rkey: rkey },
		})
	}
}

const handleMiddleClick = () => {
	if (!displayPost.value) return
	const uriParts = displayPost.value.uri.split('/')
	const rkey = uriParts.pop()
	const identifier = displayPost.value.author.handle || displayPost.value.author.did

	if (rkey && identifier) {
		const url = `${window.location.origin}/profile/${identifier}/post/${rkey}`
		window.open(url, '_blank')
	}
}

let observer: IntersectionObserver | null = null

onMounted(() => {
	if (props.embedded || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
		isVisible.value = true
		return
	}

	observer = new IntersectionObserver(
		(entries) => {
			if (entries[0]?.isIntersecting) {
				isVisible.value = true
				observer?.disconnect()
				observer = null
			}
		},
		{
			threshold: 0.1,
			rootMargin: '50px',
		},
	)

	if (rootEl.value) observer.observe(rootEl.value)
})

onUnmounted(() => {
	if (observer) observer.disconnect()
})
</script>

<template>
	<article
		v-if="displayPost"
		ref="rootEl"
		:key="displayPost.uri"
		:id="displayPost.uri"
		class="feed-item"
		:class="{
			'is-embedded': embedded,
			'is-root-post': rootPost,
			'is-visible': isVisible,
			'is-post-view': context === 'post',
		}"
		@click="handleClick"
		@click.middle="handleMiddleClick"
	>
		<div v-if="item?.reason?.$type === 'app.bsky.feed.defs#reasonRepost'" class="repost-indicator">
			<IconRefreshRounded class="repost-icon" />
			<span>Reposted by {{ item.reason.by.displayName || item.reason.by.handle }}</span>
			<span class="repost-indicator__time"> · {{ formatTime(item.reason.indexedAt) }} </span>
		</div>

		<div class="post-layout">
			<div class="post-top">
				<AppLink name="user-profile" :params="{ id: displayPost.author.did }" class="post-avatar">
					<img
						v-if="displayPost.author.avatar"
						:src="displayPost.author.avatar"
						alt="avatar"
						loading="lazy"
					/>
					<div v-else class="avatar-fallback"></div>
				</AppLink>

				<div class="not-gutter">
					<div class="post-header">
						<div class="post-header__part">
							<AppLink
								class="display-name"
								name="user-profile"
								:params="{ id: displayPost.author.did }"
							>
								{{ displayPost.author.displayName || displayPost.author.handle }}
							</AppLink>

							<p v-if="displayPost.author.pronouns" class="pronouns">
								{{ displayPost.author.pronouns }}
							</p>
						</div>
						<div class="post-header__part">
							<p class="time" :title="new Date(displayPost.indexedAt).toLocaleString()">
								{{ formatTime(displayPost.indexedAt) }}
							</p>
						</div>
					</div>

					<div class="post-content">
						<div class="post-text" v-if="displayPost.record?.text">
							{{ displayPost.record.text }}
						</div>
					</div>
				</div>
			</div>

			<div class="post-embeds" v-if="embed">
				<ImageEmbed v-if="embed.$type === 'app.bsky.embed.images#view'" :embed="embed" />
				<ExternalEmbed
					v-else-if="embed.$type === 'app.bsky.embed.external#view'"
					:embed="embed.external"
				/>
				<VideoEmbed v-else-if="embed.$type === 'app.bsky.embed.video#view'" :embed="embed" />
				<template v-else-if="embed.$type === 'app.bsky.embed.record#view'">
					<EmbedRecord v-if="!embedded" :embed="embed" />
					<div v-else class="embedded-record">Post has nested quote.</div>
				</template>
				<template v-else-if="embed.$type === 'app.bsky.embed.recordWithMedia#view'">
					<ImageEmbed
						v-if="embed.media.$type === 'app.bsky.embed.images#view'"
						:embed="embed.media"
					/>
					<EmbedRecord
						v-if="embed.record.$type === 'app.bsky.embed.record#view'"
						:embed="embed.record"
					/>
				</template>
			</div>

			<div class="post-footer" v-if="!embedded">
				<div class="metrics row">
					<AppLink
						name="post-thread"
						:params="{ identifier: displayPost.author.handle, rkey: rkey! }"
						class="action-button reply"
						aria-label="Reply"
						@click.stop
					>
						<div class="icon-wrapper"><IconChatBubbleOutlineRounded /></div>
						<span class="count" v-if="displayPost.replyCount && displayPost.replyCount > 0">
							{{ formatCount(displayPost.replyCount) }}
						</span>
					</AppLink>

					<BasePopover
						:actions="[
							{
								label: !!displayPost.viewer?.repost ? 'Undo Repost' : 'Repost',
								icon: IconRepeatRounded,
								onClick: handleRepost,
							},
							{
								label: 'Quote Post',
								icon: IconFormatQuoteRounded,
								onClick: () => {},
							},
						]"
						align="right"
					>
						<template #trigger="{ triggerProps }">
							<button
								class="action-button repost more"
								:class="{ 'is-active': !!displayPost.viewer?.repost }"
								v-bind="triggerProps as any"
							>
								<div class="icon-wrapper"><IconRepeatRounded /></div>
								<span class="count" v-if="displayPost.repostCount && displayPost.repostCount > 0">
									{{ formatCount(displayPost.repostCount) }}
								</span>
							</button>
						</template>
					</BasePopover>

					<button
						class="action-button like"
						:class="{ 'is-active': !!displayPost.viewer?.like }"
						@click.stop="handleLike"
						aria-label="Like"
					>
						<div class="icon-wrapper">
							<IconFavoriteRounded v-if="!!displayPost.viewer?.like" />
							<IconFavoriteOutlineRounded v-else />
						</div>
						<span class="count" v-if="displayPost.likeCount && displayPost.likeCount > 0">
							{{ formatCount(displayPost.likeCount) }}
						</span>
					</button>
				</div>

				<div class="footer-content row">
					<BasePopover
						:actions="[
							{
								actions: [
									{ label: 'System share', icon: IconForwardRounded, onClick: handleShare },
								],
							},
							{
								actions: [
									{
										label: 'Copy Link',
										icon: IconLinkRounded,
										onClick: share.copyLink,
									},
									{
										label: 'Copy Bluesky link',
										icon: IconContentCopyRounded,
										onClick: share.copyBlueskyLink,
									},
								],
							},
							{
								actions: [
									{
										label: 'Copy AT URI',
										icon: IconContentCopyRounded,
										onClick: share.copyBlueskyLink,
									},
									{
										label: 'Copy author DID',
										icon: IconLinkRounded,
										onClick: share.copyDid,
									},
									{
										label: 'Open in PDSls',
										icon: IconOpenInNewRounded,
										onClick: share.openInPDSls,
									},
								],
							},
						]"
						align="right"
					>
						<template #trigger="{ triggerProps }">
							<button class="action-button more" v-bind="triggerProps as any">
								<div class="icon-wrapper">
									<IconForwardRounded />
								</div>
							</button>
						</template>
					</BasePopover>

					<BasePopover
						:actions="[
							{
								actions: [
									{
										label: displayPost.viewer?.bookmarked ? 'Remove Bookmark' : 'Bookmark',
										icon: displayPost.viewer?.bookmarked
											? IconBookmarkAddedRounded
											: IconBookmarkRounded,
										onClick: handleBookmark,
									},
									{
										label: 'Bite post',
										icon: IconPets,
										onClick: actions.bite,
									},
									{
										label: 'Explode post',
										icon: IconBombRounded,
										onClick: actions.explode,
									},
								],
							},
						]"
						align="right"
					>
						<template #trigger="{ triggerProps }">
							<button class="action-button more" v-bind="triggerProps as any">
								<div class="icon-wrapper">
									<IconMoreVert />
								</div>
							</button>
						</template>
					</BasePopover>
				</div>
			</div>
		</div>
	</article>
</template>

<style lang="scss" scoped>
.feed-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;

	opacity: 0;
	filter: blur(4px);
	transform: translateY(12px);
	user-select: none;
	transition:
		background-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		filter 0.4s ease-out,
		opacity 0.4s ease-out,
		transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

	&.is-post-view {
		.post-text {
			user-select: text;
		}
	}

	&.is-visible {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}

	&:not(.is-root-post) {
		&:hover {
			background-color: hsla(var(--surface0) / 0.3);
			cursor: default;
		}
		&:active {
			background-color: hsla(var(--surface0) / 0.2);
		}
	}

	&.is-embedded {
		border: 1px solid hsla(var(--surface2) / 0.5);
		border-radius: var(--radius-md);
		padding: 0.5rem;
		margin-top: 0.5rem;
		background-color: transparent;

		opacity: 1;
		transform: none;
		transition: none;

		&:hover {
			background-color: hsla(var(--surface0) / 0.5);
			border-color: hsla(var(--surface2) / 0.8);
		}

		.post-layout {
			gap: 0.5rem;
		}

		.post-avatar {
			width: 1.5rem;
			height: 1.5rem;
			margin-top: 0;
		}

		.post-header {
			font-size: 0.85rem;
		}

		.post-text {
			font-size: 0.9rem;
		}
	}
}

.repost-indicator {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	color: hsl(var(--subtext0));
	font-weight: 600;
	margin-left: 3.25rem;
	margin-bottom: 0.125rem;

	.repost-icon {
		font-size: 1rem;
		color: hsl(var(--green));
	}
}

.post-layout {
	--gutter-width: calc(2.75rem + 1rem);
	display: flex;
	flex-direction: column;

	.post-top {
		padding: 0 0.75rem;
		display: flex;
		gap: 0.75rem;
		.not-gutter {
			width: 100%;
		}
	}

	.post-avatar {
		flex-shrink: 0;
		width: 2.75rem;
		height: 2.75rem;
		margin-top: 0.25rem;

		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			object-fit: cover;
			background-color: hsl(var(--surface1));
		}

		.avatar-fallback {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: hsl(var(--surface2));
		}
	}

	.post-header {
		display: flex;
		align-items: last baseline;
		flex-direction: row;
		justify-content: space-between;

		gap: 0.5rem;
		font-size: 1rem;
		line-height: 1.3;

		&__part {
			display: flex;
			flex-direction: row;
			align-items: last baseline;
			gap: 0.5rem;
		}

		* {
			min-width: 0;
			text-wrap: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.display-name {
			font-weight: 700;
			color: hsl(var(--text));
		}

		p {
			font-size: 0.85rem;
			color: hsla(var(--overlay0) / 1);
			font-weight: 700;
		}
	}

	.post-text {
		color: hsl(var(--text));
		font-size: 0.95rem;
		line-height: 1.4;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	.post-content {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;

		.embedded-record {
			padding: 0.5rem;
			border: 1px solid hsla(var(--surface2) / 0.5);
			border-radius: var(--radius-sm);
			color: hsl(var(--subtext0));
			font-size: 0.9rem;
			text-align: center;
			margin-top: 0.5rem;
		}
	}
}

.post-embeds {
	&:not(:has(.image-embed__wrapper)) {
		padding: 0 0.75rem;
		padding-left: calc(var(--gutter-width));
	}
}

.post-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5rem;
	padding: 0 0.75rem;
	margin-left: calc(-0.75rem + var(--gutter-width));

	.row {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	.action-button {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.35rem 0.5rem;
		background: transparent;
		border: none;
		color: hsl(var(--subtext0));
		font-size: 0.8rem;
		font-weight: 500;
		border-radius: 99px;
		--hover-colour: var(--subtext0);

		&.reply {
			--hover-colour: var(--blue);
		}
		&.repost {
			--hover-colour: var(--green);
		}
		&.like {
			--hover-colour: var(--pink);
		}

		&.repost.is-active {
			color: hsl(var(--green));
		}
		&.like.is-active {
			color: hsl(var(--pink));

			.icon-wrapper svg {
				animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			}
		}

		.icon-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;

			svg {
				width: 1.15rem;
				height: 1.15rem;
			}
		}

		.count {
			font-variant-numeric: tabular-nums;
			line-height: 1;
		}

		&:hover,
		&:focus-visible {
			color: hsl(var(--hover-colour));
			background-color: hsla(var(--hover-colour) / 0.1);
		}

		&:active {
			background-color: hsla(var(--hover-colour) / 0.075);
		}
	}
}

@keyframes pop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.3);
	}
	100% {
		transform: scale(1);
	}
}
</style>