From 8ce19b5a4bbe2dfb604335a52976e03282df87e7 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Sun, 16 Mar 2025 23:18:49 +0300
Subject: [PATCH] Add changeslog page to WebUI

---
 .vscode/settings.json   |  1 +
 ui/layouts/default.vue  |  1 +
 ui/pages/changeslog.vue | 89 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+)
 create mode 100644 ui/pages/changeslog.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d8d4d134..0e44c3c2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -16,6 +16,7 @@
     "ahash",
     "aiocron",
     "arrowless",
+    "changeslog",
     "copyts",
     "daterange",
     "dotenv",
diff --git a/ui/layouts/default.vue b/ui/layouts/default.vue
index 88326724..61882ca4 100644
--- a/ui/layouts/default.vue
+++ b/ui/layouts/default.vue
@@ -91,6 +91,7 @@
           <span class="is-hidden-mobile">&nbsp;({{ config?.app?.version || 'unknown' }})</span>
           - <NuxtLink target="_blank" href="https://github.com/yt-dlp/yt-dlp">yt-dlp</NuxtLink>
           <span class="is-hidden-mobile">&nbsp;({{ config?.app?.ytdlp_version || 'unknown' }})</span>
+          - <NuxtLink :to="`/changeslog?version=${config?.app?.version || 'unknown'}`">CHANGELOG</NuxtLink>
         </div>
       </div>
       <div class="column is-4-mobile" v-if="config.app?.started">
diff --git a/ui/pages/changeslog.vue b/ui/pages/changeslog.vue
new file mode 100644
index 00000000..fc0ec2b7
--- /dev/null
+++ b/ui/pages/changeslog.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div class="mt-1 columns is-multiline">
+      <div class="column is-12 is-clearfix is-unselectable">
+        <span id="env_page_title" class="title is-4">
+          <span class="icon"><i class="fas fa-cogs" /></span>
+          Changes log
+        </span>
+        <div class="is-hidden-mobile">
+          <span class="subtitle">This page displays the application change logs.</span>
+        </div>
+      </div>
+    </div>
+    <div class="column is-12" v-for="(log, index) in logs" :key="log.tag">
+      <div class="content">
+        <h1 class="is-4">
+          <span class="icon-text">
+            <span class="icon"><i class="fas fa-code-branch"></i></span>
+            <span>
+              {{ log.tag }} <span class="tag has-text-success" v-if="isInstalled(log.tag)">Installed</span>
+            </span>
+          </span>
+        </h1>
+        <hr>
+        <ul>
+          <li v-for="commit in log.commits" :key="commit.sha">
+            <strong>{{ ucFirst(commit.message).replace(/\.$/, "") }}.</strong> -
+            <small>
+              <NuxtLink :to="`https://github.com/arabcoders/watchstate/commit/${commit.sha}`" target="_blank">
+                <span class="has-tooltip" v-tooltip="`SHA: ${commit.sha} - Date: ${commit.date}`">
+                  {{ moment(commit.date).fromNow() }}
+                </span>
+              </NuxtLink>
+            </small>
+          </li>
+        </ul>
+        <hr v-if="index < logs.length - 1">
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import moment from 'moment'
+
+useHead({ title: 'Change log' })
+
+const REPO_URL = "https://arabcoders.github.io/ytptube/CHANGELOG-{branch}.json?version={version}";
+const logs = ref([]);
+const config = useConfigStore()
+const api_version = ref('')
+const toast = useToast()
+
+const branch = computed(() => {
+  const branch = String(api_version.value).split('-')[0] ?? 'master';
+  return ['master', 'dev'].includes(branch) ? branch : 'master';
+});
+
+watch(() => config.app.version, async value => {
+  if (!value) {
+    return
+  }
+
+  api_version.value = value
+
+  await nextTick();
+  await loadContent();
+}, { immediate: true })
+
+const loadContent = async () => {
+  if ('' === api_version.value) {
+    return
+  }
+
+  try {
+    const changes = await fetch(r(REPO_URL, { branch: branch.value, version: api_version.value }));
+    logs.value = await changes.json();
+  } catch (e) {
+    console.error(e);
+    notification('error', 'Error', `Failed to fetch changelog. ${e.message}`);
+  }
+}
+
+const isInstalled = tag => {
+  const installed = String(api_version.value).split('-').pop();
+  return tag.endsWith(installed);
+}
+
+onMounted(() => loadContent());
+</script>