Display icon in footer when an update is available

client/components/Sidebar.vue

@@ -52,12 +52,22 @@
 					aria-controls="settings"
 					:aria-selected="$route.name === 'Settings'"
 			/></span>
-			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
+			<span
+				class="tooltipped tooltipped-n tooltipped-no-touch"
+				:aria-label="
+					$store.state.serverConfiguration.isUpdateAvailable
+						? 'Help\n(update available)'
+						: 'Help'
+				"
 				><router-link
 					to="/help"
 					tag="button"
 					active-class="active"
-					:class="['icon', 'help']"
+					:class="[
+						'icon',
+						'help',
+						{notified: $store.state.serverConfiguration.isUpdateAvailable},
+					]"
 					aria-label="Help"
 					role="tab"
 					aria-controls="help"

client/css/style.css

@@ -906,6 +906,18 @@ background on hover (unless active) */
 	border-radius: 5px;
 }
 
+#footer .help.notified::after {
+	content: "\f021";
+	position: absolute;
+	bottom: 10px;
+	right: 7px;
+	padding: 2px;
+	font-size: 10px;
+	border-radius: 50%;
+	color: var(--link-color);
+	background: var(--body-bg-color);
+}
+
 .window li,
 .window p,
 .window label,

src/server.js

@@ -715,6 +715,7 @@ function getClientConfiguration() {
 		]);
 	}
 
+	config.isUpdateAvailable = changelog.isUpdateAvailable;
 	config.applicationServerKey = manager.webPush.vapidKeys.publicKey;
 	config.version = pkg.version;
 	config.gitCommit = Helper.getGitCommit();