diff --git a/frontend/src/lib/components/MessageBubble.svelte b/frontend/src/lib/components/MessageBubble.svelte
index fcbed63..4ac411e 100644
--- a/frontend/src/lib/components/MessageBubble.svelte
+++ b/frontend/src/lib/components/MessageBubble.svelte
@@ -23,7 +23,6 @@
import { toasts } from "#lib/stores/toasts.svelte.js";
import { ui } from "#lib/stores/ui.svelte.js";
import { appear } from "#lib/transitions/appear.js";
- import { goto } from "$app/navigation";
interface Props {
animate: boolean;
@@ -125,8 +124,7 @@
}
function openSenderProfile() {
if (message.sender_id !== null) {
- goto(`/app/${message.sender_id}`);
- ui.openPanel("profile");
+ ui.openPerson(message.chat_id, message.sender_id);
}
}
@@ -150,20 +148,33 @@
{#if isGroupChat}
{#if showName}
-
{senderName}
+
{/if}
{#if message.forward}
@@ -364,12 +375,35 @@
border-bottom-left-radius: 0;
}
+ .sender-avatar,
+ .sender-name {
+ cursor: pointer;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ background: none;
+
+ &:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+ }
+ }
+
+ .sender-avatar {
+ display: block;
+ border-radius: 50%;
+ }
+
.sender-name {
overflow: hidden;
+ display: block;
+
+ max-width: 100%;
margin-bottom: 0.0625rem;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
+ text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
}
diff --git a/frontend/src/routes/app/+layout.svelte b/frontend/src/routes/app/+layout.svelte
index 37577e4..16e709b 100644
--- a/frontend/src/routes/app/+layout.svelte
+++ b/frontend/src/routes/app/+layout.svelte
@@ -41,7 +41,10 @@
$effect(() => {
const chatId = page.params.chatId ? Number(page.params.chatId) : null;
- untrack(() => accounts.rememberChat(chatId));
+ untrack(() => {
+ accounts.rememberChat(chatId);
+ ui.setChat(chatId);
+ });
});
let shownAccount = accounts.selectedId;