feat(popup): add workflow page

package.json

@@ -20,6 +20,7 @@
     "v-remixicon": "^0.0.12",
     "vue": "^3.2.11",
     "vue-router": "^4.0.11",
+    "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2",
     "webext-bridge": "^4.1.1",
     "webextension-polyfill": "^0.8.0"

src/assets/css/fonts.css

@@ -16,16 +16,6 @@
        url('../fonts/inter-v3-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/inter-v3-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-/* inter-700 - latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  src: local(''),
-       url('../fonts/inter-v3-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/inter-v3-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
 
 /* fira-code-regular - latin */
 /* jetbrains-mono-regular - latin */
@@ -37,21 +27,3 @@
        url('../fonts/jetbrains-mono-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/jetbrains-mono-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-/* jetbrains-mono-700 - latin */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-weight: 700;
-  src: local(''),
-       url('../fonts/jetbrains-mono-v6-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/jetbrains-mono-v6-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* jetbrains-mono-italic - latin */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: italic;
-  font-weight: 400;
-  src: local(''),
-       url('../fonts/jetbrains-mono-v6-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/jetbrains-mono-v6-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}

src/assets/css/tailwind.css

@@ -9,7 +9,8 @@ body {
 input:focus,
 button:focus,
 textarea:focus,
-select:focus {
+select:focus,
+[role="button"]:focus {
 	outline: none;
 	@apply ring-2 ring-accent dark:ring-gray-200;
 }
@@ -18,5 +19,8 @@ select:focus {
   @apply hover:bg-gray-800 hover:bg-opacity-5 dark:hover:bg-gray-200 dark:hover:bg-opacity-5;
 }
 .bg-input {
-  @apply bg-black bg-opacity-5 hover:bg-opacity-10 dark:bg-gray-200 dark:bg-opacity-5 dark:hover:bg-opacity-10 focus:ring-2;
+  @apply bg-black bg-opacity-5 hover:bg-opacity-10 dark:bg-gray-200 dark:bg-opacity-5 dark:hover:bg-opacity-10;
+}
+.bg-box-transparent {
+	@apply bg-black bg-opacity-5 dark:bg-gray-200 dark:bg-opacity-5;
 }

src/components/popup/home/HomeWorkflowCard.vue

@@ -6,8 +6,15 @@
       <p class="leading-tight">halo {{ 1 }}</p>
       <p class="leading-none text-gray-500">3 days ago</p>
     </div>
-    <ui-button icon>
+    <router-link to="/workflow/anu" icon title="Execute">
       <v-remixicon name="riPlayLine" />
-    </ui-button>
+    </router-link>
+    <ui-popover class="h-6">
+      <template #trigger>
+        <button>
+          <v-remixicon name="riMoreLine" />
+        </button>
+      </template>
+    </ui-popover>
   </ui-card>
 </template>

src/components/ui/UiButton.vue

@@ -50,7 +50,8 @@ export default {
   setup() {
     const variants = {
       default: 'bg-input',
-      accent: 'bg-accent hover:bg-gray-700 text-white',
+      accent:
+        'bg-accent hover:bg-gray-700 dark:bg-gray-200 dark:text-gray-900 text-white',
       primary:
         'bg-primary text-white dark:bg-secondary dark:hover:bg-primary hover:bg-secondary',
       danger:

src/components/ui/UiListItem.vue

@@ -12,9 +12,7 @@
     "
     role="listitem"
     :class="[
-      active
-        ? 'bg-primary bg-opacity-10 text-primary dark:bg-secondary dark:bg-opacity-10 dark:text-secondary'
-        : 'hoverable',
+      active ? color : 'hoverable',
       small ? 'p-2' : 'py-2 px-4',
       { 'pointer-events-none bg-opacity-75': disabled },
     ]"
@@ -32,6 +30,11 @@ export default {
       type: String,
       default: 'div',
     },
+    color: {
+      type: String,
+      default:
+        'bg-primary text-primary dark:bg-secondary dark:text-secondary bg-opacity-10 dark:bg-opacity-10',
+    },
   },
 };
 </script>

src/lib/v-remixicon.js

@@ -8,6 +8,11 @@ import {
   riDeleteBin7Line,
   riPencilLine,
   riExternalLinkLine,
+  riArrowLeftSLine,
+  riArrowLeftLine,
+  riEditBoxLine,
+  riStopLine,
+  riCheckboxCircleLine,
 } from 'v-remixicon/icons';
 
 vRemixicon.add({
@@ -19,6 +24,13 @@ vRemixicon.add({
   riDeleteBin7Line,
   riPencilLine,
   riExternalLinkLine,
+  riArrowLeftSLine,
+  riArrowLeftLine,
+  riEditBoxLine,
+  riStopLine,
+  riCheckboxCircleLine,
+  mdiDrag:
+    'M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z',
 });
 
 export default vRemixicon;

src/manifest.json

@@ -11,6 +11,7 @@
   "icons": {
     "128": "icon-128.png"
   },
+  "permissions": ["scripting", "storage", "tabs"],
   "web_accessible_resources": [
     {
       "resources": ["content.styles.css", "icon-128.png", "icon-34.png"],

src/popup/pages/Workflow.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="bg-accent rounded-b-2xl h-36 p-5 w-full text-white dark">
+    <div class="flex items-center mb-4 text-gray-100 justify-between">
+      <router-link to="/" class="-ml-2">
+        <v-remixicon name="riArrowLeftSLine" size="28" />
+      </router-link>
+      <a href="/" target="_blank" title="Edit">
+        <v-remixicon name="riEditBoxLine" />
+      </a>
+    </div>
+    <h1 class="text-xl font-semibold">Workflow name</h1>
+  </div>
+  <div class="px-5 mb-2 -mt-10">
+    <ui-card class="mb-4 flex space-x-2">
+      <ui-button class="w-6/12">
+        <v-remixicon class="-ml-1 mr-1" name="riPauseLine" />
+        <span>Pause</span>
+      </ui-button>
+      <ui-button variant="accent" class="w-6/12">
+        <v-remixicon class="-ml-1 mr-1" name="riStopLine" />
+        <span>Stop</span>
+      </ui-button>
+    </ui-card>
+    <p class="mb-1">Tasks</p>
+    <ui-list class="space-y-1">
+      <ui-list-item
+        v-for="task in tasks"
+        :key="task.name"
+        :active="task.status === 'running'"
+        class="relative group"
+        color="bg-box-transparent"
+      >
+        <v-remixicon
+          name="mdiDrag"
+          class="
+            absolute
+            left-0
+            -ml-3
+            group-hover:visible
+            invisible
+            cursor-move
+          "
+        />
+        <ui-spinner
+          v-if="task.status === 'running'"
+          color="text-accent"
+          size="20"
+        ></ui-spinner>
+        <v-remixicon
+          v-else-if="task.status === 'success'"
+          name="riCheckboxCircleLine"
+          class="-ml-0.5"
+        />
+        <p class="ml-3 flex-1">{{ task.name }}</p>
+      </ui-list-item>
+    </ui-list>
+  </div>
+</template>
+<script setup>
+const tasks = [
+  { name: 'Open website', status: 'success' },
+  { name: 'Get data', status: 'success' },
+  { name: 'Close web', status: 'running' },
+];
+</script>

src/popup/router.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import Home from './pages/Home.vue';
+import Workflow from './pages/Workflow.vue';
 
 const routes = [
   {
@@ -7,6 +8,11 @@ const routes = [
     name: 'home',
     component: Home,
   },
+  {
+    path: '/workflow/:id',
+    name: 'workflow',
+    component: Workflow,
+  },
 ];
 
 export default createRouter({

src/utils/helper.js

@@ -0,0 +1,16 @@
+export function debounce(callback, time = 200) {
+  let interval;
+
+  return (...args) => {
+    clearTimeout(interval);
+
+    return new Promise((resolve) => {
+      interval = setTimeout(() => {
+        interval = null;
+
+        callback(...args);
+        resolve();
+      }, time);
+    });
+  };
+}

yarn.lock

@@ -5708,6 +5708,11 @@ sockjs@^0.3.21:
     uuid "^3.4.0"
     websocket-driver "^0.7.4"
 
+sortablejs@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
+
 source-map-js@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
@@ -6363,6 +6368,13 @@ vue@^3.2.11:
     "@vue/runtime-dom" "3.2.11"
     "@vue/shared" "3.2.11"
 
+vuedraggable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
+  dependencies:
+    sortablejs "1.14.0"
+
 vuex@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"