140 lines
3.7 KiB
Svelte
140 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import type { MessageView } from "#lib/api/types.js";
|
|
import Icon from "#lib/components/ui/Icon.svelte";
|
|
import { accountName, peerName } from "#lib/format/peer.js";
|
|
import { accounts } from "#lib/stores/accounts.svelte.js";
|
|
import { peers } from "#lib/stores/peers.svelte.js";
|
|
|
|
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;
|
|
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
|
|
class="pill action"
|
|
onclick={() => {
|
|
const id = message.service?.pinned_message_id;
|
|
// biome-ignore lint/suspicious/noEqualsToNull: optional chaining yields undefined here
|
|
if (id != null) {
|
|
onjump(id);
|
|
}
|
|
}}
|
|
type="button"
|
|
>
|
|
<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>
|