Initial Commit

2026-08-28 23:30:01 +10:00
parent cc225414e0
commit 3ce70b3701
5 changed files with 227 additions and 158 deletions
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import Avatar from '@/components/dredge/Avatar.vue';
+import MessageText from './MessageText.vue';
+import MessageShare from './MessageShare.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>
+
+            <MessageShare v-if="message.shared_url" :message="message" />
+            <MessageText v-else-if="message.text" :message="message" />
+            <MessageSystem v-else :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>