From 9ffdf768b1f30be910df8169ac43639cbdcd3808 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sat, 10 Aug 2024 21:05:40 -0400
Subject: [PATCH] Better no task placeholder (#365)

---
 src/components/sidebar/tabs/QueueSideBarTab.vue | 10 ++++++----
 src/i18n.ts                                     |  4 ++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/tabs/QueueSideBarTab.vue b/src/components/sidebar/tabs/QueueSideBarTab.vue
index 1ef3d5167..6f03b8cf1 100644
--- a/src/components/sidebar/tabs/QueueSideBarTab.vue
+++ b/src/components/sidebar/tabs/QueueSideBarTab.vue
@@ -60,9 +60,11 @@
     </Column>
   </DataTable>
   <div v-else>
-    <Message icon="pi pi-info" severity="error">
-      <span class="ml-2">No tasks</span>
-    </Message>
+    <NoResultsPlaceholder
+      icon="pi pi-info-circle"
+      :title="$t('noTasksFound')"
+      :message="$t('noTasksFoundMessage')"
+    />
   </div>
 </template>
 
@@ -73,7 +75,7 @@ import Tag from 'primevue/tag'
 import Button from 'primevue/button'
 import ConfirmPopup from 'primevue/confirmpopup'
 import Toast from 'primevue/toast'
-import Message from 'primevue/message'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { useConfirm } from 'primevue/useconfirm'
 import { useToast } from 'primevue/usetoast'
 import {
diff --git a/src/i18n.ts b/src/i18n.ts
index 1775f7efd..1aa58b4ca 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -7,6 +7,8 @@ const messages = {
     noResultsFound: 'No Results Found',
     searchFailedMessage:
       "We couldn't find any settings matching your search. Try adjusting your search terms.",
+    noTasksFound: 'No Tasks Found',
+    noTasksFoundMessage: 'There are no tasks in the queue.',
     sideToolBar: {
       themeToggle: 'Toggle Theme',
       queue: 'Queue',
@@ -20,6 +22,8 @@ const messages = {
     settings: '设置',
     searchSettings: '搜索设置',
     noResultsFound: '未找到结果',
+    noTasksFound: '未找到任务',
+    noTasksFoundMessage: '队列中没有任务。',
     searchFailedMessage:
       '我们找不到与您的搜索匹配的任何设置。请尝试调整搜索条件。',
     sideToolBar: {