feat(frontend): sender avatar and name in groups open the person panel without leaving the chat

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,6 +148,12 @@
       {#if isGroupChat}
         <div class="avatar-slot">
           {#if lastInGroup && avatarId !== null}
+            <button
+              aria-label={senderName}
+              class="sender-avatar"
+              onclick={openSenderProfile}
+              type="button"
+            >
               <Avatar
                 avatar={{ id: avatarId, kind: "peer" }}
                 colorKey={avatarId}
@@ -157,13 +161,20 @@
                 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;
   }

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;