feat: add empty state

src/newtab/pages/Collections.vue

@@ -15,6 +15,20 @@
         New collection
       </ui-button>
     </div>
+    <div
+      v-if="Collection.query().count() === 0"
+      class="py-12 flex items-center"
+    >
+      <img src="@/assets/svg/alien.svg" class="w-96" />
+      <div class="ml-4">
+        <h1 class="text-2xl font-semibold max-w-md mb-6">
+          Oppss... It's looks like you don't have any collections.
+        </h1>
+        <ui-button variant="accent" @click="newCollection">
+          New collection
+        </ui-button>
+      </div>
+    </div>
     <div class="grid gap-4 grid-cols-5 2xl:grid-cols-6">
       <shared-card
         v-for="collection in collections"

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

@@ -84,7 +84,25 @@
           </ui-tabs>
         </div>
         <ui-tab-panels v-model="state.activeTab">
-          <ui-tab-panel value="flow">
+          <ui-tab-panel class="relative" value="flow">
+            <div
+              v-if="collection.flow.length === 0"
+              class="
+                border
+                text-gray-600
+                absolute
+                top-0
+                w-full
+                z-0
+                dark:text-gray-200
+                rounded-lg
+                border-dashed
+                text-center
+                p-4
+              "
+            >
+              Drop a workflow or block in here
+            </div>
             <draggable
               :model-value="collectionFlow"
               item-key="id"
@@ -114,6 +132,13 @@
             </draggable>
           </ui-tab-panel>
           <ui-tab-panel value="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 }">
                 <td class="text-right">
@@ -127,6 +152,13 @@
             </shared-logs-table>
           </ui-tab-panel>
           <ui-tab-panel value="running">
+            <div v-if="runningCollection.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 runningCollection"
@@ -136,24 +168,6 @@
             </div>
           </ui-tab-panel>
         </ui-tab-panels>
-        <div
-          v-if="collection.flow.length === 0"
-          class="
-            border
-            text-gray-600
-            absolute
-            top-16
-            w-full
-            z-0
-            dark:text-gray-200
-            rounded-lg
-            border-dashed
-            text-center
-            p-4
-          "
-        >
-          Drop a workflow or block in here
-        </div>
       </div>
     </div>
   </div>