98 lines
2.3 KiB
Svelte
98 lines
2.3 KiB
Svelte
<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 { ui } from "#lib/stores/ui.svelte.js";
|
|
import { goto } from "$app/navigation";
|
|
import { page } from "$app/state";
|
|
|
|
interface Props {
|
|
filter: FeedFilter;
|
|
}
|
|
|
|
let { filter }: Props = $props();
|
|
|
|
async function open(item: FeedItem, messageId: number) {
|
|
await goto(messageHref(page.url, item.chat.chat_id, messageId));
|
|
if (item.kind === "profile" && !messageId) {
|
|
ui.openPanel("profile");
|
|
}
|
|
}
|
|
|
|
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>
|