new favicon / admin view imrpovements

frontend/src/App.vue

@@ -1,13 +1,13 @@
 <template>
   <v-app>
     <v-app-bar dense app color="primary" dark class="d-print-none">
-      <div class="d-flex align-center">
-        <v-icon size="40" @click="$router.push('/')">
+      <v-btn @click="$router.push('/')" icon class="d-flex align-center">
+        <v-icon size="40" >
           mdi-silverware-variant
         </v-icon>
-      </div>
-      <div btn class="pl-2" @click="$router.push('/')">
-        <v-toolbar-title>Mealie</v-toolbar-title>
+      </v-btn>
+      <div btn class="pl-2">
+        <v-toolbar-title @click="$router.push('/')">Mealie</v-toolbar-title>
       </div>
 
       <v-spacer></v-spacer>

frontend/src/components/Admin/Admin.vue

@@ -1,9 +1,30 @@
 <template>
   <v-container>
+    <v-alert v-if="newVersion" color="green" type="success" outlined>
+      A New Version of Mealie is Avaiable,
+      <a href="https://github.com/hay-kot/mealie" class="green--text">
+        Visit the Repo
+      </a>
+    </v-alert>
     <Theme />
     <Backup />
     <Webhooks />
     <Migration />
+    <v-card flat dense class="my-2" height="35px">
+      <v-card-text class="text-center">
+        Version: {{ version }} | Latest: {{ latestVersion }} ·
+        <a href="https://hay-kot.github.io/mealie/" target="_blank">
+          Explore the Docs
+        </a>
+        ·
+        <a
+          href="https://hay-kot.github.io/mealie/2.1%20-%20Contributions/"
+          target="_blank"
+        >
+          Contribute
+        </a>
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
 
@@ -12,6 +33,8 @@ import Backup from "./Backup";
 import Webhooks from "./Webhooks";
 import Theme from "./Theme";
 import Migration from "./Migration";
+import axios from "axios";
+
 export default {
   components: {
     Backup,
@@ -19,6 +42,34 @@ export default {
     Theme,
     Migration,
   },
+  data() {
+    return {
+      latestVersion: null,
+      version: "v0.0.1",
+    };
+  },
+  mounted() {
+    this.getVersion();
+  },
+  computed: {
+    newVersion() {
+      if ((this.latestVersion != null) & (this.latestVersion != this.version)) {
+        console.log("New Version Avaiable");
+        return true;
+      } else {
+        return false;
+      }
+    },
+  },
+  methods: {
+    async getVersion() {
+      let response = await axios.get(
+        "https://api.github.com/repos/hay-kot/mealie/releases/latest"
+      );
+      console.log(response);
+      this.latestVersion = response.data.tag_name;
+    },
+  },
 };
 </script>