chore: add central notification (#41)

Author: antonreshetov

package.json

@@ -52,6 +52,7 @@
     "pinia": "^2.0.12",
     "sanitize-html": "^2.7.0",
     "universal-analytics": "^0.5.3",
+    "vercel-toast": "^1.5.5",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12",
     "vue3-perfect-scrollbar": "^1.6.0"

src/main/store/module/app.ts

@@ -8,6 +8,7 @@ export default new Store<AppStore>({
   defaults: {
     bounds: {},
     sidebarWidth: 180,
-    snippetListWidth: 250
+    snippetListWidth: 250,
+    notifySupport: false
   }
 })

src/renderer/App.vue

@@ -27,6 +27,7 @@ import {
   onCopySnippet,
   emitter
 } from '@/composable'
+import { createToast, destroyAllToasts } from 'vercel-toast'
 
 // По какой то причине необходимо явно установить роут в '/'
 // для корректного поведения в продакшен сборке
@@ -79,7 +80,39 @@ const trackAppUpdate = () => {
   store.app.set('version', appStore.version)
 }
 
+const showSupportToast = () => {
+  if (!store.app.get('notifySupport')) {
+    const message = document.createElement('div')
+
+    setTimeout(() => {
+      message.innerHTML = `Hi, Anton here 👋<br><br>
+I need your support. If you find this app useful, please put a star on <a class="external" href="#">github</a>. It will inspire me to continue development on the project.<br><br>My goal is at least 10k stars.`
+
+      createToast(message, {
+        action: {
+          text: 'Close',
+          callback (toast) {
+            toast.destroy()
+            store.app.set('notifySupport', true)
+            track('app/notify', 'support-go-to-github')
+          }
+        }
+      })
+
+      const a = document.querySelector('.external')
+
+      a?.addEventListener('click', () => {
+        ipc.invoke('main:open-url', 'https://github.com/massCodeIO/massCode')
+        store.app.set('notifySupport', true)
+        destroyAllToasts()
+        track('app/notify', 'support-close')
+      })
+    }, 1000 * 60 * 5)
+  }
+}
+
 init()
+showSupportToast()
 
 watch(
   () => appStore.theme,

src/renderer/assets/scss/vendor.scss

@@ -54,4 +54,15 @@
 .ti-autocomplete {
   border: 1px solid var(--color-border) !important;
   background-color: var(--color-bg) !important;
+}
+
+.toast-container {
+  .toast {
+    
+    width: 400px;
+    &-text {
+      display: flex;
+      align-items: center;
+    }
+  }
 }

src/renderer/main.ts

@@ -2,9 +2,10 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import router from './router'
 import App from './App.vue'
-import './assets/scss/main.scss'
 import PerfectScrollbar from 'vue3-perfect-scrollbar'
 import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
+import 'vercel-toast/dist/vercel-toast.css'
+import './assets/scss/main.scss'
 
 createApp(App)
   .use(createPinia())

src/shared/types/main/analytics.d.ts

@@ -24,6 +24,7 @@ type AppEvents =
   | 'install'
   | 'empty-trash'
   | 'set-theme'
+  | 'notify'
 
 type TrackSnippetEvents = CombineWith<SnippetEvents, 'snippets'>
 type TrackFolderEvents = CombineWith<FolderEvents, 'folders'>

src/shared/types/main/store.d.ts

@@ -7,6 +7,7 @@ export interface AppStore {
   sidebarWidth: number
   snippetListWidth: number
   version?: string
+  notifySupport: boolean
 }
 
 interface Editor {

yarn.lock

@@ -11726,6 +11726,11 @@ vendors@^1.0.0:
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
+vercel-toast@^1.5.5:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/vercel-toast/-/vercel-toast-1.5.5.tgz#484355b1113b2f602969eddca1ede9157b22c750"
+  integrity sha512-MTcNPcy9V+aiHIg5iS9h/3UQXHfY00a5pQv4D14XWOql9sUQuiB3mxQXyARLIHT+HblqZgf4awyaleA/ND16tA==
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"