Search icon in toolbar (#4433)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>

dev/prod/src/platform.ts

@@ -40,7 +40,7 @@ import telegram, { telegramId } from '@hcengineering/telegram'
 import { templatesId } from '@hcengineering/templates'
 import tracker, { trackerId } from '@hcengineering/tracker'
 import uiPlugin from '@hcengineering/ui'
-import { viewId } from '@hcengineering/view'
+import view, { viewId } from '@hcengineering/view'
 import workbench, { workbenchId } from '@hcengineering/workbench'
 
 import { bitrixId } from '@hcengineering/bitrix'
@@ -154,6 +154,8 @@ export async function configurePlatform() {
   setMetadata(textEditor.metadata.CollaboratorUrl, config.COLLABORATOR_URL ?? 'ws://locahost:3078')
 
   setMetadata(uiPlugin.metadata.DefaultApplication, login.component.LoginApp)
+  
+  setMetadata(uiPlugin.metadata.SearchPopup, view.component.ActionsPopup)
 
   const languages = config.LANGUAGES ? (config.LANGUAGES as string).split(',').map((l) => l.trim()) : ['en', 'ru']
 

packages/ui/src/components/internal/Root.svelte

@@ -15,6 +15,7 @@
   import FontSizeSelector from './FontSizeSelector.svelte'
   import LangSelector from './LangSelector.svelte'
   import ThemeSelector from './ThemeSelector.svelte'
+  import SearchSelector from './SearchSelector.svelte'
 
   let application: AnyComponent | undefined
 
@@ -166,8 +167,6 @@
             </div>
           {:else if status.severity !== Severity.OK}
             <StatusComponent {status} />
-          {:else}
-            <span class="logo-status">{getMetadata(uiPlugin.metadata.PlatformTitle)}</span>
           {/if}
         </div>
         <div class="flex-row-reverse" style:-webkit-app-region={'no-drag'}>
@@ -175,6 +174,7 @@
             <Clock />
           </div>
           <div class="flex-row-center gap-statusbar">
+            <SearchSelector />
             <FontSizeSelector />
             <ThemeSelector />
             <LangSelector />

packages/ui/src/components/internal/SearchSelector.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Search from './icons/Search.svelte'
+  import { showPopup } from '../../popups'
+  import { getMetadata } from '@hcengineering/platform'
+  import uiPlugin from '../../plugin'
+  import { location as locationStore } from '../../location'
+  const popup = getMetadata(uiPlugin.metadata.SearchPopup)
+  let isLoggedIn = false
+  locationStore.subscribe((newLocation) => {
+    isLoggedIn = newLocation.path[0] === 'workbench'
+  })
+  function openPopup () {
+    if (popup !== undefined) showPopup(popup, {}, 'top')
+  }
+</script>
+
+{#if isLoggedIn}
+  <button
+    class="antiButton ghost jf-center bs-none no-focus resetIconSize statusButton square"
+    on:click={openPopup}
+    style:color={'var(--theme-dark-color)'}
+  >
+    <Search size="32" />
+  </button>
+{/if}

packages/ui/src/components/internal/icons/Search.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let size: string = '16px'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg style:width={size} style:height={size} viewBox="0 0 32 32" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M20.0391 21.4533C18.1316 23.0434 15.6775 24 13 24C6.92487 24 2 19.0751 2 13C2 6.92487 6.92487 2 13 2C19.0751 2 24 6.92487 24 13C24 15.6775 23.0434 18.1316 21.4533 20.0391L28.7071 27.2929C29.0976 27.6834 29.0976 28.3166 28.7071 28.7071C28.3166 29.0976 27.6834 29.0976 27.2929 28.7071L20.0391 21.4533ZM22 13C22 17.9706 17.9706 22 13 22C8.02944 22 4 17.9706 4 13C4 8.02944 8.02944 4 13 4C17.9706 4 22 8.02944 22 13Z"
+  />
+</svg>

packages/ui/src/plugin.ts

@@ -102,7 +102,8 @@ export const uis = plugin(uiId, {
     DefaultApplication: '' as Metadata<AnyComponent>,
     Routes: '' as Metadata<Map<string, AnyComponent>>,
     Languages: '' as Metadata<string[]>,
-    PlatformTitle: '' as Metadata<string>
+    PlatformTitle: '' as Metadata<string>,
+    SearchPopup: '' as Metadata<AnyComponent>
   }
 })
 

plugins/tracker-resources/src/components/issues/IssuePresenter.svelte

@@ -51,11 +51,6 @@
 
 {#if value}
   <div class="flex-row-center">
-    {#if shouldShowAvatar && taskType !== undefined}
-      <div class="text-sm mr-1">
-        <TaskTypeIcon value={taskType} />
-      </div>
-    {/if}
     <DocNavLink
       object={value}
       {onClick}
@@ -71,7 +66,11 @@
         <span class="issuePresenterRoot" class:list={kind === 'list'} class:cursor-pointer={!disabled}>
           {#if shouldShowAvatar}
             <div class="icon" use:tooltip={{ label: tracker.string.Issue }}>
-              <Icon icon={icon ?? tracker.icon.Issues} size={'small'} />
+              {#if taskType !== undefined}
+                <TaskTypeIcon value={taskType} />
+              {:else}
+                <Icon icon={icon ?? tracker.icon.Issues} size={'small'} />
+              {/if}
             </div>
           {/if}
           <span class="overflow-label" class:select-text={!noSelect} title={value?.title}>

plugins/view-resources/src/components/ActionsPopup.svelte

@@ -48,8 +48,9 @@
 
   import ChevronDown from './icons/ChevronDown.svelte'
   import ChevronUp from './icons/ChevronUp.svelte'
+  import { contextStore } from '@hcengineering/presentation'
 
-  export let viewContext: ViewContext
+  export let viewContext: ViewContext | undefined = $contextStore.getLastContext()
 
   let search: string = ''
   let actions: Array<WithLookup<Action>> = []
@@ -105,7 +106,7 @@
     fActions = fActions.filter(
       (it) =>
         (it.$lookup?.category?.visible ?? true) &&
-        (it.context.application === viewContext.application || it.context.application === undefined)
+        (it.context.application === viewContext?.application || it.context.application === undefined)
     )
     for (const d of docs) {
       fActions = filterActions(client, d, fActions)

plugins/view-resources/src/plugin.ts

@@ -28,7 +28,6 @@ export default mergeIds(viewId, view, {
     StringFilter: '' as AnyComponent,
     TimestampFilter: '' as AnyComponent,
     FilterTypePopup: '' as AnyComponent,
-    ActionsPopup: '' as AnyComponent,
     ProxyPresenter: '' as AnyComponent
   },
   string: {

plugins/view/src/index.ts

@@ -855,6 +855,7 @@ const view = plugin(viewId, {
     List: '' as Ref<ViewletDescriptor>
   },
   component: {
+    ActionsPopup: '' as AnyComponent,
     ObjectPresenter: '' as AnyComponent,
     EditDoc: '' as AnyComponent,
     SpacePresenter: '' as AnyComponent,