feat: update dashboard UI and chrome manifest file

src/background/BackgroundEventsListeners.js

@@ -0,0 +1,9 @@
+import BackgroundUtils from './BackgroundUtils';
+
+class BackgroundEventsListeners {
+  static onActionClicked() {
+    BackgroundUtils.openDashboard();
+  }
+}
+
+export default BackgroundEventsListeners;

src/background/BackgroundUtils.js

@@ -0,0 +1,38 @@
+import browser from 'webextension-polyfill';
+
+class BackgroundUtils {
+  static async openDashboard(url) {
+    const tabUrl = browser.runtime.getURL(
+      `/newtab.html#${typeof url === 'string' ? url : ''}`
+    );
+
+    try {
+      const [tab] = await browser.tabs.query({
+        url: browser.runtime.getURL('/newtab.html'),
+      });
+
+      if (tab) {
+        await browser.tabs.update(tab.id, { url: tabUrl, active: true });
+        await browser.windows.update(tab.windowId, {
+          focused: true,
+          state: 'maximized',
+        });
+
+        if (tabUrl.includes('workflows/')) {
+          await browser.tabs.reload(tab.id);
+        }
+      } else {
+        browser.windows.create({
+          url: tabUrl,
+          focused: true,
+          type: 'popup',
+          state: 'maximized',
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+export default BackgroundUtils;

src/background/index.js

@@ -18,6 +18,8 @@ import WorkflowState from './WorkflowState';
 import WorkflowEngine from './workflowEngine/engine';
 import blocksHandler from './workflowEngine/blocksHandler';
 import WorkflowLogger from './WorkflowLogger';
+import BackgroundUtils from './BackgroundUtils';
+import BackgroundEventsListeners from './BackgroundEventsListeners';
 
 const validateUrl = (str) => str?.startsWith('http');
 const flattenTeamWorkflows = (workflows) =>
@@ -207,32 +209,6 @@ async function updateRecording(callback) {
 
   await browser.storage.local.set({ recording });
 }
-async function openDashboard(url) {
-  const tabOptions = {
-    active: true,
-    url: browser.runtime.getURL(
-      `/newtab.html#${typeof url === 'string' ? url : ''}`
-    ),
-  };
-
-  try {
-    const [tab] = await browser.tabs.query({
-      url: browser.runtime.getURL('/newtab.html'),
-    });
-
-    if (tab) {
-      await browser.tabs.update(tab.id, tabOptions);
-
-      if (tabOptions.url.includes('workflows/')) {
-        await browser.tabs.reload(tab.id);
-      }
-    } else {
-      browser.tabs.create(tabOptions);
-    }
-  } catch (error) {
-    console.error(error);
-  }
-}
 async function checkVisitWebTriggers(tabId, tabUrl) {
   const visitWebTriggers = await browserStorage.get('visitWebTriggers');
   if (!visitWebTriggers || visitWebTriggers.length === 0) return;
@@ -279,7 +255,7 @@ browser.webNavigation.onCompleted.addListener(
   }
 );
 browser.commands.onCommand.addListener((name) => {
-  if (name === 'open-dashboard') openDashboard();
+  if (name === 'open-dashboard') BackgroundUtils.openDashboard();
 });
 browser.webNavigation.onCommitted.addListener(
   ({ frameId, tabId, url, transitionType }) => {
@@ -433,6 +409,7 @@ browser.alarms.onAlarm.addListener(async ({ name }) => {
     }
   }
 });
+browser.action.onClicked.addListener(BackgroundEventsListeners.onActionClicked);
 
 const contextMenu =
   BROWSER_TYPE === 'firefox' ? browser.menus : browser.contextMenus;
@@ -470,7 +447,7 @@ if (browser.notifications && browser.notifications.onClicked) {
   browser.notifications.onClicked.addListener((notificationId) => {
     if (notificationId.startsWith('logs')) {
       const { 1: logId } = notificationId.split(':');
-      openDashboard(`/logs/${logId}`);
+      BackgroundUtils.openDashboard(`/logs/${logId}`);
     }
   });
 }
@@ -570,7 +547,7 @@ message.on('fetch:text', (url) => {
   return fetch(url).then((response) => response.text());
 });
 message.on('open:dashboard', async (url) => {
-  await openDashboard(url);
+  await BackgroundUtils.openDashboard(url);
 
   return Promise.resolve(true);
 });
@@ -660,7 +637,7 @@ message.on('workflow:added', ({ workflowId, teamId, source = 'community' }) => {
           active: true,
         });
       } else {
-        openDashboard(`${path}?permission=true`);
+        BackgroundUtils.openDashboard(`${path}?permission=true`);
       }
     });
 });

src/components/newtab/logs/LogsFilters.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="flex items-center mb-6 space-x-4">
+  <div class="flex items-center mb-6 md:space-x-4 flex-wrap">
     <ui-input
       id="search-input"
       :model-value="filters.query"
       :placeholder="`${t('common.search')}... (${
         shortcut['action:search'].readable
       })`"
       prepend-icon="riSearch2Line"
-      class="flex-1"
+      class="w-6/12 md:w-auto md:flex-1"
       @change="updateFilters('query', $event)"
     />
-    <div class="flex items-center workflow-sort">
+    <div class="flex items-center workflow-sort w-5/12 ml-4 md:ml-0 md:w-auto">
       <ui-button
         icon
         class="rounded-r-none border-gray-300 border-r"
@@ -30,7 +30,7 @@
         </option>
       </ui-select>
     </div>
-    <ui-popover>
+    <ui-popover class="mt-4 md:mt-0">
       <template #trigger>
         <ui-button>
           <v-remixicon name="riFilter2Line" class="mr-2 -ml-1" />
@@ -68,7 +68,7 @@
         </ui-select>
       </div>
     </ui-popover>
-    <ui-button @click="$emit('clear')">
+    <ui-button class="ml-4 md:ml-0 mt-4 md:mt-0" @click="$emit('clear')">
       <v-remixicon name="riDeleteBin7Line" class="mr-2 -ml-1" />
       <span>
         {{ t('log.clearLogs.title') }}

src/components/newtab/logs/LogsHistory.vue

@@ -8,8 +8,8 @@
     <v-remixicon name="riArrowLeftLine" class="mr-2" />
     {{ t('log.goBack', { name: parentLog.name }) }}
   </router-link>
-  <div class="flex items-start">
-    <div class="flex-1">
+  <div class="flex items-start flex-col-reverse lg:flex-row">
+    <div class="lg:flex-1 w-full lg:w-auto">
       <div class="rounded-lg bg-gray-900 dark:bg-gray-800 text-gray-100 dark">
         <div
           class="border-b px-4 pt-4 flex items-center text-gray-200 pb-4 mb-4"
@@ -47,7 +47,7 @@
           <ui-popover trigger-width class="mr-4">
             <template #trigger>
               <ui-button>
-                <span>Export logs</span>
+                <span> Export <span class="hidden lg:block">logs</span> </span>
                 <v-remixicon name="riArrowDropDownLine" class="ml-2 -mr-1" />
               </ui-button>
             </template>
@@ -173,9 +173,9 @@
       </div>
       <div
         v-if="currentLog.history.length >= 25"
-        class="flex items-center justify-between mt-4"
+        class="lg:flex lg:items-center lg:justify-between mt-4"
       >
-        <div>
+        <div class="mb-4 lg:mb-0">
           {{ t('components.pagination.text1') }}
           <select v-model="pagination.perPage" class="p-1 rounded-md bg-input">
             <option
@@ -201,7 +201,7 @@
     </div>
     <div
       v-if="state.itemId && activeLog"
-      class="w-4/12 ml-8 rounded-lg bg-gray-900 dark:bg-gray-800 text-gray-100 dark"
+      class="w-full lg:w-4/12 lg:ml-8 mb-4 lg:mb-0 rounded-lg bg-gray-900 dark:bg-gray-800 text-gray-100 dark"
     >
       <div class="p-4 relative">
         <v-remixicon

src/components/newtab/shared/SharedLogsTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="logs-table">
+  <div class="logs-table overflow-x-auto scroll">
     <transition-expand>
       <div v-if="state.selected.length > 0" class="border-x border-t px-4 py-2">
         <ui-button @click="stopSelectedWorkflow"> Stop selected </ui-button>
@@ -26,8 +26,8 @@
               </router-link>
             </td>
             <td
-              class="log-time w-2/12 dark:text-gray-200"
               :title="t('log.duration')"
+              class="log-time w-2/12 dark:text-gray-200"
             >
               <v-remixicon name="riTimerLine"></v-remixicon>
               <span>{{
@@ -73,7 +73,10 @@
               {{ log.name }}
             </router-link>
           </td>
-          <td class="log-time w-3/12 dark:text-gray-200">
+          <td
+            class="log-time w-3/12 dark:text-gray-200"
+            style="min-width: 200px"
+          >
             <v-remixicon
               :title="t('log.startedDate')"
               name="riCalendarLine"
@@ -84,8 +87,9 @@
             </span>
           </td>
           <td
-            class="log-time w-2/12 dark:text-gray-200"
             :title="t('log.duration')"
+            class="log-time w-2/12 dark:text-gray-200"
+            style="min-width: 85px"
           >
             <v-remixicon name="riTimerLine"></v-remixicon>
             <span>{{ countDuration(log.startedAt, log.endedAt) }}</span>

src/components/newtab/storage/StorageCredentials.vue

@@ -6,7 +6,12 @@
       prepend-icon="riSearch2Line"
     />
     <div class="flex-grow"></div>
-    <ui-button variant="accent" @click="addState.show = true">
+    <ui-button
+      variant="accent"
+      style="min-width: 120px"
+      class="ml-4"
+      @click="addState.show = true"
+    >
       {{ t('credential.add') }}
     </ui-button>
   </div>

src/components/newtab/storage/StorageTables.vue

@@ -6,40 +6,47 @@
       prepend-icon="riSearch2Line"
     />
     <div class="flex-grow"></div>
-    <ui-button variant="accent" @click="state.showAddTable = true">
+    <ui-button
+      variant="accent"
+      class="ml-4"
+      style="min-width: 120px"
+      @click="state.showAddTable = true"
+    >
       {{ t('storage.table.add') }}
     </ui-button>
   </div>
-  <ui-table
-    item-key="id"
-    :headers="tableHeaders"
-    :items="items"
-    :search="state.query"
-    class="w-full mt-4"
-  >
-    <template #item-name="{ item }">
-      <router-link
-        :to="`/storage/tables/${item.id}`"
-        class="w-full block"
-        style="min-height: 29px"
-      >
-        {{ item.name }}
-      </router-link>
-    </template>
-    <template #item-createdAt="{ item }">
-      {{ formatDate(item.createdAt) }}
-    </template>
-    <template #item-modifiedAt="{ item }">
-      {{ formatDate(item.modifiedAt) }}
-    </template>
-    <template #item-actions="{ item }">
-      <v-remixicon
-        name="riDeleteBin7Line"
-        class="cursor-pointer"
-        @click="deleteTable(item)"
-      />
-    </template>
-  </ui-table>
+  <div class="overflow-x-auto w-full scroll">
+    <ui-table
+      item-key="id"
+      :headers="tableHeaders"
+      :items="items"
+      :search="state.query"
+      class="w-full mt-4"
+    >
+      <template #item-name="{ item }">
+        <router-link
+          :to="`/storage/tables/${item.id}`"
+          class="w-full block"
+          style="min-height: 29px"
+        >
+          {{ item.name }}
+        </router-link>
+      </template>
+      <template #item-createdAt="{ item }">
+        {{ formatDate(item.createdAt) }}
+      </template>
+      <template #item-modifiedAt="{ item }">
+        {{ formatDate(item.modifiedAt) }}
+      </template>
+      <template #item-actions="{ item }">
+        <v-remixicon
+          name="riDeleteBin7Line"
+          class="cursor-pointer"
+          @click="deleteTable(item)"
+        />
+      </template>
+    </ui-table>
+  </div>
   <storage-edit-table v-model="state.showAddTable" @save="saveTable" />
 </template>
 <script setup>
@@ -68,17 +75,24 @@ const tableHeaders = [
     text: t('common.name'),
     attrs: {
       class: 'w-4/12',
+      style: 'min-width: 120px',
     },
   },
   {
     align: 'center',
     value: 'createdAt',
     text: t('storage.table.createdAt'),
+    attrs: {
+      style: 'min-width: 200px',
+    },
   },
   {
     align: 'center',
     value: 'modifiedAt',
     text: t('storage.table.modifiedAt'),
+    attrs: {
+      style: 'min-width: 200px',
+    },
   },
   {
     value: 'rowsCount',

src/components/newtab/storage/StorageVariables.vue

@@ -6,7 +6,12 @@
       prepend-icon="riSearch2Line"
     />
     <div class="flex-grow"></div>
-    <ui-button variant="accent" @click="editState.show = true">
+    <ui-button
+      variant="accent"
+      style="min-width: 125px"
+      class="ml-4"
+      @click="editState.show = true"
+    >
       Add variable
     </ui-button>
   </div>