feat(snippets): add snippets showcase link

Author: antonreshetov

src/renderer/assets/scss/base.scss

@@ -94,4 +94,9 @@ h6 {
   font-size: var(--text-sm);
   color: var(--color-text-3);
   margin-top: var(--spacing-xs);
+}
+
+.link {
+  text-decoration: underline;
+  cursor: pointer;
 }

src/renderer/components/editor/EditorPreview.vue

@@ -12,6 +12,12 @@
         />
       </div>
       <div class="right">
+        <div
+          class="link"
+          @click="onClickSnippetShowcase"
+        >
+          Snippets Showcase
+        </div>
         <AppActionButton @click="onSaveToHtml">
           <UniconsFileDownload />
         </AppActionButton>
@@ -37,6 +43,7 @@ import { useSnippetStore } from '@/store/snippets'
 import { computed, ref, onMounted, watch } from 'vue'
 import interact from 'interactjs'
 import { useAppStore } from '@/store/app'
+import { ipc, track } from '@/electron'
 
 const snippetStore = useSnippetStore()
 const appStore = useAppStore()
@@ -96,6 +103,11 @@ const onSaveToHtml = () => {
   a.click()
 }
 
+const onClickSnippetShowcase = () => {
+  ipc.invoke('main:open-url', 'https://masscode.io/snippets')
+  track('app/open-url', 'https://masscode.io/snippets')
+}
+
 onMounted(() => {
   interact(previewRef.value).resizable({
     edges: { top: true },
@@ -114,12 +126,18 @@ onMounted(() => {
     height: calc(v-bind(height) - 34px);
   }
   .tools {
+    display: flex;
     height: 34px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 4px var(--spacing-xs);
     border-bottom: 1px solid var(--color-border);
+    .right {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+    }
   }
   iframe {
     background-color: #fff;

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

@@ -22,6 +22,7 @@ type TagEvents = 'add-new' | 'delete'
 type AppEvents =
   | 'move-storage'
   | 'open-storage'
+  | 'open-url'
   | 'migrate'
   | 'update'
   | 'install'