From bde8549e5d7a38a5ecce9565abd20f0210bf6339 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 28 Apr 2022 12:53:35 +0300
Subject: [PATCH] Removed full-size panel mode. Integrate views for channels
 provider. (#1575)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 packages/panel/src/components/Panel.svelte    |  40 +----
 packages/theme/styles/_colors.scss            |   6 +
 packages/theme/styles/_layouts.scss           |   3 +
 packages/theme/styles/common.scss             |   6 +-
 packages/theme/styles/components.scss         | 126 +++++++-------
 packages/ui/src/components/Button.svelte      |   6 +-
 packages/ui/src/components/Panel.svelte       |  21 +--
 .../ui/src/components/PanelInstance.svelte    |   2 +-
 packages/ui/src/components/Scroller.svelte    |  22 ++-
 .../src/components/Activity.svelte            |  10 +-
 .../src/components/EditCard.svelte            |  14 +-
 .../src/components/popups/Menu.svelte         |   6 +-
 .../src/components/ChannelsDropdown.svelte    |   1 +
 .../src/components/ChannelsEditor.svelte      |  16 ++
 .../src/components/ChannelsPresenter.svelte   |   2 +-
 .../src/components/EditPerson.svelte          |  12 +-
 .../src/components/TagsPopup.svelte           |   2 +-
 .../src/components/Chat.svelte                |  60 ++++---
 .../src/components/Date.svelte                |   3 +-
 .../src/components/Message.svelte             |  65 +++++--
 .../src/components/Messages.svelte            |  35 ++--
 .../src/components/NewIssueHeader.svelte      |   4 +-
 .../src/components/issues/Board.svelte        |   4 +-
 .../src/components/issues/EditIssue.svelte    |  27 +--
 .../src/components/issues/IssuesList.svelte   |  19 +--
 .../issues/IssuesListBrowser.svelte           |   2 +-
 .../src/components/projects/Projects.svelte   |   4 +-
 plugins/view-resources/package.json           |   3 +-
 .../src/components/ActionHandler.svelte       |   4 +-
 .../src/components/EditDoc.svelte             | 161 +++++++++++-------
 .../view-resources/src/components/Menu.svelte |   2 +-
 .../src/components/Table.svelte               |   3 +-
 .../src/components/TableBrowser.svelte        |   2 +-
 .../src/components/Workbench.svelte           |   5 +-
 tests/sanity/tests/recruit.spec.ts            |   2 +-
 35 files changed, 384 insertions(+), 316 deletions(-)

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 7652eca26a..2947aa8a42 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -14,43 +14,30 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
   import activity from '@anticrm/activity'
   import calendar from '@anticrm/calendar'
   import type { Doc } from '@anticrm/core'
   import notification from '@anticrm/notification'
   import type { Asset } from '@anticrm/platform'
-  import { Button, AnyComponent, AnySvelteComponent, Component, IconExpand, Panel, Scroller } from '@anticrm/ui'
-  import { PopupAlignment } from '@anticrm/ui'
+  import { AnyComponent, AnySvelteComponent, Component, Panel } from '@anticrm/ui'
 
   export let title: string | undefined = undefined
   export let subtitle: string | undefined = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
-  export let fullSize: boolean = true
   export let showHeader: boolean = true
   export let rightSection: AnyComponent | undefined = undefined
   export let object: Doc
-  export let position: PopupAlignment | undefined = undefined
   export let panelWidth: number = 0
   export let innerWidth: number = 0
   export let isSubtitle: boolean = false
   export let isProperties: boolean = false
-
-  const dispatch = createEventDispatcher()
-
-  $: allowFullSize = panelWidth > 1200 && (position === 'full' || position === 'content')
-  $: isFullSize = allowFullSize && fullSize
-
-  const resizePanel = () => {
-    isFullSize = !isFullSize
-  }
 </script>
 
 <Panel
   {title}
   {subtitle}
   {icon}
-  rightSection={isFullSize}
+  rightSection={rightSection !== undefined}
   {showHeader}
   bind:panelWidth
   bind:innerWidth
@@ -69,31 +56,12 @@
   </svelte:fragment>
   <svelte:fragment slot="commands">
     <div class="buttons-group xsmall-gap">
-      <slot name="actions" />
       <Component is={calendar.component.DocReminder} props={{ value: object, title }} />
       <Component is={notification.component.LastViewEditor} props={{ value: object }} />
     </div>
+    <slot name="actions" />
   </svelte:fragment>
-
-  <svelte:fragment slot="rightSection">
-    {#if isFullSize}
-      <div class="ad-section-50">
-        <Component is={rightSection ?? activity.component.Activity} props={{ object, fullSize: isFullSize }} />
-      </div>
-    {/if}
-  </svelte:fragment>
-  <svelte:fragment slot="actions">
-    {#if allowFullSize}
-      <Button icon={IconExpand} size={'medium'} kind={'transparent'} on:click={resizePanel} />
-    {/if}
-  </svelte:fragment>
-  {#if isFullSize}
-    <Scroller correctPadding={40}>
-      <div class="p-10 clear-mins"><slot /></div>
-    </Scroller>
-  {:else}
-    <Component is={activity.component.Activity} props={{ object, fullSize: isFullSize }}>
+    <Component is={rightSection ?? activity.component.Activity} props={{ object, integrate: true }}>
       <slot />
     </Component>
-  {/if}
 </Panel>
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index a4da04e21a..b463e03fbe 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -61,6 +61,9 @@
   --accent-bg-color: #27282b;
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;
 
+  --highlight-select: #8a8f9810;
+  --highlight-hover: #8a8f9820;
+
   --dark-color: #62666d;
   --content-color: #8a8f98;
   --accent-color: #d7d8db;
@@ -198,6 +201,9 @@
   --accent-bg-color: #f8f9fb;  // HZ
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;  // Dark
 
+  --highlight-select: #3c414910;
+  --highlight-hover: #3c414920;
+
   --dark-color: #90959d;
   --content-color: #3c4149;
   --accent-color: #282a30;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 4bd0090231..cf8c89fcd8 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -343,6 +343,7 @@ p:last-child { margin-block-end: 0; }
 .mx-1 { margin: 0 .25rem; }
 .mx-2 { margin: 0 .5rem; }
 .mx-3 { margin: 0 .75rem; }
+.mx-10 { margin: 0 2.5rem; }
 .mx-auto { margin: 0 auto; }
 .my-4 { margin: 1rem 0; }
 
@@ -593,6 +594,7 @@ a.no-line {
 /* Backgrounds & Colors */
 .background-body-color { background-color: var(--body-color); }
 .background-accent-bg-color { background-color: var(--accent-bg-color); }
+.background-highlight-select { background-color: var(--highlight-select); }
 
 .background-theme-content-accent { background-color: var(--theme-content-accent-color); }
 .background-theme-bg-color { background-color: var(--theme-bg-color); }
@@ -624,3 +626,4 @@ a.no-line {
 .border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
 
 .bottom-divider { border-bottom: 1px solid var(--divider-color); }
+.bottom-highlight-select { border-bottom: 1px solid var(--highlight-select); }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 574ccca007..c75412bf09 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -26,6 +26,7 @@
   min-width: var(--app-panel-width);
   width: var(--app-panel-width);
   height: 100%;
+  background-color: var(--board-bg-color);
 }
 .antiPanel-navigator,
 .antiPanel-component {
@@ -53,7 +54,10 @@
     z-index: 450;
   }
 }
-.antiPanel-component:not(.aside) { flex-grow: 1; }
+.antiPanel-component:not(.aside) {
+  flex-grow: 1;
+  background-color: var(--board-bg-color);
+}
 .antiPanel-component.aside {
   min-width: 30rem;
   width: 30rem;
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 8dfce7cc76..224fdefd75 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -49,74 +49,74 @@
     &.divide {
       border-bottom: 1px solid var(--divider-color);
     }
+  }
 
-    .ac-header__wrap-description,
-    .ac-header__wrap-title {
-      display: flex;
-      flex-wrap: nowrap;
-      min-width: 0;
-      cursor: default;
-    }
-    .ac-header__wrap-description {
-      flex-direction: column;
-      flex-grow: 1;
-    }
-    .ac-header__wrap-title {
-      align-items: center;
-    }
+  .ac-header__wrap-description,
+  .ac-header__wrap-title {
+    display: flex;
+    flex-wrap: nowrap;
+    min-width: 0;
+    cursor: default;
+  }
+  .ac-header__wrap-description {
+    flex-direction: column;
+    flex-grow: 1;
+  }
+  .ac-header__wrap-title {
+    align-items: center;
+  }
 
-    .ac-header__icon {
-      margin-right: 0.5rem;
-      color: var(--theme-content-color);
-    }
-    .ac-header__title {
-      min-width: 0;
-      font-weight: 500;
-      font-size: 1rem;
+  .ac-header__icon {
+    margin-right: 0.5rem;
+    color: var(--theme-content-color);
+  }
+  .ac-header__title {
+    min-width: 0;
+    font-weight: 500;
+    font-size: 1rem;
+    color: var(--theme-caption-color);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: none;
+  }
+  .ac-header__description {
+    min-width: 0;
+    font-size: 0.75rem;
+    color: var(--theme-content-dark-color);
+
+    overflow: hidden;
+    visibility: visible;
+    display: -webkit-box;
+    /* autoprefixer: ignore next */
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    user-select: none;
+  }
+
+  .ac-header__icon-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    color: var(--theme-content-trans-color);
+    background-color: transparent;
+    border-radius: .25rem;
+    cursor: pointer;
+
+    &:hover {
       color: var(--theme-caption-color);
-
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      user-select: none;
     }
-    .ac-header__description {
-      min-width: 0;
-      font-size: 0.75rem;
-      color: var(--theme-content-dark-color);
-
-      overflow: hidden;
-      visibility: visible;
-      display: -webkit-box;
-      /* autoprefixer: ignore next */
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      user-select: none;
-    }
-
-    .ac-header__icon-button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 2rem;
-      height: 2rem;
-      color: var(--theme-content-trans-color);
-      background-color: transparent;
-      border-radius: .25rem;
-      cursor: pointer;
-
+    &.selected {
+      color: var(--theme-content-accent-color);
+      background-color: var(--menu-bg-select);
+      cursor: default;
       &:hover {
         color: var(--theme-caption-color);
       }
-      &.selected {
-        color: var(--theme-content-accent-color);
-        background-color: var(--menu-bg-select);
-        cursor: default;
-        &:hover {
-          color: var(--theme-caption-color);
-        }
-      }
     }
   }
 
@@ -412,8 +412,8 @@
   }
 
   &.highlightRows .antiTable-body__row {
-    &.checking { background-color: var(--theme-table-bg-hover); }
-    &.selected { background-color: var(--menu-bg-select); }
+    &.checking { background-color: var(--highlight-select); } // --theme-table-bg-hover
+    &.selected { background-color: var(--highlight-hover); } // --menu-bg-select
   }
 }
 
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 320ed0c2f0..9b29690ee6 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -129,7 +129,11 @@
       transition: color .15s;
       pointer-events: none;
     }
-    &.highlight { box-shadow: inset 0 0 0 1px var(--primary-bg-color); }
+    &.highlight {
+      box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
+
+      &:hover { box-shadow: inset 0 0 1px 1px var(--primary-bg-hover); }
+    }
     &:hover {
       color: var(--accent-color);
       transition-duration: 0;
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index 3cbf48a6aa..89a62342b7 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -64,7 +64,7 @@
             {#if subtitle}<span class="ac-header__description">{subtitle}</span>{/if}
           </div>
         </div>
-        <div class="buttons-group xsmall-gap mr-4">
+        <div class="buttons-group xsmall-gap">
           <slot name="commands" />
           <slot name="actions" />
         </div>
@@ -148,17 +148,18 @@
       flex-shrink: 0;
       min-width: 20rem;
       width: 20rem;
+      border-left: 1px solid var(--divider-color);
       // background-color: var(--board-card-bg-color);
 
-      &::before {
-        position: absolute;
-        content: '';
-        top: 1.5rem;
-        bottom: 1.5rem;
-        left: 0;
-        width: 1px;
-        background-color: var(--divider-color);
-      }
+      // &::before {
+      //   position: absolute;
+      //   content: '';
+      //   top: 1.5rem;
+      //   bottom: 1.5rem;
+      //   left: 0;
+      //   width: 1px;
+      //   background-color: var(--divider-color);
+      // }
     }
   }
 </style>
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
index e0263ffad8..3914038d98 100644
--- a/packages/ui/src/components/PanelInstance.svelte
+++ b/packages/ui/src/components/PanelInstance.svelte
@@ -119,7 +119,7 @@
     position: fixed;
     background-color: transparent;
 
-    &.bg { background-color: var(--body-color); }
+    &.bg { background-color: var(--board-bg-color); }
     .panel-container {
       padding: .5rem;
       width: 100%;
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 3b994a1fdf..8d7b42fc58 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -19,6 +19,7 @@
   export let padding: boolean = false
   export let autoscroll: boolean = false
   export let correctPadding: number = 0
+  export let bottomStart: boolean = false
 
   let mask: 'top' | 'bottom' | 'both' | 'none' = 'bottom'
 
@@ -38,6 +39,7 @@
   let visibleEl: number | undefined = undefined
   let belowContent: number | undefined = undefined
   let scrolling: boolean = false
+  let firstScroll: boolean = autoscroll
 
   const checkBack = (): void => {
     if (divBox) {
@@ -149,6 +151,7 @@
       divBar.style.top = procTop * (divScroll.clientHeight - 4) + 2 + 'px'
       if (mask === 'none') divBar.style.visibility = 'hidden'
       else divBar.style.visibility = 'visible'
+      if (divScroll.clientHeight >= divScroll.scrollHeight) divBar.style.visibility = 'hidden'
     }
   }
 
@@ -205,8 +208,12 @@
 
   let observer = new IntersectionObserver(() => checkFade(), { root: null, threshold: .1 })
 
-  $: if (autoscroll && belowContent && belowContent <= 5) scrolling = true
-  $: if (scrolling && belowContent && belowContent > 5)
+  $: if (firstScroll && divScroll && divScroll.clientHeight !== divScroll.scrollHeight) {
+    divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
+    firstScroll = false
+  }
+  $: if (autoscroll && belowContent && belowContent <= 50) scrolling = true
+  $: if (scrolling && belowContent && belowContent > 50)
     divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
 
   onMount(() => {
@@ -223,6 +230,7 @@
     if (divScroll && divBox) {
       const tempEl = divBox.querySelector('*') as HTMLElement
       if (tempEl) observer.observe(tempEl)
+      if (scrolling) divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
       checkFade()
       clearTHead()
       findTHeaders()
@@ -239,7 +247,7 @@
 </script>
 
 <svelte:window on:resize={_resize} />
-<div class="scroller-container">
+<div class="scroller-container" class:bottomStart>
   <div
     bind:this={divScroll}
     bind:clientWidth={divWidth}
@@ -290,6 +298,14 @@
     flex-direction: column;
     height: 100%;
   }
+  .scroller-container.bottomStart {
+    justify-content: flex-end;
+    .scroll {
+      flex-grow: 0;
+      height: min-content;
+      .box { height: min-content; }
+    }
+  }
 
   .track {
     visibility: hidden;
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index 4607b2a6f0..995e35feb5 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -23,7 +23,7 @@
   import TxView from './TxView.svelte'
 
   export let object: Doc
-  export let fullSize: boolean = false
+  export let integrate: boolean = false
   export let showCommenInput: boolean = true
   export let transparent: boolean = false
 
@@ -55,7 +55,7 @@
 
 </script>
 
-{#if fullSize || transparent}
+{#if !integrate || transparent}
   {#if transparent !== undefined && !transparent}
     <div class="ac-header short mirror-tool highlight">
       <div class="ac-header__wrap-title">
@@ -86,11 +86,11 @@
     {/if}
   </div>
 {:else}
-  <Scroller autoscroll>
-    <div class="p-10">
+  <Scroller>
+    <div class="p-10 bottom-highlight-select">
       <slot />
     </div>
-    <div class="ac-header short mirror-tool">
+    <div class="ac-header short mirror-tool mt-2">
       <div class="ac-header__wrap-title">
         <div class="flex-center icon"><IconActivity size={'small'} /></div>
         <span class="ac-header__title"><Label label={activity.string.Activity} /></span>
diff --git a/plugins/board-resources/src/components/EditCard.svelte b/plugins/board-resources/src/components/EditCard.svelte
index 00ec381188..89241a6c82 100644
--- a/plugins/board-resources/src/components/EditCard.svelte
+++ b/plugins/board-resources/src/components/EditCard.svelte
@@ -16,22 +16,19 @@
 <script lang="ts">
   import type { Card } from '@anticrm/board'
   import { Class, Ref } from '@anticrm/core'
+  import { Panel } from '@anticrm/panel'
   import { getResource } from '@anticrm/platform'
   import { createQuery, getClient } from '@anticrm/presentation'
   import type { State } from '@anticrm/task'
   import task from '@anticrm/task'
   import { StyledTextBox } from '@anticrm/text-editor'
-  import type { AnyComponent } from '@anticrm/ui'
-  import { EditBox, Icon, Label, Scroller } from '@anticrm/ui'
-  import { Panel } from '@anticrm/panel'
-  import { createEventDispatcher, onMount } from 'svelte'
+  import { EditBox, Icon, Label } from '@anticrm/ui'
   import { UpDownNavigator } from '@anticrm/view-resources'
-
+  import { createEventDispatcher, onMount } from 'svelte'
   import board from '../plugin'
   import { getCardActions } from '../utils/CardActionUtils'
   import { updateCard } from '../utils/CardUtils'
   import CardActions from './editor/CardActions.svelte'
-  import CardActivity from './editor/CardActivity.svelte'
   import CardAttachments from './editor/CardAttachments.svelte'
   import CardDetails from './editor/CardDetails.svelte'
 
@@ -76,8 +73,6 @@
     dispatch('open', { ignoreKeys: ['comments', 'number', 'title'] })
   })
 
-  let fullSize: boolean = false
-  let rightSection: AnyComponent | undefined = undefined
 </script>
 
 {#if object !== undefined}
@@ -85,9 +80,6 @@
     icon={board.icon.Card}
     title={object?.title}
     {object}
-    {rightSection}
-    {fullSize}
-    position={'content'}
     on:close={() => dispatch('close')}
   >
     <svelte:fragment slot="navigate-actions">
diff --git a/plugins/board-resources/src/components/popups/Menu.svelte b/plugins/board-resources/src/components/popups/Menu.svelte
index d2dd3bf09e..b43a506c99 100644
--- a/plugins/board-resources/src/components/popups/Menu.svelte
+++ b/plugins/board-resources/src/components/popups/Menu.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte'
     import { Ref, Space } from '@anticrm/core'
-    import { Label, ActionIcon, IconClose, Button, EditBox } from '@anticrm/ui'
+    import { ActionIcon, Button, IconClose, Label } from '@anticrm/ui'
+    import TextArea from '@anticrm/ui/src/components/TextArea.svelte'
+    import { createEventDispatcher } from 'svelte'
     import board from '../../plugin'
     import CardsArchive from '../CardArchive.svelte'
     import ListArchive from '../ListArchive.svelte'
-    import TextArea from '@anticrm/ui/src/components/TextArea.svelte'
 
     export let space: Ref<Space>
     const dispatch = createEventDispatcher()
diff --git a/plugins/contact-resources/src/components/ChannelsDropdown.svelte b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
index 6938ad46a1..3f859f3beb 100644
--- a/plugins/contact-resources/src/components/ChannelsDropdown.svelte
+++ b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
@@ -234,6 +234,7 @@
     window.removeEventListener('click', listener)
   })
 </script>
+
 <div
   bind:this={div}
   class="{displayItems.length === 0 ? 'clear-mins' : 'buttons-group'} {kind === 'no-border' ? 'xsmall-gap' : 'xxsmall-gap'}"
diff --git a/plugins/contact-resources/src/components/ChannelsEditor.svelte b/plugins/contact-resources/src/components/ChannelsEditor.svelte
index 3301f37182..29fb08739a 100644
--- a/plugins/contact-resources/src/components/ChannelsEditor.svelte
+++ b/plugins/contact-resources/src/components/ChannelsEditor.svelte
@@ -105,6 +105,21 @@
     }
     Promise.all(promises)
   }
+
+  function click (ev: any) {
+    if (ev.detail.presenter !== undefined && Array.isArray(channels)) {
+      const channel = channels[0]
+      if (channel !== undefined) {
+        showPanel(
+          view.component.EditDoc,
+          channel.attachedTo,
+          channel.attachedToClass,
+          'content',
+          ev.detail.presenter
+        )
+      }
+    }
+  }
 </script>
 
 <ChannelsDropdown
@@ -118,4 +133,5 @@
   on:change={(e) => {
     if (editable) save(e.detail)
   }}
+  on:click={click}
 />
diff --git a/plugins/contact-resources/src/components/ChannelsPresenter.svelte b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
index b0676406ca..68878668e1 100644
--- a/plugins/contact-resources/src/components/ChannelsPresenter.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
@@ -36,7 +36,7 @@
           view.component.EditDoc,
           channel.attachedTo,
           channel.attachedToClass,
-          'full',
+          'content',
           ev.detail.presenter
         )
       }
diff --git a/plugins/contact-resources/src/components/EditPerson.svelte b/plugins/contact-resources/src/components/EditPerson.svelte
index c63dae9fe4..1af534bfaa 100644
--- a/plugins/contact-resources/src/components/EditPerson.svelte
+++ b/plugins/contact-resources/src/components/EditPerson.svelte
@@ -15,13 +15,13 @@
 -->
 <script lang="ts">
   import attachment from '@anticrm/attachment'
-  import { combineName,getFirstName,getLastName,Person } from '@anticrm/contact'
-  import { getCurrentAccount,Ref,Space } from '@anticrm/core'
+  import { combineName, getFirstName, getLastName, Person } from '@anticrm/contact'
+  import { getCurrentAccount, Ref, Space } from '@anticrm/core'
   import { getResource } from '@anticrm/platform'
-  import { AttributeEditor,Avatar,createQuery,EditableAvatar,getClient } from '@anticrm/presentation'
-  import setting,{ IntegrationType } from '@anticrm/setting'
-  import { CircleButton,EditBox,IconActivity,Label } from '@anticrm/ui'
-  import { afterUpdate,createEventDispatcher,onMount } from 'svelte'
+  import { AttributeEditor, Avatar, createQuery, EditableAvatar, getClient } from '@anticrm/presentation'
+  import setting, { IntegrationType } from '@anticrm/setting'
+  import { CircleButton, EditBox, IconActivity, Label } from '@anticrm/ui'
+  import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
   import contact from '../plugin'
   import ChannelsEditor from './ChannelsEditor.svelte'
 
diff --git a/plugins/tags-resources/src/components/TagsPopup.svelte b/plugins/tags-resources/src/components/TagsPopup.svelte
index c747cc3ec9..fe98dd0fb5 100644
--- a/plugins/tags-resources/src/components/TagsPopup.svelte
+++ b/plugins/tags-resources/src/components/TagsPopup.svelte
@@ -102,7 +102,7 @@
         }}>
           {#if search !== ''}<div class="icon"><Icon icon={IconClose} size={'inline'} /></div>{/if}
         </div>
-        <Button kind={'transparent'} size={'small'} icon={show ? IconView : IconViewHide} on:click={() => show = !show} />
+        <Button kind={'transparent'} size={'small'} icon={show ? IconView : IconViewHide} on:click={() => { show = !show }} />
         {#if !hideAdd}<Button kind={'transparent'} size={'small'} icon={IconAdd} on:click={createTagElement} />{/if}
       </div>
     </div>
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index 9978adcca2..e2a4087688 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -22,7 +22,7 @@
   import { createQuery, getClient } from '@anticrm/presentation'
   import setting, { Integration } from '@anticrm/setting'
   import type { NewTelegramMessage, SharedTelegramMessage, TelegramMessage } from '@anticrm/telegram'
-  import { ActionIcon, Button, eventToHTMLElement, IconShare, ScrollBox, showPopup } from '@anticrm/ui'
+  import { Button, eventToHTMLElement, IconShare, Tooltip, Scroller, showPopup } from '@anticrm/ui'
   import telegram from '../plugin'
   import Connect from './Connect.svelte'
   import TelegramIcon from './icons/Telegram.svelte'
@@ -171,7 +171,7 @@
   }
 </script>
 
-<div class="ac-header short mirror-tool divide">
+<div class="telegram-header">
   <div class="ac-header__wrap-title">
     <div class="flex-center icon"><TelegramIcon size={'small'} /></div>
     <div class="ac-header__wrap-description">
@@ -179,22 +179,23 @@
       <span class="ac-header__description">You and {formatName(object.name)}</span>
     </div>
   </div>
-  <ActionIcon
-    icon={IconShare}
-    size={'medium'}
-    label={telegram.string.Share}
-    direction={'bottom'}
-    action={async () => {
-      selectable = !selectable
-    }}
-  />
+  <Tooltip label={telegram.string.Share}>
+    <Button
+      icon={IconShare}
+      kind={'transparent'}
+      size={'medium'}
+      on:click={async () => {
+        selectable = !selectable
+      }}
+    />
+  </Tooltip>
 </div>
-<div class="h-full right-content">
-  <ScrollBox vertical stretch autoscrollable>
+<div class="telegram-content" class:selectable>
+  <Scroller bottomStart autoscroll>
     {#if messages && accounts}
       <Messages messages={convertMessages(messages, accounts)} {selectable} bind:selected />
     {/if}
-  </ScrollBox>
+  </Scroller>
 </div>
 
 <div class="ref-input" class:selectable>
@@ -203,12 +204,12 @@
       <span>{selected.size} messages selected</span>
       <div class="flex">
         <div>
-          <Button label={telegram.string.Cancel} size={'small'} on:click={clear} />
+          <Button label={telegram.string.Cancel} size={'medium'} on:click={clear} />
         </div>
         <div class="ml-3">
           <Button
             label={telegram.string.PublishSelected}
-            size={'small'}
+            size={'medium'}
             kind={'primary'}
             disabled={!selected.size}
             on:click={share}
@@ -247,12 +248,23 @@
 </div>
 
 <style lang="scss">
+  .telegram-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    margin: 0 2.5rem;
+    padding: 0;
+    height: 4rem;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--divider-color);
+  }
   .icon {
     margin-right: 1rem;
     width: 2.25rem;
     height: 2.25rem;
-    color: var(--primary-button-color);
-    background-color: var(--primary-button-enabled);
+    color: var(--white-color);
+    background-color: var(--primary-bg-color);
     border-radius: 50%;
   }
 
@@ -260,14 +272,18 @@
     padding: 0 2.5rem 1.5rem;
 
     &.selectable {
-      padding: 0.75rem 1.25rem 0.75rem 2.5rem;
+      padding: 1rem 2.5rem;
       color: var(--theme-caption-color);
+      background-color: var(--accent-bg-color);
       border-top: 1px solid var(--theme-card-divider);
     }
   }
 
-  .right-content {
-    flex-grow: 1;
-    padding: 1.5rem 1rem;
+  .telegram-content {
+    padding-bottom: 1.5rem;
+    min-height: 0;
+    height: 100%;
+
+    &.selectable { padding-bottom: 0; }
   }
 </style>
diff --git a/plugins/telegram-resources/src/components/Date.svelte b/plugins/telegram-resources/src/components/Date.svelte
index 19d5d86922..01841b29e7 100644
--- a/plugins/telegram-resources/src/components/Date.svelte
+++ b/plugins/telegram-resources/src/components/Date.svelte
@@ -38,11 +38,12 @@
 <style lang="scss">
   .datetime-container {
     justify-self: center;
-    margin: 0.3rem 0;
+    margin: 0.3rem auto;
     padding: 0.25rem 0.75rem;
     width: fit-content;
     color: var(--theme-content-accent-color);
     background-color: var(--theme-menu-divider);
     border-radius: 1.25rem;
+    user-select: text;
   }
 </style>
diff --git a/plugins/telegram-resources/src/components/Message.svelte b/plugins/telegram-resources/src/components/Message.svelte
index 6265594f21..5dcaa01621 100644
--- a/plugins/telegram-resources/src/components/Message.svelte
+++ b/plugins/telegram-resources/src/components/Message.svelte
@@ -33,13 +33,17 @@
 </script>
 
 <div
-  class="flex-between"
+  class="message-row"
   class:selectable
+  class:selected-row={selected}
   on:click={() => {
     dispatch('select', message)
   }}
 >
-  <div class="flex-grow ml-6 flex" class:mr-6={!selectable} class:justify-end={!message.incoming}>
+  <div class="check-box">
+    {#if selectable}<CheckBox circle primary bind:checked={selected} />{/if}
+  </div>
+  <div class="message-container" class:out={!message.incoming}>
     <div class="message" class:outcoming={!message.incoming} class:selected>
       {#if showName}
         <div class="name" style="color: {getPlatformColorForText(message.sender)}">{formatName(message.sender)}</div>
@@ -55,22 +59,61 @@
       </div>
     </div>
   </div>
-  {#if selectable}
-    <div class="ml-4 mr-1"><CheckBox circle primary bind:checked={selected} /></div>
-  {/if}
 </div>
 
 <style lang="scss">
+  .message-row {
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+
+    &.selectable {
+      cursor: pointer;
+
+      &:hover { background-color: var(--highlight-hover); }
+      &.selected-row {
+        background-color: var(--highlight-select);
+
+        &:hover { background-color: var(--highlight-hover); }
+      }
+      .message { cursor: pointer; }
+      .selected {
+        background-color: var(--primary-bg-color);
+
+        &:hover { background-color: var(--primary-bg-hover); }
+      }
+    }
+  }
+  .check-box {
+    display: flex;
+    justify-content: center;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    pointer-events: none;
+  }
+  .message-container {
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+    flex-grow: 1;
+    margin-right: 2.5rem;
+    padding: .25rem 0;
+
+    &.out { justify-content: flex-end; }
+  }
   .message {
-    padding: 0.5rem 0.75rem;
+    padding: .5rem .75rem;
     max-width: 66%;
     width: fit-content;
     background-color: var(--theme-incoming-msg);
-    border-radius: 0.75rem;
+    border-radius: .75rem .75rem .75rem .25rem;
     overflow-wrap: anywhere;
+    user-select: text;
+    cursor: default;
 
     &.outcoming {
       background-color: var(--theme-outcoming-msg);
+      border-radius: .75rem .75rem .25rem .75rem;
     }
     .time {
       align-self: flex-end;
@@ -81,12 +124,4 @@
       white-space: nowrap;
     }
   }
-
-  .selectable {
-    margin: 0 0.25rem 0 0;
-    cursor: pointer;
-    .selected {
-      background-color: var(--primary-button-enabled);
-    }
-  }
 </style>
diff --git a/plugins/telegram-resources/src/components/Messages.svelte b/plugins/telegram-resources/src/components/Messages.svelte
index b725b8f232..f94fb9c4b7 100644
--- a/plugins/telegram-resources/src/components/Messages.svelte
+++ b/plugins/telegram-resources/src/components/Messages.svelte
@@ -15,7 +15,6 @@
 -->
 <script lang="ts">
   import type { SharedTelegramMessage } from '@anticrm/telegram'
-  import { Grid } from '@anticrm/ui'
   import Message from './Message.svelte'
   import { Ref } from '@anticrm/core'
   import DateView from './Date.svelte'
@@ -49,21 +48,19 @@
   }
 </script>
 
-<Grid column={1} rowGap={0.3}>
-  {#if messages}
-    {#each messages as message, i (message._id)}
-      {#if isNewDate(messages, i)}
-        <DateView {message} />
-      {/if}
-      <Message
-        {message}
-        {selectable}
-        selected={selected.has(message._id)}
-        showName={needName(messages, i)}
-        on:select={() => {
-          select(message._id)
-        }}
-      />
-    {/each}
-  {/if}
-</Grid>
+{#if messages}
+  {#each messages as message, i (message._id)}
+    {#if isNewDate(messages, i)}
+      <DateView {message} />
+    {/if}
+    <Message
+      {message}
+      {selectable}
+      selected={selected.has(message._id)}
+      showName={needName(messages, i)}
+      on:select={() => {
+        select(message._id)
+      }}
+    />
+  {/each}
+{/if}
diff --git a/plugins/tracker-resources/src/components/NewIssueHeader.svelte b/plugins/tracker-resources/src/components/NewIssueHeader.svelte
index 8031fa73bc..d0702bc4d0 100644
--- a/plugins/tracker-resources/src/components/NewIssueHeader.svelte
+++ b/plugins/tracker-resources/src/components/NewIssueHeader.svelte
@@ -19,7 +19,7 @@
   import CreateIssue from './CreateIssue.svelte'
   export let currentSpace: Ref<Space>
 
-  async function newIssue (target: EventTarget | null): Promise<void> {
+  async function newIssue (): Promise<void> {
     showPopup(CreateIssue, { space: currentSpace }, 'top')
   }
 </script>
@@ -31,7 +31,7 @@
       label={tracker.string.NewIssue}
       justify={'left'}
       width={'100%'}
-      on:click={() => newIssue(null)}
+      on:click={() => newIssue()}
     />
   </div>
   <Button icon={tracker.icon.Magnifier} on:click={async () => {}} />
diff --git a/plugins/tracker-resources/src/components/issues/Board.svelte b/plugins/tracker-resources/src/components/issues/Board.svelte
index 09801cad53..b6908f009c 100644
--- a/plugins/tracker-resources/src/components/issues/Board.svelte
+++ b/plugins/tracker-resources/src/components/issues/Board.svelte
@@ -25,9 +25,9 @@
   import { onMount } from 'svelte'
   import tracker from '../../plugin'
   import CreateIssue from '../CreateIssue.svelte'
-import AssigneePresenter from './AssigneePresenter.svelte'
+  import AssigneePresenter from './AssigneePresenter.svelte'
   import IssuePresenter from './IssuePresenter.svelte'
-import PriorityPresenter from './PriorityPresenter.svelte'
+  import PriorityPresenter from './PriorityPresenter.svelte'
 
   export let currentSpace: Ref<Team>
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
diff --git a/plugins/tracker-resources/src/components/issues/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
index 7cad634ac0..ae22a1642a 100644
--- a/plugins/tracker-resources/src/components/issues/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
@@ -15,27 +15,22 @@
 <script lang="ts">
   import contact from '@anticrm/contact'
   import { Class, Ref, SortingOrder, WithLookup } from '@anticrm/core'
+  // import Card from '../Card.svelte'
+  import { Panel } from '@anticrm/panel'
   import { createQuery, getClient, UserBox } from '@anticrm/presentation'
   import { StyledTextBox } from '@anticrm/text-editor'
   import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
   import {
-    AnyComponent,
     Button,
     EditBox,
-    IconDownOutline,
-    IconUpOutline,
-    Label,
-    Scroller,
-    IconMoreH,
-    IconEdit
+    IconDownOutline, IconEdit, IconMoreH, IconUpOutline,
+    Label
   } from '@anticrm/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import tracker from '../../plugin'
-  // import Card from '../Card.svelte'
-  import { Panel } from '@anticrm/panel'
   import IssuePresenter from './IssuePresenter.svelte'
-  import StatusPresenter from './StatusPresenter.svelte'
   import PriorityPresenter from './PriorityPresenter.svelte'
+  import StatusPresenter from './StatusPresenter.svelte'
 
   export let _id: Ref<Issue>
   export let _class: Ref<Class<Issue>>
@@ -48,7 +43,6 @@
   let issue: Issue | undefined
   let currentTeam: Team | undefined
   let issueStatuses: WithLookup<IssueStatus>[] | undefined
-  const fullSize: boolean = false
   let innerWidth: number
 
   $: _id &&
@@ -96,10 +90,8 @@
 {#if issue !== undefined}
   <Panel
     object={issue}
-    {fullSize}
     showHeader={false}
     isSubtitle={true}
-    position={'content'}
     bind:innerWidth
     on:close={() => {
       dispatch('close')
@@ -267,14 +259,5 @@
       border-bottom: 1px solid var(--divider-color);
       margin: 0.75rem 1.5rem 1.25rem 0;
     }
-
-    &::before {
-      content: '';
-      position: absolute;
-      border-left: 1px solid var(--divider-color);
-      top: 1.125rem;
-      bottom: 1.125rem;
-      width: 0px;
-    }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
index b6bab4c325..699da5f15f 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
@@ -13,27 +13,20 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Class, Doc, FindOptions, Ref, getObjectValue, WithLookup } from '@anticrm/core'
   import contact, { Employee } from '@anticrm/contact'
+  import { Class, Doc, FindOptions, getObjectValue, Ref, WithLookup } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
   import { Issue, IssueStatus, Team } from '@anticrm/tracker'
   import {
-    CheckBox,
-    showPopup,
-    Spinner,
-    IconMoreV,
-    Tooltip,
-    Component,
-    Button,
-    IconAdd,
-    eventToHTMLElement
+    Button, CheckBox, Component, eventToHTMLElement, IconAdd, IconMoreV, showPopup,
+    Spinner, Tooltip
   } from '@anticrm/ui'
   import { BuildModelKey } from '@anticrm/view'
-  import { buildModel, LoadingProps, Menu, SelectDirection } from '@anticrm/view-resources'
+  import { buildModel, LoadingProps, Menu } from '@anticrm/view-resources'
   import { createEventDispatcher } from 'svelte'
-  import CreateIssue from '../CreateIssue.svelte'
   import tracker from '../../plugin'
   import { IssuesGroupByKeys, issuesGroupPresenterMap, IssuesOrderByKeys, issuesSortOrderMap } from '../../utils'
+  import CreateIssue from '../CreateIssue.svelte'
 
   export let _class: Ref<Class<Doc>>
   export let currentSpace: Ref<Team> | undefined = undefined
@@ -97,7 +90,7 @@
     dispatch('row-focus', object)
   }
 
-  export const onElementSelected = (offset: 1 | -1 | 0, docObject?: Doc, dir?: SelectDirection) => {
+  export const onElementSelected = (offset: 1 | -1 | 0, docObject?: Doc) => {
     let position =
       (docObject !== undefined ? combinedGroupedIssues.findIndex((x) => x._id === docObject?._id) : selectedRowIndex) ??
       -1
diff --git a/plugins/tracker-resources/src/components/issues/IssuesListBrowser.svelte b/plugins/tracker-resources/src/components/issues/IssuesListBrowser.svelte
index e1c9fca97a..a594b11d91 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesListBrowser.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesListBrowser.svelte
@@ -43,7 +43,7 @@
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
     if (dir === 'vertical') {
-      issuesList.onElementSelected(offset, of, dir)
+      issuesList.onElementSelected(offset, of)
     }
   })
 
diff --git a/plugins/tracker-resources/src/components/projects/Projects.svelte b/plugins/tracker-resources/src/components/projects/Projects.svelte
index bf75720563..f377280bc9 100644
--- a/plugins/tracker-resources/src/components/projects/Projects.svelte
+++ b/plugins/tracker-resources/src/components/projects/Projects.svelte
@@ -29,11 +29,11 @@
       startDate: SortingOrder.Ascending
     },
     lookup: {
-      lead: contact.class.Employee,
+      lead: contact.class.Employee
     }
   }
 
-  async function showCreateDialog (ev: Event) {
+  async function showCreateDialog () {
     showPopup(NewProject, { space, targetElement: null }, null)
   }
 </script>
diff --git a/plugins/view-resources/package.json b/plugins/view-resources/package.json
index ae3f7328a7..d34f56a8a6 100644
--- a/plugins/view-resources/package.json
+++ b/plugins/view-resources/package.json
@@ -39,6 +39,7 @@
     "@anticrm/ui": "~0.6.0",
     "@anticrm/task": "~0.6.0",
     "@anticrm/notification": "~0.6.0",
-    "@anticrm/presentation": "~0.6.2"
+    "@anticrm/presentation": "~0.6.2",
+    "@anticrm/setting": "~0.6.1"
   }
 }
diff --git a/plugins/view-resources/src/components/ActionHandler.svelte b/plugins/view-resources/src/components/ActionHandler.svelte
index 2e001071ef..76f224610a 100644
--- a/plugins/view-resources/src/components/ActionHandler.svelte
+++ b/plugins/view-resources/src/components/ActionHandler.svelte
@@ -28,7 +28,7 @@
     }
   })
 
-  let lastKey: KeyboardEvent | undefined
+  // let lastKey: KeyboardEvent | undefined
 
   async function updateActions (
     context: ViewContext,
@@ -68,7 +68,7 @@
       console.log('no keyboard because', targetTagName, evt.target)
       return
     }
-    lastKey = evt
+    // lastKey = evt
     for (const a of actions) {
       // TODO: Handle multiple keys here
       if (a.keyBinding?.find((it) => matchKey(evt, it)) !== undefined) {
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte
index 1c227c4b0f..8920bd4f5c 100644
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/plugins/view-resources/src/components/EditDoc.svelte
@@ -14,11 +14,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import contact, { formatName } from '@anticrm/contact'
-  import core, { Class, ClassifierKind, Doc, Hierarchy, Mixin, Obj, Ref } from '@anticrm/core'
+  import contact, { ChannelProvider, formatName } from '@anticrm/contact'
+  import core, { Class, ClassifierKind, Doc, getCurrentAccount, Hierarchy, Mixin, Obj, Ref, Space } from '@anticrm/core'
   import notification from '@anticrm/notification'
   import { Panel } from '@anticrm/panel'
-  import { Asset, getResource, translate } from '@anticrm/platform'
+  import { Asset, getResource, IntlString, translate } from '@anticrm/platform'
   import {
     AttributesBar,
     createQuery,
@@ -26,24 +26,25 @@
     getClient,
     KeyedAttribute
   } from '@anticrm/presentation'
-  import { AnyComponent, Component, Label, PopupAlignment } from '@anticrm/ui'
+  import setting, { IntegrationType } from '@anticrm/setting'
+  import { AnyComponent, Button, Component, IconActivity } from '@anticrm/ui'
+  import Tooltip from '@anticrm/ui/src/components/Tooltip.svelte'
   import view from '@anticrm/view'
   import { createEventDispatcher, onDestroy } from 'svelte'
-  import { getCollectionCounter, getMixinStyle } from '../utils'
+  import { getCollectionCounter } from '../utils'
   import ActionContext from './ActionContext.svelte'
   import UpDownNavigator from './UpDownNavigator.svelte'
 
   export let _id: Ref<Doc>
   export let _class: Ref<Class<Doc>>
   export let rightSection: AnyComponent | undefined = undefined
-  export let position: PopupAlignment | undefined = undefined
+  // export let position: PopupAlignment | undefined = undefined
 
   let lastId: Ref<Doc> = _id
   let lastClass: Ref<Class<Doc>> = _class
   let object: Doc
   let objectClass: Class<Doc>
   let parentClass: Ref<Class<Doc>>
-  let fullSize: boolean = true
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -79,7 +80,7 @@
   let prevSelected = selectedClass
 
   let keys: KeyedAttribute[] = []
-  let collectionEditors: {key: KeyedAttribute, editor: AnyComponent} [] = []
+  let collectionEditors: { key: KeyedAttribute; editor: AnyComponent }[] = []
 
   let mixins: Mixin<Doc>[] = []
 
@@ -118,15 +119,11 @@
   let ignoreMixins: Set<Ref<Mixin<Doc>>> = new Set<Ref<Mixin<Doc>>>()
 
   async function updateKeys (): Promise<void> {
-    const filtredKeys = getFiltredKeys(
-      selectedClass ?? object._class,
-      ignoreKeys,
-      selectedClass !== objectClass._id ? objectClass._id : undefined
-    )
+    const filtredKeys = getFiltredKeys(selectedClass ?? object._class, ignoreKeys)
     keys = collectionsFilter(filtredKeys, false)
 
     const collectionKeys = collectionsFilter(filtredKeys, true)
-    const editors: {key: KeyedAttribute, editor: AnyComponent}[] = []
+    const editors: { key: KeyedAttribute; editor: AnyComponent }[] = []
     for (const k of collectionKeys) {
       const editor = await getCollectionEditor(k)
       editors.push({ key: k, editor })
@@ -245,20 +242,64 @@
   }
   let panelWidth: number = 0
   let innerWidth: number = 0
+
+  const accountId = getCurrentAccount()._id
+  let channelProviders: ChannelProvider[] | undefined
+  let currentProviders: ChannelProvider[] | undefined
+  let integrations: Set<Ref<IntegrationType>> = new Set<Ref<IntegrationType>>()
+  let displayedIntegrations:
+    | {
+        icon: Asset | undefined
+        label: IntlString
+        presenter: AnyComponent | undefined
+        value: string
+      }[]
+    | undefined = []
+
+  client.findAll(contact.class.ChannelProvider, {}).then((res) => {
+    channelProviders = res
+  })
+  const settingsQuery = createQuery()
+  $: settingsQuery.query(
+    setting.class.Integration,
+    { space: accountId as string as Ref<Space>, disabled: false },
+    (res) => {
+      integrations = new Set(res.map((p) => p.type))
+    }
+  )
+  const channelsQuery = createQuery()
+  $: _id &&
+    integrations &&
+    channelProviders &&
+    channelsQuery.query(contact.class.Channel, { attachedTo: _id }, (res) => {
+      const channels = res
+      currentProviders = channelProviders?.filter((provider) =>
+        provider.integrationType ? integrations.has(provider.integrationType as Ref<IntegrationType>) : false
+      )
+      displayedIntegrations = []
+      currentProviders?.forEach((provider) => {
+        displayedIntegrations?.push({
+          icon: provider.icon,
+          label: provider.label,
+          presenter: provider.presenter,
+          value: channels.filter((ch) => ch.provider === provider._id)[0].value
+        })
+      })
+    })
 </script>
 
-<ActionContext context={{
-  mode: 'editor'
-}}/>
+<ActionContext
+  context={{
+    mode: 'editor'
+  }}
+/>
 
 {#if object !== undefined && title !== undefined}
   <Panel
     {icon}
     {title}
     {rightSection}
-    {fullSize}
     {object}
-    {position}
     bind:panelWidth
     bind:innerWidth
     on:update={(ev) => _update(ev.detail)}
@@ -267,7 +308,7 @@
     }}
   >
     <svelte:fragment slot="navigate-actions">
-      <UpDownNavigator element={object}/>
+      <UpDownNavigator element={object} />
     </svelte:fragment>
     <svelte:fragment slot="subtitle">
       {#if !headerLoading}
@@ -289,6 +330,33 @@
         </div>
       {/if}
     </svelte:fragment>
+    <svelte:fragment slot="actions">
+      {#if displayedIntegrations && displayedIntegrations.length > 0}
+        <div class="actions-divider" />
+        {#each displayedIntegrations as pr}
+          <Tooltip label={pr.label}>
+            <Button
+              icon={pr.icon}
+              size={'medium'}
+              kind={'transparent'}
+              highlight={rightSection === pr.presenter}
+              on:click={() => {
+                if (rightSection !== pr.presenter) rightSection = pr.presenter
+              }}
+            />
+          </Tooltip>
+        {/each}
+        <Button
+          icon={IconActivity}
+          size={'medium'}
+          kind={'transparent'}
+          highlight={!rightSection}
+          on:click={() => {
+            if (rightSection) rightSection = undefined
+          }}
+        />
+      {/if}
+    </svelte:fragment>
     <div class="main-editor">
       {#if mainEditor}
         <Component
@@ -301,36 +369,11 @@
             getMixins()
           }}
           on:click={(ev) => {
-            fullSize = true
             rightSection = ev.detail.presenter
           }}
         />
       {/if}
     </div>
-    {#if mixins.length > 0}
-      <div class="mixin-container">
-        <div
-          class="mixin-selector"
-          style={getMixinStyle(objectClass._id, selectedClass === objectClass._id)}
-          on:click={() => {
-            selectedClass = objectClass._id
-          }}
-        >
-          <Label label={objectClass.label} />
-        </div>
-        {#each mixins as mixin}
-          <div
-            class="mixin-selector"
-            style={getMixinStyle(mixin._id, selectedClass === mixin._id)}
-            on:click={() => {
-              selectedClass = mixin._id
-            }}
-          >
-            <Label label={mixin.label} />
-          </div>
-        {/each}
-      </div>
-    {/if}
     {#each collectionEditors as collection}
       {#if collection.editor}
         <div class="mt-14">
@@ -345,7 +388,7 @@
               [collection.key.key]: getCollectionCounter(hierarchy, object, collection.key)
             }}
           />
-          </div>
+        </div>
       {/if}
     {/each}
   </Panel>
@@ -357,26 +400,12 @@
     justify-content: center;
     flex-direction: column;
   }
-  .mixin-container {
-    margin-top: 2rem;
-    display: flex;
-    .mixin-selector {
-      margin-left: 0.5rem;
-      cursor: pointer;
-      height: 1.5rem;
-      min-width: 5.25rem;
 
-      border-radius: 0.5rem;
-
-      font-weight: 500;
-      font-size: 0.625rem;
-
-      text-transform: uppercase;
-      color: var(--theme-caption-color);
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+  .actions-divider {
+    margin: 0 0.25rem;
+    min-width: 1px;
+    width: 1px;
+    height: 1.5rem;
+    background-color: var(--divider-color);
   }
 </style>
diff --git a/plugins/view-resources/src/components/Menu.svelte b/plugins/view-resources/src/components/Menu.svelte
index 9039e993c1..227b37ec23 100644
--- a/plugins/view-resources/src/components/Menu.svelte
+++ b/plugins/view-resources/src/components/Menu.svelte
@@ -38,7 +38,7 @@
     actions = result.map(a => ({
       label: a.label,
       icon: a.icon as Asset,
-      action: async (props:any, evt: Event) => { invokeAction(evt, a.action) }
+      action: async (_:any, evt: Event) => { invokeAction(evt, a.action) }
     }))
     loaded = 1
   })
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index d945199c68..9c189e91db 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -21,7 +21,6 @@
   import { CheckBox, Component, IconDown, IconUp, Label, Loading, showPopup, Spinner } from '@anticrm/ui'
   import { BuildModelKey } from '@anticrm/view'
   import { createEventDispatcher } from 'svelte'
-  import { SelectDirection } from '../selection'
   import { buildModel, LoadingProps } from '../utils'
   import Menu from './Menu.svelte'
 
@@ -128,7 +127,7 @@
     dispatch('row-focus', object)
   }
 
-  export function select (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection): void {
+  export function select (offset: 1 | -1 | 0, of?: Doc): void {
     let pos = (((of !== undefined) ? objects.findIndex(it => it._id === of._id) : selection) ?? -1)
     pos += offset
     if (pos < 0) {
diff --git a/plugins/view-resources/src/components/TableBrowser.svelte b/plugins/view-resources/src/components/TableBrowser.svelte
index 5409ef02d5..86c5e4828f 100644
--- a/plugins/view-resources/src/components/TableBrowser.svelte
+++ b/plugins/view-resources/src/components/TableBrowser.svelte
@@ -36,7 +36,7 @@
     (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
       if (dir === 'vertical') {
         // Select next
-        table.select(offset, of, dir)
+        table.select(offset, of)
       }
     }
   )
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 46ea472569..6b29a38687 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -303,7 +303,10 @@
     if (window.innerWidth < 1100 && !navFloat) {
       visibileNav = false
       navFloat = true
-    } else if (window.innerWidth >= 1100 && navFloat) navFloat = false
+    } else if (window.innerWidth >= 1100 && navFloat) {
+      navFloat = false
+      visibileNav = true
+    }
   }
   const checkOnHide = (): void => {
     if (visibileNav && navFloat) visibileNav = false
diff --git a/tests/sanity/tests/recruit.spec.ts b/tests/sanity/tests/recruit.spec.ts
index a641ca517d..da7500c378 100644
--- a/tests/sanity/tests/recruit.spec.ts
+++ b/tests/sanity/tests/recruit.spec.ts
@@ -53,7 +53,7 @@ test.describe('recruit tests', () => {
 
     await page.click('text=Candidates')
     await page.click('text=Andrey P.')
-    await page.locator('.mixin-selector').locator('text="Candidate"').click()
+    // await page.locator('.mixin-selector').locator('text="Candidate"').click()
 
     // Click on Add button
     await page.click('.applications-container .flex-row-center .flex-center')