update version banner in UI

Author: Piotr

src/App.vue

@@ -10,6 +10,7 @@ import Filter from "./components/Filter.vue"
 import Modal from "./components/Modal.vue"
 import AuthPrompt from "./components/AuthPrompt.vue"
 import DemoBar from "./components/DemoBar.vue"
+import UpdateBar from "./components/UpdateBar.vue"
 import Confirm from "./components/ConfirmModal.vue"
 import FeedbackModal from "./components/FeedbackModal.vue"
 import Import from "./components/Import.vue"
@@ -595,9 +596,10 @@ const updateSampleLine = () => {
   <SettingsDrawer v-if="store.settingsDrawer" @close="store.settingsDrawer = false" :layout="(store.layout as Layout)"
     @edit="columnEdited" @remove="columnRemoved" @move="reorderColumns" @settings-update="settingsUpdate"
     @update-sample-line="updateSampleLine" :sampleLine="sampleLine" />
+  <UpdateBar v-if="store.notificationBar" />
   <DemoBar v-if="store.demoMode" @start="store.demoStatus = 'started'" @stop="store.demoStatus = 'stopped'"
     @mode="changeDemoMode" @add="addDemoData(100)" />
-  <div :class="{ 'demo': store.demoMode }">
+  <div :class="{ 'demo': store.demoMode, 'update': store.notificationBar }">
     <div class="top-bar">
       <div class="left">
         <div class="logo">

src/components/UpdateBar.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { useMainStore } from '../store';
+
+const hide = () => {
+
+}
+
+const remind = () => {
+
+}
+
+</script>
+
+<template>
+    <div class="update-bar" v-if="useMainStore().initSettings && useMainStore().initSettings?.updateVersion">
+        <span>🎉 New Logdy v{{ useMainStore().initSettings?.updateVersion.current_version }} available! {{
+            useMainStore().initSettings?.updateVersion.excerpt }} <a
+                :href="useMainStore().initSettings?.updateVersion.blog_link"
+                v-if="useMainStore().initSettings?.updateVersion.blog_link" target="_blank">Read
+                more</a></span>
+        <button @click="hide">Hide</button>
+        <button @click="remind">Remind later</button>
+    </div>
+</template>
+
+<style lang="scss">
+.update {
+    .top-bar {
+        padding-top: 50px !important;
+    }
+
+    .layout {
+        height: calc(100vh - 109px) !important;
+    }
+}
+
+.update-bar {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+
+    width: 100%;
+
+    height: 30px;
+    font-size: 13px;
+    background: #402c6b;
+    border-bottom: 1px solid #583c93;
+
+    span {
+        margin-right: 20px;
+    }
+
+    button {
+        padding: 3px 8px;
+        font-size: 10px;
+        border-radius: 7px;
+        margin-right: 4px;
+    }
+}
+</style>

src/store.ts

@@ -25,6 +25,16 @@ export interface InitSettings {
 
     // this will hold a Layout JSON to load from the backend
     configStr: string;
+
+    updateVersion: {
+        checked: boolean;
+        local_version: string;
+        current_version: string;
+        current_version_published: string;
+        download_link: string;
+        blog_link: string;
+        excerpt: string;
+    }
 }
 
 type ReceiveStatus = "paused" | "following" | "following_cursor"
@@ -413,6 +423,22 @@ export const useMainStore = defineStore("main", () => {
         }
     })
 
+    const getUpdate = () => {
+        return initSettings.value?.updateVersion
+    }
+
+    const notificationBar = computed(() => {
+
+        return false // for until its finished
+
+        // if (!initSettings.value) {
+        //     return false
+        // }
+
+        // return initSettings.value?.updateVersion.checked &&
+        //     initSettings.value.updateVersion.current_version != initSettings.value.updateVersion.local_version
+    })
+
     watch(searchbar, (newVal) => {
         if (!isRecordJson.value) {
             return
@@ -445,6 +471,9 @@ export const useMainStore = defineStore("main", () => {
         status,
         statusStr,
 
+        notificationBar,
+        getUpdate,
+
         receiveStatus,
         receiveCounters,
         changeReceiveStatus,