feat: web UI chat render, panels, presence + analytics

frontend/src/lib/components/ActionMessage.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { MessageView } from "$lib/api/types";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import { accountName, peerName } from "$lib/format/peer";
+  import { accounts } from "$lib/stores/accounts.svelte";
+  import { peers } from "$lib/stores/peers.svelte";
+
+  interface Props {
+    message: MessageView;
+    onjump: (messageId: number) => void;
+  }
+
+  let { message, onjump }: Props = $props();
+
+  const ownId = $derived(accounts.selected?.tg_user_id ?? null);
+
+  function nameOf(id: number | null): string {
+    if (id === null) {
+      return "Someone";
+    }
+    if (id === ownId) {
+      return accounts.selected ? accountName(accounts.selected) : "You";
+    }
+    const peer = peers.get(id);
+    return peer ? peerName(peer) : String(id);
+  }
+
+  function durationOf(seconds: number): string {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${String(s).padStart(2, "0")}`;
+  }
+
+  const actor = $derived(nameOf(message.sender_id));
+
+  const text = $derived.by(() => {
+    const service = message.service;
+    if (!service) {
+      return "";
+    }
+    const members = service.member_ids ?? [];
+    switch (service.kind) {
+      case "new_chat_members": {
+        const selfJoin =
+          members.length === 1 && members[0] === message.sender_id;
+        if (selfJoin) {
+          return `${actor} joined the group`;
+        }
+        const names = members.map(nameOf).join(", ");
+        return names ? `${actor} added ${names}` : `${actor} joined the group`;
+      }
+      case "left_chat_members":
+        return `${actor} left the group`;
+      case "pinned_message":
+        return `${actor} pinned a message`;
+      case "group_chat_created":
+        return `${actor} created the group`;
+      case "channel_chat_created":
+        return "Channel created";
+      case "phone_call_ended":
+        return service.duration === null
+          ? "Call ended"
+          : `Call ended · ${durationOf(service.duration)}`;
+      case "phone_call_started":
+        return "Call started";
+      case "poll_option_added":
+        return `${actor} added a poll option`;
+      case "new_chat_title":
+        return `${actor} changed the group name`;
+      case "new_chat_photo":
+        return `${actor} changed the group photo`;
+      case "delete_chat_photo":
+        return `${actor} removed the group photo`;
+      default:
+        return service.kind.replace(/_/g, " ") || "Service message";
+    }
+  });
+
+  const pinned = $derived(
+    message.service?.kind === "pinned_message" &&
+      message.service.pinned_message_id !== null
+  );
+</script>
+
+<div class="ActionMessage">
+  {#if pinned}
+    <button
+      type="button"
+      class="pill action"
+      onclick={() => {
+        const id = message.service?.pinned_message_id;
+        if (id != null) {
+          onjump(id);
+        }
+      }}
+    >
+      <Icon name="pin" size="0.8125rem" />
+      <span>{text}</span>
+    </button>
+  {:else}
+    <span class="pill">{text}</span>
+  {/if}
+</div>
+
+<style lang="scss">
+  .ActionMessage {
+    display: flex;
+    justify-content: center;
+    margin: 0.5rem 0;
+  }
+
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3125rem;
+
+    max-width: min(30rem, 85%);
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+
+    font-size: 0.8125rem;
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    color: var(--color-white);
+
+    background-color: var(--color-default-shadow);
+    backdrop-filter: blur(8px);
+  }
+
+  button.pill {
+    cursor: pointer;
+    border: 0;
+  }
+
+  button.pill:hover {
+    background-color: var(--color-default-shadow-hover, var(--color-default-shadow));
+  }
+</style>