web/updates: proper navigation buttons, refactor internal nav logic

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

@@ -1,15 +1,19 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import type { ChangelogImport } from '$lib/types/changelogs';
     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 = -1;
+    let currentIndex = 0;
+
     {
         const hash = $page.url.hash.replace("#", "");
         const versionIndex = versions.indexOf(hash);
@@ -33,25 +37,72 @@
         window.location.hash = version;
     }
 
-    const nextChangelog = async () => {
-        ++currentIndex;
-        await loadChangelog();
+    const loadNext = () => {
+        if (currentIndex < versions.length - 1)
+            ++currentIndex;
     }
 
-    onMount(async () => {
-        if (versions.length > 0) {
-            await nextChangelog()
-        } else {
-            // TODO: handle if no changelogs are present
-            // (can this happen? maybe)
-        }
-    });
+    const loadPrev = () => {
+        if (currentIndex > 0)
+            --currentIndex;
+    }
+
+    const preloadNext = () => {
+        if (!next) return;
+        changelogs[next]().catch(() => {});
+    }
+
+    $: prev = versions[currentIndex - 1];
+    $: next = versions[currentIndex + 1];
+    $: currentIndex, loadChangelog();
 </script>
 
 <style>
     .news {
-        max-width: 768px;
-        margin: 0 auto;
+        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: 768pt;
+    }
+
+    button[disabled] {
+        opacity: 0.5;
+        cursor: default;
+    }
+
+    .button-wrapper-mobile {
+        display: none;
+    }
+
+    @media only screen and (max-width: 992pt) {
+        .button-wrapper-mobile {
+            display: flex;
+            padding-bottom: 1rem;
+            margin-left: 1rem;
+            margin-right: 1rem;
+            justify-content: space-between;
+        }
+
+        .button-wrapper-desktop {
+            display: none;
+        }
     }
 </style>
 
@@ -63,9 +114,40 @@
 
 <div class="news">
     {#if changelog}
-        <svelte:component this={changelog.default} version={changelog.version} />
-    {/if}
-    {#if versions[currentIndex + 1]}
-        <button on:click={nextChangelog}>next</button>
+        <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>