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 { ChatMessage } from '@hcengineering/chunter'
+  import activity, { ActivityMessagesFilter } from '@hcengineering/activity'
+  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 loc = getLocation()
-    loc.path[4] = _id
-    navigate(loc)
-  }
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+
+  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>
 
-<ChannelHeader {object} {allowClose} on:close />
-<PinnedMessages {context} />
-<Channel
-  {context}
-  {object}
-  {filterId}
-  on:openThread={(e) => {
-    openThread(e.detail)
-  }}
-/>
+<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 {context} {object} {filterId} />
+    </div>
+
+    {#if asideShown}
+      <Separator name="aside" float={false} index={0} />
+      <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 =
-    selectedContext !== undefined &&
-    ![chunter.class.Channel, chunter.class.DirectMessage].includes(selectedContext.attachedToClass)
+  defineSeparators('chat', [
+    { minSize: 20, maxSize: 40, size: 30, float: 'navigator' },
+    { 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}
+        <NavHeader label={chunter.string.Chat} />
+        <ChatNavigator {selectedContextId} {currentSpecial} />
       </div>
       <Separator name="chat" float={navFloat ? 'navigator' : true} index={0} />
     </div>
@@ -132,8 +124,7 @@
           }
         }}
       />
-    {/if}
-    {#if selectedContext && object}
+    {:else if selectedContext && object}
       {#key selectedContext._id}
         <ChannelView context={selectedContext} {object} {filterId} />
       {/key}

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

@@ -78,57 +78,55 @@
   }
 </script>
 
-<div class="popupPanel panel">
-  <div class="actions">
-    <ActionIcon
-      icon={view.icon.Open}
-      size="medium"
-      action={() => {
-        openDoc(client.getHierarchy(), object)
-      }}
-    />
-  </div>
+<div class="actions">
+  <ActionIcon
+    icon={view.icon.Open}
+    size="medium"
+    action={() => {
+      openDoc(client.getHierarchy(), object)
+    }}
+  />
+</div>
 
-  <div class="header">
-    <div class="identifier">
-      <Label label={clazz.label} />
-      {#if linkTitle}
-        •
-        <DocNavLink {object}>
-          {linkTitle}
-        </DocNavLink>
-      {/if}
-    </div>
-    {#if objectChatPanel}
-      {#await getResource(objectChatPanel.titleProvider) then getTitle}
-        <div class="title overflow-label">
-          {getTitle(object)}
-        </div>
-      {/await}
+<div class="header">
+  <div class="identifier">
+    <Label label={clazz.label} />
+    {#if linkTitle}
+      •
+      <DocNavLink {object}>
+        {linkTitle}
+      </DocNavLink>
     {/if}
   </div>
-
-  <DocAttributeBar {object} {mixins} ignoreKeys={objectChatPanel?.ignoreKeys ?? []} showHeader={false} />
-
-  {#each filters as filter}
-    {#key filter._id}
-      {#await getMessagesCount(filter, activityMessages) then count}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        {#if filter._id === activity.ids.AllFilter || count > 0}
-          <div
-            on:click={() => {
-              handleFilterSelected(filter)
-            }}
-          >
-            <SpecialElement label={filter.label} selected={filterId === filter._id} notifications={count} />
-          </div>
-        {/if}
-      {/await}
-    {/key}
-  {/each}
+  {#if objectChatPanel}
+    {#await getResource(objectChatPanel.titleProvider) then getTitle}
+      <div class="title overflow-label">
+        {getTitle(object)}
+      </div>
+    {/await}
+  {/if}
 </div>
 
+<DocAttributeBar {object} {mixins} ignoreKeys={objectChatPanel?.ignoreKeys ?? []} showHeader={false} />
+
+{#each filters as filter}
+  {#key filter._id}
+    {#await getMessagesCount(filter, activityMessages) then count}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      {#if filter._id === activity.ids.AllFilter || count > 0}
+        <div
+          on:click={() => {
+            handleFilterSelected(filter)
+          }}
+        >
+          <SpecialElement label={filter.label} selected={filterId === filter._id} notifications={count} />
+        </div>
+      {/if}
+    {/await}
+  {/key}
+{/each}
+
 <style lang="scss">
   .header {
     display: flex;