Move doc panel in chat to right side (#4415)

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

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

@@ -63,6 +63,6 @@
   <ThreadViewPanel _id={threadId} on:close />
 {:else if object}
   <div class="antiComponent">
-    <ChannelPresenter {object} {context} allowClose on:close />
+    <ChannelPresenter {object} {context} embedded allowClose on:close />
   </div>
 {/if}

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

@@ -14,34 +14,54 @@
 -->
 <script lang="ts">
   import { Ref, Doc } from '@hcengineering/core'
-  import { getLocation, navigate } from '@hcengineering/ui'
+  import { defineSeparators, location as locationStore, panelSeparators, Separator } from '@hcengineering/ui'
   import { DocNotifyContext } from '@hcengineering/notification'
-  import activity, { ActivityMessage, ActivityMessagesFilter } from '@hcengineering/activity'
+  import activity, { ActivityMessagesFilter } from '@hcengineering/activity'
-  import { ChatMessage } from '@hcengineering/chunter'
+  import { getClient } from '@hcengineering/presentation'
 
   import Channel from './Channel.svelte'
   import PinnedMessages from './PinnedMessages.svelte'
   import ChannelHeader from './ChannelHeader.svelte'
+  import DocChatPanel from './chat/DocChatPanel.svelte'
+  import chunter from '../plugin'
 
   export let context: DocNotifyContext
   export let object: Doc
   export let filterId: Ref<ActivityMessagesFilter> = activity.ids.AllFilter
   export let allowClose = false
+  export let embedded = false
 
-  function openThread (_id: Ref<ChatMessage>) {
+  const client = getClient()
-    const loc = getLocation()
+  const hierarchy = client.getHierarchy()
-    loc.path[4] = _id
+
-    navigate(loc)
+  let isThreadOpened = false
-  }
+
+  $: isDocChat = !hierarchy.isDerived(object._class, chunter.class.ChunterSpace)
+  $: asideShown = !embedded && isDocChat && !isThreadOpened
+
+  locationStore.subscribe((newLocation) => {
+    isThreadOpened = newLocation.path[4] != null
+  })
+
+  defineSeparators('aside', panelSeparators)
 </script>
 
+<div class="popupPanel panel" class:embedded>
   <ChannelHeader {object} {allowClose} on:close />
+  <div class="popupPanel-body" class:asideShown>
+    <div class="popupPanel-body__main">
       <PinnedMessages {context} />
-<Channel
+      <Channel {context} {object} {filterId} />
-  {context}
+    </div>
-  {object}
+
-  {filterId}
+    {#if asideShown}
-  on:openThread={(e) => {
+      <Separator name="aside" float={false} index={0} />
-    openThread(e.detail)
+      <div class="popupPanel-body__aside" class:float={false} class:shown={asideShown}>
-  }}
+        <Separator name="aside" float index={0} />
-/>
+        <div class="antiPanel-wrap__content">
+          <DocChatPanel {object} {filterId} />
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>

plugins/chunter-resources/src/components/chat/Chat.svelte

@@ -69,11 +69,6 @@
     }
   }
 
-  defineSeparators('chat', [
-    { minSize: 20, maxSize: 40, size: 30, float: 'navigator' },
-    { size: 'auto', minSize: 30, maxSize: 'auto', float: undefined }
-  ])
-
   $: selectedContextId &&
     notifyContextQuery.query(
       notification.class.DocNotifyContext,
@@ -88,9 +83,10 @@
       object = res[0]
     })
 
-  $: isDocChatOpened =
+  defineSeparators('chat', [
-    selectedContext !== undefined &&
+    { minSize: 20, maxSize: 40, size: 30, float: 'navigator' },
-    ![chunter.class.Channel, chunter.class.DirectMessage].includes(selectedContext.attachedToClass)
+    { size: 'auto', minSize: 30, maxSize: 'auto', float: undefined }
+  ])
 </script>
 
 <div class="flex-row-top h-full">
@@ -101,12 +97,8 @@
         : 'landscape'} background-comp-header-color"
     >
       <div class="antiPanel-wrap__content">
-        {#if !isDocChatOpened}
         <NavHeader label={chunter.string.Chat} />
         <ChatNavigator {selectedContextId} {currentSpecial} />
-        {:else if object}
-          <DocChatPanel {object} {filterId} />
-        {/if}
       </div>
       <Separator name="chat" float={navFloat ? 'navigator' : true} index={0} />
     </div>
@@ -132,8 +124,7 @@
           }
         }}
       />
-    {/if}
+    {:else if selectedContext && object}
-    {#if selectedContext && object}
       {#key selectedContext._id}
         <ChannelView context={selectedContext} {object} {filterId} />
       {/key}

plugins/chunter-resources/src/components/chat/DocChatPanel.svelte

@@ -78,7 +78,6 @@
   }
 </script>
 
-<div class="popupPanel panel">
 <div class="actions">
   <ActionIcon
     icon={view.icon.Open}
@@ -127,7 +126,6 @@
     {/await}
   {/key}
 {/each}
-</div>
 
 <style lang="scss">
   .header {