Implement @everyone/@here (#8890)

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

packages/presentation/src/components/SearchResult.svelte

@@ -14,9 +14,9 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { SearchResultDoc } from '@hcengineering/core'
+  import { notEmpty, SearchResultDoc } from '@hcengineering/core'
   import { getResourceC } from '@hcengineering/platform'
-  import { Icon, type AnySvelteComponent } from '@hcengineering/ui'
+  import { Icon, type AnySvelteComponent, IconWithEmoji } from '@hcengineering/ui'
 
   export let value: SearchResultDoc
 
@@ -45,6 +45,15 @@
       <div class="icon-place">
         <svelte:component this={iconComponent} size={'smaller'} {...value.iconComponent?.props} />
       </div>
+    {:else if value.emojiIcon}
+      <div class="emoji">
+        <IconWithEmoji
+          icon={Array.from(value.emojiIcon)
+            .map((c) => c.codePointAt(0))
+            .filter(notEmpty)}
+          size={'small'}
+        />
+      </div>
     {:else if icon !== undefined}
       <Icon {icon} size={'small'} />
     {/if}
@@ -60,6 +69,10 @@
     {:else}
       <span class="name">{value.title}</span>
     {/if}
+
+    {#if value.description !== undefined}
+      <span class="description">{value.description}</span>
+    {/if}
   </span>
 </div>
 
@@ -67,6 +80,14 @@
   .icon-place {
     width: 1.75rem;
   }
+
+  .emoji {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+  }
   .searchResult {
     display: flex;
     flex-direction: row;
@@ -80,5 +101,10 @@
       display: flex;
       flex: 1;
     }
+
+    .description {
+      padding-left: 0.5rem;
+      color: var(--global-secondary-TextColor);
+    }
   }
 </style>

packages/presentation/src/components/markup/ObjectNode.svelte

@@ -16,6 +16,7 @@
   import { Class, Doc, Ref } from '@hcengineering/core'
   import { Component, Icon, showPopup } from '@hcengineering/ui'
   import view from '@hcengineering/view'
+  import contact from '@hcengineering/contact'
 
   import { createQuery, getClient } from '../../utils'
   import MessageBox from '../MessageBox.svelte'
@@ -31,10 +32,14 @@
 
   let doc: Doc | undefined = undefined
   let broken: boolean = false
+  const withoutDoc = [contact.mention.Here, contact.mention.Everyone]
 
-  $: icon = _class !== undefined && hierarchy.hasClass(_class) ? hierarchy.getClass(_class).icon : null
+  $: icon =
+    _class !== undefined && hierarchy.hasClass(_class) && !withoutDoc.includes(_id as any)
+      ? hierarchy.getClass(_class).icon
+      : null
 
-  $: if (_class != null && _id != null && hierarchy.hasClass(_class)) {
+  $: if (_class != null && _id != null && hierarchy.hasClass(_class) && !withoutDoc.includes(_id as any)) {
     docQuery.query(_class, { _id }, (r) => {
       doc = r.shift()
       broken = doc === undefined