147 lines
3.8 KiB
Vue
147 lines
3.8 KiB
Vue
<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>
|