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

2026-10-19 03:00:12 +00:00
1 parent 010fa29ce0
commit 9f16e2aa56
@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { FeedItem } from "#lib/api/types.js";
+  import FeedFilters from "#lib/components/feed/FeedFilters.svelte";
+  import FeedList from "#lib/components/feed/FeedList.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { t } from "#lib/i18n/locale.svelte.js";
+  import {
+    type FeedFilter,
+    feed,
+    messageHref,
+  } from "#lib/stores/feed.svelte.js";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/state";
+
+  interface Props {
+    filter: FeedFilter;
+  }
+
+  let { filter }: Props = $props();
+
+  function open(item: FeedItem, messageId: number) {
+    goto(messageHref(page.url, item.chat.chat_id, messageId));
+  }
+
+  onMount(() => {
+    feed.refresh().catch(() => undefined);
+  });
+
+  $effect(() => {
+    const { unseen } = feed;
+    if (unseen && unseen.count > 0) {
+      feed.markSeen(unseen.latest?.at).catch(() => undefined);
+    }
+  });
+</script>
+
+<div class="feed-view">
+  <header class="feed-header">
+    <Button
+      aria-label={t("common.back")}
+      onclick={() => feed.close(page.url)}
+      round
+      smaller
+      variant="translucent"
+    >
+      <Icon name="arrow-left" />
+    </Button>
+    <h2>{t("feed.title")}</h2>
+  </header>
+  <FeedFilters
+    chats={filter.chats}
+    kind={filter.kind}
+    onchats={(chats) => feed.filter(page.url, { ...filter, chats })}
+    onkind={(kind) => feed.filter(page.url, { ...filter, kind })}
+  />
+  <div class="feed-body custom-scroll">
+    <FeedList chats={filter.chats} kind={filter.kind} onopen={open} />
+  </div>
+</div>
+
+<style lang="scss">
+  .feed-view {
+    display: flex;
+    flex-direction: column;
+
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .feed-header {
+    display: flex;
+    flex-shrink: 0;
+    gap: 0.75rem;
+    align-items: center;
+
+    height: var(--header-height);
+    padding: 0 0.625rem;
+    border-bottom: 1px solid var(--color-borders);
+
+    h2 {
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: var(--font-weight-medium);
+    }
+  }
+
+  .feed-body {
+    overflow-y: auto;
+    flex: 1;
+  }
+</style>