added changelog

src/psaggregator/src/lib/components/BigHeader.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
-    import { AppBar, LightSwitch } from "@skeletonlabs/skeleton";
+    import { AppBar, LightSwitch, type ModalSettings } from "@skeletonlabs/skeleton";
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
     import { GITHUB_URL, KOFI_USERNAME, LEGAL_URL } from "../../config/config";
+    import { getModalStore } from "@skeletonlabs/skeleton";
+
+    const modalStore = getModalStore();
+
+    function openChangelog() {
+        const modal: ModalSettings = {
+            type: "component",
+            component: "changelog"
+        };
+        modalStore.trigger(modal);
+    }
 </script>
 
 <MediaQuery query="(min-width: 1280px)" let:matches>
@@ -21,6 +32,9 @@
                     <a href="/api">API</a>
                     <a href="/motivation">Motivation</a>
                     <a href="/settings">Einstellungen</a>
+                    <div>
+                        <button on:click={openChangelog}>Was ist neu?</button>
+                    </div>
                 {/if}
             </div>
             <div class="flex items-center gap-x-4">

src/psaggregator/src/lib/components/Changelog.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { version } from "$app/environment";
+    import { getModalStore } from "@skeletonlabs/skeleton";
+    import { CloseLarge } from "carbon-icons-svelte";
+
+    const modalStore = getModalStore();
+</script>
+
+<style lang="postcss">
+    #changelog-contents > div {
+        @apply mb-2 flex flex-col;
+    }
+    #changelog-contents > div > span:first-child {
+        @apply font-bold;
+    }
+</style>
+
+<div class="modal-example-form card w-modal relative flex h-[80vh] flex-col p-4 md:space-y-4 md:shadow-xl">
+    <button class="btn btn-icon absolute right-4 top-4" on:click={() => modalStore.close()}>
+        <CloseLarge size={32} />
+    </button>
+
+    <h1 class="mb-8 text-4xl font-bold">Version {version}</h1>
+
+    <div class="mb-4">
+        Vielen Dank für euer gutes Feedback und die vielen Vorschläge. Ich habe versucht, so viele wie möglich umzusetzen.
+    </div>
+
+    <h2 class="mb-4 text-2xl font-bold">Neue Features</h2>
+    <div class="grow overflow-y-scroll" id="changelog-contents">
+        <div>
+            <span>Mehr Details in /videos</span>
+            <span>Du kannst nun auf der Videos-Seite mehr Details ansehen. </span>
+        </div>
+        <div>
+            <span>Alte Uploadpläne</span>
+            <span>Du kannst nun alte Uploadpläne ansehen. Beachte, dass historische Daten noch nicht importiert wurden.</span>
+        </div>
+        <div>
+            <span>Uploadplan hochgeladene Videos</span>
+            <span>Im Uploadplan ist die Unterscheidung zwischen hochgeladenen und nicht hochgeladenen Videos nun deutlicher.</span>
+        </div>
+        <div>
+            <span>Datumswerte einstellbar</span>
+            <span>Auf der neuen "Einstellungen" Seite kannst du wählen, ob du absolute oder relative Datumswerte sehen willst.</span>
+        </div>
+        <div>
+            <span>Footer und Header überarbeitet</span>
+            <span>Der Footer und der Header wurden überarbeitet. Externe Links sind nun getrennt von internen Links.</span>
+        </div>
+    </div>
+</div>

src/psaggregator/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
     import "../app.css";
-    import { Drawer, Modal, Toast, AppShell } from "@skeletonlabs/skeleton";
+    import { Modal, Toast, AppShell, type ModalComponent } from "@skeletonlabs/skeleton";
     import { initializeStores } from "@skeletonlabs/skeleton";
     import Footer from "$lib/components/Footer.svelte";
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
@@ -9,9 +9,14 @@
     import { afterNavigate, disableScrollHandling } from "$app/navigation";
     import { browser } from "$app/environment";
     import { onMount } from "svelte";
+    import Changelog from "$lib/components/Changelog.svelte";
 
     initializeStores();
 
+    const modalRegistry: Record<string, ModalComponent> = {
+        changelog: { ref: Changelog }
+    };
+
     afterNavigate(() => {
         if (browser) {
             disableScrollHandling();
@@ -47,8 +52,7 @@
 </MediaQuery>
 
 <Toast />
-<Modal />
-<Drawer />
+<Modal components={modalRegistry} />
 
 {#if MICROANALYTICS_ID}
     <script

src/psaggregator/src/routes/+page.svelte

@@ -9,8 +9,20 @@
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
     import InstagramPost from "$lib/components/InstagramPost.svelte";
     import TwitchEntry from "$lib/components/TwitchEntry.svelte";
+    import { getModalStore, type ModalSettings } from "@skeletonlabs/skeleton";
+    import { version } from "$app/environment";
 
     export let data: PageServerData;
+
+    const modalStore = getModalStore();
+
+    function openChangelog() {
+        const modal: ModalSettings = {
+            type: "component",
+            component: "changelog"
+        };
+        modalStore.trigger(modal);
+    }
 </script>
 
 <style lang="postcss">
@@ -35,6 +47,14 @@
 
 <MediaQuery query="(min-width: 768px)" let:matches>
     <div class="dashboardcontainer p-4 md:p-8">
+        <MediaQuery query="(min-width: 1280px)" let:matches>
+            {#if !matches}
+                <div class="flex items-center justify-between">
+                    <span class="text-xl font-bold">Version {version}</span>
+                    <button class="btn variant-filled" on:click={openChangelog}>Was ist neu?</button>
+                </div>
+            {/if}
+        </MediaQuery>
         <div class="flex flex-col-reverse gap-y-4 md:flex-row md:items-start md:gap-x-8 md:gap-y-0">
             <div class="shrink-0 grow">
                 <div class="mb-2 ml-2 flex items-center text-2xl">