dredgy/dredgegram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Commit
linter / quality (push) Canceled after 0s
Details
tests / ci (8.3) (push) Canceled after 0s
Details
tests / ci (8.4) (push) Canceled after 0s
Details
tests / ci (8.5) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
dredgy
2026-08-28 23:20:23 +10:00
parent f00405ed24
commit cc225414e0
8 changed files with 578 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/dredge/MainHeader.vue
+10 -4
View File
@@ -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
+146
View File
@@ -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
+267
View File
@@ -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
+55
View File
@@ -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[];
}