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 { app_name } from '$lib/config.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';
    import PageHeader from '../lib/ui/core/PageHeader.svelte';

    const lang = Lang();

    // TODO: refactor to enum when moving to TS
    let timelineType = localStorage.getItem(app_name + '_selected_timeline') || "home";

    $: {
        // awful hack to update timeline fresh
        // when timelineType is updated
        //
        // TODO: migrate to $effect when migrating to svelte 5
        timelineType = timelineType

        // set in localStorage
        localStorage.setItem(app_name + '_selected_timeline', timelineType);
     
        // erase the timeline here so the ui reacts instantly
        // mae: i could write an awesome undertale reference here
        timeline.set([]);

        getCurrentTimeline()
    }

    function getCurrentTimeline(clean = false) {
        switch(timelineType) {
            case "home":
                getTimeline("home", clean);
                break;

            case "local":
                getTimeline("public", clean, true)
                break;

            case "federated":
                getTimeline("public", clean, false, true)
                break;
        }
    }

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

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

{#if $account}
    <PageHeader title={lang.string(`timeline.${timelineType}`)}>
        <Button centered 
        active={(timelineType == "home")} 
        on:click={() => timelineType = "home"}>
            {lang.string('timeline.home')}
        </Button>
        <Button centered 
        active={(timelineType == "local")} 
        on:click={() => timelineType = "local"}>
            {lang.string('timeline.local')}
        </Button>
                <Button centered 
        active={(timelineType == "federated")} 
        on:click={() => timelineType = "federated"}>
            {lang.string('timeline.federated')}
        </Button>
    </PageHeader>

    <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>
    #feed {
        margin-bottom: 20vh;
    }

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