feat: add browse button

src/content/element-selector/AppSelector.vue

@@ -13,10 +13,10 @@
       </template>
     </ui-input>
     <template v-if="selectedCount === 1">
-      <button class="mr-2 ml-4" @click="$emit('parent')">
+      <button class="mr-2 ml-4" title="Parent element" @click="$emit('parent')">
         <v-remixicon rotate="90" name="riArrowLeftLine" />
       </button>
-      <button @click="$emit('child')">
+      <button title="Child element" @click="$emit('child')">
         <v-remixicon rotate="-90" name="riArrowLeftLine" />
       </button>
     </template>

src/content/shortcut.js

@@ -48,10 +48,9 @@ async function listenWindowMessage(workflows) {
       },
     });
 
-    db.put('store', workflows, 'workflows');
+    await db.put('store', workflows, 'workflows');
 
     const webListener = initWebListener();
-
     webListener.on('open-workflow', ({ workflowId }) => {
       if (!workflowId) return;
 

src/lib/v-remixicon.js

@@ -3,6 +3,7 @@ import {
   riHome5Line,
   riFolderZipLine,
   riHandHeartLine,
+  riCompass3Line,
   riFileCopyLine,
   riShieldKeyholeLine,
   riToggleLine,
@@ -80,6 +81,7 @@ export const icons = {
   riHome5Line,
   riFolderZipLine,
   riHandHeartLine,
+  riCompass3Line,
   riFileCopyLine,
   riShieldKeyholeLine,
   riToggleLine,

src/locales/en/newtab.json

@@ -13,6 +13,7 @@
     "import": "Import workflow",
     "new": "New workflow",
     "delete": "Delete workflow",
+    "browse": "Browse workflows",
     "name": "Workflow name",
     "rename": "Rename workflow",
     "add": "Add workflow",

src/newtab/pages/Workflows.vue

@@ -26,6 +26,36 @@
           </option>
         </ui-select>
       </div>
+      <ui-button
+        tag="a"
+        href="https://automa.vercel.app/workflows"
+        target="_blank"
+        class="inline-block relative"
+        @click="browseWorkflow"
+      >
+        <span
+          v-if="state.highlightBrowse"
+          class="flex h-3 w-3 absolute top-0 right-0 -mr-1 -mt-1"
+        >
+          <span
+            class="
+              animate-ping
+              absolute
+              inline-flex
+              h-full
+              w-full
+              rounded-full
+              bg-primary
+              opacity-75
+            "
+          ></span>
+          <span
+            class="relative inline-flex rounded-full h-3 w-3 bg-blue-600"
+          ></span>
+        </span>
+        <v-remixicon name="riCompass3Line" class="mr-2 -ml-1" />
+        {{ t('workflow.browse') }}
+      </ui-button>
       <ui-button @click="importWorkflow">
         <v-remixicon name="riUploadLine" class="mr-2 -ml-1" />
         {{ t('workflow.import') }}
@@ -168,6 +198,7 @@ const menu = [
 const savedSorts = JSON.parse(localStorage.getItem('workflow-sorts') || '{}');
 const state = shallowReactive({
   query: '',
+  highlightBrowse: !localStorage.getItem('first-time-browse'),
   sortBy: savedSorts.sortBy || 'createdAt',
   sortOrder: savedSorts.sortOrder || 'desc',
 });
@@ -186,6 +217,10 @@ const workflows = computed(() =>
     .get()
 );
 
+function browseWorkflow() {
+  state.highlightBrowse = false;
+  localStorage.setItem('first-time-browse', false);
+}
 function executeWorkflow(workflow) {
   sendMessage('workflow:execute', workflow, 'background');
 }