feat(frontend): feed of deleted and edited messages above the chat list and per chat in the changes panel

frontend/src/lib/components/feed/FeedText.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { mediaUrl } from "#lib/api/client.js";
+  import type { MessageView } from "#lib/api/types.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { mediaKindLabel } from "#lib/format/media.js";
+  import { t } from "#lib/i18n/locale.svelte.js";
+
+  interface Props {
+    deleted?: boolean;
+    mark?: string;
+    message: MessageView | null;
+    prefix?: string;
+  }
+
+  let { message, deleted = false, mark = "", prefix = "" }: Props = $props();
+
+  const media = $derived(message?.media[0] ?? null);
+  const thumb = $derived(
+    media?.kind === "photo" && media.downloaded && media.id !== null
+      ? mediaUrl(media.id)
+      : null
+  );
+  const kind = $derived.by(() => {
+    if (message?.poll) {
+      return "poll";
+    }
+    if (message?.contact) {
+      return "contact";
+    }
+    if (message?.location) {
+      return "location";
+    }
+    if (message?.sticker) {
+      return "sticker";
+    }
+    return media?.kind ?? (message?.has_media ? "other" : null);
+  });
+  const label = $derived(
+    message?.sticker?.emoji
+      ? `${message.sticker.emoji} ${mediaKindLabel(kind)}`
+      : mediaKindLabel(kind)
+  );
+  const text = $derived(message?.text?.trim() || message?.poll?.question || "");
+  const lead = $derived.by(() => {
+    if (!label || (thumb && text)) {
+      return "";
+    }
+    return text ? `${label}, ` : label;
+  });
+</script>
+
+<span class="feed-text" class:deleted>
+  {#if mark}
+    <span class="mark"><Icon name="delete" size="0.875rem" /> {mark}</span>
+  {/if}
+  {#if prefix}
+    <span class="prefix">{prefix}: </span>
+  {/if}
+  {#if thumb}
+    <img alt="" class="thumb" decoding="async" loading="lazy" src={thumb}>
+  {/if}
+  {#if lead}
+    <span class="label">{lead}</span>
+  {/if}
+  {#if text}
+    <span class="body">{text}</span>
+  {:else if !lead}
+    <span class="empty">{t("feed.noText")}</span>
+  {/if}
+</span>
+
+<style lang="scss">
+  .feed-text {
+    overflow: hidden;
+    display: -webkit-box;
+
+    font-size: 0.9375rem;
+    line-height: 1.25rem;
+    color: var(--color-text-secondary);
+    overflow-wrap: anywhere;
+
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .prefix {
+    color: var(--color-text);
+  }
+
+  .mark {
+    margin-inline-end: 0.375rem;
+
+    font-size: 0.8125rem;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-error);
+
+    :global(.icon) {
+      vertical-align: -0.125rem;
+    }
+  }
+
+  .deleted .body,
+  .deleted .label {
+    text-decoration: line-through;
+  }
+
+  .thumb {
+    display: inline-block;
+
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-inline-end: 0.25rem;
+    border-radius: 0.25rem;
+
+    vertical-align: -0.25rem;
+
+    object-fit: cover;
+  }
+
+  .label {
+    color: var(--color-text);
+  }
+
+  .empty {
+    font-style: italic;
+  }
+</style>