Add widgets sidebar (#6578)

plugins/notification-resources/src/components/Notification.svelte

@@ -3,8 +3,12 @@
   import { Avatar, personAccountByIdStore, personByIdStore } from '@hcengineering/contact-resources'
   import { Ref } from '@hcengineering/core'
   import { BrowserNotification } from '@hcengineering/notification'
-  import { Button, Notification as PlatformNotification, NotificationToast, navigate } from '@hcengineering/ui'
-  import view from '@hcengineering/view'
+  import { Button, navigate, Notification as PlatformNotification, NotificationToast } from '@hcengineering/ui'
+  import view, { decodeObjectURI } from '@hcengineering/view'
+  import chunter from '@hcengineering/chunter'
+  import { getResource } from '@hcengineering/platform'
+  import { ActivityMessage } from '@hcengineering/activity'
+
   import { pushAvailable, subscribePush } from '../utils'
   import plugin from '../plugin'
 
@@ -16,6 +20,23 @@
   $: senderAccount =
     value.senderId !== undefined ? $personAccountByIdStore.get(value.senderId as Ref<PersonAccount>) : undefined
   $: sender = senderAccount !== undefined ? $personByIdStore.get(senderAccount.person) : undefined
+
+  async function openChannelInSidebar (): Promise<void> {
+    if (!value.onClickLocation) return
+    const { onClickLocation } = value
+    const [_id, _class] = decodeObjectURI(onClickLocation.path[3] ?? '')
+
+    onRemove()
+
+    if (!_id || !_class || _id === '' || _class === '') {
+      navigate(onClickLocation)
+      return
+    }
+
+    const thread = onClickLocation.path[4] as Ref<ActivityMessage> | undefined
+    const fn = await getResource(chunter.function.OpenChannelInSidebar)
+    await fn(_id, _class, undefined, thread)
+  }
 </script>
 
 <NotificationToast title={notification.title} severity={notification.severity} onClose={onRemove}>
@@ -35,10 +56,7 @@
       <Button
         label={view.string.Open}
         on:click={() => {
-          if (value.onClickLocation) {
-            onRemove()
-            navigate(value.onClickLocation)
-          }
+          openChannelInSidebar()
         }}
       />
     {/if}

plugins/notification-resources/src/components/NotifyMarker.svelte

@@ -14,13 +14,13 @@
 -->
 <script lang="ts">
   export let count: number = 0
-  export let kind: 'primary' | 'secondary' = 'primary'
-  export let size: 'x-small' | 'small' | 'medium' = 'small'
+  export let kind: 'primary' | 'secondary' | 'simple' = 'primary'
+  export let size: 'xx-small' | 'x-small' | 'small' | 'medium' = 'small'
 
   const maxNumber = 9
 </script>
 
-{#if count > 0}
+{#if kind === 'primary' && count > 0}
   <div class="notifyMarker {size} {kind}">
     {#if count > maxNumber}
       {maxNumber}+
@@ -30,7 +30,11 @@
   </div>
 {/if}
 
-{#if count === 0 && kind === 'secondary'}
+{#if kind === 'secondary'}
+  <div class="notifyMarker {size} {kind}" />
+{/if}
+
+{#if kind === 'simple'}
   <div class="notifyMarker {size} {kind}" />
 {/if}
 
@@ -43,6 +47,7 @@
     border-radius: 50%;
     font-weight: 700;
 
+    &.simple,
     &.primary {
       background-color: var(--global-higlight-Color);
       color: var(--global-on-accent-TextColor);
@@ -52,6 +57,11 @@
       background-color: var(--global-subtle-BackgroundColor);
     }
 
+    &.xx-small {
+      width: 0.5rem;
+      height: 0.5rem;
+    }
+
     &.x-small {
       width: 0.75rem;
       height: 0.75rem;

plugins/notification-resources/src/components/inbox/Inbox.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import activity, { ActivityMessage } from '@hcengineering/activity'
   import chunter from '@hcengineering/chunter'
-  import { Doc, getCurrentAccount, groupByArray, IdMap, Ref, SortingOrder, Space } from '@hcengineering/core'
+  import { getCurrentAccount, groupByArray, IdMap, Ref, SortingOrder } from '@hcengineering/core'
   import { DocNotifyContext, InboxNotification, notificationId } from '@hcengineering/notification'
   import { ActionContext, createQuery, getClient } from '@hcengineering/presentation'
   import {
@@ -47,10 +47,6 @@
   import { onDestroy } from 'svelte'
   import SettingsButton from './SettingsButton.svelte'
 
-  export let currentSpace: Ref<Space> | undefined = undefined
-  export let asideComponent: AnyComponent | undefined = undefined
-  export let asideId: string | undefined = undefined
-
   const client = getClient()
   const hierarchy = client.getHierarchy()
   const me = getCurrentAccount()
@@ -145,7 +141,7 @@
   $: filteredData = filterData(filter, selectedTabId, inboxData, $contextByIdStore)
 
   const unsubscribeLoc = locationStore.subscribe((newLocation) => {
-    void syncLocation(newLocation, $contextByDocStore)
+    void syncLocation(newLocation)
   })
 
   let isContextsLoaded = false
@@ -156,11 +152,11 @@
     }
 
     const loc = getCurrentLocation()
-    void syncLocation(loc, docs)
+    void syncLocation(loc)
     isContextsLoaded = true
   })
 
-  async function syncLocation (newLocation: Location, contextByDoc: Map<Ref<Doc>, DocNotifyContext>): Promise<void> {
+  async function syncLocation (newLocation: Location): Promise<void> {
     const loc = await resolveLocation(newLocation)
     if (loc?.loc.path[2] !== notificationId) {
       return
@@ -174,7 +170,7 @@
 
     const [id, _class] = decodeObjectURI(loc?.loc.path[3] ?? '')
     const _id = await parseLinkId(linkProviders, id, _class)
-    const context = _id ? contextByDoc.get(_id) : undefined
+    const context = _id ? $contextByDocStore.get(_id) : undefined
 
     selectedContextId = context?._id
 
@@ -423,7 +419,7 @@
       short
     />
   {/if}
-  <div bind:this={replacedPanel} class="hulyComponent" class:beforeAside={asideComponent !== undefined && asideId}>
+  <div bind:this={replacedPanel} class="hulyComponent">
     {#if selectedContext && selectedComponent}
       <Component
         is={selectedComponent}
@@ -438,12 +434,6 @@
       />
     {/if}
   </div>
-  {#if asideComponent !== undefined && asideId}
-    <Separator name={'inbox'} index={1} color={'var(--theme-divider-color)'} separatorSize={1} />
-    <div class="hulyComponent aside">
-      <Component is={asideComponent} props={{ currentSpace, _id: asideId }} on:close />
-    </div>
-  {/if}
 </div>
 
 <style lang="scss">