vigil/src/lib/Feed.svelte

<script lang="ts">
    import { RiChatOffLine } from "svelte-remixicon";
    import Centered from "./Centered.svelte";
    import FeedPost from "./FeedPost.svelte";
    import ScrollWarning from "./ScrollWarning.svelte";

    let { posts, emptymsg = "No posts, how empty" } = $props();
</script>

<ul>
    {#each posts as post}
    <li><FeedPost {post} /></li>
    {:else}
    <Centered>
        <p class="big"><RiChatOffLine /></p>
        {emptymsg}</Centered>
    {/each}
    {#if posts}
    <!-- TODO make feeds keep track of a "next page" -->
    <ScrollWarning next={2} loadNext={() => {}} />
    {/if}
</ul>

<style>
    ul {
        list-style: none;
        padding: 0;
    }

    ul > li {
        margin: 3px 0;
    }

    p.big {
        font-size: 2em;
    }

</style>