111 lines
3.2 KiB
Vue
111 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import Avatar from '@/components/dredge/Avatar.vue';
|
|
import MessageText from './MessageText.vue';
|
|
import MessageShare from './MessageShare.vue';
|
|
import MessageStoryShare from './MessageStoryShare.vue';
|
|
import MessageMedia from './MessageMedia.vue';
|
|
import MessageSystem from './MessageSystem.vue';
|
|
import type { ThreadMessage } from '@/types/dredge.types';
|
|
|
|
defineProps<{
|
|
message: ThreadMessage;
|
|
isOwn: boolean;
|
|
avatarSrc: string | null;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bubble-row" :class="{ 'bubble-row--me': isOwn }">
|
|
<Avatar
|
|
v-if="!isOwn"
|
|
size="sm"
|
|
:src="avatarSrc"
|
|
:alt="`${message.username}'s profile picture`"
|
|
/>
|
|
|
|
<div class="bubble">
|
|
<p v-if="message.replied_to_text" class="bubble__reply">
|
|
{{ message.replied_to_text }}
|
|
</p>
|
|
|
|
<!-- Text is a universal concern shown alongside whatever else the
|
|
message carries, not one branch of a type dispatch — a story
|
|
reply, for instance, has both a caption you typed AND a
|
|
share preview, and previously only one or the other rendered. -->
|
|
<MessageText v-if="message.text" :message="message" />
|
|
|
|
<MessageStoryShare v-if="message.story_share" :message="message" />
|
|
<MessageShare v-else-if="message.shared_url" :message="message" />
|
|
<MessageMedia v-else-if="message.attachments?.length" :message="message" />
|
|
<MessageSystem v-else-if="!message.text" :message="message" :is-own="isOwn" />
|
|
|
|
<div v-if="message.reactions?.length" class="bubble__reactions">
|
|
<span v-for="(reaction, i) in message.reactions" :key="i" class="bubble__reaction">
|
|
{{ reaction.emoji }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bubble-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 0.5rem;
|
|
}
|
|
.bubble-row--me {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.bubble {
|
|
position: relative;
|
|
max-width: 70%;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 0.55rem 0.8rem;
|
|
font-size: 0.88rem;
|
|
line-height: 1.4;
|
|
}
|
|
.bubble-row--me .bubble {
|
|
background: var(--bioluminum);
|
|
color: #04141a;
|
|
border-color: transparent;
|
|
}
|
|
.bubble__reply {
|
|
font-size: 0.75rem;
|
|
color: var(--sediment-dim);
|
|
border-left: 2px solid var(--haze);
|
|
padding-left: 0.5rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
.bubble-row--me .bubble__reply {
|
|
color: rgba(4, 20, 26, 0.7);
|
|
border-left-color: rgba(4, 20, 26, 0.4);
|
|
}
|
|
|
|
/* Floating reaction pill: pinned to the bubble's bottom-outer corner and
|
|
deliberately overlapping its border, like Instagram/iMessage reactions. */
|
|
.bubble__reactions {
|
|
position: absolute;
|
|
bottom: -0.65rem;
|
|
display: flex;
|
|
gap: 0.15rem;
|
|
background: var(--midwater);
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 0.1rem 0.4rem;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.bubble-row:not(.bubble-row--me) .bubble__reactions {
|
|
right: -0.4rem;
|
|
}
|
|
.bubble-row--me .bubble__reactions {
|
|
left: -0.4rem;
|
|
}
|
|
.bubble__reaction {
|
|
font-size: 0.8rem;
|
|
line-height: 1;
|
|
}
|
|
</style>
|