Initial Commit

resources/js/components/dredge/Messages/MessageBubble.vue

@@ -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>

resources/js/components/dredge/Messages/MessageShare.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { proxyImage } from '@/lib/proxyImage';
+import type { ThreadMessage } from '@/types/dredge.types';
+
+defineProps<{
+    message: ThreadMessage;
+}>();
+</script>
+
+<template>
+    <a
+        :href="message.shared_url ?? undefined"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="message-share"
+    >
+        <img
+            v-if="message.shared_preview_image"
+            :src="proxyImage(message.shared_preview_image)"
+            alt=""
+            class="message-share__image"
+        />
+        <span class="message-share__body">
+            <span v-if="message.shared_title" class="message-share__title">
+                {{ message.shared_title }}
+            </span>
+            <span v-if="message.shared_caption" class="message-share__caption">
+                {{ message.shared_caption }}
+            </span>
+        </span>
+    </a>
+</template>
+
+<style scoped>
+.message-share {
+    display: flex;
+    gap: 0.6rem;
+    text-decoration: none;
+    color: inherit;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+    padding: 0.4rem;
+}
+.message-share__image {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 6px;
+    flex-shrink: 0;
+}
+.message-share__body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    justify-content: center;
+}
+.message-share__title {
+    font-weight: 600;
+    font-size: 0.82rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.message-share__caption {
+    font-size: 0.75rem;
+    opacity: 0.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

resources/js/components/dredge/Messages/MessageSystem.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ThreadMessage } from '@/types/dredge.types';
+
+const props = defineProps<{
+    message: ThreadMessage;
+    isOwn: boolean;
+}>();
+
+const label = computed(() =>
+    props.message.item_type?.includes('REACTION') ? 'Reacted to a message' : 'Sent an attachment',
+);
+</script>
+
+<template>
+    <p class="message-system" :class="{ 'message-system--own': isOwn }">{{ label }}</p>
+</template>
+
+<style scoped>
+.message-system {
+    font-style: italic;
+    color: var(--sediment-dim);
+}
+.message-system--own {
+    color: rgba(4, 20, 26, 0.7);
+}
+</style>

resources/js/components/dredge/Messages/MessageText.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ThreadMessage } from '@/types/dredge.types';
+
+defineProps<{
+    message: ThreadMessage;
+}>();
+</script>
+
+<template>
+    <p class="message-text">{{ message.text }}</p>
+</template>
+
+<style scoped>
+.message-text {
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+</style>