From 324ff317cbdd13e85c1af15606b6c73557432b8f Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Thu, 27 Apr 2023 18:35:25 +0700
Subject: [PATCH] TSK-571: Fix keyboard list navigation (#3085)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 .../kanban/src/components/KanbanRow.svelte    | 22 +++--
 .../src/components/MessageBox.svelte          |  8 +-
 .../src/components/StyledTextBox.svelte       | 17 ++++
 .../src/components/StyledTextEditor.svelte    |  2 +-
 packages/ui/src/colors.ts                     | 60 +++++++++---
 .../ui/src/components/FocusHandler.svelte     |  2 +-
 packages/ui/src/focus.ts                      |  3 +
 packages/ui/src/utils.ts                      | 21 ++---
 .../src/components/AttachmentStyledBox.svelte |  2 +
 .../src/components/AssigneeBox.svelte         |  2 +-
 .../src/components/TagsPopup.svelte           |  2 +
 .../src/components/ComponentSelector.svelte   |  3 +
 .../src/components/CreateIssue.svelte         | 43 ++++++++-
 .../src/components/icons/StatusIcon.svelte    |  2 +
 .../components/issues/AssigneeEditor.svelte   |  2 +
 .../components/issues/PriorityEditor.svelte   |  2 +
 .../src/components/issues/StatusEditor.svelte | 11 ++-
 .../issues/timereport/EstimationEditor.svelte |  2 +
 .../components/sprints/SprintSelector.svelte  |  3 +
 .../components/ViewletSettingButton.svelte    |  9 +-
 .../src/components/list/List.svelte           |  8 +-
 .../src/components/list/ListCategories.svelte | 94 +++++++++++++++----
 .../src/components/list/ListCategory.svelte   | 42 +++++----
 .../src/components/list/ListHeader.svelte     | 45 +++++++--
 plugins/view-resources/src/selection.ts       | 15 ++-
 25 files changed, 330 insertions(+), 92 deletions(-)

diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte
index 40a750fa08..d6766fefaf 100644
--- a/packages/kanban/src/components/KanbanRow.svelte
+++ b/packages/kanban/src/components/KanbanRow.svelte
@@ -57,18 +57,22 @@
 
   let limitedObjects: DocWithRank[] = []
   let loading = false
+  let loadingTimeout: any | undefined = undefined
 
-  function nop (op: () => void, timeout: number) {
-    op()
-  }
-
-  $: {
-    loading = true
-    ;(limitedObjects.length > 0 ? nop : setTimeout)(() => {
+  function update (stateObjects: Item[], limit: number | undefined, index: number): void {
+    clearTimeout(loadingTimeout)
+    if (limitedObjects.length > 0 || index * 2 === 0) {
       limitedObjects = stateObjects.slice(0, limit)
-      loading = false
-    }, index * 2)
+    } else {
+      loading = true
+      loadingTimeout = setTimeout(() => {
+        limitedObjects = stateObjects.slice(0, limit)
+        loading = false
+      }, index * 2)
+    }
   }
+
+  $: update(stateObjects, limit, index)
 </script>
 
 {#each limitedObjects as object, i (object._id)}
diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte
index 753fed0024..f46919033d 100644
--- a/packages/presentation/src/components/MessageBox.svelte
+++ b/packages/presentation/src/components/MessageBox.svelte
@@ -14,8 +14,8 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
+  import { Button, FocusHandler, Label, createFocusManager } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
-  import { Label, Button } from '@hcengineering/ui'
   import presentation from '..'
 
   export let label: IntlString
@@ -27,14 +27,19 @@
 
   const dispatch = createEventDispatcher()
   let processing = false
+
+  const manager = createFocusManager()
 </script>
 
+<FocusHandler {manager} />
+
 <div class="msgbox-container">
   <div class="overflow-label fs-title mb-4"><Label {label} params={labelProps ?? {}} /></div>
   <div class="message"><Label label={message} {params} /></div>
   <div class="footer">
     <Button
       focus
+      focusIndex={1}
       label={presentation.string.Ok}
       size={'large'}
       kind={'primary'}
@@ -54,6 +59,7 @@
     />
     {#if canSubmit}
       <Button
+        focusIndex={2}
         label={presentation.string.Cancel}
         size={'large'}
         on:click={() => {
diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte
index 5ee491b894..55e59567c7 100644
--- a/packages/text-editor/src/components/StyledTextBox.svelte
+++ b/packages/text-editor/src/components/StyledTextBox.svelte
@@ -9,6 +9,7 @@
     IconSize,
     Label,
     ShowMore,
+    registerFocus,
     resizeObserver
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
@@ -95,6 +96,21 @@
   export function isEmptyContent (): boolean {
     return textEditor.isEmptyContent()
   }
+
+  // Focusable control with index
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      focus()
+      return false
+    },
+    isFocus: () => focused
+  })
+  const updateFocus = () => {
+    if (focusIndex !== -1) {
+      focusManager?.setFocus(idx)
+    }
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -129,6 +145,7 @@
       on:attach
       on:focus={() => {
         focused = true
+        updateFocus()
         dispatch('focus')
       }}
       on:blur={() => {
diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
index 18ac8b4b4b..45d2ddabe4 100644
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -26,7 +26,7 @@
   import { Level } from '@tiptap/extension-heading'
   import { createEventDispatcher } from 'svelte'
   import textEditorPlugin from '../plugin'
-  import { FormatMode, FORMAT_MODES, RefInputAction, RefInputActionItem, TextEditorHandler } from '../types'
+  import { FORMAT_MODES, FormatMode, RefInputAction, RefInputActionItem, TextEditorHandler } from '../types'
   import EmojiPopup from './EmojiPopup.svelte'
   import { headingLevels, mInsertTable } from './extensions'
   import Attach from './icons/Attach.svelte'
diff --git a/packages/ui/src/colors.ts b/packages/ui/src/colors.ts
index e7a69d0e40..20d1806607 100644
--- a/packages/ui/src/colors.ts
+++ b/packages/ui/src/colors.ts
@@ -132,12 +132,28 @@ export function numberToRGB (color: number, alpha?: number): string {
  * @public
  */
 export function hslToRgb (h: number, s: number, l: number): { r: number, g: number, b: number } {
-  s /= 100
-  l /= 100
-  const k = (n: number): number => (n + h / 30) % 12
-  const a = s * Math.min(l, 1 - l)
-  const f = (n: number): number => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))
-  return { r: 255 * f(0), g: 255 * f(8), b: 255 * f(4) }
+  let r, g, b
+
+  if (s === 0) {
+    r = g = b = l // achromatic
+  } else {
+    const hue2rgb = function hue2rgb (p: number, q: number, t: number): number {
+      if (t < 0) t += 1
+      if (t > 1) t -= 1
+      if (t < 1 / 6) return p + (q - p) * 6 * t
+      if (t < 1 / 2) return q
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+      return p
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }
 }
 
 /**
@@ -225,12 +241,30 @@ export function rgbToHsl (r: number, g: number, b: number): { h: number, s: numb
   r /= 255
   g /= 255
   b /= 255
-  const l = Math.max(r, g, b)
-  const s = l - Math.min(r, g, b)
-  const h = s > 0 ? (l === r ? (g - b) / s : l === g ? 2 + (b - r) / s : 4 + (r - g) / s) : 0
-  return {
-    h: 60 * h < 0 ? 60 * h + 360 : 60 * h,
-    s: 100 * (s > 0 ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
-    l: (100 * (2 * l - s)) / 2
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h: number = 0
+  let s: number
+  const l = (max + min) / 2
+
+  if (max === min) {
+    h = s = 0 // achromatic
+  } else {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+    h /= 6
   }
+
+  return { h, s, l }
 }
diff --git a/packages/ui/src/components/FocusHandler.svelte b/packages/ui/src/components/FocusHandler.svelte
index 276c227176..1272aaaf46 100644
--- a/packages/ui/src/components/FocusHandler.svelte
+++ b/packages/ui/src/components/FocusHandler.svelte
@@ -4,7 +4,7 @@
   export let manager: FocusManager
 
   function handleKey (evt: KeyboardEvent): void {
-    if (evt.code === 'Tab' && manager.hasFocus()) {
+    if (evt.code === 'Tab') {
       evt.preventDefault()
       evt.stopPropagation()
       manager.next(evt.shiftKey ? -1 : 1)
diff --git a/packages/ui/src/focus.ts b/packages/ui/src/focus.ts
index e818d1bca9..e4d5589b57 100644
--- a/packages/ui/src/focus.ts
+++ b/packages/ui/src/focus.ts
@@ -52,6 +52,9 @@ class FocusManagerImpl implements FocusManager {
   }
 
   setFocus (idx: number): void {
+    if (idx === -1) {
+      return
+    }
     this.current = this.elements.findIndex((it) => it.id === idx) ?? 0
     this.elements[Math.abs(this.current) % this.elements.length].focus()
   }
diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
index e24c26cb2a..b2a83e6ae8 100644
--- a/packages/ui/src/utils.ts
+++ b/packages/ui/src/utils.ts
@@ -109,27 +109,22 @@ export const networkStatus = writable<number>(0)
 let attractorMx: number | undefined
 let attractorMy: number | undefined
 
-let mousePos: { x: number, y: number } | undefined
-
-window.addEventListener('mousemove', (event) => {
-  mousePos = { x: event.clientX, y: event.clientY }
-})
 /**
  * perform mouse movement checks and call method if they was
  */
-export function mouseAttractor (op: () => void, diff = 5): (evt: MouseEvent) => void {
+export function mouseAttractor (op: () => void, diff = 2): (evt: MouseEvent) => void {
   return (evt: MouseEvent) => {
-    if (mousePos !== undefined && attractorMy !== undefined && attractorMx !== undefined) {
-      const dx = mousePos.x - attractorMx
-      const dy = mousePos.y - attractorMy
+    if (attractorMy !== undefined && attractorMx !== undefined) {
+      const dx = evt.screenX - attractorMx
+      const dy = evt.screenY - attractorMy
       if (Math.sqrt(dx * dx + dy * dy) > diff) {
-        attractorMx = evt.clientX
-        attractorMy = evt.clientY
         op()
+        attractorMx = undefined
+        attractorMy = undefined
       }
     } else {
-      attractorMx = evt.clientX
-      attractorMy = evt.clientY
+      attractorMx = evt.screenX
+      attractorMy = evt.screenY
     }
   }
 }
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
index c1b9aac4ff..34d77445f4 100644
--- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -40,6 +40,7 @@
   export let refContainer: HTMLElement | undefined = undefined
   export let shouldSaveDraft: boolean = false
   export let useAttachmentPreview = false
+  export let focusIndex: number | undefined = undefined
 
   let draftKey = objectId ? `${objectId}_attachments` : undefined
   $: draftKey = objectId ? `${objectId}_attachments` : undefined
@@ -320,6 +321,7 @@
 >
   <div class="expand-collapse">
     <StyledTextBox
+      {focusIndex}
       bind:this={refInput}
       bind:content
       {placeholder}
diff --git a/plugins/contact-resources/src/components/AssigneeBox.svelte b/plugins/contact-resources/src/components/AssigneeBox.svelte
index c27f686f90..efc1489246 100644
--- a/plugins/contact-resources/src/components/AssigneeBox.svelte
+++ b/plugins/contact-resources/src/components/AssigneeBox.svelte
@@ -109,7 +109,7 @@
             value = result._id
             dispatch('change', value)
           }
-          mgr?.setFocusPos(focusIndex)
+          mgr?.setFocus(focusIndex)
         }
       )
     }
diff --git a/plugins/tags-resources/src/components/TagsPopup.svelte b/plugins/tags-resources/src/components/TagsPopup.svelte
index 2456f44801..0e20a7c831 100644
--- a/plugins/tags-resources/src/components/TagsPopup.svelte
+++ b/plugins/tags-resources/src/components/TagsPopup.svelte
@@ -81,8 +81,10 @@
   }
   const checkSelected = (_selected: Ref<TagElement>[], element: TagElement): void => {
     if (isSelected(_selected, element)) {
+      selected = _selected.filter((p) => p !== element._id)
       dispatch('update', { action: 'remove', tag: element })
     } else {
+      selected = [..._selected, element._id]
       dispatch('update', { action: 'add', tag: element })
     }
     dispatch('update', { action: 'selected', selected })
diff --git a/plugins/tracker-resources/src/components/ComponentSelector.svelte b/plugins/tracker-resources/src/components/ComponentSelector.svelte
index 407d9a4e33..7654a4a830 100644
--- a/plugins/tracker-resources/src/components/ComponentSelector.svelte
+++ b/plugins/tracker-resources/src/components/ComponentSelector.svelte
@@ -34,6 +34,7 @@
   export let onlyIcon: boolean = false
   export let enlargedText: boolean = false
   export let short: boolean = false
+  export let focusIndex: number | undefined = undefined
 
   let selectedComponent: Component | undefined
   let defaultComponentLabel = ''
@@ -98,6 +99,7 @@
 
 {#if onlyIcon || componentText === undefined}
   <Button
+    {focusIndex}
     {kind}
     {size}
     {shape}
@@ -111,6 +113,7 @@
   />
 {:else}
   <Button
+    {focusIndex}
     {kind}
     {size}
     {shape}
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index 3ee69bde5f..4d9c318446 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -45,8 +45,10 @@
     addNotification,
     Button,
     Component,
+    createFocusManager,
     DatePresenter,
     EditBox,
+    FocusHandler,
     IconAttachment,
     IconMoreH,
     Label,
@@ -526,8 +528,11 @@
   }
 
   $: objectId = object._id
+  const manager = createFocusManager()
 </script>
 
+<FocusHandler {manager} />
+
 <Card
   label={tracker.string.NewIssue}
   okAction={createIssue}
@@ -563,6 +568,7 @@
       allowDeselect={true}
       showNavigate={false}
       docProps={{ disableClick: true }}
+      focusIndex={20000}
     />
   </svelte:fragment>
   <svelte:fragment slot="title" let:label>
@@ -585,12 +591,19 @@
     <ParentIssue issue={parentIssue} on:close={clearParentIssue} />
   {/if}
   <div id="issue-name">
-    <EditBox bind:value={object.title} placeholder={tracker.string.IssueTitlePlaceholder} kind={'large-style'} focus />
+    <EditBox
+      focusIndex={1}
+      bind:value={object.title}
+      placeholder={tracker.string.IssueTitlePlaceholder}
+      kind={'large-style'}
+      focus
+    />
   </div>
   <div id="issue-description">
     {#key [objectId, appliedTemplateId]}
       <AttachmentStyledBox
         bind:this={descriptionBox}
+        focusIndex={2}
         objectId={object._id}
         {shouldSaveDraft}
         _class={tracker.class.Issue}
@@ -621,37 +634,54 @@
   <svelte:fragment slot="pool">
     <div id="status-editor">
       <StatusEditor
+        focusIndex={3}
         value={object}
         kind={'secondary'}
         size={'large'}
         defaultIssueStatus={draft ? undefined : currentProject?.defaultIssueStatus}
         shouldShowLabel={true}
-        on:change={({ detail }) => (object.status = detail)}
+        on:refocus={() => {
+          manager.setFocusPos(3)
+        }}
+        on:change={({ detail }) => {
+          if (object.status !== detail) {
+            object.status = detail
+          }
+        }}
       />
     </div>
     <div id="priority-editor">
       <PriorityEditor
+        focusIndex={4}
         value={object}
         shouldShowLabel
         isEditable
         kind={'secondary'}
         size={'large'}
         justify="center"
-        on:change={({ detail }) => (object.priority = detail)}
+        on:change={({ detail }) => {
+          object.priority = detail
+          manager.setFocusPos(4)
+        }}
       />
     </div>
     <div id="assignee-editor">
       <AssigneeEditor
+        focusIndex={5}
         value={object}
         kind={'secondary'}
         size={'large'}
         width={'min-content'}
-        on:change={({ detail }) => (object.assignee = detail)}
+        on:change={({ detail }) => {
+          object.assignee = detail
+          manager.setFocusPos(5)
+        }}
       />
     </div>
     <Component
       is={tags.component.TagsDropdownEditor}
       props={{
+        focusIndex: 6,
         items: object.labels,
         key,
         targetClass: tracker.class.Issue,
@@ -667,9 +697,10 @@
       }}
     />
     <div id="estimation-editor">
-      <EstimationEditor kind={'secondary'} size={'large'} value={object} />
+      <EstimationEditor focusIndex={7} kind={'secondary'} size={'large'} value={object} />
     </div>
     <ComponentSelector
+      focusIndex={8}
       value={object.component}
       onChange={handleComponentIdChanged}
       isEditable={true}
@@ -677,6 +708,7 @@
       size={'large'}
     />
     <SprintSelector
+      focusIndex={9}
       value={object.sprint}
       onChange={handleSprintIdChanged}
       useComponent={(!originalIssue && object.component) || undefined}
@@ -690,6 +722,7 @@
   </svelte:fragment>
   <svelte:fragment slot="footer">
     <Button
+      focusIndex={10}
       icon={IconAttachment}
       size={'large'}
       on:click={() => {
diff --git a/plugins/tracker-resources/src/components/icons/StatusIcon.svelte b/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
index cb643aa69f..d482b0ceda 100644
--- a/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
+++ b/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
@@ -34,6 +34,8 @@
   id={category._id}
   style:transform={category._id === tracker.issueStatusCategory.Started ? 'rotate(-90deg)' : ''}
   viewBox="0 0 16 16"
+  stroke-width={0.75}
+  stroke={fill}
   xmlns="http://www.w3.org/2000/svg"
 >
   {#if category._id === tracker.issueStatusCategory.Backlog}
diff --git a/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte b/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
index 422c11420b..104929f8d9 100644
--- a/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
@@ -28,6 +28,7 @@
   export let kind: ButtonKind = 'link'
   export let tooltipAlignment: TooltipAlignment | undefined = undefined
   export let width: string = '100%'
+  export let focusIndex: number | undefined = undefined
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -85,6 +86,7 @@
 
 {#if value}
   <AssigneeBox
+    {focusIndex}
     label={tracker.string.Assignee}
     placeholder={tracker.string.Assignee}
     value={value.assignee}
diff --git a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte b/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
index 953154d818..0721e43d00 100644
--- a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
@@ -38,6 +38,7 @@
   export let size: ButtonSize = 'large'
   export let justify: 'left' | 'center' = 'left'
   export let width: string | undefined = undefined
+  export let focusIndex: number | undefined = undefined
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -94,6 +95,7 @@
       label={shouldShowLabel ? issuePriorities[value.priority]?.label : undefined}
       icon={issuePriorities[value.priority]?.icon}
       {justify}
+      {focusIndex}
       {width}
       {size}
       {kind}
diff --git a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
index a0060e6fe9..337c42edae 100644
--- a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
@@ -39,16 +39,20 @@
   export let justify: 'left' | 'center' = 'left'
   export let width: string | undefined = undefined
   export let defaultIssueStatus: Ref<IssueStatus> | undefined = undefined
+  export let focusIndex: number | undefined = undefined
 
   const client = getClient()
   const dispatch = createEventDispatcher()
 
-  const changeStatus = async (newStatus: Ref<IssueStatus> | undefined) => {
+  const changeStatus = async (newStatus: Ref<IssueStatus> | undefined, refocus: boolean = true) => {
     if (!isEditable || newStatus === undefined || value.status === newStatus) {
       return
     }
 
     dispatch('change', newStatus)
+    if (refocus) {
+      dispatch('refocus')
+    }
 
     if ('_class' in value) {
       await client.update(value, { status: newStatus })
@@ -81,12 +85,12 @@
   ): WithLookup<IssueStatus> | undefined {
     if (defaultStatus !== undefined) {
       defaultIssueStatus = undefined
-      changeStatus(defaultStatus)
+      changeStatus(defaultStatus, false)
       return statuses?.find((status) => status._id === defaultStatus)
     }
     const current = statuses?.find((status) => status._id === value.status)
     if (current) return current
-    changeStatus(statuses?.[0]?._id)
+    changeStatus(statuses?.[0]?._id, false)
     return statuses?.[0]
   }
 
@@ -133,6 +137,7 @@
       {size}
       {kind}
       {width}
+      {focusIndex}
       on:click={handleStatusEditorOpened}
     >
       <span slot="content" class="flex-row-center pointer-events-none">
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
index e3807383d7..5dcf612f34 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
@@ -31,6 +31,7 @@
   export let size: ButtonSize = 'large'
   export let justify: 'left' | 'center' = 'left'
   export let width: string | undefined = undefined
+  export let focusIndex: number | undefined = undefined
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -76,6 +77,7 @@
     <EstimationStatsPresenter {value} {kind} on:click={handleestimationEditorOpened} />
   {:else}
     <Button
+      {focusIndex}
       showTooltip={isEditable ? { label: tracker.string.Estimation } : undefined}
       label={tracker.string.TimeSpendValue}
       notSelected={value.estimation === 0}
diff --git a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
index aec218a716..76dd6ce674 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
@@ -35,6 +35,7 @@
   export let onlyIcon: boolean = false
   export let enlargedText: boolean = false
   export let short: boolean = false
+  export let focusIndex: number | undefined = undefined
 
   export let useComponent: Ref<Component> | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
@@ -98,6 +99,7 @@
 
 {#if onlyIcon || sprintText === undefined}
   <Button
+    {focusIndex}
     {kind}
     {size}
     {shape}
@@ -111,6 +113,7 @@
   />
 {:else}
   <Button
+    {focusIndex}
     {kind}
     {size}
     {shape}
diff --git a/plugins/view-resources/src/components/ViewletSettingButton.svelte b/plugins/view-resources/src/components/ViewletSettingButton.svelte
index f0e66ba0a6..b51f693621 100644
--- a/plugins/view-resources/src/components/ViewletSettingButton.svelte
+++ b/plugins/view-resources/src/components/ViewletSettingButton.svelte
@@ -14,12 +14,13 @@
 -->
 <script lang="ts">
   import { Button, ButtonKind, eventToHTMLElement, showPopup } from '@hcengineering/ui'
-  import { Viewlet, ViewOptions } from '@hcengineering/view'
+  import { ViewOptions, Viewlet } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
+  import { focusStore } from '../selection'
   import { setViewOptions } from '../viewOptions'
-  import ViewletSetting from './ViewletSetting.svelte'
   import ViewOptionsEditor from './ViewOptions.svelte'
+  import ViewletSetting from './ViewletSetting.svelte'
   import IconArrowDown from './icons/ArrowDown.svelte'
 
   export let viewlet: Viewlet | undefined
@@ -41,6 +42,10 @@
           if (result?.key === undefined) return
           if (viewlet) {
             viewOptions = { ...viewOptions, [result.key]: result.value }
+
+            // Clear selection on view settings change.
+            focusStore.set({})
+
             dispatch('viewOptions', viewOptions)
             setViewOptions(viewlet, viewOptions)
           }
diff --git a/plugins/view-resources/src/components/list/List.svelte b/plugins/view-resources/src/components/list/List.svelte
index 036a754e59..9e415a498c 100644
--- a/plugins/view-resources/src/components/list/List.svelte
+++ b/plugins/view-resources/src/components/list/List.svelte
@@ -95,7 +95,7 @@
     selectedObjectIds = []
   }
 
-  export function select (offset: 1 | -1 | 0, of?: Doc): void {
+  export function select (offset: 2 | -2 | 1 | -1 | 0, of?: Doc): void {
     listCategories?.select(offset, of)
   }
 
@@ -137,6 +137,12 @@
     on:select={(evt) => {
       select(0, evt.detail)
     }}
+    on:select-next={(evt) => {
+      select(2, evt.detail)
+    }}
+    on:select-prev={(evt) => {
+      select(-2, evt.detail)
+    }}
   />
 </div>
 
diff --git a/plugins/view-resources/src/components/list/ListCategories.svelte b/plugins/view-resources/src/components/list/ListCategories.svelte
index fe378cfa21..cdf91ce295 100644
--- a/plugins/view-resources/src/components/list/ListCategories.svelte
+++ b/plugins/view-resources/src/components/list/ListCategories.svelte
@@ -139,7 +139,7 @@
     return -1
   }
 
-  export function select (offset: 1 | -1 | 0, of?: Doc, dir?: 'vertical' | 'horizontal'): void {
+  export function select (offset: 2 | 1 | -2 | -1 | 0, of?: Doc, dir?: 'vertical' | 'horizontal'): void {
     let pos = (of != null ? docs.findIndex((it) => it._id === of._id) : selection) ?? -1
     if (pos === -1) {
       for (const st of categories) {
@@ -150,6 +150,44 @@
         }
       }
     }
+    if (offset === -2 || offset === 2) {
+      if (level + 1 >= viewOptions.groupBy.length) {
+        if (offset === -2) {
+          const obj = listListCategory[0].getLimited()[0]
+          listListCategory[0].expand()
+          select(0, obj)
+          return
+        } else {
+          const g = listListCategory[categories.length - 1].getLimited()
+          listListCategory[categories.length - 1].expand()
+          const obj = g[g.length - 1]
+          select(0, obj)
+          return
+        }
+      } else {
+        if (level === 0) {
+          let ci = 0
+          for (const c of categories) {
+            const docs = getGroupByValues(groupByDocs, c)
+            if (docs.findIndex((it) => it._id === of?._id) !== -1) {
+              // We need to  take next
+              listListCategory[ci + offset / 2]?.expand()
+              listCategory[ci + offset / 2]?.select(offset)
+            }
+            ci++
+          }
+        } else {
+          if (offset === 2) {
+            listListCategory[0].expand()
+            listCategory[0]?.select(offset, of, dir)
+          } else {
+            listListCategory[listCategory.length - 1].expand()
+            listCategory[listCategory.length - 1]?.select(offset, of, dir)
+          }
+        }
+      }
+      return
+    }
 
     if (pos < 0) {
       pos = 0
@@ -170,7 +208,7 @@
     }
 
     if (level + 1 >= viewOptions.groupBy.length) {
-      const stateObjs = getGroupByValues(groupByDocs, categories[objState]) ?? []
+      const stateObjs: Doc[] = getGroupByValues(groupByDocs, categories[objState]) ?? []
 
       const statePos = stateObjs.findIndex((it) => it._id === obj._id)
       if (statePos === undefined) {
@@ -179,34 +217,45 @@
 
       if (offset === -1) {
         if (dir === undefined || dir === 'vertical') {
-          if (statePos - 1 < 0 && objState > 0) {
-            const pstateObjs = getGroupByValues(groupByDocs, categories[objState - 1]) ?? []
-            dispatch('select', pstateObjs[pstateObjs.length - 1])
+          if (statePos - 1 < 0 && objState >= 0) {
+            if (objState !== 0) {
+              const pstateObjs = listListCategory[objState - 1].getLimited()
+              dispatch('select', pstateObjs[pstateObjs.length - 1])
+            } else {
+              dispatch('select-prev', stateObjs[statePos])
+            }
           } else {
-            const obj = stateObjs[statePos - 1] ?? stateObjs[0]
-            scrollInto(objState, obj)
-            dispatch('row-focus', obj)
+            const obj = stateObjs[statePos - 1]
+            if (obj !== undefined) {
+              scrollInto(objState, obj)
+              dispatch('row-focus', obj)
+            }
           }
           return
         }
       }
       if (offset === 1) {
         if (dir === undefined || dir === 'vertical') {
-          if (statePos + 1 >= stateObjs.length && objState < categories.length) {
-            const pstateObjs = getGroupByValues(groupByDocs, categories[objState + 1]) ?? []
-            if (pstateObjs[0] !== undefined) {
+          const limited = listListCategory[objState].getLimited()
+          if (statePos + 1 >= limited.length && objState < categories.length) {
+            if (objState + 1 !== categories.length) {
+              const pstateObjs = getGroupByValues(groupByDocs, categories[objState + 1])
               dispatch('select', pstateObjs[0])
+            } else {
+              dispatch('select-next', stateObjs[statePos])
             }
           } else {
-            const obj = stateObjs[statePos + 1] ?? stateObjs[stateObjs.length - 1]
-            scrollInto(objState, obj)
-            dispatch('row-focus', obj)
+            const obj = stateObjs[statePos + 1]
+            if (obj !== undefined) {
+              scrollInto(objState, obj)
+              dispatch('row-focus', obj)
+            }
           }
           return
         }
       }
       if (offset === 0) {
-        // scrollInto(objState, obj)
+        scrollInto(objState, obj)
         dispatch('row-focus', obj)
       }
     } else {
@@ -214,7 +263,6 @@
     }
   }
   function scrollInto (statePos: number, obj: Doc): void {
-    // listCategory[statePos]?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
     listListCategory[statePos]?.scroll(obj)
     listCategory[statePos]?.scroll(obj)
   }
@@ -311,6 +359,20 @@
         on:select={(evt) => {
           select(0, evt.detail)
         }}
+        on:select-next={(evt) => {
+          if (level !== 0) {
+            dispatch('select-next', evt.detail)
+          } else {
+            select(2, evt.detail)
+          }
+        }}
+        on:select-prev={(evt) => {
+          if (level !== 0) {
+            dispatch('select-prev', evt.detail)
+          } else {
+            select(-2, evt.detail)
+          }
+        }}
       />
     </svelte:fragment>
   </ListCategory>
diff --git a/plugins/view-resources/src/components/list/ListCategory.svelte b/plugins/view-resources/src/components/list/ListCategory.svelte
index ec5c061ee2..a9ad6ff80a 100644
--- a/plugins/view-resources/src/components/list/ListCategory.svelte
+++ b/plugins/view-resources/src/components/list/ListCategory.svelte
@@ -26,7 +26,7 @@
     showPopup
   } from '@hcengineering/ui'
   import { AttributeModel, BuildModelKey, ViewOptionModel, ViewOptions } from '@hcengineering/view'
-  import { createEventDispatcher, tick } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
   import { fade } from 'svelte/transition'
   import { FocusSelection, focusStore } from '../../selection'
   import Menu from '../Menu.svelte'
@@ -110,19 +110,23 @@
   let limited: Doc[] = []
 
   let loading = false
+  let loadingTimeout: any | undefined = undefined
 
-  function nop (op: () => void, timeout: number) {
-    op()
-  }
-
-  $: {
-    loading = true
-    ;(limited.length > 0 ? nop : setTimeout)(() => {
+  function update (items: Doc[], limit: number | undefined, index: number): void {
+    clearTimeout(loadingTimeout)
+    if (limited.length > 0 || index * 2 === 0) {
       limited = limitGroup(items, limit)
-      loading = false
-    }, index * 2)
+    } else {
+      loading = true
+      loadingTimeout = setTimeout(() => {
+        limited = limitGroup(items, limit)
+        loading = false
+      }, index * 2)
+    }
   }
 
+  $: update(items, limit, index)
+
   $: selectedObjectIdsSet = new Set<Ref<Doc>>(selectedObjectIds.map((it) => it._id))
 
   $: _newObjectProps = (doc: Doc) => {
@@ -315,23 +319,25 @@
       index: i
     })
   }
+  export function expand (): void {
+    collapsed = false
+  }
   export function scroll (item: Doc): void {
-    const pos = items.findIndex((it) => it._id === item._id)
+    const pos = limited.findIndex((it) => it._id === item._id)
     if (pos >= 0) {
       if (collapsed) {
         collapsed = false
-        tick().then(() => scroll(item))
-        return
-      }
-      if (pos >= limited.length) {
-        limit = (limit ?? 0) + 20
-
-        tick().then(() => scroll(item))
+        setTimeout(() => scroll(item), 50)
       } else {
         listItems[pos]?.scroll()
       }
     }
   }
+
+  export function getLimited (): Doc[] {
+    return limited
+  }
+
   const listItems: ListItem[] = []
 </script>
 
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
index 3c881d8a84..6c6ea35f88 100644
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -20,6 +20,8 @@
     AnyComponent,
     Button,
     IconAdd,
+    IconBack,
+    IconCheck,
     IconCollapseArrow,
     IconMoreH,
     Label,
@@ -32,6 +34,7 @@
   import { AttributeModel } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import view from '../../plugin'
+  import { selectionStore, selectionStoreMap } from '../../selection'
   import { noCategory } from '../../viewOptions'
 
   export let groupByKey: string
@@ -55,17 +58,19 @@
 
   $: lth = $deviceInfo.theme === 'theme-light'
 
-  let accentColor = { h: 0, s: 50, l: 50 }
+  let accentColor = lth ? { h: 0, s: 0, l: 1 } : { h: 0, s: 0, l: 0.3 }
 
-  $: headerBGColor = !lth ? hslToRgb(accentColor.h, 20, 30) : hslToRgb(accentColor.h, 30, 85)
+  $: headerBGColor = !lth ? hslToRgb(accentColor.h, accentColor.s, 0.35) : hslToRgb(accentColor.h, accentColor.s, 0.9)
 
-  $: headerTextColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accentColor.h, 60, 30)
+  $: headerTextColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accentColor.h, accentColor.s, 0.3)
 
   const handleCreateItem = (event: MouseEvent) => {
     if (createItemDialog === undefined) return
     showPopup(createItemDialog, newObjectProps(items[0]), eventToHTMLElement(event))
   }
   let mouseOver = false
+
+  $: selected = items.filter((it) => $selectionStoreMap.has(it._id))
 </script>
 
 {#if headerComponent || groupByKey === noCategory}
@@ -122,6 +127,14 @@
           />
         </span>
       {/if}
+
+      {#if selected.length > 0}
+        <span class="antiSection-header__counter ml-2">
+          <span class="caption-color">
+            ({selected.length})
+          </span>
+        </span>
+      {/if}
       {#if limited < items.length}
         <div class="antiSection-header__counter flex-row-center mx-2">
           <span class="caption-color">{limited}</span>
@@ -141,13 +154,32 @@
       {/if}
     </div>
     {#if createItemDialog !== undefined && createItemLabel !== undefined}
-      <div class:on-hover={!mouseOver}>
+      <div class:on-hover={!mouseOver} class="flex-row-center">
         <Button
           icon={IconAdd}
           kind={'transparent'}
           showTooltip={{ label: createItemLabel }}
           on:click={handleCreateItem}
         />
+        <Button
+          icon={selected.length > 0 ? IconBack : IconCheck}
+          kind={'transparent'}
+          showTooltip={{ label: view.string.Select }}
+          on:click={() => {
+            let newSelection = [...$selectionStore]
+            if (selected.length > 0) {
+              const smap = new Map(selected.map((it) => [it._id, it]))
+              newSelection = newSelection.filter((it) => !smap.has(it._id))
+            } else {
+              for (const s of items) {
+                if (!$selectionStoreMap.has(s._id)) {
+                  newSelection.push(s)
+                }
+              }
+            }
+            selectionStore.set(newSelection)
+          }}
+        />
       </div>
     {/if}
   </div>
@@ -183,9 +215,8 @@
     &.gradient::before {
       background: linear-gradient(
         90deg,
-        rgba(var(--list-header-rgb-color), 0.5),
-        rgba(var(--list-header-rgb-color), 0.3),
-        rgba(var(--list-header-rgb-color), 0.1)
+        rgba(var(--list-header-rgb-color), 0.15),
+        rgba(var(--list-header-rgb-color), 0.05)
       );
     }
     &::before,
diff --git a/plugins/view-resources/src/selection.ts b/plugins/view-resources/src/selection.ts
index 98db2269cb..c8f907153c 100644
--- a/plugins/view-resources/src/selection.ts
+++ b/plugins/view-resources/src/selection.ts
@@ -1,7 +1,7 @@
 import { Doc } from '@hcengineering/core'
 import { panelstore } from '@hcengineering/ui'
 import { onDestroy } from 'svelte'
-import { Unsubscriber, writable } from 'svelte/store'
+import { Unsubscriber, derived, writable } from 'svelte/store'
 
 /**
  * @public
@@ -50,8 +50,17 @@ export interface FocusSelection {
  * @public
  */
 export const focusStore = writable<FocusSelection>({})
+
+/**
+ * @public
+ */
 export const selectionStore = writable<Doc[]>([])
 
+/**
+ * @public
+ */
+export const selectionStoreMap = derived(selectionStore, (it) => new Set(it.map((it) => it._id)))
+
 export const previewDocument = writable<Doc | undefined>()
 
 panelstore.subscribe((val) => {
@@ -61,6 +70,10 @@ panelstore.subscribe((val) => {
  * @public
  */
 export function updateFocus (selection?: FocusSelection): void {
+  if (!window.document.hasFocus()) {
+    window.focus()
+  }
+
   focusStore.update((cur) => {
     const now = Date.now()