Update mention popup. Add svelte-check. Fix warnings. (#854)

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

common/config/rush/pnpm-lock.yaml

@@ -205,7 +205,7 @@ dependencies:
   '@rush-temp/chunter-assets': file:projects/chunter-assets.tgz
   '@rush-temp/chunter-resources': file:projects/chunter-resources.tgz_096c09b0b673a57c275d9767a12070b1
   '@rush-temp/client': file:projects/client.tgz
-  '@rush-temp/client-resources': file:projects/client-resources.tgz
+  '@rush-temp/client-resources': file:projects/client-resources.tgz_ac194b5590200ebf8338e0f86ec190f4
   '@rush-temp/contact': file:projects/contact.tgz
   '@rush-temp/contact-assets': file:projects/contact-assets.tgz
   '@rush-temp/contact-resources': file:projects/contact-resources.tgz_096c09b0b673a57c275d9767a12070b1
@@ -9398,6 +9398,63 @@ packages:
       - sugarss
     dev: false
 
+  /svelte-check/2.3.0_4374c622c67ed7479ff0e44c29d09bce:
+    resolution: {integrity: sha512-SBKdJyUmxzPmJf/ZPqDSQOoa9JzOcgEpV7u3UaYcgVn7fA0veZ3FA5JgLU8KYtf84Gp6guBVcrC7XKLjJa5SXQ==}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.24.0
+    dependencies:
+      chokidar: 3.5.2
+      fast-glob: 3.2.7
+      import-fresh: 3.3.0
+      minimist: 1.2.5
+      picocolors: 1.0.0
+      sade: 1.7.4
+      source-map: 0.7.3
+      svelte: 3.44.3
+      svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
+      typescript: 4.5.4
+    transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - node-sass
+      - postcss
+      - postcss-load-config
+      - pug
+      - sass
+      - stylus
+      - sugarss
+    dev: false
+
+  /svelte-check/2.3.0_ac194b5590200ebf8338e0f86ec190f4:
+    resolution: {integrity: sha512-SBKdJyUmxzPmJf/ZPqDSQOoa9JzOcgEpV7u3UaYcgVn7fA0veZ3FA5JgLU8KYtf84Gp6guBVcrC7XKLjJa5SXQ==}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.24.0
+    dependencies:
+      chokidar: 3.5.2
+      fast-glob: 3.2.7
+      import-fresh: 3.3.0
+      minimist: 1.2.5
+      picocolors: 1.0.0
+      sade: 1.7.4
+      source-map: 0.7.3
+      svelte-preprocess: 4.10.1_3ae2e5fc7d8fb60bbcea513ad0b15c0f
+      typescript: 4.5.4
+    transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - node-sass
+      - postcss
+      - postcss-load-config
+      - pug
+      - sass
+      - stylus
+      - sugarss
+    dev: false
+
   /svelte-dev-helper/1.1.9:
     resolution: {integrity: sha1-fRh9tcbNu9ZNdaMvkbiZi94yc8M=}
     dev: false
@@ -10807,7 +10864,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -10868,7 +10925,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -10905,8 +10962,9 @@ packages:
       - supports-color
     dev: false
 
-  file:projects/client-resources.tgz:
+  file:projects/client-resources.tgz_ac194b5590200ebf8338e0f86ec190f4:
-    resolution: {integrity: sha512-e47yiBH1dhkmjli6rn91Rq2XbDYF7+nHL71ll9NIn0LwZys7VxpLFO7eilXcF3NUObCLLtgPoh67aYcpeA64ug==, tarball: file:projects/client-resources.tgz}
+    resolution: {integrity: sha512-0Aexa54EuAfPkz9aIldqI9KQyiORenx6EXyqob6quCA+elkNUJL8GSjn/t3c9ORtOjf7Qm0AJgoGw5XxJeNBrg==, tarball: file:projects/client-resources.tgz}
+    id: file:projects/client-resources.tgz
     name: '@rush-temp/client-resources'
     version: 0.0.0
     dependencies:
@@ -10920,9 +10978,21 @@ packages:
       eslint-plugin-node: 11.1.0_eslint@7.32.0
       eslint-plugin-promise: 5.2.0_eslint@7.32.0
       prettier: 2.5.1
+      svelte-check: 2.3.0_ac194b5590200ebf8338e0f86ec190f4
       typescript: 4.5.4
     transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - node-sass
+      - postcss
+      - postcss-load-config
+      - pug
+      - sass
+      - stylus
+      - sugarss
       - supports-color
+      - svelte
     dev: false
 
   file:projects/client.tgz:
@@ -10969,7 +11039,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -11159,7 +11229,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
     transitivePeerDependencies:
@@ -11332,7 +11402,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -11389,7 +11459,7 @@ packages:
       sass: 1.45.0
       smartcrop: 2.0.5
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -11465,7 +11535,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -11526,7 +11596,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -11587,7 +11657,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -12170,7 +12240,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -12286,7 +12356,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -12397,7 +12467,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -12622,7 +12692,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -12683,7 +12753,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
     transitivePeerDependencies:
@@ -12760,7 +12830,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -12903,7 +12973,7 @@ packages:
       prosemirror-state: 1.3.4
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -12938,7 +13008,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -13014,7 +13084,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -13056,7 +13126,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4
@@ -13117,7 +13187,7 @@ packages:
       prettier-plugin-svelte: 2.5.1_prettier@2.5.1+svelte@3.44.3
       sass: 1.45.0
       svelte: 3.44.3
-      svelte-check: 2.2.11_4374c622c67ed7479ff0e44c29d09bce
+      svelte-check: 2.3.0_4374c622c67ed7479ff0e44c29d09bce
       svelte-loader: 3.1.2_svelte@3.44.3
       svelte-preprocess: 4.10.1_14d64cad431e31f100de7363af24a44f
       typescript: 4.5.4

packages/text-editor/lang/en.json

@@ -1,5 +1,6 @@
 {
   "string": {    
-    "Suggested": "SUGGESTED"
+    "Suggested": "SUGGESTED",
+    "NoItems": "No items"
   }
 }

packages/text-editor/src/components/MentionList.svelte

@@ -82,8 +82,8 @@
   function updateStyle (popup: HTMLDivElement): void {
     const x = clientRect().left
     const height = popup.getBoundingClientRect().height
-    const y = clientRect().top - height - 16
+    const y = clientRect().bottom
-    style = `left: ${x}px; top: ${y}px;`
+    style = `left: ${x}px; bottom: calc(100vh - ${y}px + 1.75rem); max-height: calc(${y}px - 2.5rem);`
   }
 
   let style = 'visibility: hidden'
@@ -101,11 +101,17 @@
   $: updateItems(category, query)
 </script>
 
-<div>
+<svelte:window on:resize={() => updateStyle(popup)} />
-  <div bind:this={popup} class="completion" {style} on:keydown={onKeyDown}>
+<div
-    <div class='category-container'>
+  class="overlay"
+  on:click={() => {
+    close()
+  }}
+/>
+<div bind:this={popup} class="antiPopup antiPopup-withHeader antiPopup-withCategory completion" {style} on:keydown={onKeyDown}>
+  <div class="ap-category">
     {#each categories as c}
-        <div class='category-selector' class:selected={category.label === c.label}>
+      <div class="ap-categoryItem" class:selected={category.label === c.label}>
         <ActionIcon label={c.label} icon={c.icon} size={'medium'} action={() => {
           category = c
           onCategory(c)
@@ -114,14 +120,16 @@
       </div>
     {/each}
   </div>
-    <div class='mt-4 mb-4'>
+  <div class="ap-header">
     <EditWithIcon icon={IconSearch} bind:value={query} on:input={() => updateItems(category, query) } placeholder={category.label} />
+    <div class="ap-caption"><Label label={plugin.string.Suggested} /></div>
   </div>
-    <Label label={plugin.string.Suggested}/>
+  <div class="ap-space" />
-    <div class="scroll mt-2">
+  <div class="ap-scroll">
+    <div class="ap-box">
       {#each items as item, i}
         <div
-          class="item"
+          class="ap-menuItem"
           class:selected={i === selected}
           on:click={() => {
             dispatchItem(item)
@@ -136,50 +144,30 @@
           <svelte:component this={item.component} value={item.doc} {...item.componentProps ?? {}} />
         </div>
       {/each}
+      {#if !items.length}
+        <div class="ap-menuItem empty"><Label label={plugin.string.NoItems} /></div>
+      {/if}
     </div>
   </div>
+  <div class="ap-space" />
 </div>
 
 <style lang="scss">
-  .selected {
+  .overlay {
-    background-color: var(--theme-button-bg-focused);
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1999;
   }
 
   .completion {
     position: absolute;
-    z-index: 2010;
+    min-width: 20rem;
-    min-width: 300px;
+    max-width: 30rem;
-    height: 332px;
+    min-height: 0;
-    padding: 16px;
+    height: auto;
-    background-color: var(--theme-button-bg-hovered);
+    z-index: 2000;
-    border: 1px solid var(--theme-bg-accent-hover);
-    border-radius: 0.75rem;
-    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1);
-
-    .caption {
-      margin: 8px 0;
-      font-weight: 600;
-      font-size: 12px;
-      letter-spacing: 0.5px;
-      color: var(--theme-content-trans-color);
-    }
-    .scroll {
-      max-height: calc(300px - 128px);
-      display: grid;
-      grid-auto-flow: row;
-      gap: 12px;
-      overflow-y: auto;
-    }
-  }
-
-  .category-container {
-    display: flex;
-    .category-selector {
-      margin-right: 1rem;
-      opacity: 0.7;
-      &.selected {
-        opacity: 1;
-      }
-    }
   }
 </style>

packages/text-editor/src/plugin.ts

@@ -29,6 +29,7 @@ export default plugin(textEditorId, {
   },
   string: {
     Suggested: '' as IntlString,
+    NoItems: '' as IntlString,
     Attach: '' as IntlString,
     TextStyle: '' as IntlString,
     Emoji: '' as IntlString,

packages/theme/styles/components.scss

@@ -52,12 +52,26 @@
     color: var(--theme-content-color);
     border-radius: .5rem;
     text-align: left;
+    cursor: pointer;
 
     &.ap-woScroll { margin: 0 .5rem; }
+    &.selected { background-color: var(--theme-button-bg-hovered); }
+    &.empty {
+      display: flex;
+      justify-content: center;
+      font-style: italic;
+      color: var(--theme-content-trans-color);
+      cursor: default;
+
+      &:hover {
+        color: var(--theme-content-trans-color);
+        background-color: transparent;
+      }
+    }
+
     &:hover {
       color: var(--theme-caption-color);
       background-color: var(--theme-button-bg-hovered);
-      cursor: pointer;
     }
     &:focus {
       color: var(--theme-content-accent-color);
@@ -103,6 +117,33 @@
       }
     }
   }  
+
+  &-withCategory {
+    .ap-category {
+      flex-shrink: 0;
+      overflow-x: auto;
+      display: flex;
+      margin: 1rem 1rem .25rem;
+
+      .ap-categoryItem {
+        margin: .25rem;
+        color: var(--theme-content-trans-color);
+        cursor: pointer;
+
+        &.selected { color: var(--theme-caption-color); }
+        &:hover { color: var(--theme-content-accent-color); }
+      }
+
+      &::-webkit-scrollbar:horizontal { height: .125rem; }
+      &::-webkit-scrollbar-thumb { background-color: var(--theme-button-bg-hovered); }
+    }
+    .ap-header {
+      margin: .25rem 1rem 0;
+      .ap-caption {
+        margin: .5rem 0 0 0;
+      }
+    }
+  }  
 }
 
 // .popup .tr-body:hover { background-color: transparent !important; } // Remove highlights table rows in popups

packages/ui/src/components/SearchEdit.svelte

@@ -2,6 +2,7 @@
   import { createEventDispatcher } from 'svelte'
   import EditWithIcon from './EditWithIcon.svelte'
   import IconSearch from './icons/Search.svelte'
+  import plugin from '../plugin'
 
   export let value: string = ''
 
@@ -11,6 +12,7 @@
 
 <EditWithIcon
   icon={IconSearch}
+  placeholder={plugin.string.Search}
   bind:value={_search}
   on:change={() => {
     if (_search === '') {

plugins/attachment-resources/package.json

@@ -9,7 +9,8 @@
     "build:docs": "api-extractor run --local",
     "lint": "svelte-check && eslint",
     "lint:fix": "eslint --fix src",
-    "format": "prettier --write --plugin-search-dir=. src && eslint --fix src"
+    "format": "prettier --write --plugin-search-dir=. src && eslint --fix src",
+    "svelte-check": "svelte-check"
   },
   "devDependencies": {
     "svelte-loader": "^3.1.2",

plugins/attachment-resources/src/components/Attachments.svelte

@@ -131,7 +131,7 @@
       config={['', 'lastModified']}
       options={{}}
       query={{ attachedTo: objectId }}
-      loadingProps={ { length: attachments } }
+      loadingProps={ { length: attachments ?? 0 } }
     />
   {/if}
 </div>

plugins/attachment-resources/src/components/Photos.svelte

@@ -47,7 +47,7 @@
     if (!file.type.startsWith('image/')) return
     loading++
     try {
-      const uuid = await uploadFile(file, space, objectId)
+      const uuid = await uploadFile(file, { space, attachedTo: objectId })
       console.log('uploaded file uuid', uuid)
       client.addCollection(attachment.class.Photo, space, objectId, _class, 'photos', {
         name: file.name,

plugins/client-resources/package.json

@@ -9,7 +9,8 @@
     "build:watch": "tsc",
     "lint:fix": "eslint --fix src",
     "lint": "eslint src",
-    "format": "prettier --write src && eslint --fix src"
+    "format": "prettier --write src && eslint --fix src",
+    "svelte-check": "svelte-check"
   },
   "devDependencies": {
     "@anticrm/platform-rig": "~0.6.0",
@@ -23,7 +24,8 @@
     "eslint-config-standard-with-typescript": "^21.0.1",
     "prettier": "^2.4.1",
     "@rushstack/heft": "^0.41.1",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "svelte-check": "~2.3.0"
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",

plugins/image-cropper-resources/package.json

@@ -9,7 +9,8 @@
     "build:docs": "api-extractor run --local",
     "lint": "svelte-check && eslint",
     "lint:fix": "eslint --fix src",
-    "format": "prettier --write --plugin-search-dir=. src && eslint --fix src"
+    "format": "prettier --write --plugin-search-dir=. src && eslint --fix src",
+    "svelte-check": "svelte-check"
   },
   "devDependencies": {
     "@anticrm/platform-rig": "~0.6.0",

plugins/inventory-resources/package.json

@@ -9,7 +9,8 @@
     "build:docs": "api-extractor run --local",
     "lint": "svelte-check && eslint",
     "lint:fix": "eslint --fix src",
-    "format": "prettier --write --plugin-search-dir=. src && eslint --fix src"
+    "format": "prettier --write --plugin-search-dir=. src && eslint --fix src",
+    "svelte-check": "svelte-check"
   },
   "devDependencies": {
     "@anticrm/platform-rig": "~0.6.0",

plugins/inventory-resources/src/components/Categories.svelte

@@ -14,14 +14,15 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Doc, DocumentQuery } from '@anticrm/core'
+  import { DocumentQuery } from '@anticrm/core'
   import { Button, Icon, Label, ScrollBox, SearchEdit, showPopup } from '@anticrm/ui'
+  import type { Category } from '@anticrm/inventory'
   import inventory from '../plugin'
   import CreateCategory from './CreateCategory.svelte'
   import HierarchyView from './HierarchyView.svelte'
 
   let search = ''
-  let resultQuery: DocumentQuery<Doc> = {}
+  let resultQuery: DocumentQuery<Category> = {}
 
   function updateResultQuery (search: string): void {
     resultQuery = (search === '') ? { } : { $search: search }

plugins/inventory-resources/src/components/CreateCategory.svelte

@@ -66,6 +66,12 @@
 >
   <StatusControl slot="error" {status} />
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={inventory.string.Category} bind:value={name} placeholder="Category" maxWidth={'16rem'} focus />
+    <EditBox
+      label={inventory.string.Category}
+      bind:value={name}
+      placeholder={inventory.string.Category}
+      maxWidth={'16rem'}
+      focus
+    />
   </Grid>
 </Card>

plugins/inventory-resources/src/components/CreateProduct.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Account, generateId, Ref } from '@anticrm/core'
+  import { Account, generateId, Ref, Doc } from '@anticrm/core'
   import { Card, createQuery, getClient } from '@anticrm/presentation'
   import { DropdownLabels, EditBox, Grid } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
@@ -24,7 +24,7 @@
 
   const doc: Product = {
     name: '',
-    attachedTo: undefined,
+    attachedTo: '' as Ref<Doc>,
     attachedToClass: inventory.class.Category,
     _class: inventory.class.Product,
     space: inventory.space.Products,
@@ -71,14 +71,20 @@
 <Card
   label={inventory.string.CreateProduct}
   okAction={create}
-  canSave={doc.name.trim().length > 0 && doc.attachedTo !== undefined}
+  canSave={doc.name.trim().length > 0 && doc.attachedTo.length > 0}
   bind:space={doc.space}
   on:close={() => {
     dispatch('close')
   }}
 >
   <Grid column={1} rowGap={1.75}>
-    <EditBox label={inventory.string.Product} bind:value={doc.name} placeholder="Product" maxWidth={'16rem'} focus />
+    <EditBox
+      label={inventory.string.Product}
+      bind:value={doc.name}
+      placeholder={inventory.string.Product}
+      maxWidth={'16rem'}
+      focus
+    />
     <DropdownLabels
       header
       items={categories}

plugins/inventory-resources/src/components/CreateVariant.svelte

@@ -66,7 +66,18 @@
   }}
 >
   <Grid column={1} rowGap={1.75}>
-    <EditBox label={inventory.string.Variant} bind:value={doc.name} placeholder="Variant" maxWidth={'16rem'} focus />
+    <EditBox
-    <EditBox label={inventory.string.SKU} bind:value={doc.sku} placeholder="SKU" maxWidth={'16rem'} />
+      label={inventory.string.Variant}
+      bind:value={doc.name}
+      placeholder={inventory.string.Variant}
+      maxWidth={'16rem'}
+      focus
+    />
+    <EditBox
+      label={inventory.string.SKU}
+      bind:value={doc.sku}
+      placeholder={inventory.string.SKU}
+      maxWidth={'16rem'}
+    />
   </Grid>
 </Card>

plugins/inventory-resources/src/components/HierarchyElement.svelte

@@ -59,14 +59,14 @@
   $: style = `margin-left: ${level * 1.5}rem;`
 </script>
 
-{#each descendants.get(parent) ?? [] as object, row (object._id)}
+{#each descendants.get(parent) ?? [] as object (object._id)}
   <tr class="tr-body">
     {#each model as attribute, cell}
       {#if !cell}
         <td>
           <div class="firstCell" {style}>
             {#if descendants.has(object._id)}
-              <div class="expand" on:click={(ev) => click(object._id)}>
+              <div class="expand" on:click={() => click(object._id)}>
                 {#if expanded.has(object._id)}
                   <Expand size={'small'} />
                 {:else}

plugins/inventory-resources/src/components/Products.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, EditWithIcon, Icon, IconSearch, Label, ScrollBox, showPopup } from '@anticrm/ui'
+  import ui, { Button, EditWithIcon, Icon, IconSearch, Label, ScrollBox, showPopup } from '@anticrm/ui'
   import CreateProduct from './CreateProduct.svelte'
   import inventory from '../plugin'
   import { Table } from '@anticrm/view-resources'
@@ -45,7 +45,7 @@
 
   <EditWithIcon
     icon={IconSearch}
-    placeholder={'Search'}
+    placeholder={ui.string.Search}
     bind:value={search}
     on:change={() => {
       resultQuery = {}

plugins/inventory-resources/src/components/Variants.svelte

@@ -23,7 +23,7 @@
 
   export let variants: number
 
-  const create = (ev: MouseEvent): void => showPopup(CreateVariant, { product: objectId }, ev.target as HTMLElement)
+  const create = (ev: MouseEvent): void => { showPopup(CreateVariant, { product: objectId }, ev.target as HTMLElement) }
 </script>
 
 <div class="variants-container">

plugins/recruit-resources/src/components/Applications.svelte

@@ -24,8 +24,8 @@
   import FileDuo from './icons/FileDuo.svelte'
 
   export let objectId: Ref<Doc>
-  export let space: Ref<Space>
+  // export let space: Ref<Space>
-  export let _class: Ref<Class<Doc>>
+  // export let _class: Ref<Class<Doc>>
 
   export let applications: number
 

plugins/setting-resources/src/components/CategoryElement.svelte

@@ -66,11 +66,6 @@
       text-overflow: ellipsis;
     }
 
-    &:hover {
+    &:hover { background-color: var(--theme-button-bg-enabled); }
-      background-color: var(--theme-button-bg-enabled);
-      .tool {
-        visibility: visible;
-      }
-    }
   }
 </style>

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

@@ -26,7 +26,7 @@
   import Header from './Header.svelte'
 
   export let spaceId: Ref<Space> | undefined
-  export let _class: Ref<Class<Doc>> | undefined
+  // export let _class: Ref<Class<Doc>> | undefined
   export let createItemDialog: AnyComponent | undefined
   export let search: string
   export let viewlet: WithLookup<Viewlet> | undefined