sophie/chat.sad.ovh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix loads of errors, make messages have the actual username added to

Browse source 
them aswell xd
This commit is contained in:
Soph :3 2026-01-05 07:59:23 +02:00
parent bf679f9ee0
commit 424fe4cf42
6 changed files with 157 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/lib/components/app-sidebar.svelte
View file

@ -14,13 +14,18 @@
import Button, { buttonVariants } from './ui/button/button.svelte';
import User from './extra/User.svelte';
import type { SessionValidationResult } from '$lib/server/auth';
import type { OverviewData } from '$lib';
let {
currentPage = $bindable<string | null>(),
data,
user,
...restProps
}: { currentPage: string | null; data: Data; user: SessionValidationResult['user'] } = $props();
}: {
currentPage: string | null;
data: OverviewData;
user: SessionValidationResult['user'];
} = $props();
</script>
<Sidebar.Root {...restProps}>
@ -48,7 +53,7 @@
</Button>
</Dialog.Trigger>
<Dialog.Content class="sm:max-w-[425px]">
<Dialog.Content class="sm:max-w-106.25">
<Dialog.Header>
<Dialog.Title>Add a friend</Dialog.Title>
<Dialog.Description>
@ -132,7 +137,7 @@
</Button>
</Dialog.Trigger>
<Dialog.Content class="sm:max-w-[425px]">
<Dialog.Content class="sm:max-w-106.25">
<form method="POST" action="?/createGroup">
<Dialog.Header>
<Dialog.Title>Create a group</Dialog.Title>
@ -161,7 +166,7 @@
</Button>
</Dialog.Trigger>
<Dialog.Content class="sm:max-w-[425px]">
<Dialog.Content class="sm:max-w-106.25">
<form method="POST" action="?/joinServer">
<Dialog.Header>
<Dialog.Title>Join a server</Dialog.Title>
@ -185,7 +190,7 @@
</Button>
</Dialog.Trigger>
<Dialog.Content class="sm:max-w-[425px]">
<Dialog.Content class="sm:max-w-106.25">
<form method="POST" action="?/createServer">
<Dialog.Header>
<Dialog.Title>Create a server</Dialog.Title>

13
src/lib/index.ts
View file

@ -23,6 +23,19 @@ export type OverviewUser = {
image: string;
dmId?: string;
};
export interface Message {
id: string;
authorId: string;
content: string;
timestamp: number;
}
export interface ReturnMessage extends Message {
author: {
id: string;
name: string;
};
}
export type OverviewServer = {
id: string;

1
src/lib/server/db/schema.ts
View file

@ -84,6 +84,7 @@ export const invite = sqliteTable('invite', {
.references(() => server.id),
code: text('code').notNull()
});
export type Session = typeof session.$inferSelect;
export type User = typeof user.$inferSelect;
export type Group = typeof group.$inferSelect;

2
src/lib/utils.ts
View file

@ -5,7 +5,7 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function formatTimestamp(dateString: string) {
export function formatTimestamp(dateString: string | number | Date) {
const date = new Date(dateString);
const now = new Date();

70
src/routes/api/messages/[[grp_srv_dm]]/[[channelId]]/[[channelId]]/+server.ts
View file

@ -2,18 +2,11 @@ import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { db } from '$lib/server/db';
import * as table from '$lib/server/db/schema';
import { DirectMessageID, GroupID, ServerID } from '$lib';
import { DirectMessageID, GroupID, ServerID, type Message, type ReturnMessage } from '$lib';
import { eq, or } from 'drizzle-orm';
import { _sendToSubscribers } from '../../../../updates/+server';
import { and } from 'drizzle-orm';
interface Message {
id: string;
authorId: string;
content: string;
timestamp: number;
}
export async function _findDm(member_one: string, member_two: string) {
return await db
.select()
@ -72,14 +65,14 @@ export const GET: RequestHandler = async ({ params, locals }) => {
const g = (await db.select().from(table.group).where(eq(table.group.id, grp_srv_dm)))[0];
if (!g) return new Response('Group not found.', { status: 404 });
messages = g.messages ?? [];
messages = g.messages as Message[];
} else if (ServerID.is(grp_srv_dm)) {
type = 'server';
if (!channelId) return new Response('Missing channel ID.', { status: 400 });
const c = (await db.select().from(table.channel).where(eq(table.channel.id, channelId)))[0];
if (!c) return new Response('Channel not found.', { status: 404 });
messages = c.messages;
messages = c.messages as Message[];
} else if (DirectMessageID.is(grp_srv_dm)) {
type = 'dms';
const dm = (
@ -88,13 +81,32 @@ export const GET: RequestHandler = async ({ params, locals }) => {
if (!dm) return new Response('DM not found.', { status: 404 });
messages = dm.messages;
messages = dm.messages as Message[];
}
const messages_resolved_users: ReturnMessage[] = (
await Promise.all(
messages.map(async (z) => {
const author = await db.select().from(table.user).where(eq(table.user.id, z.authorId));
if (!author[0]) {
return;
}
return {
...z,
author: {
id: author[0].id,
name: author[0].username
}
};
})
)
).filter(Boolean) as ReturnMessage[];
return json({
type,
id: grp_srv_dm,
messages
messages: messages_resolved_users
});
};
@ -103,7 +115,7 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
return new Response('Unauthorized', { status: 401 });
}
let { grp_srv_dm, channelId } = params;
const { grp_srv_dm, channelId } = params;
if (!grp_srv_dm) return new Response('Missing Group/Server/DM id.', { status: 400 });
const data = await request.json();
const { content } = data;
@ -113,7 +125,7 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
let messages: Message[] = [];
let type = '';
const message = {
const message: Message = {
id: crypto.randomUUID(),
authorId: locals.user.id,
content,
@ -124,7 +136,7 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
type = 'group';
const g = (await db.select().from(table.group).where(eq(table.group.id, grp_srv_dm)))[0];
if (!g) return new Response('Group not found.', { status: 404 });
messages = g.messages ?? [];
messages = (g.messages as Message[]) ?? [];
messages.push(message);
@ -134,7 +146,7 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
if (!channelId) return new Response('Missing channel ID.', { status: 400 });
const c = (await db.select().from(table.channel).where(eq(table.channel.id, channelId)))[0];
if (!c) return new Response('Channel not found.', { status: 404 });
messages = c.messages ?? [];
messages = (c.messages as Message[]) ?? [];
messages.push(message);
@ -147,17 +159,37 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
if (!dm) return new Response('DM not found.', { status: 404 });
messages = dm.messages ?? [];
messages = (dm.messages as Message[]) ?? [];
messages.push(message);
await db.update(table.directMessage).set({ messages }).where(eq(table.directMessage.id, dm.id));
_sendToSubscribers(dm.id, { type: 'message', id: dm.id, message });
_sendToSubscribers(dm.id, {
type: 'message',
id: dm.id,
message: {
...message,
author: {
id: locals.user.id,
name: locals.user.username
}
}
});
return json({ type, id: dm.id, messages });
}
_sendToSubscribers(grp_srv_dm, { type: 'message', id: grp_srv_dm, message });
_sendToSubscribers(grp_srv_dm, {
type: 'message',
id: grp_srv_dm,
message: {
...message,
author: {
id: locals.user.id,
name: locals.user.username
}
}
});
return json({ type, id: grp_srv_dm, messages });
};

80
src/routes/app/+page.svelte
View file

@ -11,7 +11,8 @@
type OverviewUser,
type OverviewGroup,
type OverviewServer,
type UserWithStatus
type UserWithStatus,
type ReturnMessage
} from '$lib';
import type { PageServerData } from './$types';
import AppSidebar from '$lib/components/app-sidebar.svelte';
@ -22,17 +23,19 @@
import { formatTimestamp } from '$lib/utils';
import Input from '$lib/components/ui/input/input.svelte';
import { Button } from '$lib/components/ui/button';
import { SendHorizontal } from '@lucide/svelte';
let errorOpen = $state(true);
let { form, data }: { form: ActionData; data: PageServerData } = $props();
let currentPageID: (UserId | GroupId | ServerId) | null = $state(null);
let currentPage: OverviewUser | OverviewGroup | OverviewServer | undefined = $state();
let messages = $state([]);
let messages: ReturnMessage[] = $state([]);
let inputValue = $state();
let sessionId: string | undefined = $state();
let previousSubscription: typeof currentPageID = $state(null);
let previousSubscription: UserId | GroupId | ServerId | null = $state(null);
const overview_data: OverviewData = $state({
friends: [],
@ -59,21 +62,23 @@
if (ServerID.is(currentPageID)) return;
async function getMessages() {
const req = await fetch('/api/messages/' + (currentPage!.dmId || currentPageID));
const targetId = currentPage && 'dmId' in currentPage ? currentPage.dmId : currentPageID;
const req = await fetch('/api/messages/' + targetId);
const data = await req.json();
messages = data.messages;
if (previousSubscription && previousSubscription != (currentPage!.dmId || currentPageID)) {
if (previousSubscription && previousSubscription != targetId) {
await fetch('/api/updates/' + sessionId, {
body: JSON.stringify({ subscribeTo: previousSubscription }),
method: 'DELETE'
});
}
if (previousSubscription != (currentPage!.dmId || currentPageID)) {
if (previousSubscription != targetId) {
await fetch('/api/updates/' + sessionId, {
body: JSON.stringify({ subscribeTo: currentPage!.dmId || currentPageID }),
body: JSON.stringify({ subscribeTo: targetId }),
method: 'POST'
});
}
@ -135,6 +140,7 @@
sse.addEventListener('message', (e) => {
const json = JSON.parse(e.data) as
| { type: 'connected'; sessionId: string }
| { type: 'message'; message: ReturnMessage }
| { type: 'status'; id: string; status: 1 | 2 | 3 };
if (json.type == 'connected') {
@ -175,7 +181,7 @@
<Sidebar.Provider>
<AppSidebar bind:currentPage={currentPageID} user={data.user} data={overview_data} />
<Sidebar.Inset>
<Sidebar.Inset class="h-svh">
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<Sidebar.Trigger class="-ms-1" />
{#if currentPageID && currentPage}
@ -206,19 +212,19 @@
{/if}
{/if}
</header>
<div class="h-min shrink overflow-scroll">
{#each messages as message, i (message.id)}
{#if i === 0 || messages[i - 1].authorId !== message.authorId}
<div class="flex gap-2 px-4 py-2">
<img
src={'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + message.authorId}
alt={message.authorId}
src={'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + message.author.name}
alt={message.author.name}
class="h-6 w-6 rounded-full"
/>
<div class="flex flex-col">
<div class="flex items-baseline gap-2">
<span class="font-semibold">{message.authorId}</span>
<span class="font-semibold">{message.author.name}</span>
<span class="text-xs text-gray-400">
{formatTimestamp(message.timestamp)}
</span>
@ -233,29 +239,53 @@
</div>
{/if}
{/each}
</div>
{#if currentPageID && currentPage}
<div class="flex shrink-0 gap-2 border-t p-2">
<Input
bind:value={inputValue}
placeholder="input box for messages (ignore how ugly it is right now please)"
></Input>
<Button
onclick={async () => {
const req = await fetch('/api/messages/' + (currentPage!.dmId || currentPageID), {
onkeydown={async (e) => {
if (e.key == 'Enter') {
let message = inputValue;
const targetId =
currentPage && 'dmId' in currentPage ? currentPage.dmId : currentPageID;
inputValue = '';
const req = await fetch('/api/messages/' + targetId, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
content: inputValue
})
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content: message })
});
if (!req.ok) {
console.error('Failed to send message');
}
}}>send</Button
}
}}
placeholder="input box for messages (ignore how ugly it is right now please)"
class="flex-1"
/>
<Button
onclick={async () => {
let message = inputValue;
const targetId =
currentPage && 'dmId' in currentPage ? currentPage.dmId : currentPageID;
inputValue = '';
const req = await fetch('/api/messages/' + targetId, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content: message })
});
if (!req.ok) {
console.error('Failed to send message');
}
}}
>
<SendHorizontal></SendHorizontal>
</Button>
</div>
{/if}
</Sidebar.Inset>
</Sidebar.Provider>