feat: add annotations, user profiles, watchers, stories, search and more

frontend/src/lib/components/ChatHeader.svelte

@@ -7,6 +7,8 @@
   import type { PeerView, PresenceSample } from "$lib/api/types";
   import Avatar from "$lib/components/ui/Avatar.svelte";
   import Button from "$lib/components/ui/Button.svelte";
+  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
   import Icon from "$lib/components/ui/Icon.svelte";
   import { peerName } from "$lib/format/peer";
   import { formatPresence } from "$lib/format/presence";
@@ -121,20 +123,45 @@
 </script>
 
 <header class="chat-header">
-  <Avatar
-    name={title}
-    colorKey={chatId}
-    size={2.5}
-    avatar={{ kind: avatarKind, id: chatId }}
-    {hasAvatar}
-    deleted={peer?.is_deleted_account ?? false}
-  />
-  <div class="info">
-    <h2 class="title">{title}</h2>
-    <span class="subtitle" class:online={isDm && presence?.status === "online"}>
-      {subtitle}
-    </span>
-  </div>
+  <ContextMenu>
+    {#snippet children({ props })}
+      <button
+        {...props}
+        type="button"
+        class="peek"
+        onclick={() => ui.openPanel("profile")}
+        aria-label="Открыть профиль"
+      >
+        <Avatar
+          name={title}
+          colorKey={chatId}
+          size={2.5}
+          avatar={{ kind: avatarKind, id: chatId }}
+          {hasAvatar}
+          deleted={peer?.is_deleted_account ?? false}
+        />
+        <div class="info">
+          <h2 class="title">{title}</h2>
+          <span
+            class="subtitle"
+            class:online={isDm && presence?.status === "online"}
+          >
+            {subtitle}
+          </span>
+        </div>
+      </button>
+    {/snippet}
+    {#snippet menu()}
+      <ContextMenuItem icon="info" onselect={() => ui.openPanel("profile")}
+        >Открыть профиль</ContextMenuItem
+      >
+      <ContextMenuItem
+        icon="play-story"
+        onselect={() => ui.openPanel("stories")}
+        >Сторис</ContextMenuItem
+      >
+    {/snippet}
+  </ContextMenu>
   <div class="actions">
     <Button
       variant="translucent"
@@ -180,6 +207,21 @@
     background-color: var(--color-background);
   }
 
+  .peek {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 0.625rem;
+
+    min-width: 0;
+    padding: 0;
+    border: 0;
+
+    text-align: left;
+    cursor: pointer;
+    background: transparent;
+  }
+
   .info {
     overflow: hidden;
     min-width: 0;