feat: separate workflow state

src/components/newtab/app/AppSidebar.vue

@@ -179,7 +179,7 @@ const tabs = [
 ];
 const hoverIndicator = ref(null);
 const showHoverIndicator = ref(false);
-const runningWorkflowsLen = computed(() => workflowStore.states.length);
+const runningWorkflowsLen = computed(() => workflowStore.getAllStates.length);
 
 useShortcut(
   tabs.reduce((acc, { shortcut }) => {

src/newtab/App.vue

@@ -75,6 +75,7 @@ import { loadLocaleMessages, setI18nLanguage } from '@/lib/vueI18n';
 import { getUserWorkflows } from '@/utils/api';
 import { getWorkflowPermissions } from '@/utils/workflowData';
 import { sendMessage } from '@/utils/message';
+import { workflowState, startWorkflowExec } from '@/workflowEngine';
 import automa from '@business';
 import dbLogs from '@/db/logs';
 import dayjs from '@/lib/dayjs';
@@ -84,7 +85,6 @@ import dataMigration from '@/utils/dataMigration';
 import iconFirefox from '@/assets/svg/logoFirefox.svg';
 import iconChrome from '@/assets/svg/logo.svg';
 import SharedPermissionsModal from '@/components/newtab/shared/SharedPermissionsModal.vue';
-import { startWorkflowExec } from '@/workflowEngine';
 
 let icon;
 if (window.location.protocol === 'moz-extension:') {
@@ -250,7 +250,7 @@ browser.storage.local.onChanged.addListener(({ workflowStates }) => {
 });
 
 useHead(() => {
-  const runningWorkflows = workflowStore.states.length;
+  const runningWorkflows = workflowStore.popupStates.length;
 
   return {
     title: 'Dashboard',
@@ -263,7 +263,7 @@ useHead(() => {
 
 /* eslint-disable-next-line */
 window.onbeforeunload = () => {
-  const runningWorkflows = workflowStore.states.length;
+  const runningWorkflows = workflowStore.popupStates.length;
   if (window.isDataChanged || runningWorkflows > 0) {
     return t('message.notSaved');
   }
@@ -294,6 +294,15 @@ window.addEventListener('message', ({ data }) => {
 
 (async () => {
   try {
+    workflowState.storage = {
+      get() {
+        return workflowStore.popupStates;
+      },
+      set(key, value) {
+        workflowStore.popupStates = Object.values(value);
+      },
+    };
+
     const tabs = await browser.tabs.query({
       url: browser.runtime.getURL('/newtab.html'),
     });

src/newtab/pages/Logs.vue

@@ -11,7 +11,7 @@
     <div v-if="logs" style="min-height: 320px">
       <shared-logs-table
         :logs="logs"
-        :running="workflowStore.states"
+        :running="workflowStore.getAllStates"
         class="w-full"
       >
         <template #item-prepend="{ log }">

src/newtab/pages/logs/Running.vue

@@ -96,7 +96,7 @@ const interval = setInterval(() => {
 }, 1000);
 
 const running = computed(() =>
-  workflowStore.states.find(({ id }) => id === route.params.id)
+  workflowStore.getAllStates.find(({ id }) => id === route.params.id)
 );
 
 function stopWorkflow() {

src/stores/workflow.js

@@ -94,14 +94,18 @@ export const useWorkflowStore = defineStore('workflow', {
   state: () => ({
     states: [],
     workflows: {},
+    popupStates: [],
     retrieved: false,
     isFirstTime: false,
   }),
   getters: {
+    getAllStates: (state) => [...state.popupStates, ...state.states],
     getById: (state) => (id) => state.workflows[id],
     getWorkflows: (state) => Object.values(state.workflows),
     getWorkflowStates: (state) => (id) =>
-      state.states.filter(({ workflowId }) => workflowId === id),
+      [...state.states, ...state.popupStates].filter(
+        ({ workflowId }) => workflowId === id
+      ),
   },
   actions: {
     async loadData() {

src/workflowEngine/index.js

@@ -14,7 +14,7 @@ import blocksHandler from './blocksHandler';
 const workflowStateStorage = {
   get() {
     return browser.storage.local
-      .get('states')
+      .get('workflowStates')
       .then(({ workflowStates }) => workflowStates || []);
   },
   set(key, value) {