4 files changed, 87 insertions, 11 deletions

diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index c731b98d..31b1efec 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -11,6 +11,7 @@ import { appDir } from '@tauri-apps/api/path';
 import { open } from '@tauri-apps/api/dialog';
 import { Store } from 'tauri-plugin-store-api';
 import {router} from "../main";
+import ReleaseInfo from "../utils/ReleaseInfo";
 
 const persistentStore = new Store('flight-core-settings.json');
 
@@ -25,6 +26,7 @@ export interface FlightCoreStore {
     installed_northstar_version: string,
     northstar_state: NorthstarState,
     northstar_release_canal: ReleaseCanal,
+    releaseNotes: ReleaseInfo[],
 
     northstar_is_running: boolean,
     origin_is_running: boolean
@@ -44,6 +46,7 @@ export const store = createStore<FlightCoreStore>({
             installed_northstar_version: "",
             northstar_state: NorthstarState.GAME_NOT_FOUND,
             northstar_release_canal: ReleaseCanal.RELEASE,
+            releaseNotes: [],
 
             northstar_is_running: false,
             origin_is_running: false
@@ -181,6 +184,10 @@ export const store = createStore<FlightCoreStore>({
                     store.commit('updateGamePath');
                     break;
             }
+        },
+        async fetchReleaseNotes(state: FlightCoreStore) {
+            if (state.releaseNotes.length !== 0) return;
+            state.releaseNotes = await invoke("get_northstar_release_notes");
         }
     }
 });
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
index 6e00975d..66e512f5 100644
--- a/src-vue/src/style.css
+++ b/src-vue/src/style.css
@@ -28,3 +28,8 @@ body {
   position: fixed;
   filter: brightness(0.8);
 }
+
+.el-scrollbar {
+  --el-scrollbar-opacity: 0.5;
+  --el-scrollbar-hover-opacity: 0.7;
+}
diff --git a/src-vue/src/utils/ReleaseInfo.d.ts b/src-vue/src/utils/ReleaseInfo.d.ts
new file mode 100644
index 00000000..162f7917
--- /dev/null
+++ b/src-vue/src/utils/ReleaseInfo.d.ts
@@ -0,0 +1,6 @@
+// Matches Rust struct (in release_notes mod).
+export default interface ReleaseInfo {
+    name: string;
+    published_at: string;
+    body: string;
+}
diff --git a/src-vue/src/views/ChangelogView.vue b/src-vue/src/views/ChangelogView.vue
index ff4f2659..62d7f820 100644
--- a/src-vue/src/views/ChangelogView.vue
+++ b/src-vue/src/views/ChangelogView.vue
@@ -1,24 +1,82 @@
 <template>
-    <div class="fc__changelog__container">
-        <el-link :underline="false" icon="DocumentCopy" target="_blank"
-            href="https://github.com/R2Northstar/Northstar/releases">
-            Open release notes
-        </el-link>
+    <div style="height: calc(100% - var(--fc-menu_height))">
+        <div v-if="releases.length === 0" class="fc__changelog__container">
+            <el-progress :show-text="false" :percentage="50" :indeterminate="true" />
+        </div>
+        <el-scrollbar v-else>
+            <el-timeline>
+                <el-timeline-item
+                    v-for="release in releases"
+                    v-bind:key="release.name"
+                    :timestamp="formatDate(release.published_at)"
+                    placement="top"
+                >
+                <el-card>
+                    <h4>{{ release.name }}</h4>
+                    <p v-html="formatRelease(release.body)"></p>
+                </el-card>
+                </el-timeline-item>
+            </el-timeline>
+        </el-scrollbar>
     </div>
 </template>
 
 <script lang="ts">
-export default {
-    name: "ChangelogView"
-}
+import { defineComponent } from 'vue';
+import ReleaseInfo from '../utils/ReleaseInfo';
+import { marked } from "marked";
+
+
+export default defineComponent({
+    name: "ChangelogView",
+    async mounted() {
+        this.$store.commit('fetchReleaseNotes');
+    },
+    computed: {
+        releases(): ReleaseInfo[] {
+            return this.$store.state.releaseNotes;
+        }
+    },
+    methods: {
+        // Transforms a Markdown document into an HTML document.
+        // Taken from Viper launcher:
+        // https://github.com/0neGal/viper/blob/5106d9ed409a3cc91a7755f961fab1bf91d8b7fb/src/app/launcher.js#L26
+        formatRelease(releaseBody: string) {
+            // GitHub authors' links formatting
+            let content: string = releaseBody.replaceAll(/\@(\S+)/g, `<a target="_blank" href="https://github.com/$1">@$1</a>`);
+
+            // PR's links formatting
+            content = content.replaceAll(/\[\#(\S+)\]\(([^)]+)\)/g, `<a target="_blank" href="$2">#$1</a>`);
+
+            return marked.parse(content, {breaks: true});
+        },
+        // Formats an ISO-formatted date into a human-readable string.
+        formatDate(timestamp: string): string {
+            return new Date(timestamp).toLocaleDateString();
+        }
+    }
+});
 </script>
 
-<style scoped>
-.fc__changelog__container {
+<style>
+.el-scrollbar__view {
     padding: 20px 30px;
 }
 
-.el-link {
+.fc__changelog__container {
+    padding: 20px 30px;
+    position: relative;
+    overflow-y: auto;
+    height: calc(100% - var(--fc-menu_height));
     color: white;
 }
+
+.el-timeline-item__timestamp {
+    color: white !important;
+    user-select: none !important;
+}
+
+.el-card__body * {
+    max-width: 100%;
+}
 </style>