feat: add empty state

src/background/blocks-handler.js

@@ -49,7 +49,6 @@ export async function closeTab(block) {
       );
     }
 
-    console.log(tabIds);
     if (tabIds) await browser.tabs.remove(tabIds);
 
     return {

src/newtab/App.vue

@@ -6,7 +6,6 @@
   <ui-dialog />
 </template>
 <script setup>
-/* to-do add empty-state */
 import { ref } from 'vue';
 import { useStore } from 'vuex';
 import browser from 'webextension-polyfill';

src/newtab/pages/Home.vue

@@ -4,6 +4,9 @@
     <div class="flex items-start">
       <div class="w-8/12 mr-8">
         <div class="grid gap-4 mb-8 grid-cols-3">
+          <p v-if="workflows.length === 0" class="text-center text-gray-600">
+            No data
+          </p>
           <workflow-card
             v-for="workflow in workflows"
             v-bind="{ workflow }"
@@ -22,10 +25,16 @@
               View all
             </router-link>
           </div>
+          <p v-if="logs.length === 0" class="text-center text-gray-600">
+            No data
+          </p>
           <shared-logs-table :logs="logs" class="w-full" />
         </div>
       </div>
       <div class="w-4/12 space-y-4">
+        <p v-if="workflowState.length === 0" class="text-center text-gray-600">
+          No data
+        </p>
         <shared-workflow-state
           v-for="item in workflowState"
           :id="item.id"

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

@@ -56,29 +56,43 @@
         @deleteBlock="deleteBlock"
       />
       <div v-else class="container pb-4 mt-24 px-4">
-        <shared-logs-table
-          v-if="activeTab === 'logs'"
-          :logs="logs"
-          class="w-full"
-        >
-          <template #item-append="{ log: itemLog }">
-            <td class="text-right">
-              <v-remixicon
-                name="riDeleteBin7Line"
-                class="inline-block text-red-500 cursor-pointer"
-                @click="deleteLog(itemLog.id)"
-              />
-            </td>
-          </template>
-        </shared-logs-table>
-        <div v-else-if="activeTab === 'running'" class="grid grid-cols-2 gap-4">
-          <shared-workflow-state
-            v-for="item in workflowState"
-            :id="item.id"
-            :key="item.id"
-            :state="item.state"
-          />
-        </div>
+        <template v-if="activeTab === 'logs'">
+          <div v-if="logs.length === 0" class="text-center">
+            <img
+              src="@/assets/svg/files-and-folder.svg"
+              class="mx-auto max-w-sm"
+            />
+            <p class="text-xl font-semibold">No data to show</p>
+          </div>
+          <shared-logs-table :logs="logs" class="w-full">
+            <template #item-append="{ log: itemLog }">
+              <td class="text-right">
+                <v-remixicon
+                  name="riDeleteBin7Line"
+                  class="inline-block text-red-500 cursor-pointer"
+                  @click="deleteLog(itemLog.id)"
+                />
+              </td>
+            </template>
+          </shared-logs-table>
+        </template>
+        <template v-else-if="activeTab === 'running'">
+          <div v-if="workflowState.length === 0" class="text-center">
+            <img
+              src="@/assets/svg/files-and-folder.svg"
+              class="mx-auto max-w-sm"
+            />
+            <p class="text-xl font-semibold">No data to show</p>
+          </div>
+          <div class="grid grid-cols-2 gap-4">
+            <shared-workflow-state
+              v-for="item in workflowState"
+              :id="item.id"
+              :key="item.id"
+              :state="item.state"
+            />
+          </div>
+        </template>
       </div>
     </div>
   </div>