Add version runtime tag in footer when served from the API (#182)

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
 
       - uses: actions/setup-elixir@v1
         with:
-          otp-version: 22.x
+          otp-version: 22.3.3
           elixir-version: 1.9.x
 
       - uses: actions/setup-node@v1

lib/web/views/webapp_view.ex

@@ -17,6 +17,11 @@ defmodule Accent.WebappView do
     |> String.replace("__API_HOST__", config[:api_host] || "#{http_scheme}#{default_api_host}")
     |> String.replace("__API_WS_HOST__", config[:api_ws_host] || "#{ws_scheme}#{default_api_host}")
     |> String.replace("__WEBAPP_SENTRY_DSN__", config[:sentry_dsn])
+    |> String.replace("__VERSION__", version())
+  end
+
+  defp version do
+    Application.get_env(:accent, :version)
   end
 
   defp config do

webapp/app/config/environment.d.ts

@@ -11,6 +11,7 @@ declare const config: {
   podModulePrefix: string;
   locationType: string;
   rootURL: string;
+  version: string;
 
   EmberENV: {
     EXTEND_PROTOTYPES: boolean;

webapp/app/pods/components/application-footer/component.ts

@@ -1,6 +1,14 @@
 import Component from '@glimmer/component';
+import config from 'accent-webapp/config/environment';
 
 export default class ApplicationFooter extends Component {
+  // The version is replaced at runtime when served by the API.
+  // If the webapp is not served by the API (like in development),
+  // the version tag will show up as 'dev'.
+  get version() {
+    return config.version === '__VERSION__' ? 'dev' : config.version;
+  }
+
   toggleDark() {
     document.documentElement.setAttribute('data-theme', 'dark');
     localStorage.setItem('theme', 'dark');

webapp/app/pods/components/application-footer/styles.scss

@@ -21,25 +21,45 @@
   max-width: var(--screen-lg);
 }
 
+.meta {
+  display: flex;
+  align-items: center;
+}
+
+.version {
+  font-family: var(--font-monospace);
+  font-size: 10px;
+}
+
 .button-themes {
   opacity: 0;
   display: flex;
+  margin-left: 10px;
   transition: opacity 0.2s ease-in-out;
 }
 
 .button-theme {
+  padding: 0 3px;
+  margin-left: 5px;
   background: none;
   opacity: 0.2;
   color: var(--text-color-normal);
-  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
-}
+  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out,
+    transform 0.2s ease-in;
 
-.button-theme--moon {
-  &.button-theme--enabled,
   &:focus,
   &:hover {
     outline: none;
+  }
+
+  &:hover {
     opacity: 1;
+  }
+}
+
+.button-theme--moon {
+  &:hover {
+    transform: rotate(-20deg);
     color: #5660e4;
   }
 
@@ -50,11 +70,8 @@
 }
 
 .button-theme--sun {
-  &.button-theme--enabled,
-  &:focus,
   &:hover {
-    outline: none;
-    opacity: 1;
+    transform: translateY(-3px);
     color: #dcbc18;
   }
 

webapp/app/pods/components/application-footer/template.hbs

@@ -1,13 +1,20 @@
 <footer local-class="footer">
   <div local-class="inner">
-    <div local-class="button-themes">
-      <button local-class="button-theme button-theme--moon" {{on "click" this.toggleDark}}>
-        {{inline-svg "/assets/moon.svg"}}
-      </button>
-      <button local-class="button-theme button-theme--sun" {{on "click" this.toggleLight}}>
-        {{inline-svg "/assets/sun.svg"}}
-      </button>
+    <div local-class="meta">
+      <span local-class="version">
+        {{this.version}}
+      </span>
+
+      <div local-class="button-themes">
+        <button local-class="button-theme button-theme--moon" {{on "click" this.toggleDark}}>
+          {{inline-svg "/assets/moon.svg"}}
+        </button>
+        <button local-class="button-theme button-theme--sun" {{on "click" this.toggleLight}}>
+          {{inline-svg "/assets/sun.svg"}}
+        </button>
+      </div>
     </div>
+
     <div>
       {{t "components.application_footer.text"}}
       <a local-class="external-link" target="_blank" rel="noopener" href="https://mirego.com">

webapp/config/environment.js

@@ -12,6 +12,7 @@ module.exports = function (environment) {
       : process.env.WEBAPP_SENTRY_DSN;
 
   const ENV = {
+    version: '__VERSION__',
     modulePrefix: 'accent-webapp',
     podModulePrefix: 'accent-webapp/pods',
     environment,