From d1adf71e57c1ff2b966216745996d82f204b3aa1 Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@gmail.com>
Date: Mon, 2 Oct 2023 15:55:16 +0700
Subject: [PATCH 1/5] UBER-963: Related issues

* UBER-963: Related issues
* UBER-961: Comment content doesn't fit.
* A bit of scroller and resize performance improvements

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 models/lead/src/index.ts                      |  20 ++
 models/recruit/src/index.ts                   |  40 +++-
 packages/theme/styles/popups.scss             |   7 +
 packages/ui/src/components/Lazy.svelte        |  31 +--
 packages/ui/src/components/Scroller.svelte    |  38 ++--
 packages/ui/src/components/SelectPopup.svelte |  15 +-
 .../ui/src/components/TooltipInstance.svelte  | 204 +++++++++++++-----
 packages/ui/src/lazy.ts                       |  11 +-
 packages/ui/src/resize.ts                     |  23 +-
 packages/ui/src/utils.ts                      |  18 ++
 plugins/recruit-assets/lang/en.json           |   1 -
 plugins/recruit-assets/lang/ru.json           |   1 -
 .../src/components/EditVacancy.svelte         |   2 +-
 .../src/components/Organizations.svelte       |   5 +-
 .../src/components/Vacancies.svelte           |   7 +-
 .../components/VacancyTemplateEditor.svelte   |   2 +-
 plugins/recruit-resources/src/plugin.ts       |   1 -
 plugins/task/src/utils.ts                     |   2 +-
 plugins/tracker-assets/lang/en.json           |   1 +
 plugins/tracker-assets/lang/ru.json           |   1 +
 .../issues/edit/SubIssueSelector.svelte       | 106 ++++-----
 .../issues/edit/SubIssuesSelector.svelte      | 103 +++++----
 .../related/RelatedIssueSelector.svelte       | 104 ++++-----
 plugins/tracker-resources/src/plugin.ts       |   1 +
 plugins/tracker-resources/src/utils.ts        |  10 +-
 .../src/components/EditDoc.svelte             |  18 +-
 .../src/components/Table.svelte               |  41 ++--
 .../src/components/Workbench.svelte           |  10 +-
 28 files changed, 536 insertions(+), 287 deletions(-)

diff --git a/models/lead/src/index.ts b/models/lead/src/index.ts
index 011552ddd65..8bfba3750e0 100644
--- a/models/lead/src/index.ts
+++ b/models/lead/src/index.ts
@@ -213,6 +213,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Relations
         },
         'comments',
@@ -252,6 +255,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Issues
         },
         'status',
@@ -551,6 +557,20 @@ export function createModel (builder: Builder): void {
     filters: ['_class']
   })
 
+  builder.mixin(lead.mixin.Customer, core.class.Class, view.mixin.ObjectEditorFooter, {
+    editor: tracker.component.RelatedIssuesSection,
+    props: {
+      label: tracker.string.RelatedIssues
+    }
+  })
+
+  builder.mixin(lead.class.Lead, core.class.Class, view.mixin.ObjectEditorFooter, {
+    editor: tracker.component.RelatedIssuesSection,
+    props: {
+      label: tracker.string.RelatedIssues
+    }
+  })
+
   createAction(builder, {
     action: workbench.actionImpl.Navigate,
     actionProps: {
diff --git a/models/recruit/src/index.ts b/models/recruit/src/index.ts
index 2afccfa4ec1..0e7d0f8fdbb 100644
--- a/models/recruit/src/index.ts
+++ b/models/recruit/src/index.ts
@@ -407,6 +407,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Relations
         },
         'comments',
@@ -487,6 +490,14 @@ export function createModel (builder: Builder): void {
           label: recruit.string.Applications
         },
         'comments',
+        {
+          key: '',
+          presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
+          label: tracker.string.Issues
+        },
         '$lookup.company',
         '$lookup.company.$lookup.channels',
         'location',
@@ -523,6 +534,12 @@ export function createModel (builder: Builder): void {
           label: recruit.string.Applications
         },
         'comments',
+        {
+          key: '',
+          presenter: tracker.component.RelatedIssueSelector,
+          label: tracker.string.Issues,
+          props: { size: 'small', kind: 'link' }
+        },
         '$lookup.channels',
         {
           key: '@applications.modifiedOn',
@@ -558,6 +575,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Issues
         },
         'status',
@@ -606,6 +626,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Issues
         },
         'status',
@@ -864,6 +887,12 @@ export function createModel (builder: Builder): void {
           props: { kind: 'list', size: 'small', shouldShowName: false }
         },
         { key: 'comments', displayProps: { key: 'comments', suffix: true } },
+        {
+          key: '',
+          presenter: tracker.component.RelatedIssueSelector,
+          label: tracker.string.Issues,
+          props: { size: 'small' }
+        },
         {
           key: '$lookup.channels',
           label: contact.string.ContactInfo,
@@ -914,6 +943,11 @@ export function createModel (builder: Builder): void {
         },
         'description',
         { key: 'comments', displayProps: { key: 'comments', suffix: true } },
+        {
+          key: '',
+          presenter: tracker.component.RelatedIssueSelector,
+          label: tracker.string.Issues
+        },
         { key: '', displayProps: { grow: true } },
         {
           key: '$lookup.company',
@@ -1601,19 +1635,19 @@ export function createModel (builder: Builder): void {
   builder.mixin(recruit.mixin.Candidate, core.class.Class, view.mixin.ObjectEditorFooter, {
     editor: tracker.component.RelatedIssuesSection,
     props: {
-      label: recruit.string.RelatedIssues
+      label: tracker.string.RelatedIssues
     }
   })
   builder.mixin(recruit.class.Vacancy, core.class.Class, view.mixin.ObjectEditorFooter, {
     editor: tracker.component.RelatedIssuesSection,
     props: {
-      label: recruit.string.RelatedIssues
+      label: tracker.string.RelatedIssues
     }
   })
   builder.mixin(recruit.class.Applicant, core.class.Class, view.mixin.ObjectEditorFooter, {
     editor: tracker.component.RelatedIssuesSection,
     props: {
-      label: recruit.string.RelatedIssues
+      label: tracker.string.RelatedIssues
     }
   })
 
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index c81971483f5..6d35bfd4740 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -22,11 +22,18 @@
   min-width: 12.5rem;
   max-width: 17rem;
   max-height: 22rem;
+
   background: var(--theme-popup-color);
   border: 1px solid var(--theme-popup-divider);
   border-radius: .5rem;
   box-shadow: var(--theme-popup-shadow);
 
+  &.noShadow {
+    background: none;
+    border: none;
+    box-shadow: none;
+  }
+
   &.full-width {
     flex-grow: 1;
     background: none;
diff --git a/packages/ui/src/components/Lazy.svelte b/packages/ui/src/components/Lazy.svelte
index 3dedf80a0c8..17f08cb6e92 100644
--- a/packages/ui/src/components/Lazy.svelte
+++ b/packages/ui/src/components/Lazy.svelte
@@ -2,27 +2,28 @@
   import { createEventDispatcher } from 'svelte'
   const dispatch = createEventDispatcher()
 
-  import { lazyObserver } from '../lazy'
+  import { lazyObserver, isLazyDisabled } from '../lazy'
 
-  let visible = false
+  let visible = isLazyDisabled()
 </script>
 
-<div
-  use:lazyObserver={(val) => {
-    if (val) {
-      visible = true
-      dispatch('visible')
-    }
-  }}
->
-  {#if visible}
-    <slot />
-  {:else}
+{#if !visible}
+  <div
+    use:lazyObserver={(val, unsubscribe) => {
+      if (val) {
+        visible = true
+        dispatch('visible')
+        unsubscribe?.()
+      }
+    }}
+  >
     <!-- Zero-width space character -->
     {#if $$slots.loading}
       <slot name="loading" />
     {:else}
       &#8203;
     {/if}
-  {/if}
-</div>
+  </div>
+{:else}
+  <slot />
+{/if}
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 2c7ba0be150..eb536b10d81 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -22,6 +22,7 @@
   import IconUpOutline from './icons/UpOutline.svelte'
   import IconDownOutline from './icons/DownOutline.svelte'
   import HalfUpDown from './icons/HalfUpDown.svelte'
+  import { DelayedCaller } from '../utils'
 
   export let padding: string | undefined = undefined
   export let autoscroll: boolean = false
@@ -249,20 +250,16 @@
     }
   }
 
-  let checkBarTimeout: any | undefined = undefined
-  let checkHBarTimeout: any | undefined = undefined
+  const delayedCaller = new DelayedCaller(25)
 
-  const delayCall = (op: () => void, h?: boolean) => {
-    if (h) {
-      clearTimeout(checkHBarTimeout)
-      checkHBarTimeout = setTimeout(op, 5)
-    } else {
-      clearTimeout(checkBarTimeout)
-      checkBarTimeout = setTimeout(op, 5)
-    }
+  const delayCall = (op: () => void) => {
+    delayedCaller.call(op)
   }
 
   const checkFade = (): void => {
+    delayCall(_checkFade)
+  }
+  const _checkFade = (): void => {
     if (divScroll) {
       beforeContent = divScroll.scrollTop
       belowContent = divScroll.scrollHeight - divScroll.clientHeight - beforeContent
@@ -279,11 +276,18 @@
         else if (rightContent > 2) maskH = 'left'
         else maskH = 'none'
       }
-      if (inter.size) checkIntersectionFade()
+      if (inter.size) {
+        checkIntersectionFade()
+      }
       renderFade()
     }
-    if (!isScrolling) delayCall(checkBar)
-    if (!isScrolling && horizontal) delayCall(checkBarH, true)
+
+    if (!isScrolling) {
+      checkBar()
+    }
+    if (!isScrolling && horizontal) {
+      checkBarH()
+    }
   }
 
   function checkAutoScroll () {
@@ -383,8 +387,12 @@
     if (divScroll && divBox) {
       divScroll.addEventListener('wheel', wheelEvent)
       divScroll.addEventListener('scroll', checkFade)
-      delayCall(checkBar)
-      if (horizontal) delayCall(checkBarH, true)
+      delayCall(() => {
+        checkBar()
+        if (horizontal) {
+          checkBarH()
+        }
+      })
     }
   })
   onDestroy(() => {
diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
index 20ddf2c7095..f472e4a5cfd 100644
--- a/packages/ui/src/components/SelectPopup.svelte
+++ b/packages/ui/src/components/SelectPopup.svelte
@@ -50,6 +50,8 @@
   export let value: Array<ValueType>
   export let width: 'medium' | 'large' | 'full' = 'medium'
   export let size: 'small' | 'medium' | 'large' = 'small'
+  export let onSelect: ((value: ValueType['id']) => void) | undefined = undefined
+  export let showShadow: boolean = true
 
   let search: string = ''
 
@@ -60,6 +62,14 @@
   let selection = 0
   let list: ListView
 
+  function sendSelect (id: ValueType['id']): void {
+    if (onSelect) {
+      onSelect(value[selection].id)
+    } else {
+      dispatch('close', value[selection].id)
+    }
+  }
+
   function onKeydown (key: KeyboardEvent): void {
     if (key.code === 'ArrowUp') {
       key.stopPropagation()
@@ -74,7 +84,7 @@
     if (key.code === 'Enter') {
       key.preventDefault()
       key.stopPropagation()
-      dispatch('close', value[selection].id)
+      sendSelect(value[selection].id)
     }
   }
   const manager = createFocusManager()
@@ -88,6 +98,7 @@
 
 <div
   class="selectPopup"
+  class:noShadow={showShadow === false}
   class:full-width={width === 'full'}
   class:max-width-40={width === 'large'}
   use:resizeObserver={() => {
@@ -121,7 +132,7 @@
       >
         <svelte:fragment slot="item" let:item={itemId}>
           {@const item = filteredObjects[itemId]}
-          <button class="menu-item withList w-full" on:click={() => dispatch('close', item.id)}>
+          <button class="menu-item withList w-full" on:click={() => sendSelect(item.id)}>
             <div class="flex-row-center flex-grow pointer-events-none">
               {#if item.component}
                 <div class="flex-grow clear-mins"><svelte:component this={item.component} {...item.props} /></div>
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index ced112eace3..371af0ef6f0 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -24,7 +24,7 @@
   let tooltipHTML: HTMLElement
   let nubHTML: HTMLElement
   let dir: TooltipAlignment
-  let rect: DOMRect
+  let rect: DOMRect | undefined
   let rectAnchor: DOMRect
   let tooltipSW: boolean // tooltipSW = true - Label; false - Component
   let nubDirection: 'top' | 'bottom' | 'left' | 'right' | undefined = undefined
@@ -37,18 +37,61 @@
   $: onUpdate = $tooltip.onUpdate
   $: kind = $tooltip.kind
 
+  interface TooltipOptions {
+    top: string
+    bottom: string
+    left: string
+    right: string
+    width: string
+    height: string
+    transform: string
+    visibility: string
+    classList: string
+  }
+
+  let options: TooltipOptions = {
+    top: '',
+    bottom: '',
+    left: '',
+    right: '',
+    width: '',
+    height: '',
+    transform: '',
+    visibility: 'hidden',
+    classList: ''
+  }
+
   const clearStyles = (): void => {
     shown = false
-    tooltipHTML.style.top =
-      tooltipHTML.style.bottom =
-      tooltipHTML.style.left =
-      tooltipHTML.style.right =
-      tooltipHTML.style.height =
-        ''
+    options = {
+      top: '',
+      bottom: '',
+      left: '',
+      right: '',
+      width: '',
+      height: '',
+      transform: '',
+      visibility: 'hidden',
+      classList: ''
+    }
   }
 
-  const fitTooltip = (tooltipHTMLToCheck: HTMLElement): void => {
+  const fitTooltip = (tooltipHTMLToCheck: HTMLElement, clWidth?: number): TooltipOptions => {
+    const options: TooltipOptions = {
+      top: '',
+      bottom: '',
+      left: '',
+      right: '',
+      width: '',
+      height: '',
+      transform: '',
+      visibility: 'visible',
+      classList: ''
+    }
     if (($tooltip.label || $tooltip.component) && tooltipHTML && tooltipHTMLToCheck) {
+      if (clWidth === undefined) {
+        clWidth = tooltipHTML.clientWidth
+      }
       if ($tooltip.element) {
         rect = $tooltip.element.getBoundingClientRect()
         rectAnchor = $tooltip.anchor
@@ -58,28 +101,28 @@
         if ($tooltip.component) {
           clearStyles()
           if (rect.bottom + tooltipHTMLToCheck.clientHeight + 28 < docHeight) {
-            tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
+            options.top = `calc(${rect.bottom}px + 5px + .25rem)`
             dir = 'bottom'
           } else if (rect.top > docHeight - rect.bottom) {
-            tooltipHTML.style.bottom = `calc(${docHeight - rect.y}px + 5px + .25rem)`
+            options.bottom = `calc(${docHeight - rect.y}px + 5px + .25rem)`
             if (tooltipHTML.clientHeight > rect.top - 28) {
-              tooltipHTML.style.top = '1rem'
-              tooltipHTML.style.height = `calc(${rect.top}px - 5px - 1.25rem)`
+              options.top = '1rem'
+              options.height = `calc(${rect.top}px - 5px - 1.25rem)`
             }
             dir = 'top'
           } else {
-            tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
+            options.top = `calc(${rect.bottom}px + 5px + .25rem)`
             if (tooltipHTMLToCheck.clientHeight > docHeight - rect.bottom - 28) {
-              tooltipHTML.style.bottom = '1rem'
-              tooltipHTML.style.height = `calc(${docHeight - rect.bottom}px - 5px - 1.25rem)`
+              options.bottom = '1rem'
+              options.height = `calc(${docHeight - rect.bottom}px - 5px - 1.25rem)`
             }
             dir = 'bottom'
           }
 
           const tempLeft = rect.width / 2 + rect.left - clWidth / 2
-          if (tempLeft + clWidth > docWidth - 8) tooltipHTML.style.right = '.5rem'
-          else if (tempLeft < 8) tooltipHTML.style.left = '.5rem'
-          else tooltipHTML.style.left = `${tempLeft}px`
+          if (tempLeft + clWidth > docWidth - 8) options.right = '.5rem'
+          else if (tempLeft < 8) options.left = '.5rem'
+          else options.left = `${tempLeft}px`
 
           if (nubHTML) {
             nubHTML.style.top = rect.top + 'px'
@@ -97,43 +140,53 @@
           } else dir = $tooltip.direction
 
           if (dir === 'right') {
-            tooltipHTML.style.top = rectAnchor.y + rectAnchor.height / 2 + 'px'
-            tooltipHTML.style.left = `calc(${rectAnchor.right}px + .75rem)`
-            tooltipHTML.style.transform = 'translateY(-50%)'
+            options.top = rectAnchor.y + rectAnchor.height / 2 + 'px'
+            options.left = `calc(${rectAnchor.right}px + .75rem)`
+            options.transform = 'translateY(-50%)'
           } else if (dir === 'left') {
-            tooltipHTML.style.top = rectAnchor.y + rectAnchor.height / 2 + 'px'
-            tooltipHTML.style.right = `calc(${docWidth - rectAnchor.x}px + .75rem)`
-            tooltipHTML.style.transform = 'translateY(-50%)'
+            options.top = rectAnchor.y + rectAnchor.height / 2 + 'px'
+            options.right = `calc(${docWidth - rectAnchor.x}px + .75rem)`
+            options.transform = 'translateY(-50%)'
           } else if (dir === 'bottom') {
-            tooltipHTML.style.top = `calc(${rectAnchor.bottom}px + .5rem)`
-            tooltipHTML.style.left = rectAnchor.x + rectAnchor.width / 2 + 'px'
-            tooltipHTML.style.transform = 'translateX(-50%)'
+            options.top = `calc(${rectAnchor.bottom}px + .5rem)`
+            options.left = rectAnchor.x + rectAnchor.width / 2 + 'px'
+            options.transform = 'translateX(-50%)'
           } else if (dir === 'top') {
-            tooltipHTML.style.bottom = `calc(${docHeight - rectAnchor.y}px + .75rem)`
-            tooltipHTML.style.left = rectAnchor.x + rectAnchor.width / 2 + 'px'
-            tooltipHTML.style.transform = 'translateX(-50%)'
+            options.bottom = `calc(${docHeight - rectAnchor.y}px + .75rem)`
+            options.left = rectAnchor.x + rectAnchor.width / 2 + 'px'
+            options.transform = 'translateX(-50%)'
           }
-          tooltipHTML.classList.remove('no-arrow')
         }
       } else {
-        tooltipHTML.style.top = '50%'
-        tooltipHTML.style.left = '50%'
-        tooltipHTML.style.width = 'min-content'
-        tooltipHTML.style.height = 'min-content'
-        tooltipHTML.style.transform = 'translate(-50%, -50%)'
-        tooltipHTML.classList.add('no-arrow')
+        options.top = '50%'
+        options.left = '50%'
+        options.width = 'min-content'
+        options.height = 'min-content'
+        options.transform = 'translate(-50%, -50%)'
+        options.classList = 'no-arrow'
       }
-      tooltipHTML.style.visibility = 'visible'
+      options.visibility = 'visible'
       shown = true
     } else if (tooltipHTML) {
       shown = false
-      tooltipHTML.style.visibility = 'hidden'
+      options.visibility = 'hidden'
     }
+    return options
   }
 
-  const fitSubmenu = (): void => {
+  const fitSubmenu = (): TooltipOptions => {
+    const options: TooltipOptions = {
+      top: '',
+      bottom: '',
+      left: '',
+      right: '',
+      width: '',
+      height: '',
+      visibility: 'visible',
+      transform: '',
+      classList: ''
+    }
     if (($tooltip.label || $tooltip.component) && tooltipHTML) {
-      clearStyles()
       if ($tooltip.element) {
         rect = $tooltip.element.getBoundingClientRect()
         const rectP = tooltipHTML.getBoundingClientRect()
@@ -145,17 +198,26 @@
             : rect.bottom > docHeight - rect.top
               ? 'top'
               : 'bottom'
-        if (dirH === 'right') tooltipHTML.style.left = rect.right - 4 + 'px'
-        else tooltipHTML.style.right = docWidth - rect.left - 4 + 'px'
-        if (dirV === 'bottom') tooltipHTML.style.top = rect.top - 4 + 'px'
-        else tooltipHTML.style.bottom = docHeight - rect.bottom - 4 + 'px'
-        tooltipHTML.style.visibility = 'visible'
+        if (dirH === 'right') {
+          options.left = rect.right - 4 + 'px'
+        } else {
+          options.right = docWidth - rect.left - 4 + 'px'
+        }
+        if (dirV === 'bottom') {
+          options.top = rect.top - 4 + 'px'
+        } else {
+          options.bottom = docHeight - rect.bottom - 4 + 'px'
+        }
+        options.visibility = 'visible'
       }
-    } else if (tooltipHTML) tooltipHTML.style.visibility = 'hidden'
+    } else if (tooltipHTML) {
+      options.visibility = 'hidden'
+    }
+    return options
   }
 
   const hideTooltip = (): void => {
-    if (tooltipHTML) tooltipHTML.style.visibility = 'hidden'
+    if (tooltipHTML) options.visibility = 'hidden'
     closeTooltip()
   }
 
@@ -174,8 +236,18 @@
     }
   }
 
-  $: kind === 'submenu' ? fitSubmenu() : fitTooltip(tooltipHTML)
-  afterUpdate(() => (kind === 'submenu' ? fitSubmenu() : fitTooltip(tooltipHTML)))
+  $: if (kind === 'submenu') {
+    options = fitSubmenu()
+  } else {
+    options = fitTooltip(tooltipHTML, clWidth)
+  }
+  afterUpdate(() => {
+    if (kind === 'submenu') {
+      options = fitSubmenu()
+    } else {
+      options = fitTooltip(tooltipHTML, clWidth)
+    }
+  })
   onDestroy(() => hideTooltip())
 </script>
 
@@ -208,13 +280,20 @@
 />
 {#if $tooltip.component && $tooltip.kind !== 'submenu'}
   <div
-    class="popup-tooltip"
+    class="popup-tooltip {options.classList}"
     class:shown
     class:doublePadding={$tooltip.label}
     use:resizeObserver={(element) => {
       clWidth = element.clientWidth
-      fitTooltip(tooltipHTML)
+      options = fitTooltip(tooltipHTML, clWidth)
     }}
+    style:top={options.top}
+    style:bottom={options.bottom}
+    style:left={options.left}
+    style:right={options.right}
+    style:width={options.width}
+    style:height={options.height}
+    style:transform={options.transform}
     bind:this={tooltipHTML}
   >
     {#if $tooltip.label}
@@ -241,7 +320,17 @@
   </div>
   <div bind:this={nubHTML} class="nub {nubDirection ?? ''}" class:shown />
 {:else if $tooltip.label && $tooltip.kind !== 'submenu'}
-  <div class="tooltip {dir ?? ''}" bind:this={tooltipHTML}>
+  <div
+    class="tooltip {dir ?? ''} {options.classList}"
+    bind:this={tooltipHTML}
+    style:top={options.top}
+    style:bottom={options.bottom}
+    style:left={options.left}
+    style:right={options.right}
+    style:width={options.width}
+    style:height={options.height}
+    style:transform={options.transform}
+  >
     <Label label={$tooltip.label} params={$tooltip.props ?? {}} />
     {#if $tooltip.keys !== undefined}
       <div class="keys">
@@ -265,10 +354,17 @@
   </div>
 {:else if $tooltip.kind === 'submenu'}
   <div
-    class="submenu-container {dir ?? ''}"
+    class="submenu-container {dir ?? ''} {options.classList}"
     use:resizeObserver={(element) => {
       clWidth = element.clientWidth
     }}
+    style:top={options.top}
+    style:bottom={options.bottom}
+    style:left={options.left}
+    style:right={options.right}
+    style:width={options.width}
+    style:height={options.height}
+    style:transform={options.transform}
     bind:this={tooltipHTML}
   >
     {#if typeof $tooltip.component === 'string'}
diff --git a/packages/ui/src/lazy.ts b/packages/ui/src/lazy.ts
index 49f43d310ab..ddde8159f88 100644
--- a/packages/ui/src/lazy.ts
+++ b/packages/ui/src/lazy.ts
@@ -41,9 +41,14 @@ function listen (
   }
 }
 
-export function lazyObserver (node: Element, onVisible: (value: boolean) => void): any {
+/**
+ * @public
+ */
+export const isLazyDisabled = (): boolean => (localStorage.getItem('#platform.lazy.loading') ?? 'true') === 'true'
+
+export function lazyObserver (node: Element, onVisible: (value: boolean, unsubscribe?: () => void) => void): any {
   let visible = false
-  const lazyEnabled = (localStorage.getItem('#platform.lazy.loading') ?? 'true') === 'true'
+  const lazyEnabled = isLazyDisabled()
   if (!lazyEnabled) {
     visible = true
     onVisible(visible)
@@ -55,7 +60,7 @@ export function lazyObserver (node: Element, onVisible: (value: boolean) => void
 
   const destroy = listen('20%', node, ({ isIntersecting }) => {
     visible = isIntersecting
-    onVisible(visible)
+    onVisible(visible, destroy)
   })
 
   return {
diff --git a/packages/ui/src/resize.ts b/packages/ui/src/resize.ts
index 3ac776202eb..491e9b2a4b3 100644
--- a/packages/ui/src/resize.ts
+++ b/packages/ui/src/resize.ts
@@ -9,25 +9,40 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 //
 // See the License for the specific language governing permissions and
+
+import { DelayedCaller } from './utils'
+
 // limitations under the License.
 let observer: ResizeObserver
 let callbacks: WeakMap<Element, (element: Element) => any>
 
+const delayedCaller = new DelayedCaller(10)
+
 /**
  * @public
  */
 export function resizeObserver (element: Element, onResize: (element: Element) => any): { destroy: () => void } {
   if (observer === undefined) {
     callbacks = new WeakMap()
-    observer = new ResizeObserver((entries) => {
+    const entriesPending = new Set<Element>()
+
+    const notifyObservers = (): void => {
       window.requestAnimationFrame(() => {
-        for (const entry of entries) {
-          const onResize = callbacks.get(entry.target)
+        for (const target of entriesPending.values()) {
+          const onResize = callbacks.get(target)
           if (onResize != null) {
-            onResize(entry.target)
+            onResize(target)
           }
         }
+        entriesPending.clear()
       })
+    }
+
+    observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        entriesPending.add(entry.target)
+      }
+      delayedCaller.call(notifyObservers)
     })
   }
 
diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
index 5c8b9975205..b64f8ed7618 100644
--- a/packages/ui/src/utils.ts
+++ b/packages/ui/src/utils.ts
@@ -238,3 +238,21 @@ export function formatKey (key: string): string[][] {
   }
   return result
 }
+
+/**
+ * @public
+ */
+export class DelayedCaller {
+  op?: () => void
+  constructor (readonly delay: number = 10) {}
+  call (op: () => void): void {
+    const needTimeout = this.op !== undefined
+    this.op = op
+    if (needTimeout) {
+      setTimeout(() => {
+        this.op?.()
+        this.op = undefined
+      }, this.delay)
+    }
+  }
+}
diff --git a/plugins/recruit-assets/lang/en.json b/plugins/recruit-assets/lang/en.json
index bd2547d86ba..354dc5c2bcd 100644
--- a/plugins/recruit-assets/lang/en.json
+++ b/plugins/recruit-assets/lang/en.json
@@ -96,7 +96,6 @@
     "HasActiveApplicant":"Active Only",
     "HasNoActiveApplicant": "No Active",
     "NoneApplications": "None",
-    "RelatedIssues": "Related issues",
     "VacancyList": "Vacancies",
     "MatchVacancy": "Match to vacancy",
     "VacancyMatching": "Match Talents to vacancy",
diff --git a/plugins/recruit-assets/lang/ru.json b/plugins/recruit-assets/lang/ru.json
index dc292a48d16..95277c5b190 100644
--- a/plugins/recruit-assets/lang/ru.json
+++ b/plugins/recruit-assets/lang/ru.json
@@ -98,7 +98,6 @@
     "HasActiveApplicant":"Только активные",
     "HasNoActiveApplicant": "Не активные",
     "NoneApplications": "Отсутствуют",
-    "RelatedIssues": "Связанные задачи",
     "VacancyList": "Вакансии",
     "MatchVacancy": "Проверить на вакансию",
     "VacancyMatching": "Подбор кандидатов на вакансию",
diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte
index 5b2fc2af63c..6daad0316ff 100644
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@@ -199,7 +199,7 @@
       <VacancyApplications objectId={object._id} />
     </div>
     <div class="w-full mt-6">
-      <Component is={tracker.component.RelatedIssuesSection} props={{ object, label: recruit.string.RelatedIssues }} />
+      <Component is={tracker.component.RelatedIssuesSection} props={{ object, label: tracker.string.RelatedIssues }} />
     </div>
   </Panel>
 {/if}
diff --git a/plugins/recruit-resources/src/components/Organizations.svelte b/plugins/recruit-resources/src/components/Organizations.svelte
index c92d28ef2b1..35269f37a36 100644
--- a/plugins/recruit-resources/src/components/Organizations.svelte
+++ b/plugins/recruit-resources/src/components/Organizations.svelte
@@ -177,7 +177,8 @@
 
   function createConfig (
     descr: Viewlet | undefined,
-    preference: ViewletPreference | undefined
+    preference: ViewletPreference | undefined,
+    replacedKeys: Map<string, BuildModelKey>
   ): (string | BuildModelKey)[] {
     const base = preference?.config ?? descr?.config ?? []
     const result: (string | BuildModelKey)[] = []
@@ -191,7 +192,7 @@
     return result
   }
 
-  $: finalConfig = createConfig(viewlet, preference)
+  $: finalConfig = createConfig(viewlet, preference, replacedKeys)
 </script>
 
 <div class="ac-header full divide">
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte
index 2704c129581..d11abb9a00e 100644
--- a/plugins/recruit-resources/src/components/Vacancies.svelte
+++ b/plugins/recruit-resources/src/components/Vacancies.svelte
@@ -66,7 +66,7 @@
     (applications?.get(b._id as Ref<Vacancy>)?.modifiedOn ?? b.modifiedOn) -
     (applications?.get(a._id as Ref<Vacancy>)?.modifiedOn ?? a.modifiedOn)
 
-  const replacedKeys: Map<string, BuildModelKey> = new Map<string, BuildModelKey>([
+  $: replacedKeys = new Map<string, BuildModelKey>([
     [
       '@applications',
       {
@@ -100,7 +100,8 @@
   function createConfig (
     descr: Viewlet,
     preference: ViewletPreference | undefined,
-    applications: Map<Ref<Vacancy>, ApplicationInfo>
+    applications: Map<Ref<Vacancy>, ApplicationInfo>,
+    replacedKeys: Map<string, BuildModelKey>
   ): (string | BuildModelKey)[] {
     const base = preference?.config ?? descr.config
     const result: (string | BuildModelKey)[] = []
@@ -181,7 +182,7 @@
     props={{
       _class: recruit.class.Vacancy,
       options: viewlet.options,
-      config: createConfig(viewlet, preference, applications),
+      config: createConfig(viewlet, preference, applications, replacedKeys),
       viewlet,
       viewOptions,
       viewOptionsConfig: viewlet.viewOptions?.other,
diff --git a/plugins/recruit-resources/src/components/VacancyTemplateEditor.svelte b/plugins/recruit-resources/src/components/VacancyTemplateEditor.svelte
index 13b0d32704e..1c535a405aa 100644
--- a/plugins/recruit-resources/src/components/VacancyTemplateEditor.svelte
+++ b/plugins/recruit-resources/src/components/VacancyTemplateEditor.svelte
@@ -69,7 +69,7 @@
       <Icon icon={recruit.icon.Issue} size={'small'} />
     </div>
     <span class="antiSection-header__title">
-      <Label label={recruit.string.RelatedIssues} />
+      <Label label={tracker.string.RelatedIssues} />
     </span>
     <div class="buttons-group small-gap">
       <Button
diff --git a/plugins/recruit-resources/src/plugin.ts b/plugins/recruit-resources/src/plugin.ts
index 3848dc3d3dc..5457a01ba99 100644
--- a/plugins/recruit-resources/src/plugin.ts
+++ b/plugins/recruit-resources/src/plugin.ts
@@ -116,7 +116,6 @@ export default mergeIds(recruitId, recruit, {
     HasActiveApplicant: '' as IntlString,
     HasNoActiveApplicant: '' as IntlString,
     NoneApplications: '' as IntlString,
-    RelatedIssues: '' as IntlString,
 
     MatchVacancy: '' as IntlString,
     VacancyMatching: '' as IntlString,
diff --git a/plugins/task/src/utils.ts b/plugins/task/src/utils.ts
index c810ab49dbc..1a50c4f9448 100644
--- a/plugins/task/src/utils.ts
+++ b/plugins/task/src/utils.ts
@@ -65,7 +65,7 @@ export function getStates (space: SpaceWithStates | undefined, statusStore: IdMa
     return []
   }
 
-  const states = space.states.map((x) => statusStore.get(x) as Status).filter((p) => p !== undefined)
+  const states = (space.states ?? []).map((x) => statusStore.get(x) as Status).filter((p) => p !== undefined)
 
   return states
 }
diff --git a/plugins/tracker-assets/lang/en.json b/plugins/tracker-assets/lang/en.json
index 8a2607d4296..25593b65e59 100644
--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@@ -173,6 +173,7 @@
     "RelatedIssueSearchPlaceholder": "Search for issue to reference...",
     "Blocks": "Blocks",
     "Related": "Related",
+    "RelatedIssues": "Related issues",
 
     "EditIssue": "Edit {title}",
     "EditWorkflowStatuses": "Edit issue statuses",
diff --git a/plugins/tracker-assets/lang/ru.json b/plugins/tracker-assets/lang/ru.json
index a78ad5240aa..c6298acdb0e 100644
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@@ -173,6 +173,7 @@
     "RelatedIssueSearchPlaceholder": "Поиск связанной задачи...",
     "Blocks": "Блокирует",
     "Related": "Связан",
+    "RelatedIssues": "Связанные задачи",
 
     "EditIssue": "Редактирование {title}",
     "EditWorkflowStatuses": "Редактировать статусы задач",
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
index 26206d925f3..145a8122359 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
@@ -13,8 +13,8 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { SortingOrder, WithLookup } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
+  import core, { IdMap, SortingOrder, StatusCategory, WithLookup, toIdMap } from '@hcengineering/core'
+  import { createQuery, getClient } from '@hcengineering/presentation'
   import { Issue, IssueStatus } from '@hcengineering/tracker'
   import {
     Icon,
@@ -25,7 +25,6 @@
     closeTooltip,
     getPlatformColorDef,
     navigate,
-    showPopup,
     themeStore,
     tooltip
   } from '@hcengineering/ui'
@@ -33,6 +32,7 @@
   import { getIssueId, issueLinkFragmentProvider } from '../../../issues'
   import tracker from '../../../plugin'
   import IssueStatusIcon from '../IssueStatusIcon.svelte'
+  import { listIssueStatusOrder } from '../../../utils'
 
   export let issue: WithLookup<Issue>
 
@@ -56,49 +56,6 @@
     }
   }
 
-  function showSubIssues () {
-    if (subIssues) {
-      closeTooltip()
-      showPopup(
-        SelectPopup,
-        {
-          value: subIssues.map((iss) => {
-            const project = iss.$lookup?.space
-            const status = iss.$lookup?.status as WithLookup<IssueStatus>
-            const icon = status.$lookup?.category?.icon
-            const color = status.color ?? status.$lookup?.category?.color
-
-            return {
-              id: iss._id,
-              icon,
-              isSelected: iss._id === issue._id,
-              ...(project !== undefined ? { text: `${getIssueId(project, iss)} ${iss.title}` } : undefined),
-              ...(color !== undefined ? { iconColor: getPlatformColorDef(color, $themeStore.dark).icon } : undefined)
-            }
-          }),
-          width: 'large'
-        },
-        {
-          getBoundingClientRect: () => {
-            const rect = subIssuesElement.getBoundingClientRect()
-            const offsetX = 5
-            const offsetY = -1
-
-            return DOMRect.fromRect({ width: 1, height: 1, x: rect.right + offsetX, y: rect.top + offsetY })
-          }
-        },
-        (selectedIssue) => {
-          if (selectedIssue !== undefined) {
-            const issue = subIssues?.find((p) => p._id === selectedIssue)
-            if (issue) {
-              openIssue(issue)
-            }
-          }
-        }
-      )
-    }
-  }
-
   $: areSubIssuesLoading = !subIssues
   $: parentIssue = issue.$lookup?.attachedTo ? (issue.$lookup?.attachedTo as Issue) : null
   $: if (parentIssue && parentIssue.subIssues > 0) {
@@ -119,6 +76,52 @@
   }
 
   $: parentStatus = parentIssue ? $statusStore.get(parentIssue.status) : undefined
+
+  let categories: IdMap<StatusCategory> = new Map()
+
+  getClient()
+    .findAll(core.class.StatusCategory, {})
+    .then((res) => {
+      categories = toIdMap(res)
+    })
+
+  let sortedSubIssues: WithLookup<Issue>[] = []
+
+  $: {
+    if (subIssues !== undefined) {
+      subIssues.sort(
+        (a, b) =>
+          listIssueStatusOrder.indexOf($statusStore.get(a.status)?.category ?? tracker.issueStatusCategory.Backlog) -
+          listIssueStatusOrder.indexOf($statusStore.get(b.status)?.category ?? tracker.issueStatusCategory.Backlog)
+      )
+      sortedSubIssues = subIssues ?? []
+    }
+  }
+
+  $: subIssueValue = sortedSubIssues.map((iss) => {
+    const project = iss.$lookup?.space
+    const status = iss.$lookup?.status as WithLookup<IssueStatus>
+    const icon = status.$lookup?.category?.icon
+    const color = status.color ?? status.$lookup?.category?.color
+
+    const c = $statusStore.get(iss.status)?.category
+    const category = c !== undefined ? categories.get(c) : undefined
+
+    return {
+      id: iss._id,
+      icon,
+      isSelected: iss._id === issue._id,
+      ...(project !== undefined ? { text: `${getIssueId(project, iss)} ${iss.title}` } : undefined),
+      ...(color !== undefined ? { iconColor: getPlatformColorDef(color, $themeStore.dark).icon } : undefined),
+      category:
+        category !== undefined
+          ? {
+              label: category.label,
+              icon: category.icon
+            }
+          : undefined
+    }
+  })
 </script>
 
 {#if parentIssue}
@@ -152,8 +155,15 @@
         <div
           bind:this={subIssuesElement}
           class="flex-center sub-issues cursor-pointer"
-          use:tooltip={{ label: tracker.string.OpenSubIssues, direction: 'bottom' }}
-          on:click|preventDefault={showSubIssues}
+          use:tooltip={{
+            component: SelectPopup,
+            props: {
+              value: subIssueValue,
+              onSelect: openIssue,
+              showShadow: false,
+              width: 'large'
+            }
+          }}
         >
           <span class="overflow-label">{subIssues?.length}</span>
           <div class="ml-2">
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
index 6f35e0e635f..b65dd394847 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
@@ -13,23 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Ref, SortingOrder, Status, WithLookup } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
+  import core, { IdMap, Ref, SortingOrder, Status, StatusCategory, WithLookup, toIdMap } from '@hcengineering/core'
+  import { createQuery, getClient } from '@hcengineering/presentation'
   import { Issue, Project } from '@hcengineering/tracker'
-  import {
-    Button,
-    ButtonKind,
-    ButtonSize,
-    ProgressCircle,
-    SelectPopup,
-    closeTooltip,
-    showPanel,
-    showPopup
-  } from '@hcengineering/ui'
+  import { Button, ButtonKind, ButtonSize, ProgressCircle, SelectPopup, showPanel } from '@hcengineering/ui'
   import { statusStore } from '@hcengineering/view-resources'
   import { getIssueId } from '../../../issues'
   import tracker from '../../../plugin'
-  import { subIssueListProvider } from '../../../utils'
+  import { listIssueStatusOrder, subIssueListProvider } from '../../../utils'
   import IssueStatusIcon from '../IssueStatusIcon.svelte'
 
   export let value: WithLookup<Issue>
@@ -46,6 +37,7 @@
   $: project = currentProject
 
   let subIssues: Issue[] = []
+  let _subIssues: Issue[] = []
   let countComplete: number = 0
 
   const projectQuery = createQuery()
@@ -64,11 +56,18 @@
 
   $: update(value)
 
+  let categories: IdMap<StatusCategory> = new Map()
+
+  getClient()
+    .findAll(core.class.StatusCategory, {})
+    .then((res) => {
+      categories = toIdMap(res)
+    })
+
   function update (value: WithLookup<Issue>): void {
     if (value.$lookup?.subIssues !== undefined) {
       query.unsubscribe()
       subIssues = value.$lookup.subIssues as Issue[]
-      subIssues.sort((a, b) => (a.rank ?? '').localeCompare(b.rank ?? ''))
     } else if (value.subIssues > 0) {
       query.query(tracker.class.Issue, { attachedTo: value._id }, (res) => (subIssues = res), {
         sort: { rank: SortingOrder.Ascending }
@@ -101,43 +100,38 @@
     }
   }
 
-  function showSubIssues () {
-    if (subIssues) {
-      closeTooltip()
-      showPopup(
-        SelectPopup,
-        {
-          value: subIssues.map((iss) => {
-            const text = project ? `${getIssueId(project, iss)} ${iss.title}` : iss.title
-            return {
-              id: iss._id,
-              text,
-              isSelected: iss._id === value._id,
-              icon: IssueStatusIcon,
-              iconProps: {
-                value: $statusStore.get(iss.status),
-                size: 'small',
-                fill: undefined
-              }
-            }
-          }),
-          width: 'large'
-        },
-        {
-          getBoundingClientRect: () => {
-            const rect = btn.getBoundingClientRect()
-            const offsetX = 0
-            const offsetY = 0
+  $: {
+    subIssues.sort(
+      (a, b) =>
+        listIssueStatusOrder.indexOf($statusStore.get(a.status)?.category ?? tracker.issueStatusCategory.Backlog) -
+        listIssueStatusOrder.indexOf($statusStore.get(b.status)?.category ?? tracker.issueStatusCategory.Backlog)
+    )
+    _subIssues = subIssues
+  }
 
-            return DOMRect.fromRect({ width: 1, height: 1, x: rect.left + offsetX, y: rect.bottom + offsetY })
-          }
-        },
-        (selectedIssue) => {
-          selectedIssue !== undefined && openIssue(selectedIssue)
-        }
-      )
+  $: subIssuesValue = _subIssues.map((iss) => {
+    const text = project ? `${getIssueId(project, iss)} ${iss.title}` : iss.title
+    const c = $statusStore.get(iss.status)?.category
+    const category = c !== undefined ? categories.get(c) : undefined
+    return {
+      id: iss._id,
+      text,
+      isSelected: iss._id === value._id,
+      icon: IssueStatusIcon,
+      iconProps: {
+        value: $statusStore.get(iss.status),
+        size: 'small',
+        fill: undefined
+      },
+      category:
+        category !== undefined
+          ? {
+              label: category.label,
+              icon: category.icon
+            }
+          : undefined
     }
-  }
+  })
 </script>
 
 {#if hasSubIssues}
@@ -147,9 +141,14 @@
       {kind}
       {size}
       {justify}
-      on:click={(ev) => {
-        ev.stopPropagation()
-        if (subIssues) showSubIssues()
+      showTooltip={{
+        component: SelectPopup,
+        props: {
+          value: subIssuesValue,
+          onSelect: openIssue,
+          showShadow: false,
+          width: 'large'
+        }
       }}
     >
       <svelte:fragment slot="content">
diff --git a/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte b/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
index 7105ae5559e..7dc50b5e76c 100644
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/related/RelatedIssueSelector.svelte
@@ -13,22 +13,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Doc, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
+  import core, { Doc, IdMap, Ref, SortingOrder, StatusCategory, WithLookup, toIdMap } from '@hcengineering/core'
+  import { createQuery, getClient } from '@hcengineering/presentation'
   import { Issue, Project } from '@hcengineering/tracker'
-  import {
-    Button,
-    ButtonKind,
-    ButtonSize,
-    ProgressCircle,
-    SelectPopup,
-    closeTooltip,
-    showPanel,
-    showPopup
-  } from '@hcengineering/ui'
+  import { Button, ButtonKind, ButtonSize, ProgressCircle, SelectPopup, showPanel } from '@hcengineering/ui'
   import { statusStore } from '@hcengineering/view-resources'
   import tracker from '../../../plugin'
-  import { subIssueListProvider } from '../../../utils'
+  import { listIssueStatusOrder, subIssueListProvider } from '../../../utils'
   import RelatedIssuePresenter from './RelatedIssuePresenter.svelte'
 
   export let object: WithLookup<Doc & { related: number }> | undefined
@@ -41,8 +32,7 @@
   export let width: string | undefined = 'min-contet'
   export let compactMode: boolean = false
 
-  let btn: HTMLElement
-
+  let _subIssues: Issue[] = []
   let subIssues: Issue[] = []
   let countComplete: number = 0
 
@@ -55,13 +45,12 @@
   function update (value: WithLookup<Doc & { related: number }>): void {
     if (value.$lookup?.related !== undefined) {
       query.unsubscribe()
-      subIssues = value.$lookup.related as Issue[]
-      subIssues.sort((a, b) => (a.rank ?? '').localeCompare(b.rank ?? ''))
+      _subIssues = value.$lookup.related as Issue[]
     } else {
       query.query(
         tracker.class.Issue,
         { 'relations._id': value._id, 'relations._class': value._class },
-        (res) => (subIssues = res),
+        (res) => (_subIssues = res),
         {
           sort: { rank: SortingOrder.Ascending }
         }
@@ -69,9 +58,29 @@
     }
   }
 
+  let categories: IdMap<StatusCategory> = new Map()
+
+  getClient()
+    .findAll(core.class.StatusCategory, {})
+    .then((res) => {
+      categories = toIdMap(res)
+    })
+
+  $: {
+    _subIssues.sort(
+      (a, b) =>
+        listIssueStatusOrder.indexOf($statusStore.get(a.status)?.category ?? tracker.issueStatusCategory.Backlog) -
+        listIssueStatusOrder.indexOf($statusStore.get(b.status)?.category ?? tracker.issueStatusCategory.Backlog)
+    )
+    subIssues = _subIssues
+  }
+
   $: if (subIssues) {
     const doneStatuses = Array.from($statusStore.values())
-      .filter((s) => s.category === tracker.issueStatusCategory.Completed)
+      .filter(
+        (s) =>
+          s.category === tracker.issueStatusCategory.Completed || s.category === tracker.issueStatusCategory.Canceled
+      )
       .map((p) => p._id)
     countComplete = subIssues.filter((si) => doneStatuses.includes(si.status)).length
   }
@@ -82,49 +91,40 @@
     showPanel(tracker.component.EditIssue, target, tracker.class.Issue, 'content')
   }
 
-  function showSubIssues () {
-    if (subIssues) {
-      closeTooltip()
-      showPopup(
-        SelectPopup,
-        {
-          value: subIssues.map((iss) => {
-            return {
-              id: iss._id,
-              isSelected: false,
-              component: RelatedIssuePresenter,
-              props: { project: currentProject, issue: iss }
+  $: selectValue = subIssues.map((iss) => {
+    const c = $statusStore.get(iss.status)?.category
+    const category = c !== undefined ? categories.get(c) : undefined
+    return {
+      id: iss._id,
+      isSelected: false,
+      component: RelatedIssuePresenter,
+      props: { project: currentProject, issue: iss },
+      category:
+        category !== undefined
+          ? {
+              label: category.label,
+              icon: category.icon
             }
-          }),
-          width: 'large'
-        },
-        {
-          getBoundingClientRect: () => {
-            const rect = btn.getBoundingClientRect()
-            const offsetX = 0
-            const offsetY = 0
-
-            return DOMRect.fromRect({ width: 1, height: 1, x: rect.left + offsetX, y: rect.bottom + offsetY })
-          }
-        },
-        (selectedIssue) => {
-          selectedIssue !== undefined && openIssue(selectedIssue)
-        }
-      )
+          : undefined
     }
-  }
+  })
 </script>
 
 {#if hasSubIssues}
-  <div class="flex-center flex-no-shrink" bind:this={btn}>
+  <div class="flex-center flex-no-shrink">
     <Button
       {width}
       {kind}
       {size}
       {justify}
-      on:click={(ev) => {
-        ev.stopPropagation()
-        if (subIssues) showSubIssues()
+      showTooltip={{
+        component: SelectPopup,
+        props: {
+          value: selectValue,
+          onSelect: openIssue,
+          showShadow: false,
+          width: 'large'
+        }
       }}
     >
       <svelte:fragment slot="content">
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index 708ce7b2c74..fcbea420140 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -226,6 +226,7 @@ export default mergeIds(trackerId, tracker, {
     AddRelatedIssue: '' as IntlString,
     RelatedIssuesNotFound: '' as IntlString,
     RelatedIssue: '' as IntlString,
+    RelatedIssues: '' as IntlString,
     BlockedIssue: '' as IntlString,
     BlockingIssue: '' as IntlString,
     BlockedBySearchPlaceholder: '' as IntlString,
diff --git a/plugins/tracker-resources/src/utils.ts b/plugins/tracker-resources/src/utils.ts
index 9f07fe44780..53528e8c9f8 100644
--- a/plugins/tracker-resources/src/utils.ts
+++ b/plugins/tracker-resources/src/utils.ts
@@ -270,7 +270,10 @@ export const milestoneTitleMap: Record<MilestoneViewMode, IntlString> = Object.f
   closed: tracker.string.ClosedMilestones
 })
 
-const listIssueStatusOrder = [
+/**
+ * @public
+ */
+export const listIssueStatusOrder = [
   tracker.issueStatusCategory.Started,
   tracker.issueStatusCategory.Unstarted,
   tracker.issueStatusCategory.Backlog,
@@ -278,7 +281,10 @@ const listIssueStatusOrder = [
   tracker.issueStatusCategory.Canceled
 ] as const
 
-const listIssueKanbanStatusOrder = [
+/**
+ * @public
+ */
+export const listIssueKanbanStatusOrder = [
   tracker.issueStatusCategory.Backlog,
   tracker.issueStatusCategory.Unstarted,
   tracker.issueStatusCategory.Started,
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte
index fab497c0e49..42088f1ab14 100644
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/plugins/view-resources/src/components/EditDoc.svelte
@@ -159,19 +159,23 @@
     return { editor: editorMixin.editor, pinned: editorMixin?.pinned }
   }
 
-  function getEditorFooter (_class: Ref<Class<Doc>>): { footer: AnyComponent; props?: Record<string, any> } | undefined {
-    const clazz = hierarchy.getClass(_class)
-    const editorMixin = hierarchy.as(clazz, view.mixin.ObjectEditorFooter)
-    if (editorMixin?.editor == null && clazz.extends != null) return getEditorFooter(clazz.extends)
-    if (editorMixin.editor) {
-      return { footer: editorMixin.editor, props: editorMixin?.props }
+  function getEditorFooter (
+    _class: Ref<Class<Doc>>,
+    object?: Doc
+  ): { footer: AnyComponent; props?: Record<string, any> } | undefined {
+    if (object !== undefined) {
+      const footer = hierarchy.findClassOrMixinMixin(object, view.mixin.ObjectEditorFooter)
+      if (footer !== undefined) {
+        return { footer: footer.editor, props: footer.props }
+      }
     }
+
     return undefined
   }
 
   let mainEditor: MixinEditor | undefined
 
-  $: editorFooter = getEditorFooter(_class)
+  $: editorFooter = getEditorFooter(_class, object)
 
   $: getEditorOrDefault(realObjectClass, _id)
 
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index f9385f71448..72fe7715cf0 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -128,21 +128,24 @@
     limit: number,
     options?: FindOptions<Doc>
   ) {
-    q.query(
-      _class,
-      query,
-      (result) => {
-        if (sortingFunction !== undefined) {
-          const sf = sortingFunction
-          objects = result.sort((a, b) => -1 * sortOrder * sf(a, b))
-        } else {
-          objects = result
-        }
-        objectsRecieved = true
-        loading = loading === 1 ? 0 : -1
-      },
-      { sort: getSort(sortKey), limit, ...options, lookup, total: false }
-    )
+    loading +=
+      q.query(
+        _class,
+        query,
+        (result) => {
+          if (sortingFunction !== undefined) {
+            const sf = sortingFunction
+            objects = result.sort((a, b) => -1 * sortOrder * sf(a, b))
+          } else {
+            objects = result
+          }
+          objectsRecieved = true
+          loading = 0
+        },
+        { sort: getSort(sortKey), limit, ...options, lookup, total: false }
+      ) === true
+        ? 1
+        : 0
   }
   $: update(_class, query, _sortKey, sortOrder, lookup, limit, options)
 
@@ -281,9 +284,15 @@
     }
   }
 
+  let buildIndex = 0
+
   async function build (modelOptions: BuildModelOptions) {
     isBuildingModel = true
-    model = await buildModel(modelOptions)
+    const idx = ++buildIndex
+    const res = await buildModel(modelOptions)
+    if (buildIndex === idx) {
+      model = res
+    }
     isBuildingModel = false
   }
 
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index bf2aa8dd53f..bb65a58d16b 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -22,7 +22,7 @@
   import { ActionContext, createQuery, getClient } from '@hcengineering/presentation'
   import setting from '@hcengineering/setting'
   import support, { SupportStatus } from '@hcengineering/support'
-  import { locationStorageKeyId, Button } from '@hcengineering/ui'
+  import { locationStorageKeyId, Button, DelayedCaller } from '@hcengineering/ui'
   import {
     AnyComponent,
     CompAndProps,
@@ -607,6 +607,8 @@
 
   let inboxPopup: PopupResult | undefined = undefined
   let lastLoc: Location | undefined = undefined
+
+  const delayedCaller = new DelayedCaller(15)
 </script>
 
 {#if employee?.active === true || accountId === core.account.System}
@@ -762,8 +764,10 @@
       <div
         class="antiPanel-component antiComponent"
         bind:this={contentPanel}
-        use:resizeObserver={(element) => {
-          componentWidth = element.clientWidth
+        use:resizeObserver={() => {
+          delayedCaller.call(() => {
+            componentWidth = contentPanel.clientWidth
+          })
         }}
       >
         {#if currentApplication && currentApplication.component}

From 15ce1a2e2bc1053009083c0fdf0272d6f076ea33 Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@gmail.com>
Date: Mon, 2 Oct 2023 23:15:49 +0700
Subject: [PATCH 2/5] Review fixes

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 .../kanban/src/components/KanbanRow.svelte    |  4 +-
 packages/ui/src/lazy.ts                       | 47 +++++++++++--------
 packages/ui/src/utils.ts                      |  4 +-
 .../src/components/Table.svelte               | 35 +++++++-------
 .../src/components/Workbench.svelte           | 13 ++---
 5 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte
index efcaf7bb0c1..b0f8c7c0b9c 100644
--- a/packages/kanban/src/components/KanbanRow.svelte
+++ b/packages/kanban/src/components/KanbanRow.svelte
@@ -61,14 +61,14 @@
 
   function update (stateObjects: Item[], limit: number | undefined, index: number): void {
     clearTimeout(loadingTimeout)
-    if (limitedObjects.length > 0 || index * 2 === 0) {
+    if (limitedObjects.length > 0 || index === 0) {
       limitedObjects = stateObjects.slice(0, limit)
     } else {
       loading = true
       loadingTimeout = setTimeout(() => {
         limitedObjects = stateObjects.slice(0, limit)
         loading = false
-      }, index * 2)
+      }, index)
     }
   }
 
diff --git a/packages/ui/src/lazy.ts b/packages/ui/src/lazy.ts
index ddde8159f88..f84c40eced0 100644
--- a/packages/ui/src/lazy.ts
+++ b/packages/ui/src/lazy.ts
@@ -1,32 +1,41 @@
+import { DelayedCaller } from './utils'
+
 const observers = new Map<string, IntersectionObserver>()
-const entryMap = new WeakMap<Element, { callback: (entry: IntersectionObserverEntry) => void }>()
+const entryMap = new WeakMap<Element, { callback: (isIntersecting: boolean) => void }>()
 
+const delayedCaller = new DelayedCaller(5)
 function makeObserver (rootMargin: string): IntersectionObserver {
-  return new IntersectionObserver(
+  const entriesPending = new Map<Element, { isIntersecting: boolean }>()
+  const notifyObservers = (observer: IntersectionObserver): void => {
+    console.log('notifyObservers', entriesPending.size)
+    for (const [target, entry] of entriesPending.entries()) {
+      const entryData = entryMap.get(target)
+      if (entryData == null) {
+        observer.unobserve(target)
+        continue
+      }
+
+      entryData.callback(entry.isIntersecting)
+      if (entry.isIntersecting) {
+        entryMap.delete(target)
+        observer.unobserve(target)
+      }
+    }
+    entriesPending.clear()
+  }
+  const observer = new IntersectionObserver(
     (entries, observer) => {
       for (const entry of entries) {
-        const entryData = entryMap.get(entry.target)
-        if (entryData == null) {
-          observer.unobserve(entry.target)
-          continue
-        }
-
-        entryData.callback(entry)
-        if (entry.isIntersecting) {
-          entryMap.delete(entry.target)
-          observer.unobserve(entry.target)
-        }
+        entriesPending.set(entry.target, { isIntersecting: entry.isIntersecting })
       }
+      delayedCaller.call(() => notifyObservers(observer))
     },
     { rootMargin }
   )
+  return observer
 }
 
-function listen (
-  rootMargin: string,
-  element: Element,
-  callback: (entry: IntersectionObserverEntry) => void
-): () => void {
+function listen (rootMargin: string, element: Element, callback: (isIntersecting: boolean) => void): () => void {
   let observer = observers.get(rootMargin)
   if (observer == null) {
     observer = makeObserver(rootMargin)
@@ -58,7 +67,7 @@ export function lazyObserver (node: Element, onVisible: (value: boolean, unsubsc
     return {}
   }
 
-  const destroy = listen('20%', node, ({ isIntersecting }) => {
+  const destroy = listen('20%', node, (isIntersecting) => {
     visible = isIntersecting
     onVisible(visible, destroy)
   })
diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
index b64f8ed7618..5535047ff5e 100644
--- a/packages/ui/src/utils.ts
+++ b/packages/ui/src/utils.ts
@@ -246,9 +246,9 @@ export class DelayedCaller {
   op?: () => void
   constructor (readonly delay: number = 10) {}
   call (op: () => void): void {
-    const needTimeout = this.op !== undefined
+    const needTimer = this.op === undefined
     this.op = op
-    if (needTimeout) {
+    if (needTimer) {
       setTimeout(() => {
         this.op?.()
         this.op = undefined
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index 72fe7715cf0..f8748240759 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -128,24 +128,23 @@
     limit: number,
     options?: FindOptions<Doc>
   ) {
-    loading +=
-      q.query(
-        _class,
-        query,
-        (result) => {
-          if (sortingFunction !== undefined) {
-            const sf = sortingFunction
-            objects = result.sort((a, b) => -1 * sortOrder * sf(a, b))
-          } else {
-            objects = result
-          }
-          objectsRecieved = true
-          loading = 0
-        },
-        { sort: getSort(sortKey), limit, ...options, lookup, total: false }
-      ) === true
-        ? 1
-        : 0
+    loading += q.query(
+      _class,
+      query,
+      (result) => {
+        if (sortingFunction !== undefined) {
+          const sf = sortingFunction
+          objects = result.sort((a, b) => -1 * sortOrder * sf(a, b))
+        } else {
+          objects = result
+        }
+        objectsRecieved = true
+        loading = 0
+      },
+      { sort: getSort(sortKey), limit, ...options, lookup, total: false }
+    )
+      ? 1
+      : 0
   }
   $: update(_class, query, _sortKey, sortOrder, lookup, limit, options)
 
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index bb65a58d16b..fd4dcfb023a 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -22,9 +22,9 @@
   import { ActionContext, createQuery, getClient } from '@hcengineering/presentation'
   import setting from '@hcengineering/setting'
   import support, { SupportStatus } from '@hcengineering/support'
-  import { locationStorageKeyId, Button, DelayedCaller } from '@hcengineering/ui'
   import {
     AnyComponent,
+    Button,
     CompAndProps,
     Component,
     Label,
@@ -42,8 +42,9 @@
     closeTooltip,
     deviceOptionsStore as deviceInfo,
     getCurrentLocation,
-    location,
     getLocation,
+    location,
+    locationStorageKeyId,
     navigate,
     openPanel,
     popupstore,
@@ -64,7 +65,7 @@
   import { getContext, onDestroy, onMount, tick } from 'svelte'
   import { subscribeMobile } from '../mobile'
   import workbench from '../plugin'
-  import { buildNavModel, workspacesStore, signOut } from '../utils'
+  import { buildNavModel, signOut, workspacesStore } from '../utils'
   import AccountPopup from './AccountPopup.svelte'
   import AppItem from './AppItem.svelte'
   import AppSwitcher from './AppSwitcher.svelte'
@@ -607,8 +608,6 @@
 
   let inboxPopup: PopupResult | undefined = undefined
   let lastLoc: Location | undefined = undefined
-
-  const delayedCaller = new DelayedCaller(15)
 </script>
 
 {#if employee?.active === true || accountId === core.account.System}
@@ -765,9 +764,7 @@
         class="antiPanel-component antiComponent"
         bind:this={contentPanel}
         use:resizeObserver={() => {
-          delayedCaller.call(() => {
-            componentWidth = contentPanel.clientWidth
-          })
+          componentWidth = contentPanel.clientWidth
         }}
       >
         {#if currentApplication && currentApplication.component}

From bf1fb3a3c3d52f5d37d5bf5e343455ecd2abba35 Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@gmail.com>
Date: Mon, 2 Oct 2023 23:26:36 +0700
Subject: [PATCH 3/5] Review fix

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 packages/ui/src/components/Lazy.svelte | 4 ++--
 packages/ui/src/lazy.ts                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Lazy.svelte b/packages/ui/src/components/Lazy.svelte
index 17f08cb6e92..de8dd0c2e31 100644
--- a/packages/ui/src/components/Lazy.svelte
+++ b/packages/ui/src/components/Lazy.svelte
@@ -2,9 +2,9 @@
   import { createEventDispatcher } from 'svelte'
   const dispatch = createEventDispatcher()
 
-  import { lazyObserver, isLazyDisabled } from '../lazy'
+  import { lazyObserver, isLazyEnabled } from '../lazy'
 
-  let visible = isLazyDisabled()
+  let visible = !isLazyEnabled()
 </script>
 
 {#if !visible}
diff --git a/packages/ui/src/lazy.ts b/packages/ui/src/lazy.ts
index f84c40eced0..093797362a2 100644
--- a/packages/ui/src/lazy.ts
+++ b/packages/ui/src/lazy.ts
@@ -53,11 +53,11 @@ function listen (rootMargin: string, element: Element, callback: (isIntersecting
 /**
  * @public
  */
-export const isLazyDisabled = (): boolean => (localStorage.getItem('#platform.lazy.loading') ?? 'true') === 'true'
+export const isLazyEnabled = (): boolean => (localStorage.getItem('#platform.lazy.loading') ?? 'true') === 'true'
 
 export function lazyObserver (node: Element, onVisible: (value: boolean, unsubscribe?: () => void) => void): any {
   let visible = false
-  const lazyEnabled = isLazyDisabled()
+  const lazyEnabled = isLazyEnabled()
   if (!lazyEnabled) {
     visible = true
     onVisible(visible)

From a92987c9471f5af944ff2045a6da6c063925af9e Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@gmail.com>
Date: Tue, 3 Oct 2023 00:04:21 +0700
Subject: [PATCH 4/5] Svelte check fix

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 packages/ui/src/components/TooltipInstance.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index 371af0ef6f0..ab3820df138 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -224,6 +224,7 @@
   const whileShow = (ev: MouseEvent): void => {
     if ($tooltip.element && tooltipHTML) {
       const rectP = tooltipHTML.getBoundingClientRect()
+      rect = $tooltip.element.getBoundingClientRect()
       const dT: number = dir === 'bottom' && $tooltip.kind !== 'submenu' ? 12 : 0
       const dB: number = dir === 'top' && $tooltip.kind !== 'submenu' ? 12 : 0
       const inTrigger: boolean = ev.x >= rect.left && ev.x <= rect.right && ev.y >= rect.top && ev.y <= rect.bottom

From 8e61ac1503d20fa58ab704121b8dd46ee1484b96 Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@gmail.com>
Date: Tue, 3 Oct 2023 00:30:36 +0700
Subject: [PATCH 5/5] Fix SelectPopup

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 packages/ui/src/components/SelectPopup.svelte | 4 ++--
 tests/sanity/storage-dev.json                 | 4 ++++
 tests/sanity/storage.json                     | 4 ++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
index f472e4a5cfd..6b8ee070471 100644
--- a/packages/ui/src/components/SelectPopup.svelte
+++ b/packages/ui/src/components/SelectPopup.svelte
@@ -64,9 +64,9 @@
 
   function sendSelect (id: ValueType['id']): void {
     if (onSelect) {
-      onSelect(value[selection].id)
+      onSelect(id)
     } else {
-      dispatch('close', value[selection].id)
+      dispatch('close', id)
     }
   }
 
diff --git a/tests/sanity/storage-dev.json b/tests/sanity/storage-dev.json
index 11f08b20260..0965baea798 100644
--- a/tests/sanity/storage-dev.json
+++ b/tests/sanity/storage-dev.json
@@ -27,6 +27,10 @@
         {
           "name": "#platform.lazy.loading",
           "value": "false"
+        },
+        {
+          "name": "flagOpenInDesktopApp",
+          "value": "true"
         }
       ]
     }
diff --git a/tests/sanity/storage.json b/tests/sanity/storage.json
index 53cd138d457..93a58d3b934 100644
--- a/tests/sanity/storage.json
+++ b/tests/sanity/storage.json
@@ -23,6 +23,10 @@
         {
           "name": "#platform.lazy.loading",
           "value": "false"
+        },
+        {
+          "name": "flagOpenInDesktopApp",
+          "value": "true"
         }
       ]
     }