cobalt/web/src/routes/updates/+page.svelte

<script lang="ts">
    import { t } from "$lib/i18n/translations";
    import { page } from "$app/stores";

    import { getAllChangelogs } from "$lib/changelogs";
    import type { ChangelogImport } from "$lib/types/changelogs";

    import IconChevronLeft from "@tabler/icons-svelte/IconChevronLeft.svelte";
    import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";

    const changelogs = getAllChangelogs();
    const versions = Object.keys(changelogs);

    let changelog: (ChangelogImport & { version: string }) | undefined;
    let currentIndex = 0;

    {
        const hash = $page.url.hash.replace("#", "");
        const versionIndex = versions.indexOf(hash);
        if (versionIndex !== -1 && currentIndex !== versionIndex) {
            currentIndex = versionIndex;
        }
    }

    const loadChangelog = async () => {
        const version = versions[currentIndex];
        const log = (await changelogs[version]()) as ChangelogImport;
        if (!log) {
            return; // FIXME: now wot
        }

        changelog = {
            ...log,
            version,
        };

        window.location.hash = version;
    };

    const loadNext = () => {
        if (currentIndex < versions.length - 1) ++currentIndex;
    };

    const loadPrev = () => {
        if (currentIndex > 0) --currentIndex;
    };

    const preloadNext = () => {
        if (!next) return;
        changelogs[next]().catch(() => {});
    };

    const handleKeydown = (e: KeyboardEvent) => {
        if (e.key === "ArrowLeft") loadPrev();
        else if (e.key === "ArrowRight") loadNext();
    };

    $: prev = versions[currentIndex - 1];
    $: next = versions[currentIndex + 1];
    $: currentIndex, loadChangelog();
</script>

<svelte:head>
    <title>
        {$t("general.cobalt")}: {$t("tabs.updates")}
    </title>
</svelte:head>

<svelte:window on:keydown={handleKeydown} />

<div class="news">
    {#if changelog}
        <div class="button-wrapper-desktop">
            <button on:click={loadPrev} disabled={!prev}>
                <IconChevronLeft />
                {prev || ""}
            </button>
        </div>
        <div class="changelog-wrapper">
            <svelte:component
                this={changelog.default}
                version={changelog.version}
            />
            <div class="button-wrapper-mobile">
                <button on:click={loadPrev} disabled={!prev}>
                    <IconChevronLeft />
                    {prev || ""}
                </button>
                <button
                    on:click={loadNext}
                    on:focus={preloadNext}
                    on:mousemove={preloadNext}
                    disabled={!next}
                >
                    {next || ""}
                    <IconChevronRight />
                </button>
            </div>
        </div>
        <div class="button-wrapper-desktop">
            <button
                on:click={loadNext}
                on:focus={preloadNext}
                on:mousemove={preloadNext}
                disabled={!next}
            >
                {next || ""}
                <IconChevronRight />
            </button>
        </div>
    {/if}
</div>

<style>
    .news {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .button-wrapper-desktop {
        display: flex;
        justify-content: center;
    }

    .button-wrapper-desktop button {
        position: absolute;
        top: 50%;
        background-color: transparent;
        display: flex;
        border: none;
    }

    .changelog-wrapper {
        max-width: 850px;
        overflow-x: hidden;
        padding: var(--padding);
        padding-top: calc(var(--padding) + 1em);
    }

    button[disabled] {
        opacity: 0.5;
        cursor: default;
    }

    .button-wrapper-mobile {
        display: none;
    }

    @media only screen and (max-width: 1150px) {
        .button-wrapper-mobile {
            display: flex;
            padding-bottom: 1rem;
            margin-left: 1rem;
            margin-right: 1rem;
            justify-content: space-between;
        }

        .button-wrapper-desktop {
            display: none;
        }
    }

    @media screen and (max-width: 535px) {
        .changelog-wrapper {
            padding-top: var(--padding)
        }
    }
</style>