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

client/components/app/SideRail.vue

@@ -121,7 +121,7 @@
       <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
     </div>
 
-    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" :currentPubDate="currentVersionPubDate" />
+    <modals-changelog-view-modal v-model="showChangelogModal" :versionData="versionData" />
   </div>
 </template>
 
@@ -152,9 +152,6 @@ export default {
     paramId() {
       return this.$route.params ? this.$route.params.id || '' : ''
     },
-    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
-    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
@@ -222,12 +219,6 @@ export default {
     githubTagUrl() {
       return this.versionData.githubTagUrl
     },
-    currentVersionChangelog() {
-      return this.versionData.currentVersionChangelog || 'No Changelog Available'
-    },
-    currentVersionPubDate() {
-      return `${this.$formatDate(this.versionData.currentVersionPubDate, this.dateFormat)}` || 'Unknown release date'
-    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },

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,
+    versionData: {
-    currentPubDate: String,
+      type: Object,
-    currentVersion: String
+      default: () => {}
-  },
-  watch: {
-    show: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
     }
   },
   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: {
+  methods: {},
-    init() {}
-  },
   mounted() {}
 }
 </script>