TSK-1098: My issues list (#3137)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
2024-11-22 11:42:30 +03:00 · 2023-05-04 19:34:51 +07:00 · 2023-05-04 19:34:51 +07:00 · 239d4da6ce
commit 239d4da6ce
parent a41990f7ab
48 changed files with 667 additions and 417 deletions
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
--- a/models/core/src/security.ts
+++ b/models/core/src/security.ts
@ -23,7 +23,7 @@ export const DOMAIN_SPACE = 'space' as Domain
 // S P A C E

@Model(core.class.Space, core.class.Doc, DOMAIN_SPACE)
-@UX(core.string.Space)
+@UX(core.string.Space, undefined, undefined, 'name')
 export class TSpace extends TDoc implements Space {
  @Prop(TypeString(), core.string.Name)
  @Index(IndexKind.FullText)
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@ -137,7 +137,7 @@ export class TTypeSprintStatus extends TType {}
 * @public
 */
@Model(tracker.class.Project, core.class.Space, DOMAIN_SPACE)
-@UX(tracker.string.Project, tracker.icon.Project, 'Project')
+@UX(tracker.string.Project, tracker.icon.Issues, 'Project', 'name')
 export class TProject extends TSpace implements Project {
  @Prop(TypeString(), tracker.string.Identifier)
  @Index(IndexKind.FullText)
@ -205,7 +205,7 @@ export class TIssue extends TAttachedDoc implements Issue {
  @Index(IndexKind.Indexed)
    assignee!: Ref<Employee> | null

-  @Prop(TypeRef(tracker.class.Component), tracker.string.Component)
+  @Prop(TypeRef(tracker.class.Component), tracker.string.Component, { icon: tracker.icon.Component })
  @Index(IndexKind.Indexed)
    component!: Ref<Component> | null

@ -221,16 +221,16 @@ export class TIssue extends TAttachedDoc implements Issue {

  parents!: IssueParentInfo[]

-  @Prop(Collection(chunter.class.Comment), tracker.string.Comments)
+  @Prop(Collection(chunter.class.Comment), tracker.string.Comments, { icon: chunter.icon.Chunter })
    comments!: number

-  @Prop(Collection(attachment.class.Attachment), tracker.string.Attachments)
+  @Prop(Collection(attachment.class.Attachment), tracker.string.Attachments, { icon: attachment.icon.Attachment })
    attachments!: number

  @Prop(Collection(tags.class.TagReference), tracker.string.Labels)
    labels?: number

-  @Prop(TypeRef(core.class.Space), tracker.string.Project)
+  @Prop(TypeRef(tracker.class.Project), tracker.string.Project, { icon: tracker.icon.Issues })
  @Index(IndexKind.Indexed)
  @ReadOnly()
  declare space: Ref<Project>
@ -242,7 +242,7 @@ export class TIssue extends TAttachedDoc implements Issue {
  @Hidden()
    rank!: string

-  @Prop(TypeRef(tracker.class.Sprint), tracker.string.Sprint)
+  @Prop(TypeRef(tracker.class.Sprint), tracker.string.Sprint, { icon: tracker.icon.Sprint })
  @Index(IndexKind.Indexed)
    sprint!: Ref<Sprint> | null

@ -1022,19 +1022,19 @@ export function createModel (builder: Builder): void {
            label: tracker.string.MyIssues,
            icon: tracker.icon.MyIssues,
            component: tracker.component.MyIssues
-          } //,
-          // {
-          //   id: 'all-issues',
-          //   position: 'top',
-          //   label: tracker.string.AllIssues,
-          //   icon: tracker.icon.Issues,
-          //   component: tracker.component.IssuesView,
-          //   componentProps: {
-          //     query: { '$lookup.space.archived': false },
-          //     space: undefined,
-          //     title: tracker.string.AllIssues
-          //   }
-          // }
+          },
+          {
+            id: 'all-issues',
+            position: 'top',
+            label: tracker.string.AllIssues,
+            icon: tracker.icon.Issues,
+            component: tracker.component.IssuesView,
+            componentProps: {
+              query: { '$lookup.space.archived': false },
+              space: undefined,
+              title: tracker.string.AllIssues
+            }
+          }
          // {
          //   id: 'views',
          //   position: 'top',
--- a/packages/text-editor/lang/en.json
+++ b/packages/text-editor/lang/en.json
@ -14,18 +14,11 @@
    "Blockquote": "Blockquote",
    "Code": "Code",
    "CodeBlock": "Code block",
-    "GettingWorkDone": "Getting work done",
    "Send": "Send",
    "Attach": "Attach",
    "TextStyle": "Text style",
    "Emoji": "Emoji",
    "GIF": "GIF",    
-    "Smileys": "Smileys",
-    "Nature": "Nature",
-    "Symbols": "Symbols",
-    "TravelAndPlaces": "Travel & Places",
-    "Objects": "Objects",
-    "Food": "Food",
    "FullDescription": "Full description",
    "NoFullDescription": "There are no detailed description",
    "EnableDiffMode": "Diff mode",
--- a/packages/text-editor/lang/ru.json
+++ b/packages/text-editor/lang/ru.json
@ -14,18 +14,11 @@
    "Blockquote": "Цитата",
    "Code": "Код",
    "CodeBlock": "Кодовый блок",
-    "GettingWorkDone": "Для работы",
    "Send": "Отправить",
    "Attach": "Прикреплять",
    "TextStyle": "Стиль текста",
    "Emoji": "Эмодзи",
    "GIF": "GIF",
-    "Smileys": "Смайлики",
-    "Nature": "Природа",
-    "Symbols": "Символы",
-    "TravelAndPlaces": "Путешествия & Места",
-    "Objects": "Объекты",
-    "Food": "Еда",
    "FullDescription": "Детальное описание",
    "NoFullDescription": "Нет детального описания",
    "EnableDiffMode": "Режим сравнения",
--- a/packages/text-editor/package.json
+++ b/packages/text-editor/package.json
@ -51,7 +51,6 @@
    "@tiptap/extension-collaboration": "^2.0.2",
    "@tiptap/extension-collaboration-cursor": "^2.0.2",
    "@tiptap/prosemirror-tables": "^1.1.4",    
-    "emoji-regex": "^10.1.0",
    "prosemirror-gapcursor": "^1.3.1",
    "prosemirror-dropcursor": "^1.8.0",
    "prosemirror-collab": "^1.3.0",
--- a/packages/text-editor/src/components/CollaborationDiffViewer.svelte
+++ b/packages/text-editor/src/components/CollaborationDiffViewer.svelte
@ -21,7 +21,7 @@
  import { onDestroy, onMount } from 'svelte'

  import { Markup } from '@hcengineering/core'
-  import { IconSize } from '@hcengineering/ui'
+  import { IconObjects, IconSize } from '@hcengineering/ui'
  import StyleButton from './StyleButton.svelte'

  import { DecorationSet } from 'prosemirror-view'
@ -29,7 +29,6 @@

  import { calculateDecorations } from './diff/decorations'
  import { defaultExtensions } from './extensions'
-  import Objects from './icons/Objects.svelte'

  export let content: Markup
  export let buttonSize: IconSize = 'small'
@ -106,7 +105,7 @@
      <div class="flex-grow" />
      <div class="formatPanel buttons-group xsmall-gap mb-4">
        <StyleButton
-          icon={Objects}
+          icon={IconObjects}
          size={buttonSize}
          selected={showDiff}
          showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@ -27,7 +27,14 @@
  import { createEventDispatcher, onDestroy, onMount } from 'svelte'

  import { getCurrentAccount, Markup } from '@hcengineering/core'
-  import { getEventPositionElement, getPlatformColorForText, IconSize, SelectPopup, showPopup } from '@hcengineering/ui'
+  import {
+    getEventPositionElement,
+    getPlatformColorForText,
+    IconObjects,
+    IconSize,
+    SelectPopup,
+    showPopup
+  } from '@hcengineering/ui'
  import { WebsocketProvider } from 'y-websocket'
  import * as Y from 'yjs'
  import StyleButton from './StyleButton.svelte'
@ -36,7 +43,7 @@

  import { DecorationSet } from 'prosemirror-view'
  import textEditorPlugin from '../plugin'
-  import { CollaborationIds, FormatMode, FORMAT_MODES } from '../types'
+  import { CollaborationIds, FORMAT_MODES, FormatMode } from '../types'
  import Bold from './icons/Bold.svelte'
  import Code from './icons/Code.svelte'
  import CodeBlock from './icons/CodeBlock.svelte'
@ -50,7 +57,6 @@
  import LinkEl from './icons/Link.svelte'
  import ListBullet from './icons/ListBullet.svelte'
  import ListNumber from './icons/ListNumber.svelte'
-  import Objects from './icons/Objects.svelte'
  import Quote from './icons/Quote.svelte'
  import Strikethrough from './icons/Strikethrough.svelte'
  import AddColAfter from './icons/table/AddColAfter.svelte'
@ -576,7 +582,7 @@
        {#if comparedVersion !== undefined}
          <div class="flex-row-center buttons-group xsmall-gap">
            <StyleButton
-              icon={Objects}
+              icon={IconObjects}
              size={buttonSize}
              selected={showDiff}
              showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
@ -596,7 +602,7 @@
    {:else if comparedVersion !== undefined}
      <div class="formatPanelRef formatPanel flex flex-grow flex-reverse">
        <StyleButton
-          icon={Objects}
+          icon={IconObjects}
          size={buttonSize}
          selected={showDiff}
          showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@ -13,21 +13,23 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { getResource, IntlString, Asset } from '@hcengineering/platform'
+  import { Asset, IntlString, getResource } from '@hcengineering/platform'
  import { getClient } from '@hcengineering/presentation'
-  import { Button, handler, Icon, showPopup, Spinner, tooltip } from '@hcengineering/ui'
-  import type { AnySvelteComponent } from '@hcengineering/ui'
+  import { AnySvelteComponent, IconEmoji } from '@hcengineering/ui'
+  import { Button, EmojiPopup, Icon, Spinner, handler, showPopup, tooltip } from '@hcengineering/ui'
  import { AnyExtension } from '@tiptap/core'
  import { createEventDispatcher } from 'svelte'
  import { Completion } from '../Completion'
  import textEditorPlugin from '../plugin'
-  import { FormatMode, FORMAT_MODES, RefAction, RefInputActionItem, TextEditorHandler } from '../types'
-  import EmojiPopup from './EmojiPopup.svelte'
+  import { FORMAT_MODES, FormatMode, RefAction, RefInputActionItem, TextEditorHandler } from '../types'
+  import LinkPopup from './LinkPopup.svelte'
+  import MentionList from './MentionList.svelte'
+  import { SvelteRenderer } from './SvelteRenderer'
+  import TextEditor from './TextEditor.svelte'
  import Attach from './icons/Attach.svelte'
  import Bold from './icons/Bold.svelte'
  import Code from './icons/Code.svelte'
  import CodeBlock from './icons/CodeBlock.svelte'
-  import Emoji from './icons/Emoji.svelte'
  import GIF from './icons/GIF.svelte'
  import Italic from './icons/Italic.svelte'
  import Link from './icons/Link.svelte'
@ -37,10 +39,6 @@
  import Send from './icons/Send.svelte'
  import Strikethrough from './icons/Strikethrough.svelte'
  import TextStyle from './icons/TextStyle.svelte'
-  import LinkPopup from './LinkPopup.svelte'
-  import MentionList from './MentionList.svelte'
-  import { SvelteRenderer } from './SvelteRenderer'
-  import TextEditor from './TextEditor.svelte'

  const dispatch = createEventDispatcher()
  export let content: string = ''
@ -85,7 +83,7 @@
    },
    {
      label: textEditorPlugin.string.Emoji,
-      icon: Emoji,
+      icon: IconEmoji,
      action: (element) => {
        showPopup(
          EmojiPopup,
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@ -17,7 +17,9 @@
  import presentation, { getClient } from '@hcengineering/presentation'
  import {
    AnySvelteComponent,
+    EmojiPopup,
    getEventPositionElement,
+    IconEmoji,
    IconSize,
    Scroller,
    SelectPopup,
@ -27,13 +29,11 @@
  import { createEventDispatcher } from 'svelte'
  import textEditorPlugin from '../plugin'
  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'
  import Bold from './icons/Bold.svelte'
  import Code from './icons/Code.svelte'
  import CodeBlock from './icons/CodeBlock.svelte'
-  import Emoji from './icons/Emoji.svelte'
  import Header from './icons/Header.svelte'
  import IconTable from './icons/IconTable.svelte'
  import Italic from './icons/Italic.svelte'
@ -138,7 +138,7 @@
    },
    {
      label: textEditorPlugin.string.Emoji,
-      icon: Emoji,
+      icon: IconEmoji,
      action: (element) => {
        showPopup(
          EmojiPopup,
--- a/packages/text-editor/src/index.ts
+++ b/packages/text-editor/src/index.ts
@ -23,14 +23,12 @@ export { default as StyledTextBox } from './components/StyledTextBox.svelte'
 export { default as StyledTextArea } from './components/StyledTextArea.svelte'
 export { default as StyledTextEditor } from './components/StyledTextEditor.svelte'
 export { default as TextEditor } from './components/TextEditor.svelte'
-export { default as EmojiPopup } from './components/EmojiPopup.svelte'
 export { default as FullDescriptionBox } from './components/FullDescriptionBox.svelte'
 export { default as CollaboratorEditor } from './components/CollaboratorEditor.svelte'
 export { default as CollaborationDiffViewer } from './components/CollaborationDiffViewer.svelte'
 export { default } from './plugin'
 export * from './types'
 export { default as Collaboration } from './components/Collaboration.svelte'
-export { default as IconObjects } from './components/icons/Objects.svelte'
 export { default as StyleButton } from './components/StyleButton.svelte'

 addStringsLoader(textEditorId, async (lang: string) => {
--- a/packages/text-editor/src/plugin.ts
+++ b/packages/text-editor/src/plugin.ts
@ -46,14 +46,7 @@ export default plugin(textEditorId, {
    Blockquote: '' as IntlString,
    Code: '' as IntlString,
    CodeBlock: '' as IntlString,
-    GettingWorkDone: '' as IntlString,
    Send: '' as IntlString,
-    Smileys: '' as IntlString,
-    Nature: '' as IntlString,
-    Symbols: '' as IntlString,
-    TravelAndPlaces: '' as IntlString,
-    Food: '' as IntlString,
-    Objects: '' as IntlString,
    FullDescription: '' as IntlString,
    NoFullDescription: '' as IntlString,
    EnableDiffMode: '' as IntlString,
--- a/packages/ui/lang/en.json
+++ b/packages/ui/lang/en.json
@ -49,6 +49,13 @@
    "DD": "DD",
    "MM": "MM",
    "YYYY": "YYYY",
-    "HH": "HH"
+    "HH": "HH",
+    "GettingWorkDone": "Getting work done",
+    "Smileys": "Smileys",
+    "Nature": "Nature",
+    "Symbols": "Symbols",
+    "TravelAndPlaces": "Travel & Places",
+    "Objects": "Objects",
+    "Food": "Food"
  }
 }
--- a/packages/ui/lang/ru.json
+++ b/packages/ui/lang/ru.json
@ -49,6 +49,13 @@
    "DD": "ДД",
    "MM": "ММ",
    "YYYY": "ГГГГ",
-    "HH": "ЧЧ"
+    "HH": "ЧЧ",
+    "GettingWorkDone": "Для работы",
+    "Smileys": "Смайлики",
+    "Nature": "Природа",
+    "Symbols": "Символы",
+    "TravelAndPlaces": "Путешествия & Места",
+    "Objects": "Объекты",
+    "Food": "Еда"
  }
 }
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -39,7 +39,8 @@
    "just-clone": "~6.2.0",
    "svelte": "3.55.1",
    "fast-equals": "^2.0.3",
-    "autolinker": "4.0.0"
+    "autolinker": "4.0.0",
+    "emoji-regex": "^10.1.0"
  },
  "repository": "https://github.com/hcenginneing/anticrm",
  "publishConfig": {
--- a/packages/text-editor/src/components/EmojiPopup.svelte
+++ b/packages/text-editor/src/components/EmojiPopup.svelte
@ -1,10 +1,11 @@
 <script lang="ts">
-  import emojiRegex from 'emoji-regex'
-  import { getContext } from 'svelte'
-  import { createEventDispatcher } from 'svelte'
  import { IntlString } from '@hcengineering/platform'
-  import { Label, tooltip, Scroller, emojiSP } from '@hcengineering/ui'
-  import type { AnySvelteComponent } from '@hcengineering/ui'
+  import emojiRegex from 'emoji-regex'
+  import { createEventDispatcher, getContext } from 'svelte'
+  import { tooltip } from '../tooltips'
+  import { AnySvelteComponent, emojiSP } from '../types'
+  import Label from './Label.svelte'
+  import Scroller from './Scroller.svelte'
  import Emoji from './icons/Emoji.svelte'
  import Food from './icons/Food.svelte'
  import Nature from './icons/Nature.svelte'
@ -14,6 +15,8 @@
  import Work from './icons/Work.svelte'
  import plugin from '../plugin'

+  export let embedded = false
+
  let div: HTMLDivElement
  const regex = emojiRegex()

@ -122,7 +125,7 @@
  }
 </script>

-<div class="antiPopup antiPopup-withHeader popup">
+<div class={!embedded ? 'antiPopup antiPopup-withHeader popup' : ''}>
  <div class="flex-row-center popup-header">
    {#each categories as category}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
@ -132,7 +135,7 @@
        class:selected={currentCategory === category}
        on:click={() => handleScrollToCategory(category.id)}
      >
-        <svelte:component this={category.icon} size={'large'} opacity={currentCategory === category ? '1' : '0.3'} />
+        <svelte:component this={category.icon} size={'medium'} opacity={currentCategory === category ? '1' : '0.3'} />
      </div>
    {/each}
  </div>
@ -186,15 +189,15 @@
  .palette {
    display: flex;
    flex-wrap: wrap;
-    width: 19.25rem;
-    font-size: 1.75rem;
+    // width: 19.25rem;
+    font-size: 1.25rem;
  }
  .element {
    display: flex;
    justify-content: center;
    align-items: center;
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
    border-radius: 0.25rem;
    color: var(--caption-color);
    cursor: pointer;
--- a/packages/ui/src/components/Icon.svelte
+++ b/packages/ui/src/components/Icon.svelte
@ -19,8 +19,8 @@

  export let icon: Asset | AnySvelteComponent | ComponentType
  export let size: IconSize
-  export let fill = 'currentColor'
  export let iconProps: any | undefined = undefined
+  export let fill: string | undefined = 'currentColor'

  function isAsset (icon: Asset | AnySvelteComponent): boolean {
    return typeof icon === 'string'
@ -32,12 +32,14 @@

  let url: string
  $: url = isAsset(icon) ? getMetadata(toAsset(icon)) ?? 'https://anticrm.org/logo.svg' : ''
+
+  $: _fill = iconProps?.fill ?? fill
 </script>

 {#if isAsset(icon)}
-  <svg class="svg-{size}" {fill}>
+  <svg class="svg-{size}" fill={_fill}>
    <use href={url} />
  </svg>
 {:else if typeof icon !== 'string'}
-  <svelte:component this={icon} {size} {fill} {...iconProps} />
+  <svelte:component this={icon} {size} fill={_fill} {...iconProps} />
 {/if}
--- a/packages/ui/src/components/IconWithEmojii.svelte
+++ b/packages/ui/src/components/IconWithEmojii.svelte
@ -0,0 +1,73 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { IconSize } from '../types'
+
+  export let icon: number
+  export let size: IconSize
+
+  let value: string = ''
+  $: try {
+    value = String.fromCodePoint(icon)
+  } catch (err) {}
+</script>
+
+<div class="emojii-{size} flex-row-center emojii">
+  {value}
+</div>
+
+<style lang="scss">
+  .emojii {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: black;
+  }
+  .emojii-inline {
+    width: 1em;
+    height: 1em;
+    font-size: 1rem;
+  }
+  .emojii-x-small {
+    width: 0.75rem;
+    height: 0.75rem;
+    font-size: 0.75rem;
+  }
+  .emojii-small {
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+  }
+  .emojii-medium {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+  }
+  .emojii-large {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 1.5rem;
+  }
+  .semojiivg-full {
+    width: inherit;
+    height: inherit;
+  }
+  .emojii-x-small,
+  .emojii-small,
+  .emojii-medium,
+  .emojii-large {
+    flex-shrink: 0;
+  }
+</style>
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@ -251,10 +251,10 @@
  const delayCall = (op: () => void, h?: boolean) => {
    if (h) {
      clearTimeout(checkHBarTimeout)
-      checkHBarTimeout = setTimeout(op, 50)
+      checkHBarTimeout = setTimeout(op, 5)
    } else {
      clearTimeout(checkBarTimeout)
-      checkBarTimeout = setTimeout(op, 50)
+      checkBarTimeout = setTimeout(op, 5)
    }
  }

--- a/packages/ui/src/components/Tabs.svelte
+++ b/packages/ui/src/components/Tabs.svelte
@ -14,75 +14,22 @@
 -->
 <script lang="ts">
  import type { TabModel } from '../types'
-  import Label from './Label.svelte'
  import Component from './Component.svelte'
-  import { Icon } from '..'
+  import TabsControl from './TabsControl.svelte'

  export let model: TabModel
  export let selected = 0
 </script>

-<div class="flex-stretch container">
-  {#each model as tab, i}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div
-      class="flex-row-center tab"
-      class:selected={i === selected}
-      on:click={() => {
-        selected = i
-      }}
-    >
-      {#if tab.icon !== undefined}
-        <div class="mr-2">
-          <Icon icon={tab.icon} size={'small'} />
-        </div>
-      {/if}
-      <Label label={tab.label} />
-    </div>
-  {/each}
-  <div class="grow" />
-</div>
-{#each model as tab, i}
-  {#if selected === i}
+<TabsControl {model} bind:selected>
+  <svelte:fragment slot="content" let:selected>
+    {@const tab = model[selected]}
+    {#if tab}
      {#if typeof tab.component === 'string'}
        <Component is={tab.component} props={tab.props} on:change />
      {:else}
        <svelte:component this={tab.component} {...tab.props} on:change />
      {/if}
    {/if}
-{/each}
-
-<style lang="scss">
-  .container {
-    flex-shrink: 0;
-    flex-wrap: nowrap;
-    margin-bottom: 0.5rem;
-    width: 100%;
-    height: 4.5rem;
-    border-bottom: 1px solid var(--divider-color);
-
-    .tab {
-      height: 4.5rem;
-      color: var(--dark-color);
-      cursor: pointer;
-      user-select: none;
-
-      &.selected {
-        border-top: 0.125rem solid transparent;
-        border-bottom: 0.125rem solid var(--caption-color);
-        color: var(--caption-color);
-        cursor: default;
-      }
-      &:not(.selected):hover {
-        color: var(--accent-color);
-      }
-    }
-    .tab + .tab {
-      margin-left: 2.5rem;
-    }
-    .grow {
-      min-width: 2.5rem;
-      flex-grow: 1;
-    }
-  }
-</style>
+  </svelte:fragment>
+</TabsControl>
--- a/packages/ui/src/components/TabsControl.svelte
+++ b/packages/ui/src/components/TabsControl.svelte
@ -0,0 +1,79 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { Icon, TabBase } from '..'
+  import Label from './Label.svelte'
+
+  export let model: TabBase[]
+  export let selected = 0
+</script>
+
+<div class="flex-stretch container">
+  {#each model as tab, i}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div
+      class="flex-row-center tab"
+      class:selected={i === selected}
+      on:click={() => {
+        selected = i
+      }}
+    >
+      {#if tab.icon !== undefined}
+        <div class="mr-2">
+          <Icon icon={tab.icon} size={'small'} />
+        </div>
+      {/if}
+      <Label label={tab.label} />
+    </div>
+  {/each}
+  <div class="grow" />
+</div>
+
+<slot name="content" {selected} />
+
+<style lang="scss">
+  .container {
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    margin-bottom: 0.5rem;
+    width: 100%;
+    height: 4.5rem;
+    border-bottom: 1px solid var(--divider-color);
+
+    .tab {
+      height: 4.5rem;
+      color: var(--dark-color);
+      cursor: pointer;
+      user-select: none;
+
+      &.selected {
+        border-top: 0.125rem solid transparent;
+        border-bottom: 0.125rem solid var(--caption-color);
+        color: var(--caption-color);
+        cursor: default;
+      }
+      &:not(.selected):hover {
+        color: var(--accent-color);
+      }
+    }
+    .tab + .tab {
+      margin-left: 2.5rem;
+    }
+    .grow {
+      min-width: 2.5rem;
+      flex-grow: 1;
+    }
+  }
+</style>
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@ -165,7 +165,7 @@
    }
  }

-  $: fitTooltip(tooltipHTML)
+  $: kind === 'submenu' ? fitSubmenu() : fitTooltip(tooltipHTML)
  afterUpdate(() => (kind === 'submenu' ? fitSubmenu() : fitTooltip(tooltipHTML)))
  onDestroy(() => hideTooltip())
 </script>
--- a/packages/text-editor/src/components/icons/Emoji.svelte
+++ b/packages/text-editor/src/components/icons/Emoji.svelte
--- a/packages/text-editor/src/components/icons/Food.svelte
+++ b/packages/text-editor/src/components/icons/Food.svelte
--- a/packages/text-editor/src/components/icons/Nature.svelte
+++ b/packages/text-editor/src/components/icons/Nature.svelte
--- a/packages/text-editor/src/components/icons/Objects.svelte
+++ b/packages/text-editor/src/components/icons/Objects.svelte
--- a/packages/text-editor/src/components/icons/Places.svelte
+++ b/packages/text-editor/src/components/icons/Places.svelte
--- a/packages/text-editor/src/components/icons/Symbols.svelte
+++ b/packages/text-editor/src/components/icons/Symbols.svelte
--- a/packages/text-editor/src/components/icons/Work.svelte
+++ b/packages/text-editor/src/components/icons/Work.svelte
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@ -56,6 +56,7 @@ export { default as CheckBox } from './components/CheckBox.svelte'
 export { default as Progress } from './components/Progress.svelte'
 export { default as ProgressCircle } from './components/ProgressCircle.svelte'
 export { default as Tabs } from './components/Tabs.svelte'
+export { default as TabsControl } from './components/TabsControl.svelte'
 export { default as ScrollBox } from './components/ScrollBox.svelte'
 export { default as PopupMenu } from './components/PopupMenu.svelte'
 export { default as SelectPopup } from './components/SelectPopup.svelte'
@ -152,6 +153,8 @@ export { default as IconMixin } from './components/icons/Mixin.svelte'
 export { default as IconCircles } from './components/icons/Circles.svelte'
 export { default as IconLike } from './components/icons/Like.svelte'
 export { default as IconCollapseArrow } from './components/icons/CollapseArrow.svelte'
+export { default as IconEmoji } from './components/icons/Emoji.svelte'
+export { default as IconObjects } from './components/icons/Objects.svelte'

 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'
@ -174,6 +177,8 @@ export { NotificationSeverity } from './components/notifications/NotificationSev
 export { Notification } from './components/notifications/Notification'
 export { default as Wizard } from './components/wizard/Wizard.svelte'
 export { default as StepsDialog } from './components/StepsDialog.svelte'
+export { default as EmojiPopup } from './components/EmojiPopup.svelte'
+export { default as IconWithEmojii } from './components/IconWithEmojii.svelte'

 export * from './types'
 export * from './location'
--- a/packages/ui/src/plugin.ts
+++ b/packages/ui/src/plugin.ts
@ -74,7 +74,15 @@ export const uis = plugin(uiId, {
    DueDatePopupTitle: '' as IntlString,
    DueDatePopupOverdueTitle: '' as IntlString,
    DueDatePopupDescription: '' as IntlString,
-    DueDatePopupOverdueDescription: '' as IntlString
+    DueDatePopupOverdueDescription: '' as IntlString,
+
+    GettingWorkDone: '' as IntlString,
+    Smileys: '' as IntlString,
+    Nature: '' as IntlString,
+    Symbols: '' as IntlString,
+    TravelAndPlaces: '' as IntlString,
+    Food: '' as IntlString,
+    Objects: '' as IntlString
  },
  metadata: {
    DefaultApplication: '' as Metadata<AnyComponent>,
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@ -92,9 +92,12 @@ export interface IPopupItem {
  action?: Function
 }

-export interface Tab {
+export interface TabBase {
  label: IntlString
  icon?: Asset
+}
+
+export interface Tab extends TabBase {
  component: AnyComponent | AnySvelteComponent
  props: any
 }
--- a/plugins/chunter-resources/src/components/Message.svelte
+++ b/plugins/chunter-resources/src/components/Message.svelte
@ -21,7 +21,7 @@
  import { getCurrentAccount, Ref, WithLookup } from '@hcengineering/core'
  import { getResource } from '@hcengineering/platform'
  import { getClient, MessageViewer } from '@hcengineering/presentation'
-  import { EmojiPopup } from '@hcengineering/text-editor'
+  import { EmojiPopup } from '@hcengineering/ui'
  import ui, { ActionIcon, Button, IconMoreH, Label, showPopup, tooltip } from '@hcengineering/ui'
  import { Action } from '@hcengineering/view'
  import { LinkPresenter, Menu } from '@hcengineering/view-resources'
--- a/plugins/tracker-assets/assets/icons.svg
+++ b/plugins/tracker-assets/assets/icons.svg
@ -22,10 +22,12 @@
    <path d="M9.95479 6.50024H7.0457C6.74445 6.50024 6.50024 6.74445 6.50024 7.0457V9.95479C6.50024 10.256 6.74445 10.5002 7.0457 10.5002H9.95479C10.256 10.5002 10.5002 10.256 10.5002 9.95479V7.0457C10.5002 6.74445 10.256 6.50024 9.95479 6.50024Z"/>
  </symbol>
  <symbol id="issue" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13,1H3C1.9,1,1,1.9,1,3v10c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2V3C15,1.9,14.1,1,13,1z M12.4,6.6l-4.9,4.9c-0.1,0.1-0.2,0.1-0.3,0l-3-3c-0.4-0.4-0.4-1,0-1.3c0.4-0.4,1-0.4,1.3,0l1.8,1.8l3.7-3.7c0.4-0.4,1-0.4,1.3,0C12.8,5.6,12.8,6.2,12.4,6.6z" />
+    <path d="M15.5 2.50001L8 10L4.5 6.50001L5.20711 5.79291L8 8.5858L14.7929 1.79291L15.5 2.50001Z" />
+    <path d="M3.5 2C2.67157 2 2 2.67157 2 3.5V12.5C2 13.3284 2.67157 14 3.5 14H12.5C13.3284 14 14 13.3284 14 12.5V8H13V12.5C13 12.7761 12.7761 13 12.5 13H3.5C3.22386 13 3 12.7761 3 12.5V3.5C3 3.22386 3.22386 3 3.5 3H11V2H3.5Z" />
  </symbol>
  <symbol id="project" viewBox="0 0 24 24">
-    <path d="M13,1h-2.2H9.4H6.6H5.2H3C1.9,1,1,1.9,1,3v10c0,1.1,0.9,2,2,2h2.2h1.4h2.8h1.4H13c1.1,0,2-0.9,2-2V3C15,1.9,14.1,1,13,1z M3,13.8c-0.4,0-0.8-0.4-0.8-0.8V3c0-0.4,0.4-0.8,0.8-0.8h2.2v11.6H3z M6.6,13.8V2.2h2.8v11.6H6.6z M13.8,13c0,0.4-0.4,0.8-0.8,0.8 h-2.2V2.2H13c0.4,0,0.8,0.4,0.8,0.8V13z"/>
+    <path d="M15.5 2.50001L8 10L4.5 6.50001L5.20711 5.79291L8 8.5858L14.7929 1.79291L15.5 2.50001Z" />
+    <path d="M3.5 2C2.67157 2 2 2.67157 2 3.5V12.5C2 13.3284 2.67157 14 3.5 14H12.5C13.3284 14 14 13.3284 14 12.5V8H13V12.5C13 12.7761 12.7761 13 12.5 13H3.5C3.22386 13 3 12.7761 3 12.5V3.5C3 3.22386 3.22386 3 3.5 3H11V2H3.5Z" />
  </symbol>
  <symbol id="document" viewBox="0 0 16 16">
    <path d="M8,14.5c-3.6,0-6.5-2.9-6.5-6.5S4.4,1.5,8,1.5s6.5,2.9,6.5,6.5S11.6,14.5,8,14.5z M8,2.5C5,2.5,2.5,5,2.5,8 c0,3,2.5,5.5,5.5,5.5c3,0,5.5-2.5,5.5-5.5C13.5,5,11,2.5,8,2.5z"/>
@ -60,10 +62,10 @@
  <symbol id="magnifier" viewBox="1 1 13 13">
    <path d="M9.5 7C9.5 8.38071 8.38071 9.5 7 9.5C5.61929 9.5 4.5 8.38071 4.5 7C4.5 5.61929 5.61929 4.5 7 4.5C8.38071 4.5 9.5 5.61929 9.5 7ZM9.24822 10.3089C8.60751 10.745 7.83353 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3C9.20914 3 11 4.79086 11 7C11 7.83353 10.745 8.60751 10.3089 9.24822L12.7803 11.7197C13.0732 12.0126 13.0732 12.4874 12.7803 12.7803C12.4874 13.0732 12.0126 13.0732 11.7197 12.7803L9.24822 10.3089Z" fill-rule="evenodd" clip-rule="evenodd"/>
  </symbol>
-  <symbol id="home" viewBox="0 0 16 16" fill="#ff324cee">
+  <symbol id="home" viewBox="0 0 16 16">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1L13.8838 5.29644C14.271 5.5788 14.5 6.0292 14.5 6.50845V12.5C14.5 13.3284 13.8284 14 13 14H3C2.17157 14 1.5 13.3284 1.5 12.5V6.50845C1.5 6.0292 1.729 5.5788 2.11624 5.29644L8 1Z"/>
  </symbol>
-  <symbol id="red-circle" viewBox="0 0 16 16" fill="#ff324cee">
+  <symbol id="red-circle" viewBox="0 0 14 14">
    <path d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M7,12c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S9.8,12,7,12z" />
  </symbol>

--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@ -291,7 +291,10 @@
    "CreatedSubIssue": "Created sub-issue",
    "ChangeStatus": "Change status",
    "ConfigLabel": "Tracker",
-    "ConfigDescription": "Extension to manage work items and do all jobs done."
+    "ConfigDescription": "Extension to manage work items and do all jobs done.",
+    "ProjectColor": "Choose project icon color",
+    "ProjectIconCategory": "Icon",
+    "ProjectEmojiiCategory": "Emojii"
  },
  "status": {}
 }
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@ -291,7 +291,10 @@
    "CreatedSubIssue": "Создал(а) подзадачу",
    "ChangeStatus": "Изменение статуса",
    "ConfigLabel": "Трекер",
-    "ConfigDescription": "Расширение по управлению задачами, чтобы все было в срок."
+    "ConfigDescription": "Расширение по управлению задачами, чтобы все было в срок.",
+    "ProjectColor": "Выберете цвет проекта",
+    "ProjectIconCategory": "Иконка",
+    "ProjectEmojiiCategory": "Эмодзи"
  },
  "status": {}
 }
--- a/plugins/tracker-resources/src/components/projects/CreateProject.svelte
+++ b/plugins/tracker-resources/src/components/projects/CreateProject.svelte
@ -15,12 +15,24 @@
 <script lang="ts">
  import { Employee } from '@hcengineering/contact'
  import { AccountArrayEditor, AssigneeBox } from '@hcengineering/contact-resources'
-  import core, { Account, DocumentUpdate, generateId, getCurrentAccount, Ref, SortingOrder } from '@hcengineering/core'
+  import core, { Account, DocumentUpdate, Ref, SortingOrder, generateId, getCurrentAccount } from '@hcengineering/core'
  import { Asset } from '@hcengineering/platform'
  import presentation, { Card, getClient } from '@hcengineering/presentation'
  import { StyledTextBox } from '@hcengineering/text-editor'
-  import { genRanks, IssueStatus, Project, TimeReportDayType } from '@hcengineering/tracker'
-  import { Button, EditBox, eventToHTMLElement, IconEdit, Label, showPopup, ToggleWithLabel } from '@hcengineering/ui'
+  import { IssueStatus, Project, TimeReportDayType, genRanks } from '@hcengineering/tracker'
+  import {
+    Button,
+    EditBox,
+    IconEdit,
+    IconWithEmojii,
+    Label,
+    ToggleWithLabel,
+    eventToHTMLElement,
+    getColorNumberByText,
+    getPlatformColor,
+    getPlatformColorForText,
+    showPopup
+  } from '@hcengineering/ui'
  import { createEventDispatcher } from 'svelte'
  import tracker from '../../plugin'
  import TimeReportDayDropdown from '../issues/timereport/TimeReportDayDropdown.svelte'
@ -36,6 +48,7 @@
  let description: string = project?.description ?? ''
  let isPrivate: boolean = project?.private ?? false
  let icon: Asset | undefined = project?.icon ?? undefined
+  let color: number | undefined = project?.color ?? undefined
  let selectedWorkDayType: TimeReportDayType | undefined =
    project?.defaultTimeReportDay ?? TimeReportDayType.PreviousWorkDay
  let defaultAssignee: Ref<Employee> | null | undefined = project?.defaultAssignee ?? null
@ -67,6 +80,7 @@
      defaultIssueStatus: defaultStatusId,
      defaultAssignee: defaultAssignee ?? undefined,
      icon,
+      color,
      defaultTimeReportDay: selectedWorkDayType ?? TimeReportDayType.PreviousWorkDay
    }
  }
@ -89,6 +103,9 @@
    if (projectData.icon !== project?.icon) {
      update.icon = projectData.icon
    }
+    if (projectData.color !== project?.color) {
+      update.color = projectData.color
+    }
    if (projectData.defaultTimeReportDay !== project?.defaultTimeReportDay) {
      update.defaultTimeReportDay = projectData.defaultTimeReportDay
    }
@ -148,9 +165,10 @@
  }

  function chooseIcon (ev: MouseEvent) {
-    showPopup(ProjectIconChooser, { icon }, eventToHTMLElement(ev), (result) => {
+    showPopup(ProjectIconChooser, { icon, color: color ?? getColorNumberByText(name) }, 'top', (result) => {
      if (result !== undefined && result !== null) {
-        icon = result
+        icon = result.icon
+        color = result.color
      }
    })
  }
@ -213,7 +231,15 @@
    <div class="caption">
      <Label label={tracker.string.ChooseIcon} />
    </div>
-    <Button icon={icon ?? tracker.icon.Home} kind="no-border" size="medium" on:click={chooseIcon} />
+    <Button
+      icon={icon === tracker.component.IconWithEmojii ? IconWithEmojii : icon ?? tracker.icon.Home}
+      iconProps={icon === tracker.component.IconWithEmojii
+        ? { icon: color }
+        : { fill: color !== undefined ? getPlatformColor(color) : getPlatformColorForText(name) }}
+      kind="no-border"
+      size="medium"
+      on:click={chooseIcon}
+    />
  </div>

  <div class="flex-between">
--- a/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte
@ -1,17 +1,36 @@
 <script lang="ts">
  import { Metadata } from '@hcengineering/platform'
  import presentation, { Card } from '@hcengineering/presentation'
-  import { Button } from '@hcengineering/ui'
-  import tracker from '../../plugin'
+  import {
+    Button,
+    EmojiPopup,
+    Label,
+    TabsControl,
+    eventToHTMLElement,
+    getPlatformColor,
+    showPopup
+  } from '@hcengineering/ui'
+  import { ColorsPopup } from '@hcengineering/view-resources'
  import { createEventDispatcher } from 'svelte'
+  import tracker from '../../plugin'

  export let icon: Metadata<string> | undefined = undefined
+  export let color: number = 0

  const dispatch = createEventDispatcher()
  const icons = [tracker.icon.Home, tracker.icon.RedCircle]

+  let _color = color
+  let _icon = icon ?? icons[0]
+
  function save () {
-    dispatch('close', icon)
+    dispatch('close', { icon: _icon, color: _color })
+  }
+  function pickColor (evt: MouseEvent) {
+    showPopup(ColorsPopup, { selected: _color }, eventToHTMLElement(evt), (newColor) => {
+      _color = newColor
+      console.log(newColor)
+    })
  }
 </script>

@ -19,24 +38,66 @@
  label={tracker.string.ChooseIcon}
  okLabel={presentation.string.Save}
  okAction={save}
-  canSave={icon !== undefined}
+  canSave={_icon !== undefined}
  on:close={() => {
    dispatch('close')
  }}
  on:changeContent
 >
  <div class="float-left-box">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <TabsControl
+      model={[{ label: tracker.string.ProjectIconCategory }, { label: tracker.string.ProjectEmojiiCategory }]}
+    >
+      <svelte:fragment slot="content" let:selected>
+        {#if selected === 0}
+          <div class="flex-row-center">
+            <Label label={tracker.string.ProjectColor} />
+            <div class="flex-no-shrink ml-2 color" on:click={pickColor}>
+              <div class="dot" style="background-color: {getPlatformColor(_color ?? 0)}" />
+            </div>
+          </div>
          {#each icons as obj}
            <div class="float-left p-2">
              <Button
                icon={obj}
+                iconProps={{ fill: getPlatformColor(_color ?? 0) }}
                size="medium"
-          kind={obj === icon ? 'primary' : 'transparent'}
+                kind={obj === _icon ? 'primary' : 'transparent'}
                on:click={() => {
-            icon = obj
+                  _icon = obj
                }}
              />
            </div>
          {/each}
+        {:else}
+          <EmojiPopup
+            embedded
+            on:close={(evt) => {
+              dispatch('close', { icon: tracker.component.IconWithEmojii, color: evt.detail.codePointAt(0) })
+            }}
+          />
+        {/if}
+      </svelte:fragment>
+    </TabsControl>
  </div>
 </Card>
+
+<style lang="scss">
+  .color {
+    position: relative;
+    width: 1.75rem;
+    height: 1.75rem;
+    background-color: var(--accent-bg-color);
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    cursor: pointer;
+
+    .dot {
+      position: absolute;
+      content: '';
+      border-radius: 50%;
+      inset: 30%;
+    }
+  }
+</style>
--- a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
@ -13,15 +13,22 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import tracker, { Project } from '@hcengineering/tracker'
-  import { Icon } from '@hcengineering/ui'
+  import { Project } from '@hcengineering/tracker'
+  import { Icon, IconWithEmojii, getPlatformColor, getPlatformColorForText } from '@hcengineering/ui'
+  import tracker from '../../plugin'

  export let value: Project
 </script>

-<div class="flex-presenter cursor-default inline-presenter">
+<div class="flex-presenter cursor-default">
  <div class="icon">
-    <Icon icon={value.icon ?? tracker.icon.Home} size="small" />
+    <Icon
+      icon={value.icon === tracker.component.IconWithEmojii ? IconWithEmojii : value.icon ?? tracker.icon.Home}
+      iconProps={value.icon === tracker.component.IconWithEmojii
+        ? { icon: value.color }
+        : { fill: value.color !== undefined ? getPlatformColor(value.color) : getPlatformColorForText(value.name) }}
+      size="small"
+    />
  </div>
  <span class="label no-underline nowrap">
    {value.name}
--- a/plugins/tracker-resources/src/components/projects/ProjectSpacePresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectSpacePresenter.svelte
@ -15,9 +15,11 @@
 <script lang="ts">
  import { Ref, Space } from '@hcengineering/core'
  import { Project } from '@hcengineering/tracker'
-  import { TreeNode, NavLink } from '@hcengineering/view-resources'
+  import { IconWithEmojii, getPlatformColor, getPlatformColorForText } from '@hcengineering/ui'
+  import { NavLink, TreeNode } from '@hcengineering/view-resources'
  import { SpacesNavModel } from '@hcengineering/workbench'
  import { SpecialElement } from '@hcengineering/workbench-resources'
+  import tracker from '../../plugin'

  export let space: Project
  export let model: SpacesNavModel
@ -28,7 +30,14 @@
 </script>

 {#if model.specials}
-  <TreeNode icon={space?.icon ?? model.icon} title={space.name} actions={() => getActions(space)}>
+  <TreeNode
+    icon={space?.icon === tracker.component.IconWithEmojii ? IconWithEmojii : space?.icon ?? model.icon}
+    iconProps={space?.icon === tracker.component.IconWithEmojii
+      ? { icon: space.color }
+      : { fill: space.color !== undefined ? getPlatformColor(space.color) : getPlatformColorForText(space.name) }}
+    title={space.name}
+    actions={() => getActions(space)}
+  >
    {#each model.specials as special}
      <NavLink space={space._id} special={special.id}>
        <SpecialElement
--- a/plugins/tracker-resources/src/index.ts
+++ b/plugins/tracker-resources/src/index.ts
@ -30,9 +30,9 @@ import { showPopup } from '@hcengineering/ui'
 import ComponentEditor from './components/components/ComponentEditor.svelte'
 import ComponentPresenter from './components/components/ComponentPresenter.svelte'
 import Components from './components/components/Components.svelte'
-import ComponentsTimeline from './components/components/ComponentsTimeline.svelte'
 import ComponentStatusEditor from './components/components/ComponentStatusEditor.svelte'
 import ComponentStatusPresenter from './components/components/ComponentStatusPresenter.svelte'
+import ComponentsTimeline from './components/components/ComponentsTimeline.svelte'
 import ComponentTitlePresenter from './components/components/ComponentTitlePresenter.svelte'
 import EditComponent from './components/components/EditComponent.svelte'
 import IconPresenter from './components/components/IconComponent.svelte'
@ -53,6 +53,7 @@ import Issues from './components/issues/Issues.svelte'
 import IssuesView from './components/issues/IssuesView.svelte'
 import KanbanView from './components/issues/KanbanView.svelte'
 import ModificationDatePresenter from './components/issues/ModificationDatePresenter.svelte'
+import NotificationIssuePresenter from './components/issues/NotificationIssuePresenter.svelte'
 import PriorityEditor from './components/issues/PriorityEditor.svelte'
 import PriorityPresenter from './components/issues/PriorityPresenter.svelte'
 import PriorityRefPresenter from './components/issues/PriorityRefPresenter.svelte'
@ -72,7 +73,6 @@ import SprintLeadPresenter from './components/sprints/SprintLeadPresenter.svelte
 import CreateIssueTemplate from './components/templates/CreateIssueTemplate.svelte'
 import Views from './components/views/Views.svelte'
 import Statuses from './components/workflow/Statuses.svelte'
-import NotificationIssuePresenter from './components/issues/NotificationIssuePresenter.svelte'

 import {
  getIssueId,
@ -124,18 +124,18 @@ import {
 } from './utils'

 import { EmployeeAccount } from '@hcengineering/contact'
+import PriorityIcon from './components/activity/PriorityIcon.svelte'
+import StatusIcon from './components/activity/StatusIcon.svelte'
+import TxIssueCreated from './components/activity/TxIssueCreated.svelte'
 import DeleteComponentPresenter from './components/components/DeleteComponentPresenter.svelte'
+import MoveIssues from './components/issues/Move.svelte'
 import StatusRefPresenter from './components/issues/StatusRefPresenter.svelte'
 import TimeSpendReportPopup from './components/issues/timereport/TimeSpendReportPopup.svelte'
 import CreateProject from './components/projects/CreateProject.svelte'
 import ProjectPresenter from './components/projects/ProjectPresenter.svelte'
 import ProjectSpacePresenter from './components/projects/ProjectSpacePresenter.svelte'
-import MoveIssues from './components/issues/Move.svelte'
 import IssueStatistics from './components/sprints/IssueStatistics.svelte'
 import SprintRefPresenter from './components/sprints/SprintRefPresenter.svelte'
-import TxIssueCreated from './components/activity/TxIssueCreated.svelte'
-import PriorityIcon from './components/activity/PriorityIcon.svelte'
-import StatusIcon from './components/activity/StatusIcon.svelte'

 export { default as SubIssueList } from './components/issues/edit/SubIssueList.svelte'

--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@ -13,7 +13,7 @@
 // limitations under the License.
 //
 import { Client, Doc, Ref } from '@hcengineering/core'
-import type { IntlString, Metadata, Resource } from '@hcengineering/platform'
+import type { Asset, IntlString, Metadata, Resource } from '@hcengineering/platform'
 import { mergeIds } from '@hcengineering/platform'
 import { IssueDraft } from '@hcengineering/tracker'
 import { AnyComponent, Location } from '@hcengineering/ui'
@ -309,7 +309,12 @@ export default mergeIds(trackerId, tracker, {
    HourLabel: '' as IntlString,
    Saved: '' as IntlString,
    CreatedIssue: '' as IntlString,
-    CreatedSubIssue: '' as IntlString
+    CreatedSubIssue: '' as IntlString,
+
+    ProjectColor: '' as IntlString,
+
+    ProjectIconCategory: '' as IntlString,
+    ProjectEmojiiCategory: '' as IntlString
  },
  component: {
    NopeComponent: '' as AnyComponent,
@ -374,7 +379,8 @@ export default mergeIds(trackerId, tracker, {

    IssueTemplates: '' as AnyComponent,
    IssueTemplatePresenter: '' as AnyComponent,
-    SubIssuesSelector: '' as AnyComponent
+    SubIssuesSelector: '' as AnyComponent,
+    IconWithEmojii: '' as Asset
  },
  metadata: {
    CreateIssueDraft: '' as Metadata<IssueDraft>
--- a/plugins/tracker/src/index.ts
+++ b/plugins/tracker/src/index.ts
@ -50,6 +50,7 @@ export interface Project extends Space {
  defaultIssueStatus: Ref<IssueStatus>
  defaultAssignee?: Ref<Employee>
  icon?: Asset
+  color?: number
  defaultTimeReportDay: TimeReportDayType
 }

@ -433,8 +434,6 @@ export default plugin(trackerId, {
    Components: '' as Asset,
    NewIssue: '' as Asset,
    Magnifier: '' as Asset,
-    Home: '' as Asset,
-    RedCircle: '' as Asset,
    Labels: '' as Asset,
    DueDate: '' as Asset,
    Parent: '' as Asset,
@ -480,7 +479,11 @@ export default plugin(trackerId, {
    TimeReport: '' as Asset,
    Estimation: '' as Asset,

-    Timeline: '' as Asset
+    Timeline: '' as Asset,
+
+    // Project icons
+    Home: '' as Asset,
+    RedCircle: '' as Asset
  },
  category: {
    Other: '' as Ref<TagCategory>,
--- a/plugins/view-resources/src/components/navigator/TreeElement.svelte
+++ b/plugins/view-resources/src/components/navigator/TreeElement.svelte
@ -15,12 +15,13 @@
 <script lang="ts">
  import type { Doc, Ref } from '@hcengineering/core'
  import type { Asset, IntlString } from '@hcengineering/platform'
-  import type { Action } from '@hcengineering/ui'
+  import type { Action, AnySvelteComponent } from '@hcengineering/ui'
  import { ActionIcon, Icon, IconMoreH, Label, Menu, showPopup } from '@hcengineering/ui'
  import { createEventDispatcher } from 'svelte'

  export let _id: Ref<Doc> | undefined = undefined
-  export let icon: Asset | undefined = undefined
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let iconProps: Record<string, any> | undefined = undefined
  export let label: IntlString | undefined = undefined
  export let title: string | undefined = undefined
  export let notifications = 0
@ -66,7 +67,7 @@
          class:indent-4={indent === 'ml-4'}
          class:indent-8={indent === 'ml-8'}
        >
-          <Icon {icon} size={'small'} />
+          <Icon {icon} {iconProps} size={'small'} />
        </div>
      {/if}
      <span class="overflow-label">
--- a/plugins/view-resources/src/components/navigator/TreeNode.svelte
+++ b/plugins/view-resources/src/components/navigator/TreeNode.svelte
@ -14,12 +14,13 @@
 -->
 <script lang="ts">
  import type { Asset, IntlString } from '@hcengineering/platform'
-  import type { Action } from '@hcengineering/ui'
+  import type { Action, AnySvelteComponent } from '@hcengineering/ui'
  import TreeElement from './TreeElement.svelte'

  export let title: string | undefined = undefined
  export let label: IntlString | undefined = undefined
-  export let icon: Asset | undefined = undefined
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let iconProps: Record<string, any> | undefined = undefined
  export let actions: () => Promise<Action[]> = async () => []
  export let notifications = 0
  export let parent = false
@ -28,6 +29,18 @@
  export let indent: 'default' | 'ml-2' | 'ml-4' | 'ml-8' = 'default'
 </script>

-<TreeElement {title} {label} {icon} {notifications} {collapsed} {actions} node {parent} {indent} {shortDropbox}>
+<TreeElement
+  {title}
+  {label}
+  {iconProps}
+  {icon}
+  {notifications}
+  {collapsed}
+  {actions}
+  node
+  {parent}
+  {indent}
+  {shortDropbox}
+>
  <slot />
 </TreeElement>
--- a/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte
@ -18,6 +18,7 @@
  import { ActionIcon, Icon, Label } from '@hcengineering/ui'

  export let icon: Asset | undefined = undefined
+  export let iconProps: Record<string, any> | undefined = undefined
  export let label: IntlString | undefined = undefined
  export let notifications = 0
  export let actions: Action[] = []
@ -36,7 +37,7 @@
    class:indent-8={indent === 'ml-8'}
  >
    {#if icon}
-      <Icon {icon} size={'small'} />
+      <Icon {icon} size={'small'} {iconProps} />
    {/if}
  </div>
  <span class="an-element__label title">
--- a/server/ws/src/server.ts
+++ b/server/ws/src/server.ts
@ -290,7 +290,7 @@ class TSessionManager implements SessionManager {
      s.workspaceClosed = true
      if (reason === 'upgrade') {
        // Override message handler, to wait for upgrading response from clients.
-        void webSocket.send(ctx, {
+        await webSocket.send(ctx, {
          result: {
            _class: core.class.TxModelUpgrade
          }
--- a/tests/sanity/tests/tracker.spec.ts
+++ b/tests/sanity/tests/tracker.spec.ts
@ -201,7 +201,7 @@ test('create-issue-draft', async ({ page }) => {
  const subIssueName = 'Sub issue draft'

  // Click text=Issues >> nth=1
-  await page.locator('text=Issues').nth(1).click()
+  await page.locator('text=Issues').nth(2).click()
  await expect(page).toHaveURL(/.*\/workbench\/sanity-ws\/tracker\/tracker%3Aproject%3ADefaultProject\/issues/)
  await expect(page.locator('#new-issue')).toHaveText('New issue')
  // Click button:has-text("New issue")