💄 Check if update available and show indicator in help menu

WebCrateApp · Sep 4, 2021 · 4486035 · 4486035
1 parent 5de5423
commit 4486035
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 9 deletions.
diff --git a/client/components/Help.vue b/client/components/Help.vue
@@ -2,9 +2,6 @@
   <div v-shortkey="['ctrl', 'h']" class="help-wrapper" @shortkey="show = !show">
     <div v-if="shouldShow" v-click-outside="close" class="help-widget">
       <div v-if="!isPublic">
-        <a href="https://github.com/WebCrateApp/webcrate/releases" target="_blank" rel="noopener" class="no-button">
-          <Icon name="gift" /><span>What's new?</span>
-        </a>
         <a href="https://webcrate.app/docs" target="_blank" rel="noopener" class="no-button">
           <Icon name="docs" /><span>Documentation</span>
         </a>
@@ -13,7 +10,7 @@
         </a>
         <hr>
         <a class="no-button" @click="showBookmarkletModal">
-          <Icon name="bookmark" /><span>Get bookmarklet</span>
+          <Icon name="bookmark" /><span>Get Bookmarklet</span>
         </a>
         <a class="no-button" href="https://webcrate.app/docs/links#browser-extension" target="_blank" rel="noopener">
           <Icon name="desktop" /><span>Browser Extension</span>
@@ -28,17 +25,25 @@
         </a>
       </div>
       <hr>
+      <a v-if="!updateAvailable" href="https://github.com/WebCrateApp/webcrate/releases" target="_blank" rel="noopener" class="no-button">
+        <Icon name="gift" /><span>What's new?</span>
+      </a>
+      <a v-if="updateAvailable" href="https://deta.space/library" target="_blank" rel="noopener" class="no-button">
+        <div class="indicator"></div>
+        <Icon name="gift" /><span>Update Available</span>
+      </a>
       <a class="no-button" @click="toggleTheme">
         <Icon v-if="isDark" name="sun" />
         <Icon v-else name="moon" />
         <span>Change theme</span>
       </a>
       <hr>
-      <p>v{{ version }}</p>
+      <p>v{{ config.version }}</p>
     </div>
     <div class="bottom">
       <Icon v-if="!shouldShow" name="help" class="help-icon" @click.native.stop="show" />
       <Icon v-else name="close" class="help-icon" @click.native.stop="close" />
+      <div v-if="updateAvailable && !shouldShow" class="indicator"></div>
     </div>
   </div>
 </template>
@@ -64,8 +69,11 @@ export default {
 		}
 	},
 	computed: {
-		version() {
-			return this.$version()
+		config() {
+			return this.$store.state.config
+		},
+		updateAvailable() {
+			return this.config.hasUpdate
 		}
 	},
 	created() {
@@ -127,6 +135,35 @@ export default {
 		.bottom {
 			display: flex;
 			justify-content: flex-end;
+			position: relative;
+		}
+
+		.indicator {
+			position: absolute;
+			right: 0;
+			width: 12px;
+			height: 12px;
+			background: var(--accent);
+			border-radius: 100%;
+			box-shadow: 0 0 0 0 rgb(217, 159, 51);
+			animation: pulse-green 3s infinite;
+		}
+
+		@keyframes pulse-green {
+			0% {
+				transform: scale(0.95);
+				box-shadow: 0 0 0 0 rgba(217, 159, 51, 0.7);
+			}
+
+			30% {
+				transform: scale(1);
+				box-shadow: 0 0 0 10px rgba(217, 159, 51, 0);
+			}
+
+			100% {
+				transform: scale(0.95);
+				box-shadow: 0 0 0 0 rgba(217, 159, 51, 0);
+			}
 		}
 
 		.help-widget {

diff --git a/server/router/api/config.ts b/server/router/api/config.ts
@@ -1,4 +1,5 @@
 import express from 'express'
+import got from 'got'
 
 import { Config } from '../../models/config'
 import log from '../../utils/log'
@@ -27,8 +28,25 @@ router.get('/', async (_req: express.Request, res: express.Response, next: expre
 	try {
 		const config = await Config.get()
 
-		log.debug(config)
-		res.ok(config)
+		// Get latest version up on Space and fail gracefully
+		let latestVersion = config.version
+		try {
+			const spaceApp: any = await got.get('https://v1.deta.sh/discovery/apps/webcrate').json()
+			if (spaceApp.version) {
+				latestVersion = spaceApp.version.slice(1)
+			}
+		} catch (err) {
+			log.fatal(err)
+		}
+
+		const result = {
+			...config,
+			hasUpdate: latestVersion !== config.version,
+			latestVersion
+		}
+
+		log.debug(result)
+		res.ok(result)
 	} catch (err) {
 		return next(err)
 	}