Initial Commit

app/Http/Controllers/MessagesController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Inertia;
+use Inertia\Response;
+
+class MessagesController extends Controller
+{
+    public function index(): Response
+    {
+        return Inertia::render('Messages/Index');
+    }
+
+    public function show(string $threadId): Response
+    {
+        return Inertia::render('Messages/Show', [
+            'threadId' => $threadId,
+        ]);
+    }
+}

app/Http/Controllers/ThreadController.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\DirectMessage;
+use App\Models\DirectThread;
+use Illuminate\Http\JsonResponse;
+
+class ThreadController extends Controller
+{
+    public function index(): JsonResponse
+    {
+        $threads = DirectThread::query()
+            ->with(['messages' => fn ($query) => $query->orderByDesc('timestamp')->limit(1)])
+            ->orderByDesc('last_activity_at')
+            ->get()
+            ->map(function (DirectThread $thread) {
+                $last = $thread->messages->first();
+
+                return [
+                    'thread_id' => $thread->thread_id,
+                    'thread_title' => $thread->thread_title,
+                    'is_group' => $thread->is_group,
+                    'participants' => $thread->participants,
+                    'last_activity_at' => $thread->last_activity_at,
+                    'muted' => $thread->muted,
+                    'last_message' => $last ? [
+                        'username' => $last->username,
+                        'text' => $last->text,
+                        'item_type' => $last->item_type,
+                        'timestamp' => $last->timestamp,
+                    ] : null,
+                ];
+            });
+
+        return response()->json($threads);
+    }
+
+    public function show(string $threadId): JsonResponse
+    {
+        $thread = DirectThread::findOrFail($threadId);
+
+        $messages = $thread->messages()
+            ->orderBy('timestamp')
+            ->get()
+            ->map(fn (DirectMessage $message) => [
+                'id' => $message->id,
+                'user_id' => $message->user_id,
+                'username' => $message->username,
+                'full_name' => $message->full_name,
+                'item_type' => $message->item_type,
+                'text' => $message->text,
+                'timestamp' => $message->timestamp,
+                'shared_url' => $message->shared_url,
+                'shared_preview_image' => $message->shared_preview_image,
+                'shared_title' => $message->shared_title,
+                'shared_caption' => $message->shared_caption,
+                'reactions' => $message->reactions,
+                'replied_to_id' => $message->replied_to_id,
+                'replied_to_text' => $message->replied_to_text,
+            ]);
+
+        return response()->json([
+            'thread_id' => $thread->thread_id,
+            'thread_title' => $thread->thread_title,
+            'is_group' => $thread->is_group,
+            'participants' => $thread->participants,
+            'muted' => $thread->muted,
+            'messages' => $messages,
+        ]);
+    }
+}

resources/js/components/dredge/MainHeader.vue

@@ -1,15 +1,21 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+</script>
 
 <template>
     <header class="topbar">
-        <span class="wordmark">Dredge<em>Gram</em></span>
+        <span class="wordmark">
+            <Link href="/"  aria-label="Home">
+                Dredge<em>Gram</em>
+            </Link>
+        </span>
         <span class="icons">
             <button class="icon-btn" aria-label="Notifications">
                 <span class="mdi mdi-heart"></span>
             </button>
-            <button class="icon-btn" aria-label="Messages">
+            <Link href="/messages" class="icon-btn" aria-label="Messages">
                 <span class="mdi mdi-message"></span>
-            </button>
+            </Link>
         </span>
     </header>
 </template>

resources/js/pages/Messages/Index.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Link } from '@inertiajs/vue3';
+import AppLayout from '@/layouts/AppLayout.vue';
+import Avatar from '@/components/dredge/Avatar.vue';
+import type { ThreadSummary } from '@/types/dredge.types';
+
+defineOptions({
+    layout: AppLayout,
+});
+
+const ME = 'generictravelphotos';
+
+const threads = ref<ThreadSummary[]>([]);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+async function fetchThreads() {
+    loading.value = true;
+    error.value = null;
+
+    try {
+        const response = await fetch('/api/threads');
+
+        if (!response.ok) {
+            throw new Error('Failed to load threads');
+        }
+
+        threads.value = await response.json();
+    } catch (e) {
+        error.value = 'Could not load your messages. Please try again.';
+    } finally {
+        loading.value = false;
+    }
+}
+
+function threadAvatar(thread: ThreadSummary): string | null {
+    return thread.participants[0]?.profile_pic_url ?? null;
+}
+
+function threadName(thread: ThreadSummary): string {
+    if (thread.thread_title) return thread.thread_title;
+    return thread.participants.map((p) => p.username).join(', ') || 'Unknown';
+}
+
+function previewText(thread: ThreadSummary): string {
+    const last = thread.last_message;
+    if (!last) return 'No messages yet';
+
+    const prefix = last.username === ME ? 'You: ' : '';
+
+    if (last.text) return `${prefix}${last.text}`;
+    if (last.item_type?.includes('REACTION')) return `${prefix}reacted to a message`;
+    if (last.item_type === 'MESSAGE_INLINE_SHARE') return `${prefix}sent a share`;
+    return `${prefix}sent an attachment`;
+}
+
+onMounted(fetchThreads);
+</script>
+
+<template>
+    <section class="threads">
+        <h1 class="threads__title">Messages</h1>
+
+        <p v-if="loading" class="threads__status">Loading your messages…</p>
+        <p v-else-if="error" class="threads__status" role="alert">{{ error }}</p>
+        <p v-else-if="threads.length === 0" class="threads__status">No conversations yet.</p>
+
+        <Link
+            v-for="thread in threads"
+            v-else
+            :key="thread.thread_id"
+            :href="`/messages/${thread.thread_id}`"
+            class="thread-row"
+        >
+            <Avatar
+                size="md"
+                :src="threadAvatar(thread)"
+                :alt="`${threadName(thread)}'s profile picture`"
+            />
+            <div class="thread-row__body">
+                <span class="thread-row__name">{{ threadName(thread) }}</span>
+                <span class="thread-row__preview">{{ previewText(thread) }}</span>
+            </div>
+            <span
+                v-if="thread.muted"
+                class="mdi mdi-bell-off thread-row__muted"
+                aria-label="Muted"
+            ></span>
+        </Link>
+    </section>
+</template>
+
+<style scoped>
+.threads {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+.threads__title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+.threads__status {
+    color: var(--sediment-dim);
+    padding: 0.5rem 0.25rem;
+}
+.thread-row {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    padding: 0.75rem 0.5rem;
+    border-radius: 10px;
+    text-decoration: none;
+    color: inherit;
+    transition: background-color 0.15s ease;
+}
+.thread-row:hover,
+.thread-row:focus-visible {
+    background: var(--panel);
+}
+.thread-row__body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 1;
+    line-height: 1.3;
+}
+.thread-row__name {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--sediment);
+}
+.thread-row__preview {
+    font-size: 0.8rem;
+    color: var(--sediment-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.thread-row__muted {
+    color: var(--haze);
+    font-size: 1.1rem;
+}
+</style>

resources/js/pages/Messages/Show.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+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 { proxyImage } from '@/lib/proxyImage';
+import type { ThreadDetail, ThreadMessage } from '@/types/dredge.types';
+
+defineOptions({
+    layout: AppLayout,
+});
+
+const props = defineProps<{
+    threadId: string;
+}>();
+
+const ME = 'generictravelphotos';
+
+const thread = ref<ThreadDetail | null>(null);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+const threadName = computed(() => {
+    if (!thread.value) return '';
+    if (thread.value.thread_title) return thread.value.thread_title;
+    return thread.value.participants.map((p) => p.username).join(', ') || 'Unknown';
+});
+
+async function fetchThread() {
+    loading.value = true;
+    error.value = null;
+
+    try {
+        const response = await fetch(`/api/threads/${props.threadId}`);
+
+        if (!response.ok) {
+            throw new Error('Failed to load thread');
+        }
+
+        thread.value = await response.json();
+    } catch (e) {
+        error.value = 'Could not load this conversation.';
+    } finally {
+        loading.value = false;
+    }
+}
+
+function avatarFor(username: string | null): string | null {
+    if (!thread.value || !username) return 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>
+
+<template>
+    <section class="thread">
+        <header class="thread__header">
+            <Link href="/messages" class="thread__back" aria-label="Back to messages">
+                <span class="mdi mdi-arrow-left"></span>
+            </Link>
+            <span class="thread__title">{{ threadName }}</span>
+        </header>
+
+        <p v-if="loading" class="thread__status">Loading conversation…</p>
+        <p v-else-if="error" class="thread__status" role="alert">{{ error }}</p>
+
+        <div v-else class="thread__messages">
+            <div
+                v-for="message in thread!.messages"
+                :key="message.id"
+                class="bubble-row"
+                :class="{ 'bubble-row--me': message.username === ME }"
+            >
+                <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>
+
+<style scoped>
+.thread {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.thread__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--line);
+}
+.thread__back {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.2rem;
+    height: 2.2rem;
+    border-radius: 50%;
+    color: inherit;
+    text-decoration: none;
+}
+.thread__back:hover {
+    background: var(--panel);
+}
+.thread__title {
+    font-weight: 600;
+    font-size: 1rem;
+}
+.thread__status {
+    color: var(--sediment-dim);
+}
+.thread__messages {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+.bubble-row {
+    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>

resources/js/types/dredge.types.ts

@@ -48,3 +48,58 @@ export interface StoryDetail {
     start_index: number;
     items: StoryItem[];
 }
+
+export interface ThreadParticipant {
+    user_id: string;
+    username: string;
+    full_name: string | null;
+    profile_pic_url: string | null;
+    interop_messaging_user_fbid: string;
+}
+
+export interface ThreadSummary {
+    thread_id: string;
+    thread_title: string | null;
+    is_group: boolean;
+    participants: ThreadParticipant[];
+    last_activity_at: number | null;
+    muted: boolean | null;
+    last_message: {
+        username: string | null;
+        text: string | null;
+        item_type: string | null;
+        timestamp: number | null;
+    } | null;
+}
+
+export interface ThreadReaction {
+    emoji: string | null;
+    sender_fbid: string | null;
+    username: string | null;
+}
+
+export interface ThreadMessage {
+    id: string;
+    user_id: string | null;
+    username: string | null;
+    full_name: string | null;
+    item_type: string | null;
+    text: string | null;
+    timestamp: number | null;
+    shared_url: string | null;
+    shared_preview_image: string | null;
+    shared_title: string | null;
+    shared_caption: string | null;
+    reactions: ThreadReaction[] | null;
+    replied_to_id: string | null;
+    replied_to_text: string | null;
+}
+
+export interface ThreadDetail {
+    thread_id: string;
+    thread_title: string | null;
+    is_group: boolean;
+    participants: ThreadParticipant[];
+    muted: boolean | null;
+    messages: ThreadMessage[];
+}

routes/api.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\StoryController;
+use App\Http\Controllers\ThreadController;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\PostController;
 
@@ -8,3 +9,5 @@ Route::get('/posts', [PostController::class, 'index']);
 Route::get('/stories', [StoryController::class, 'index']);
 Route::get('/stories/{username}', [StoryController::class, 'show']);
 Route::post('/story-items/{id}/view', [StoryController::class, 'markViewed']);
+Route::get('/threads', [ThreadController::class, 'index']);
+Route::get('/threads/{threadId}', [ThreadController::class, 'show']);

routes/web.php

@@ -1,12 +1,16 @@
 <?php
 
 use App\Http\Controllers\ImageProxyController;
+use App\Http\Controllers\MessagesController;
 use Illuminate\Support\Facades\Route;
 
 Route::inertia('/', 'Welcome', [
     'title' => 'Home',
 ])->name('home');
 
+Route::get('/messages', [MessagesController::class, 'index'])->name('messages.index');
+Route::get('/messages/{threadId}', [MessagesController::class, 'show'])->name('messages.show');
+
 
 Route::get('/image-proxy', [ImageProxyController::class, 'show'])->name('image-proxy');