campfire/src/routes/+page.svelte

<script>
    import { page } from '$app/stores';
    import { account } from '$lib/stores/account.js';
    import { timeline, getTimeline } from '$lib/timeline.js';
    import Lang from '$lib/lang';

    import LoginForm from '$lib/ui/LoginForm.svelte';
    import Button from '$lib/ui/Button.svelte';
    import Post from '$lib/ui/post/Post.svelte';

    const lang = Lang('en_GB');

    account.subscribe(account => {
        if (account) getTimeline();
    });

    document.addEventListener("scroll", () => {
        if ($account && $page.url.pathname !== "/") return;
        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
            getTimeline();
        }
    });
</script>

{#if $account}
    <header>
        <h1>{lang.string('timeline.home')}</h1>
        <nav>
            <Button centered active>{lang.string('timeline.home')}</Button>
            <Button centered disabled>{lang.string('timeline.local')}</Button>
            <Button centered disabled>{lang.string('timeline.federated')}</Button>
        </nav>
    </header>

    <div id="feed" role="feed">
        {#if $timeline.length <= 0}
            <div class="loading throb">
                <span>{lang.string('timeline.fetching')}</span>
            </div>
        {/if}
        {#each $timeline as post}
            <Post post_data={post} />
        {/each}
    </div>
{:else}
    <LoginForm />
{/if}

<style>
    header {
        width: 100%;
        height: 64px;
        margin: 16px 0;
        padding: 0 8px;
        display: flex;
        flex-direction: row;
        user-select: none;
        box-sizing: border-box;

    }

    header h1 {
        font-size: 1.5em;
    }

    nav {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    #feed {
        margin-bottom: 20vh;
    }

    .loading {
        width: 100%;
        height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        font-weight: bold;
    }
</style>