Initial Commit

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>