Update changelog version to link to release, pass versionData into changelog modal

client/components/modals/changelog/ViewModal.vue

@@ -6,7 +6,9 @@
       </div>
     </template>
     <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-scroll" style="max-height: 80vh">
-      <p class="text-xl font-bold pb-4">Changelog v{{ currentVersionNumber }} ({{ currentVersionPubDate }})</p>
+      <p class="text-xl font-bold pb-4">
+        Changelog <a :href="currentTagUrl" target="_blank" class="hover:underline">v{{ currentVersionNumber }}</a> ({{ currentVersionPubDate }})
+      </p>
       <div class="custom-text" v-html="compiledMarkedown" />
     </div>
   </modals-modal>
@@ -18,18 +20,9 @@ import { marked } from '@/static/libs/marked/index.js'
 export default {
   props: {
     value: Boolean,
-    changelog: String,
-    currentPubDate: String,
-    currentVersion: String
-  },
-  watch: {
-    show: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
+    versionData: {
+      type: Object,
+      default: () => {}
     }
   },
   computed: {
@@ -41,19 +34,27 @@ export default {
         this.$emit('input', val)
       }
     },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    changelog() {
+      return this.versionData?.currentVersionChangelog || 'No Changelog Available'
+    },
     compiledMarkedown() {
       return marked.parse(this.changelog, { gfm: true, breaks: true })
     },
     currentVersionPubDate() {
-      return this.currentPubDate
+      if (!this.versionData?.currentVersionPubDate) return 'Unknown release date'
+      return `${this.$formatDate(this.versionData.currentVersionPubDate, this.dateFormat)}`
+    },
+    currentTagUrl() {
+      return this.versionData?.currentTagUrl
     },
     currentVersionNumber() {
-      return this.currentVersion
+      return this.$config.version
     }
   },
-  methods: {
-    init() {}
-  },
+  methods: {},
   mounted() {}
 }
 </script>