Better no task placeholder (#365)

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 {

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: {