Add blank view for empty channels (#6006)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

plugins/chunter-assets/lang/en.json

@@ -108,6 +108,8 @@
     "UnstarChannel": "Unstar channel",
     "UnstarConversation": "Unstar conversation",
     "JoinChannelHeader": "Click \"Join\" to get started.",
-    "JoinChannelText": "Once you've joined, you'll be able to read all messages and contribute to the discussion."
+    "JoinChannelText": "Once you've joined, you'll be able to read all messages and contribute to the discussion.",
+    "NoMessagesInChannel": "Currently there are no messages",
+    "SendMessagesInChannel": "Send the first message to start the conversation"
   }
 }

plugins/chunter-assets/lang/es.json

@@ -108,6 +108,8 @@
     "UnstarChannel": "Desmarcar canal",
     "UnstarConversation": "Desmarcar conversación",
     "JoinChannelHeader": "Haga clic en \"Unirse\" para comenzar.",
-    "JoinChannelText": "Una vez que se haya unido, podrá leer todos los mensajes y contribuir a la discusión."
+    "JoinChannelText": "Una vez que se haya unido, podrá leer todos los mensajes y contribuir a la discusión.",
+    "NoMessagesInChannel": "No hay mensajes en este canal todavía.",
+    "SendMessagesInChannel": "Envíe mensajes en este canal para comenzar la conversación."
   }
 }

plugins/chunter-assets/lang/fr.json

@@ -108,6 +108,8 @@
     "UnstarChannel": "Retirer le canal des favoris",
     "UnstarConversation": "Retirer la conversation des favoris",
     "JoinChannelHeader": "Cliquez sur \"Rejoindre\" pour commencer.",
-    "JoinChannelText": "Une fois que vous avez rejoint, vous pourrez lire tous les messages et participer à la discussion."
+    "JoinChannelText": "Une fois que vous avez rejoint, vous pourrez lire tous les messages et participer à la discussion.",
+    "NoMessagesInChannel": "Il n'y a pas encore de messages dans ce canal.",
+    "SendMessagesInChannel": "Envoyez des messages pour commencer la conversation."
   }
 }

plugins/chunter-assets/lang/pt.json

@@ -108,6 +108,8 @@
     "UnstarChannel": "Remover destaque do canal",
     "UnstarConversation": "Remover destaque da conversa",
     "JoinChannelHeader": "Clique em \"Participar\" para começar.",
-    "JoinChannelText": "Depois de entrar, você poderá ler todas as mensagens e contribuir na discussão."
+    "JoinChannelText": "Depois de entrar, você poderá ler todas as mensagens e contribuir na discussão.",
+    "NoMessagesInChannel": "Ainda não existem mensagens neste canal.",
+    "SendMessagesInChannel": "Envie a sua primeira mensagem!"
   }
 }

plugins/chunter-assets/lang/ru.json

@@ -108,6 +108,8 @@
     "UnstarChannel": "Удалить из избранного",
     "UnstarConversation": "Удалить из избранного",
     "JoinChannelHeader": "Нажмите \"Присоединиться\", чтобы начать.",
-    "JoinChannelText": "Присоединившись, вы сможете читать все сообщения и участвовать в обсуждении."
+    "JoinChannelText": "Присоединившись, вы сможете читать все сообщения и участвовать в обсуждении.",
+    "NoMessagesInChannel": "В этом канале пока нет сообщений",
+    "SendMessagesInChannel": "Отправьте первое сообщение, чтобы начать общение"
   }
 }

plugins/chunter-assets/lang/zh.json

@@ -108,6 +108,8 @@
     "UnstarChannel": "取消频道星标",
     "UnstarConversation": "取消对话星标",
     "JoinChannelHeader": "点击“加入”开始。",
-    "JoinChannelText": "加入后，你将能够阅读所有消息并参与讨论。"
+    "JoinChannelText": "加入后，你将能够阅读所有消息并参与讨论。",
+    "NoMessagesInChannel": "此频道中没有消息。",
+    "SendMessagesInChannel": "在此频道中发送消息。"
   }
 }

plugins/chunter-resources/src/components/BlankView.svelte

@@ -0,0 +1,50 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { Icon, Label } from '@hcengineering/ui'
+  import { Asset, IntlString } from '@hcengineering/platform'
+
+  export let icon: Asset
+  export let header: IntlString
+  export let label: IntlString
+</script>
+
+<div class="root">
+  <Icon {icon} size="large" />
+  <div class="an-element__label header">
+    <Label label={header} />
+  </div>
+  <span class="an-element__label">
+    <Label {label} />
+  </span>
+</div>
+
+<style lang="scss">
+  .root {
+    display: flex;
+    align-self: center;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    height: 100%;
+    width: 30rem;
+  }
+
+  .header {
+    font-weight: 600;
+    margin: 1rem;
+  }
+</style>

plugins/chunter-resources/src/components/ChannelScrollView.svelte

@@ -26,7 +26,7 @@
   } from '@hcengineering/activity-resources'
   import { Class, Doc, getDay, Ref, Timestamp } from '@hcengineering/core'
   import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
-  import { getResource } from '@hcengineering/platform'
+  import { getEmbeddedLabel, getResource } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { Loading, Scroller, ScrollParams } from '@hcengineering/ui'
   import { afterUpdate, beforeUpdate, onDestroy, onMount, tick } from 'svelte'
@@ -43,6 +43,8 @@
   import ActivityMessagesSeparator from './ChannelMessagesSeparator.svelte'
   import JumpToDateSelector from './JumpToDateSelector.svelte'
   import HistoryLoading from './LoadingHistory.svelte'
+  import BlankView from './BlankView.svelte'
+  import chunter from '../plugin'
 
   export let provider: ChannelDataProvider
   export let object: Doc | undefined
@@ -646,6 +648,13 @@
       {/if}
       <slot name="header" />
 
+      {#if displayMessages.length === 0}
+        <BlankView
+          icon={chunter.icon.Thread}
+          header={chunter.string.NoMessagesInChannel}
+          label={chunter.string.SendMessagesInChannel}
+        />
+      {/if}
       {#each displayMessages as message, index (message._id)}
         {@const isSelected = message._id === selectedMessageId}
         {@const canGroup = canGroupChatMessages(message, displayMessages[index - 1])}

plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte

@@ -27,6 +27,7 @@
   import { savedAttachmentsStore } from '../utils'
   import Header from '../../Header.svelte'
   import { openMessageFromSpecial } from '../../../navigation'
+  import BlankView from '../../BlankView.svelte'
 
   const client = getClient()
 
@@ -108,15 +109,11 @@
         {/if}
       {/each}
     {:else}
-      <div class="empty">
-        <Icon icon={activity.icon.Bookmark} size="large" />
-        <div class="an-element__label header">
-          <Label label={chunter.string.EmptySavedHeader} />
-        </div>
-        <span class="an-element__label">
-          <Label label={chunter.string.EmptySavedText} />
-        </span>
-      </div>
+      <BlankView
+        icon={activity.icon.Bookmark}
+        header={chunter.string.EmptySavedHeader}
+        label={chunter.string.EmptySavedText}
+      />
     {/if}
   </Scroller>
 </div>
@@ -125,21 +122,6 @@
   .body {
     background-color: var(--theme-panel-color);
   }
-  .empty {
-    display: flex;
-    align-self: center;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    height: inherit;
-    width: 30rem;
-  }
-
-  .header {
-    font-weight: 600;
-    margin: 1rem;
-  }
 
   .attachmentContainer {
     cursor: pointer;

plugins/chunter/src/index.ts

@@ -153,7 +153,9 @@ export default plugin(chunterId, {
     StarChannel: '' as IntlString,
     StarConversation: '' as IntlString,
     UnstarChannel: '' as IntlString,
-    UnstarConversation: '' as IntlString
+    UnstarConversation: '' as IntlString,
+    NoMessagesInChannel: '' as IntlString,
+    SendMessagesInChannel: '' as IntlString
   },
   ids: {
     DMNotification: '' as Ref<NotificationType>,