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>

resources/js/pages/Messages/Show.vue

@@ -2,9 +2,8 @@
 import { ref, onMounted, computed } from 'vue';
 import { Link } from '@inertiajs/vue3';
 import AppLayout from '@/layouts/AppLayout.vue';
-import Avatar from '@/components/dredge/Avatar.vue';
+import MessageBubble from '@/components/dredge/Messages/MessageBubble.vue';
-import { proxyImage } from '@/lib/proxyImage';
+import type { ThreadDetail } from '@/types/dredge.types';
-import type { ThreadDetail, ThreadMessage } from '@/types/dredge.types';
 
 defineOptions({
     layout: AppLayout,
@@ -50,15 +49,6 @@ function avatarFor(username: string | null): string | null {
     return thread.value.participants.find((p) => p.username === username)?.profile_pic_url ?? null;
 }
 
-function isSystemMessage(message: ThreadMessage): boolean {
-    return !message.text && !message.shared_url;
-}
-
-function systemLabel(message: ThreadMessage): string {
-    if (message.item_type?.includes('REACTION')) return 'Reacted to a message';
-    return 'Sent an attachment';
-}
-
 onMounted(fetchThread);
 </script>
 
@@ -75,64 +65,13 @@ onMounted(fetchThread);
         <p v-else-if="error" class="thread__status" role="alert">{{ error }}</p>
 
         <div v-else class="thread__messages">
-            <div
+            <MessageBubble
                 v-for="message in thread!.messages"
                 :key="message.id"
-                class="bubble-row"
+                :message="message"
-                :class="{ 'bubble-row--me': message.username === ME }"
+                :is-own="message.username === ME"
-            >
+                :avatar-src="avatarFor(message.username)"
-                <Avatar
-                    v-if="message.username !== ME"
-                    size="sm"
-                    :src="avatarFor(message.username)"
-                    :alt="`${message.username}'s profile picture`"
             />
-
-                <div class="bubble">
-                    <p v-if="message.replied_to_text" class="bubble__reply">
-                        {{ message.replied_to_text }}
-                    </p>
-
-                    <p v-if="message.text" class="bubble__text">{{ message.text }}</p>
-
-                    <a
-                        v-if="message.shared_url"
-                        :href="message.shared_url"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="bubble__share"
-                    >
-                        <img
-                            v-if="message.shared_preview_image"
-                            :src="proxyImage(message.shared_preview_image)"
-                            alt=""
-                            class="bubble__share-image"
-                        />
-                        <span class="bubble__share-body">
-                            <span v-if="message.shared_title" class="bubble__share-title">
-                                {{ message.shared_title }}
-                            </span>
-                            <span v-if="message.shared_caption" class="bubble__share-caption">
-                                {{ message.shared_caption }}
-                            </span>
-                        </span>
-                    </a>
-
-                    <p v-if="isSystemMessage(message)" class="bubble__system">
-                        {{ systemLabel(message) }}
-                    </p>
-
-                    <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>
         </div>
     </section>
 </template>
@@ -173,95 +112,8 @@ onMounted(fetchThread);
 .thread__messages {
     display: flex;
     flex-direction: column;
-    gap: 0.6rem;
+    /* Slightly taller than a plain bubble gap so a floating reaction pill
-}
+       on one bubble doesn't collide with the row below it. */
-.bubble-row {
+    gap: 0.9rem;
-    display: flex;
-    align-items: flex-end;
-    gap: 0.5rem;
-}
-.bubble-row--me {
-    flex-direction: row-reverse;
-}
-.bubble {
-    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);
-}
-.bubble__text {
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-.bubble__system {
-    font-style: italic;
-    color: var(--sediment-dim);
-}
-.bubble-row--me .bubble__system {
-    color: rgba(4, 20, 26, 0.7);
-}
-.bubble__share {
-    display: flex;
-    gap: 0.6rem;
-    text-decoration: none;
-    color: inherit;
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 8px;
-    padding: 0.4rem;
-    margin-top: 0.3rem;
-}
-.bubble__share-image {
-    width: 48px;
-    height: 48px;
-    object-fit: cover;
-    border-radius: 6px;
-    flex-shrink: 0;
-}
-.bubble__share-body {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    justify-content: center;
-}
-.bubble__share-title {
-    font-weight: 600;
-    font-size: 0.82rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.bubble__share-caption {
-    font-size: 0.75rem;
-    opacity: 0.8;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.bubble__reactions {
-    margin-top: 0.3rem;
-    display: flex;
-    gap: 0.2rem;
-}
-.bubble__reaction {
-    font-size: 0.85rem;
 }
 </style>