From 1abb396c36e6c7fd6426f621e8d8378ed6d93cee Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Mon, 19 Oct 2026 02:46:04 +0000
Subject: [PATCH] feat(frontend): sender avatar and name in groups open the
 person panel without leaving the chat

---
 .../src/lib/components/MessageBubble.svelte   | 56 +++++++++++++++----
 frontend/src/routes/app/+layout.svelte        |  5 +-
 2 files changed, 49 insertions(+), 12 deletions(-)

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);
     }
   }
 </script>
@@ -150,20 +148,33 @@
       {#if isGroupChat}
         <div class="avatar-slot">
           {#if lastInGroup && avatarId !== null}
-            <Avatar
-              avatar={{ id: avatarId, kind: "peer" }}
-              colorKey={avatarId}
-              hasAvatar={avatarHas}
-              name={senderName}
-              size={2.125}
-            />
+            <button
+              aria-label={senderName}
+              class="sender-avatar"
+              onclick={openSenderProfile}
+              type="button"
+            >
+              <Avatar
+                avatar={{ id: avatarId, kind: "peer" }}
+                colorKey={avatarId}
+                hasAvatar={avatarHas}
+                name={senderName}
+                size={2.125}
+              />
+            </button>
           {/if}
         </div>
       {/if}
 
       <div class="message-content" class:has-appendix={lastInGroup}>
         {#if showName}
-          <div class="sender-name peer-color-{colorIndex}">{senderName}</div>
+          <button
+            class="sender-name peer-color-{colorIndex}"
+            onclick={openSenderProfile}
+            type="button"
+          >
+            {senderName}
+          </button>
         {/if}
         {#if message.forward}
           <ForwardHeader forward={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;