fix: show username in chat history

src/lib/chat.ts

@@ -2,6 +2,7 @@ import { derived, readable, type Readable } from 'svelte/store';
 import type { BlahChatServerConnection } from './blah/connection/chatServer';
 import type { BlahRichText } from './richText';
 import { messageFromBlah, type Chat, type Message, type User } from './types';
+import { BlahError } from './blah/connection/error';
 
 const MAX_MESSAGES_PER_SECTION = 10;
 const SHOW_TIME_AFTER_SILENCE = 30 * 60 * 1000;
@@ -79,7 +80,15 @@ export function useChat(
 	});
 
 	const sendMessage = async (brt: BlahRichText) => {
+		try {
 			await server.sendMessage(chatId, brt);
+		} catch (e) {
+			console.error(e);
+			if (e instanceof BlahError && e.statusCode === 403) {
+				await server.joinRoom(chatId);
+				await server.sendMessage(chatId, brt);
+			}
+		}
 	};
 
 	return { info, messages, sectionedMessages, sendMessage };

src/lib/types/message.ts

@@ -1,4 +1,4 @@
-import type { BlahSignedPayload } from '$lib/blah/crypto';
+import { generateName, type BlahSignedPayload } from '$lib/blah/crypto';
 import type { BlahMessage } from '$lib/blah/structures';
 import type { BlahRichText } from '$lib/richText';
 
@@ -12,7 +12,7 @@ export type Message = {
 export function messageFromBlah(payload: BlahSignedPayload<BlahMessage>): Message {
 	return {
 		id: payload.sig,
-		sender: { id: payload.signee.user, name: payload.signee.user },
+		sender: { id: payload.signee.user, name: generateName(payload.signee.user) },
 		content: payload.signee.payload.rich_text,
 		date: new Date(payload.signee.timestamp * 1000)
 	};

src/routes/(app)/chats/[server]/[chatId]/ChatHistory.svelte

@@ -38,6 +38,9 @@
 				<AvatarBeam size={32} name={messageSection.sender?.id} />
 			</div>
 			<div class="flex-1">
+				{#if messageSection.sender && !isMyself}
+					<div class="px-3 py-0.5 text-xs text-sf-tertiary">{messageSection.sender.name}</div>
+				{/if}
 				{#each messageSection.messages as message, idx}
 					<ChatMessage
 						{message}