[UBER-392] Add filter value presenter for projects (#3419)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@icloud.com>

plugins/tracker-resources/src/components/projects/ProjectFilterValuePresenter.svelte

@@ -0,0 +1,58 @@
+<!--
+// Copyright © 2023 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 { Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import { Project } from '@hcengineering/tracker'
+  import { Icon, IconWithEmojii, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
+  import tracker from '../../plugin'
+
+  export let value: [Ref<Project>, Ref<Project>[]][]
+
+  const MAX_VISIBLE_PROJECTS = 5
+  const projectsQuery = createQuery()
+
+  let projects: Project[] = []
+
+  $: projectsQuery.query(
+    tracker.class.Project,
+    { _id: { $in: value.map(([_, values]) => values[0]) } },
+    (res) => (projects = res)
+  )
+</script>
+
+<div class="flex-presenter flex-gap-1-5">
+  {#each projects as project, i}
+    {#if value && i < MAX_VISIBLE_PROJECTS}
+      {@const icon =
+        project.icon === tracker.component.IconWithEmojii ? IconWithEmojii : project.icon ?? tracker.icon.Home}
+      {@const iconProps =
+        project.icon === tracker.component.IconWithEmojii
+          ? { icon: project.color }
+          : {
+              fill:
+                project.color !== undefined
+                  ? getPlatformColorDef(project.color, $themeStore.dark).icon
+                  : getPlatformColorForTextDef(project.name ?? '', $themeStore.dark).icon
+            }}
+      <Icon {icon} {iconProps} size="small" />
+    {/if}
+  {/each}
+  {#if projects.length > MAX_VISIBLE_PROJECTS}
+    <div>
+      +{projects.length - MAX_VISIBLE_PROJECTS}
+    </div>
+  {/if}
+</div>