Add Search (#190)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

plugins/workbench-resources/src/components/Header.svelte

@@ -22,7 +22,7 @@
   export let description: IntlString | undefined
 </script>
 
-<div class="container">
+<div class="header-container">
   <div class="flex-center">
     {#if icon }<span class="icon"><Icon {icon} size={'small'}/></span>{/if}
     <span class="label">{label}</span>
@@ -31,7 +31,7 @@
 </div>
 
 <style lang="scss">
-  .container {
+  .header-container {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -46,7 +46,6 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      user-select: none;
     }
     .label {
       font-weight: 500;

plugins/workbench-resources/src/components/SpaceHeader.svelte

@@ -54,15 +54,19 @@
 </div>
 
 <style lang="scss">
+  // .container {
+  //   display: flex;
+  // }
   .container {
     display: grid;
     grid-template-columns: auto;
     grid-auto-flow: column;
-    grid-auto-columns: min-content;
+    grid-auto-columns: minmax(min-content, auto);
     gap: .75rem;
     align-items: center;
     padding: 0 2rem 0 2.5rem;
     height: 4.5rem;
     min-height: 4.5rem;
+    max-width: max-content;
   }
 </style>

plugins/workbench-resources/src/components/SpaceView.svelte

@@ -22,7 +22,7 @@ import type { Viewlet } from '@anticrm/view'
 
 import { getClient } from '@anticrm/presentation'
 
-import { Icon, Component } from '@anticrm/ui'
+import { Icon, Component, EditWithIcon, IconSearch } from '@anticrm/ui'
 
 import view from '@anticrm/view'
 import core from '@anticrm/core'
@@ -56,7 +56,7 @@ $: onSpace(space)
 
   {#if viewlets.length > 0}
     <div class="toolbar">
-      <div style="flex-grow: 1;" />
+      <EditWithIcon icon={IconSearch} placeholder={'Search for something'} />
 
       <div class="flex">
         {#each viewlets as viewlet, i}