feat(newtab): add workflow details card

src/components/newtab/workflow/WorkflowCard.vue

@@ -1,18 +1,18 @@
 <template>
   <ui-card class="hover:ring-accent hover:ring-2">
-    <div class="mb-6 flex items-center">
-      <span class="p-2 rounded-full bg-accent inline-block text-white">
+    <div class="mb-4 flex items-center">
+      <span class="p-2 rounded-lg bg-box-transparent inline-block">
         <v-remixicon name="riGlobalLine" />
       </span>
       <div class="flex-grow"></div>
-      <button class="mr-3">
+      <button>
         <v-remixicon name="riPlayLine" />
       </button>
-      <button>
+      <button v-if="showDetails" class="ml-3">
         <v-remixicon name="riMoreLine" />
       </button>
     </div>
-    <router-link to="/workflow">
+    <router-link to="/workflows/anId">
       <p class="line-clamp leading-tight font-semibold">Workflow name</p>
       <p class="text-gray-600 dark:text-gray-200 leading-tight text-overflow">
         3 Days ago
@@ -20,3 +20,12 @@
     </router-link>
   </ui-card>
 </template>
+<script setup>
+/* eslint-disable-next-line */
+defineProps({
+  showDetails: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -0,0 +1,97 @@
+<template>
+  <ui-card class="w-80 h-full" padding="p-0">
+    <div class="mb-4 px-4 pt-4">
+      <span
+        class="p-2 inline-block align-middle rounded-lg bg-box-transparent mr-2"
+      >
+        <v-remixicon name="riGlobalLine" />
+      </span>
+      <p class="font-semibold text-lg inline-block align-middle">
+        Workflow name
+      </p>
+    </div>
+    <div class="flex items-center px-4">
+      <ui-button variant="accent" class="flex-1 mr-2">
+        <v-remixicon class="-ml-1 mr-1" name="riPlayLine" />
+        Execute
+      </ui-button>
+      <ui-button icon class="text-red-500">
+        <v-remixicon name="riDeleteBin7Line" />
+      </ui-button>
+    </div>
+    <div class="flex mb-4 mt-5 mx-4 items-center space-x-2 border-b">
+      <div class="border-b-2 pb-1 flex-1 border-accent">
+        <button class="p-2 hoverable w-full rounded-lg transition">
+          Tasks
+        </button>
+      </div>
+      <div class="border-b-2 pb-1 flex-1 border-transparent">
+        <button class="p-2 hoverable w-full rounded-lg transition">
+          Data Schema
+        </button>
+      </div>
+    </div>
+    <!-- <hr class="mb-4 mt-5 mx-4" />
+    <p class="mb-1 px-4 text-gray-600">Tasks</p> -->
+    <div
+      class="px-4 grid grid-cols-2 gap-2 pb-4 overflow-auto pt-1"
+      style="max-height: calc(100vh - 200px)"
+    >
+      <div
+        v-for="task in taskList"
+        :key="task.id"
+        :title="task.name"
+        class="cursor-move select-none group p-4 rounded-lg bg-input transition"
+      >
+        <v-remixicon :name="task.icon" size="24" class="mb-2" />
+        <p class="leading-tight text-overflow">
+          {{ task.name }}
+        </p>
+      </div>
+    </div>
+  </ui-card>
+</template>
+<script setup>
+const taskList = [
+  {
+    id: 'event-click',
+    name: 'Click element',
+    icon: 'riCursorLine',
+  },
+  {
+    id: 'export-data',
+    name: 'Export data',
+    icon: 'riDownloadLine',
+  },
+  {
+    id: 'element-scroll',
+    name: 'Scroll element',
+    icon: 'riMouseLine',
+  },
+  {
+    id: 'open-website',
+    name: 'Open website',
+    icon: 'riGlobalLine',
+  },
+  {
+    id: 'text-input',
+    name: 'Text input',
+    icon: 'riInputCursorMove',
+  },
+  {
+    id: 'repeat-task',
+    name: 'Repeat tasks',
+    icon: 'riRepeat2Line',
+  },
+  {
+    id: 'get-attribute',
+    name: 'Get attribute',
+    icon: 'riBracketsLine',
+  },
+  {
+    id: 'trigger-events',
+    name: 'Trigger events',
+    icon: 'riEqualizerLine',
+  },
+].sort((a, b) => (a.name > b.name ? 1 : -1));
+</script>

src/lib/v-remixicon.js

@@ -21,6 +21,13 @@ import {
   riSortDesc,
   riGlobalLine,
   riMore2Line,
+  riInputCursorMove,
+  riRepeat2Line,
+  riMouseLine,
+  riBracketsLine,
+  riEqualizerLine,
+  riCursorLine,
+  riDownloadLine,
 } from 'v-remixicon/icons';
 
 vRemixicon.add({
@@ -45,6 +52,13 @@ vRemixicon.add({
   riSortDesc,
   riGlobalLine,
   riMore2Line,
+  riInputCursorMove,
+  riRepeat2Line,
+  riMouseLine,
+  riBracketsLine,
+  riEqualizerLine,
+  riCursorLine,
+  riDownloadLine,
   mdiDrag:
     'M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z',
 });

src/newtab/pages/Home.vue

@@ -3,7 +3,7 @@
   <div class="flex items-start">
     <div class="w-7/12 mr-8">
       <div class="grid gap-3 mb-8 grid-cols-3">
-        <workflow-card v-for="i in 3" :key="i" />
+        <workflow-card v-for="i in 3" :key="i" :show-details="false" />
       </div>
       <div>
         <div class="mb-4 flex items-center justify-between">

src/newtab/pages/workflows/[id].vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex items-center">
+    <workflow-details-card />
+  </div>
+</template>
+<script setup>
+import WorkflowDetailsCard from '@/components/newtab/workflow/WorkflowDetailsCard.vue';
+</script>

src/newtab/router.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import Home from './pages/Home.vue';
 import Workflows from './pages/Workflows.vue';
+import WorkflowDetails from './pages/workflows/[id].vue';
 import Logs from './pages/Logs.vue';
 
 const routes = [
@@ -14,6 +15,11 @@ const routes = [
     path: '/workflows',
     component: Workflows,
   },
+  {
+    name: 'workflows-details',
+    path: '/workflows/:id',
+    component: WorkflowDetails,
+  },
   {
     name: 'logs',
     path: '/logs',