src/components/TheSidebar.vue

@@ -113,23 +113,20 @@
 import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
 
 import { links } from '@/data/sidebar'
-import { socket } from '@/utils/socket'
 import { useTheme } from '@/use/theme'
+
 import deemixIcon from '@/assets/deemix-icon.svg'
 
 export default defineComponent({
 	setup(props, ctx) {
 		const state = reactive({
 			activeTablink: 'home',
-			updateAvailable: false,
 			links
 		})
 		const { THEMES, currentTheme } = useTheme()
 
 		/* === Add update notification near info === */
-		socket.on('updateAvailable', () => {
-			state.updateAvailable = true
-		})
+		const updateAvailable = computed(() => ctx.root.$store.state.appInfo.updateAvailable)
 
 		ctx.root.$router.afterEach((to, from) => {
 			const linkInSidebar = state.links.find(link => link.routerName === to.name)
@@ -141,6 +138,7 @@ export default defineComponent({
 
 		return {
 			...toRefs(state),
+			updateAvailable,
 			THEMES,
 			currentTheme,
 			isSlim: computed(() => ctx.root.$store.getters.getSlimSidebar),

src/components/pages/About.vue

@@ -26,9 +26,7 @@
 			<li v-html="$t('about.thanks')"></li>
 			<i18n path="about.upToDate.text" tag="li">
 				<template #newsChannel>
-					<a href="https://t.me/RemixDevNews" target="_blank">{{
-						$t('about.upToDate.newsChannel')
-					}}</a>
+					<a href="https://t.me/RemixDevNews" target="_blank">{{ $t('about.upToDate.newsChannel') }}</a>
 				</template>
 			</i18n>
 		</ul>
@@ -42,9 +40,7 @@
 				<a href="https://git.rip/RemixDev/deemix" target="_blank">🚀 {{ $t('about.officialRepo') }}</a>
 			</li>
 			<li>
-				<a href="https://git.rip/RemixDev/deemix-webui" target="_blank">
-					💻 {{ $t('about.officialWebuiRepo') }}
-				</a>
+				<a href="https://git.rip/RemixDev/deemix-webui" target="_blank"> 💻 {{ $t('about.officialWebuiRepo') }} </a>
 			</li>
 			<li>
 				<a href="https://www.reddit.com/r/deemix" target="_blank">🤖 {{ $t('about.officialSubreddit') }}</a>
@@ -63,9 +59,7 @@
 		<ul>
 			<i18n path="about.questions.text" tag="li">
 				<template #subreddit>
-					<a href="https://www.reddit.com/r/deemix" target="_blank">{{
-						$t('about.questions.subreddit')
-					}}</a>
+					<a href="https://www.reddit.com/r/deemix" target="_blank">{{ $t('about.questions.subreddit') }}</a>
 				</template>
 			</i18n>
 			<li>
@@ -241,7 +235,7 @@ ul {
 </style>
 
 <script>
-import { defineComponent, ref, reactive, toRefs, onMounted, computed } from '@vue/composition-api'
+import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 
 import { useOnline } from '@/use/online'
 

src/router.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 // Pages
-//import About from '@components/pages/About.vue'
+import About from '@components/pages/About.vue'
 import InfoArl from '@components/pages/InfoArl.vue'
 import InfoSpotifyFeatures from '@components/pages/InfoSpotifyFeatures.vue'
 import Artist from '@components/pages/Artist.vue'
@@ -82,11 +82,11 @@ const routes = [
 		name: 'Link Analyzer',
 		component: LinkAnalyzer
 	},
-	/*{
+	{
 		path: '/about',
 		name: 'About',
 		component: About
-	},*/
+	},
 	{
 		path: '/info-arl',
 		name: 'ARL',