From 1ec9d92eb2123b33e153a86962521d336e182a0d Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 17 Jul 2024 13:32:07 +0600
Subject: [PATCH] web/updates: clean up components

---
 web/src/components/misc/ChangelogEntry.svelte | 41 ++++----
 .../misc/ChangelogEntryWrapper.svelte         |  1 +
 web/src/routes/updates/+page.svelte           | 96 +++++++++----------
 3 files changed, 70 insertions(+), 68 deletions(-)

diff --git a/web/src/components/misc/ChangelogEntry.svelte b/web/src/components/misc/ChangelogEntry.svelte
index 7991e304..902aa7ef 100644
--- a/web/src/components/misc/ChangelogEntry.svelte
+++ b/web/src/components/misc/ChangelogEntry.svelte
@@ -4,6 +4,27 @@
     export let date: string;
     export let banner: { file: string, alt: string } | undefined;
 </script>
+
+<main>
+    <h1>
+        <div class="changelog-version">{ version }</div>
+        <div class="changelog-title">{ title }</div>
+    </h1>
+    <small>{ date }</small>
+    <div class="changelog-content">
+        {#if banner}
+            <img
+                src={`/update-banners/${banner.file}`}
+                alt={banner.alt}
+                class="changelog-banner"
+            />
+        {/if}
+        <div class="contents">
+            <slot></slot>
+        </div>
+    </div>
+</main>
+
 <style>
     main {
         padding: 1em;
@@ -64,24 +85,4 @@
     .contents {
         max-width: 100%;
     }
-
 </style>
-<main>
-    <h1>
-        <div class="changelog-version">{ version }</div>
-        <div class="changelog-title">{ title }</div>
-    </h1>
-    <small>{ date }</small>
-    <div class="changelog-content">
-        {#if banner}
-            <img
-                src={`/update-banners/${banner.file}`}
-                alt={banner.alt}
-                class="changelog-banner"
-            />
-        {/if}
-        <div class="contents">
-            <slot></slot>
-        </div>
-    </div>
-</main>
diff --git a/web/src/components/misc/ChangelogEntryWrapper.svelte b/web/src/components/misc/ChangelogEntryWrapper.svelte
index 3821fa42..6dc6e56a 100644
--- a/web/src/components/misc/ChangelogEntryWrapper.svelte
+++ b/web/src/components/misc/ChangelogEntryWrapper.svelte
@@ -6,6 +6,7 @@
     export let date = '';
     export let banner = undefined;
 </script>
+
 <ChangelogEntry {version} {title} {date} {banner}>
     <slot></slot>
 </ChangelogEntry>
diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte
index 5cbaf12f..3691e055 100644
--- a/web/src/routes/updates/+page.svelte
+++ b/web/src/routes/updates/+page.svelte
@@ -62,6 +62,54 @@
     $: 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;
@@ -110,51 +158,3 @@
         }
     }
 </style>
-
-<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>