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

frontend/src/lib/components/ChatListItem.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
   import { ripple } from "$lib/actions/ripple";
   import type { Chat } from "$lib/api/types";
   import Avatar from "$lib/components/ui/Avatar.svelte";
+  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
   import { formatListDate } from "$lib/format/datetime";
   import { accounts } from "$lib/stores/accounts.svelte";
   import { peers } from "$lib/stores/peers.svelte";
+  import { type RightPanel, ui } from "$lib/stores/ui.svelte";
 
   interface Props {
     chat: Chat;
@@ -14,6 +18,11 @@
 
   let { chat, selected, onclick }: Props = $props();
 
+  async function openWith(panel: RightPanel) {
+    await goto(`/app/${chat.chat_id}`);
+    ui.openPanel(panel);
+  }
+
   const title = $derived(
     chat.title ??
       (chat.chat_id > 0 ? "Удалённый аккаунт" : `Chat ${chat.chat_id}`)
@@ -49,34 +58,56 @@
   );
 </script>
 
-<button
-  type="button"
-  class="Chat ListItem-button"
-  class:selected
-  use:ripple
-  {onclick}
->
-  <Avatar
-    name={title}
-    colorKey={chat.chat_id}
-    avatar={{ kind: avatarKind, id: chat.chat_id }}
-    hasAvatar={chat.has_avatar}
-  />
-  <div class="info">
-    <div class="info-row">
-      <h3 class="title">{title}</h3>
-      <span class="date">{formatListDate(chat.last_date)}</span>
-    </div>
-    <div class="subtitle">
-      <span class="last-message">
-        {#if senderPrefix}
-          <span class="sender">{senderPrefix}</span>
-        {/if}
-        {preview}
-      </span>
-    </div>
-  </div>
-</button>
+<ContextMenu>
+  {#snippet children({ props })}
+    <button
+      {...props}
+      type="button"
+      class="Chat ListItem-button"
+      class:selected
+      use:ripple
+      {onclick}
+    >
+      <Avatar
+        name={title}
+        colorKey={chat.chat_id}
+        avatar={{ kind: avatarKind, id: chat.chat_id }}
+        hasAvatar={chat.has_avatar}
+      />
+      <div class="info">
+        <div class="info-row">
+          <h3 class="title">{title}</h3>
+          <span class="date">{formatListDate(chat.last_date)}</span>
+        </div>
+        <div class="subtitle">
+          <span class="last-message">
+            {#if senderPrefix}
+              <span class="sender">{senderPrefix}</span>
+            {/if}
+            {preview}
+          </span>
+        </div>
+      </div>
+    </button>
+  {/snippet}
+  {#snippet menu()}
+    <ContextMenuItem icon="open-in-new-tab" onselect={onclick}
+      >Открыть</ContextMenuItem
+    >
+    <ContextMenuItem icon="info" onselect={() => openWith("profile")}
+      >Профиль</ContextMenuItem
+    >
+    <ContextMenuItem icon="search" onselect={() => openWith("search")}
+      >Поиск в чате</ContextMenuItem
+    >
+    <ContextMenuItem icon="stats" onselect={() => openWith("presence")}
+      >Аналитика</ContextMenuItem
+    >
+    <ContextMenuItem icon="play-story" onselect={() => openWith("stories")}
+      >Сторис</ContextMenuItem
+    >
+  {/snippet}
+</ContextMenu>
 
 <style lang="scss">
   .Chat {