calckey/packages/client/src/components/MkChatPreview.vue

<template>
	<MkA
		class="rivslvers"
		tabindex="-1"
		:class="{
			isMe: isMe(message),
			isRead: message.groupId
				? message.reads.includes($i?.id)
				: message.isRead,
		}"
		:to="
			message.groupId
				? `/my/messaging/group/${message.groupId}`
				: `/my/messaging/${getAcct(
						isMe(message) ? message.recipient : message.user
				  )}`
		"
	>
		<div class="message _block">
			<MkAvatar
				class="avatar"
				:user="
					message.groupId
						? message.user
						: isMe(message)
						? message.recipient
						: message.user
				"
				:show-indicator="true"
			/>
			<header v-if="message.groupId">
				<span class="name">{{ message.group.name }}</span>
				<MkTime :time="message.createdAt" class="time" />
			</header>
			<header v-else>
				<span class="name"
					><MkUserName
						:user="
							isMe(message) ? message.recipient : message.user
						"
				/></span>
				<span class="username"
					>@{{
						acct(isMe(message) ? message.recipient : message.user)
					}}</span
				>
				<MkTime :time="message.createdAt" class="time" />
			</header>
			<div class="body">
				<p class="text">
					<span v-if="isMe(message)" class="me"
						>{{ i18n.ts.you }}:
					</span>
					<Mfm
						v-if="message.text != null && message.text.length > 0"
						:text="message.text"
					/>
					<span v-else> 📎</span>
				</p>
			</div>
		</div>
	</MkA>
</template>

<script lang="ts" setup>
import * as Acct from "calckey-js/built/acct";
import { i18n } from "@/i18n";
import { acct } from "@/filters/user";
import { $i } from "@/account";

const getAcct = Acct.toString;

const props = defineProps<{
	message: Record<string, any>;
}>();

function isMe(message): boolean {
	return message.userId === $i?.id;
}
</script>

<style lang="scss" scoped>
.rivslvers {
	> .message {
		display: block;
		text-decoration: none;
		margin-bottom: var(--margin);

		* {
			pointer-events: none;
			user-select: none;
		}

		&:hover {
			.avatar {
				filter: saturate(200%);
			}
		}

		&.isRead,
		&.isMe {
			opacity: 0.8;
		}

		&:not(.isMe):not(.isRead) {
			> div {
				background-image: url("/client-assets/unread.svg");
				background-repeat: no-repeat;
				background-position: 0 center;
			}
		}

		&:after {
			content: "";
			display: block;
			clear: both;
		}

		padding: 20px 30px;

		> header {
			display: flex;
			align-items: center;
			margin-bottom: 2px;
			white-space: nowrap;
			overflow: hidden;

			> .name {
				margin: 0;
				padding: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 1em;
				font-weight: bold;
				transition: all 0.1s ease;
			}

			> .username {
				margin: 0 8px;
			}

			> .time {
				margin: 0 0 0 auto;
			}
		}

		> .avatar {
			float: left;
			width: 54px;
			height: 54px;
			margin: 0 16px 0 0;
			border-radius: 8px;
			transition: all 0.1s ease;
		}

		> .body {
			> .text {
				display: block;
				margin: 0 0 0 0;
				padding: 0;
				overflow: hidden;
				overflow-wrap: break-word;
				text-decoration: none;
				font-size: 1.1em;
				color: var(--faceText);

				.me {
					opacity: 0.7;
				}
			}

			> .image {
				display: block;
				max-width: 100%;
				max-height: 512px;
			}
		}
	}

	&.max-width_400px {
		> .message {
			&:not(.isMe):not(.isRead) {
				> div {
					background-image: none;
					border-left: solid 4px #3aa2dc;
				}
			}

			> div {
				padding: 16px;
				font-size: 0.9em;

				> .avatar {
					margin: 0 12px 0 0;
				}
			}
		}
	}
}
</style>