From b09466453dea917eb82d402e9438c579d0399c24 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 00:28:46 +0700
Subject: [PATCH 01/16] Board: add attachments support

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/AddAttachment.svelte       |  52 ++++++++
 .../src/components/AttachmentDroppable.svelte |  51 ++++++++
 .../src/components/Attachments.svelte         | 117 +++++-------------
 plugins/attachment-resources/src/index.ts     |   4 +-
 plugins/attachment-resources/src/utils.ts     |  26 +++-
 plugins/board-assets/lang/en.json             |   1 +
 plugins/board-assets/lang/ru.json             |   1 +
 plugins/board-resources/package.json          |   1 +
 .../src/components/EditCard.svelte            |   3 +-
 .../src/components/KanbanCard.svelte          |  71 +++++++----
 .../src/components/editor/CardActions.svelte  |  10 +-
 .../src/components/editor/CardActivity.svelte |   2 -
 .../components/editor/CardAttachments.svelte  |  63 ++++++++++
 .../presenters/AttachmentPresenter.svelte     |  12 ++
 plugins/board-resources/src/plugin.ts         |   1 +
 15 files changed, 289 insertions(+), 126 deletions(-)
 create mode 100644 plugins/attachment-resources/src/components/AddAttachment.svelte
 create mode 100644 plugins/attachment-resources/src/components/AttachmentDroppable.svelte
 create mode 100644 plugins/board-resources/src/components/editor/CardAttachments.svelte
 create mode 100644 plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte

diff --git a/plugins/attachment-resources/src/components/AddAttachment.svelte b/plugins/attachment-resources/src/components/AddAttachment.svelte
new file mode 100644
index 0000000000..32811da319
--- /dev/null
+++ b/plugins/attachment-resources/src/components/AddAttachment.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Class, Doc, Ref, Space } from '@anticrm/core'
+  import { getClient } from '@anticrm/presentation'
+  import { CircleButton, IconAdd } from '@anticrm/ui'
+  import { createAttachment } from '../utils'
+
+  export let loading: number = 0
+  export let inputFile: HTMLInputElement
+
+  export let objectClass: Ref<Class<Doc>>
+  export let objectId: Ref<Doc>
+  export let space: Ref<Space>
+  
+
+  const client = getClient()
+
+  function fileSelected() {
+    const list = inputFile.files
+    if (list === null || list.length === 0) return
+    for (let index = 0; index < list.length; index++) {
+      const file = list.item(index)
+      if (file !== null) createAttachment(client, file, loading, { objectClass, objectId, space })
+    }
+  }
+
+  function openFile() {
+    inputFile.click()
+  }
+
+</script>
+
+<div>
+  {#if $$slots.control}
+    <div on:click={openFile}>
+      <slot name="control"/>
+    </div>
+  {:else}
+    <CircleButton
+      icon={IconAdd}
+      size="small"
+      selected
+      on:click={openFile} />
+  {/if}
+  <input
+    bind:this={inputFile}
+    multiple
+    type="file"
+    name="file"
+    id="file"
+    style="display: none"
+    on:change={fileSelected} />
+</div>
diff --git a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
new file mode 100644
index 0000000000..94701dea5a
--- /dev/null
+++ b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
@@ -0,0 +1,51 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 { Class, Doc, Ref, Space } from '@anticrm/core'
+
+  import { getClient } from '@anticrm/presentation'
+  import { createAttachment } from '../utils'
+
+  export let loading: number = 0
+  export let objectClass: Ref<Class<Doc>>
+  export let objectId: Ref<Doc>
+  export let space: Ref<Space>
+  
+  export let dragover = false
+
+  const client = getClient()
+  
+  function fileDrop(e: DragEvent) {
+    const list = e.dataTransfer?.files
+    if (list === undefined || list.length === 0) return
+    for (let index = 0; index < list.length; index++) {
+      const file = list.item(index)
+      if (file !== null) createAttachment(client, file, loading, { objectClass, objectId, space })
+    }
+  }
+
+</script>
+
+<div
+  on:dragover|preventDefault={() => {
+    dragover = true
+  }}
+  on:dragleave={() => {
+    dragover = false
+  }}
+  on:drop|preventDefault|stopPropagation={fileDrop}>
+  <slot />
+</div>
diff --git a/plugins/attachment-resources/src/components/Attachments.svelte b/plugins/attachment-resources/src/components/Attachments.svelte
index 43688320ef..7047f03933 100644
--- a/plugins/attachment-resources/src/components/Attachments.svelte
+++ b/plugins/attachment-resources/src/components/Attachments.svelte
@@ -15,119 +15,55 @@
 -->
 <script lang="ts">
   import { Class, Doc, Ref, Space } from '@anticrm/core'
-  import { setPlatformStatus, unknownError } from '@anticrm/platform'
-  import { getClient } from '@anticrm/presentation'
-  import { CircleButton, IconAdd, Label, Spinner } from '@anticrm/ui'
+
+  import { Label, Spinner } from '@anticrm/ui'
   import { Table } from '@anticrm/view-resources'
   import attachment from '../plugin'
-  import { uploadFile } from '../utils'
+  import AddAttachment from './AddAttachment.svelte'
+  import AttachmentDroppable from './AttachmentDroppable.svelte'
+
   import UploadDuo from './icons/UploadDuo.svelte'
 
   export let objectId: Ref<Doc>
   export let space: Ref<Space>
   export let _class: Ref<Class<Doc>>
-  
+
   export let attachments: number | undefined = undefined
 
   let inputFile: HTMLInputElement
   let loading = 0
-
-  const client = getClient()
-
-  async function createAttachment (file: File) {
-    loading++
-    try {
-      const uuid = await uploadFile(file, { space, attachedTo: objectId })
-      console.log('uploaded file uuid', uuid)
-      client.addCollection(attachment.class.Attachment, space, objectId, _class, 'attachments', {
-        name: file.name,
-        file: uuid,
-        type: file.type,
-        size: file.size,
-        lastModified: file.lastModified
-      })
-    } catch (err: any) {
-      setPlatformStatus(unknownError(err))
-    } finally {
-      loading--
-    }
-  }
-
-  function fileSelected () {
-    const list = inputFile.files
-    if (list === null || list.length === 0) return
-    for (let index = 0; index < list.length; index++) {
-      const file = list.item(index)
-      if (file !== null) createAttachment(file)
-    }
-  }
-
-  function fileDrop (e: DragEvent) {
-    const list = e.dataTransfer?.files
-    if (list === undefined || list.length === 0) return
-    for (let index = 0; index < list.length; index++) {
-      const file = list.item(index)
-      if (file !== null) createAttachment(file)
-    }
-  }
-
   let dragover = false
+
 </script>
 
 <div class="attachments-container">
   <div class="flex-row-center">
     <span class="title"><Label label={attachment.string.Attachments} /></span>
-    {#if loading}
-      <Spinner />
-    {:else}
-      <CircleButton
-        icon={IconAdd}
-        size={'small'}
-        selected
-        on:click={() => {
-          inputFile.click()
-        }}
-      />
-    {/if}
-    <input
-      bind:this={inputFile}
-      multiple
-      type="file"
-      name="file"
-      id="file"
-      style="display: none"
-      on:change={fileSelected}
-    />
+    <AddAttachment bind:loading bind:inputFile objectClass={_class} {objectId} {space} />
   </div>
-
-  {#if (attachments === 0) && !loading}
-    <div
-      class="flex-col-center mt-5 zone-container"
-      class:solid={dragover}
-      on:dragover|preventDefault={() => {
-        dragover = true
-      }}
-      on:dragleave={() => {
-        dragover = false
-      }}
-      on:drop|preventDefault|stopPropagation={fileDrop}
-    >
-      <UploadDuo size={'large'} />
-      <div class="text-sm content-dark-color mt-2">
-        <Label label={attachment.string.NoAttachments} />
+  {#if loading}
+    <Spinner />
+  {:else if attachments === 0}
+    <AttachmentDroppable bind:loading bind:dragover objectClass={_class} {objectId} {space}>
+      <div class="flex-col-center mt-5 zone-container" class:solid={dragover}>
+        <UploadDuo size={'large'} />
+        <div class="text-sm content-dark-color mt-2">
+          <Label label={attachment.string.NoAttachments} />
+        </div>
+        <div class="text-sm">
+          <div class="over-underline" on:click={() => inputFile.click()}>
+            <Label label={attachment.string.UploadDropFilesHere} />
+          </div>
+        </div>
       </div>
-      <div class="text-sm">
-        <div class='over-underline' on:click={() => inputFile.click()}><Label label={attachment.string.UploadDropFilesHere} /></div>
-      </div>
-    </div>
+    </AttachmentDroppable>
   {:else}
     <Table
       _class={attachment.class.Attachment}
       config={['', 'lastModified']}
       options={{}}
       query={{ attachedTo: objectId }}
-      loadingProps={ { length: attachments ?? 0 } }
-    />
+      loadingProps={{ length: attachments ?? 0 }} />
   {/if}
 </div>
 
@@ -150,6 +86,9 @@
     background: var(--theme-bg-accent-color);
     border: 1px dashed var(--theme-zone-border-lite);
     border-radius: 0.75rem;
-    &.solid { border-style: solid; }
+    &.solid {
+      border-style: solid;
+    }
   }
+
 </style>
diff --git a/plugins/attachment-resources/src/index.ts b/plugins/attachment-resources/src/index.ts
index 82554a6bb3..04b7d96a4a 100644
--- a/plugins/attachment-resources/src/index.ts
+++ b/plugins/attachment-resources/src/index.ts
@@ -13,6 +13,8 @@
 // limitations under the License.
 //
 
+import AddAttachment from './components/AddAttachment.svelte'
+import AttachmentDroppable from './components/AttachmentDroppable.svelte'
 import AttachmentsPresenter from './components/AttachmentsPresenter.svelte'
 import AttachmentPresenter from './components/AttachmentPresenter.svelte'
 import AttachmentDocList from './components/AttachmentDocList.svelte'
@@ -24,7 +26,7 @@ import Photos from './components/Photos.svelte'
 import { Resources } from '@anticrm/platform'
 import { uploadFile, deleteFile } from './utils'
 
-export { Attachments, AttachmentsPresenter, AttachmentPresenter, AttachmentRefInput, AttachmentList, AttachmentDocList }
+export { AddAttachment, AttachmentDroppable, Attachments, AttachmentsPresenter, AttachmentPresenter, AttachmentRefInput, AttachmentList, AttachmentDocList }
 
 export default async (): Promise<Resources> => ({
   component: {
diff --git a/plugins/attachment-resources/src/utils.ts b/plugins/attachment-resources/src/utils.ts
index 341cfec351..5019e1f8e7 100644
--- a/plugins/attachment-resources/src/utils.ts
+++ b/plugins/attachment-resources/src/utils.ts
@@ -14,9 +14,11 @@
 // limitations under the License.
 //
 
-import type { Doc, Ref, Space } from '@anticrm/core'
+import type { Class, Doc, Ref, Space,  TxOperations as Client } from '@anticrm/core'
 import login from '@anticrm/login'
-import { getMetadata } from '@anticrm/platform'
+import { getMetadata, setPlatformStatus, unknownError } from '@anticrm/platform'
+
+import attachment from './plugin'
 
 export async function uploadFile (file: File, opts?: { space: Ref<Space>, attachedTo: Ref<Doc> }): Promise<string> {
   const uploadUrl = getMetadata(login.metadata.UploadUrl)
@@ -68,6 +70,26 @@ export async function deleteFile (id: string): Promise<void> {
   }
 }
 
+export async function createAttachment (client: Client, file: File, loading: number, attachTo: {objectClass: Ref<Class<Doc>>, space: Ref<Space>, objectId: Ref<Doc>}) {
+  loading++
+  const {objectClass, objectId, space} = attachTo
+  try {
+    const uuid = await uploadFile(file, { space, attachedTo: objectId })
+    console.log('uploaded file uuid', uuid)
+    client.addCollection(attachment.class.Attachment, space, objectId, objectClass, 'attachments', {
+      name: file.name,
+      file: uuid,
+      type: file.type,
+      size: file.size,
+      lastModified: file.lastModified
+    })
+  } catch (err: any) {
+    setPlatformStatus(unknownError(err))
+  } finally {
+    loading--
+  }
+}
+
 export function getType (type: string): 'image' | 'video' | 'audio' | 'pdf' | 'other' {
   if (type.startsWith('image/')) {
     return 'image'
diff --git a/plugins/board-assets/lang/en.json b/plugins/board-assets/lang/en.json
index b092f60269..c137c3714c 100644
--- a/plugins/board-assets/lang/en.json
+++ b/plugins/board-assets/lang/en.json
@@ -33,6 +33,7 @@
     "Checklist": "Checklist",
     "Dates": "Dates",
     "Attachments": "Attachments",
+    "AddAttachment": "Add an attachment",
     "CustomFields": "Custom Fields",
     "Automation": "Automation",
     "AddButton": "Add Button",
diff --git a/plugins/board-assets/lang/ru.json b/plugins/board-assets/lang/ru.json
index 7c457c9673..a8dcf5f91a 100644
--- a/plugins/board-assets/lang/ru.json
+++ b/plugins/board-assets/lang/ru.json
@@ -33,6 +33,7 @@
     "Checklist": "Списки",
     "Dates": "Дата",
     "Attachments": "Прикрепленное",
+    "AddAttachment": "Прикрепить",
     "CustomFields": "Дополнительно",
     "Automation": "Автоматизация",
     "AddButton": "Добавить",
diff --git a/plugins/board-resources/package.json b/plugins/board-resources/package.json
index 3461c2e718..065f81761a 100644
--- a/plugins/board-resources/package.json
+++ b/plugins/board-resources/package.json
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@anticrm/activity": "~0.6.0",
+    "@anticrm/attachment": "~0.6.1",
     "@anticrm/attachment-resources": "~0.6.0",
     "@anticrm/board": "~0.6.0",
     "@anticrm/chunter": "~0.6.1",
diff --git a/plugins/board-resources/src/components/EditCard.svelte b/plugins/board-resources/src/components/EditCard.svelte
index aed1925ff5..59d59e0aa9 100644
--- a/plugins/board-resources/src/components/EditCard.svelte
+++ b/plugins/board-resources/src/components/EditCard.svelte
@@ -29,6 +29,7 @@
   import { updateCard } from '../utils/CardUtils'
   import CardActions from './editor/CardActions.svelte'
   import CardActivity from './editor/CardActivity.svelte'
+  import CardAttachments from './editor/CardAttachments.svelte'
   import CardDetails from './editor/CardDetails.svelte'
 
   export let _id: Ref<Card>
@@ -125,7 +126,7 @@
                 />
               </div>
             </div>
-            <!-- TODO attachments-->
+            <CardAttachments value={object} />
             <!-- TODO checklists -->
             <CardActivity value={object} />
           </div>
diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index 53318cafb0..d4de151c00 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { AttachmentsPresenter } from '@anticrm/attachment-resources'
+  import { AttachmentDroppable, AttachmentsPresenter } from '@anticrm/attachment-resources'
   import type { Card } from '@anticrm/board'
   import { CommentsPresenter } from '@anticrm/chunter-resources'
   import type { WithLookup } from '@anticrm/core'
@@ -26,40 +26,57 @@
   export let object: WithLookup<Card>
   export let dragged: boolean
 
+  let loadingAttachment = 0
+  let dragoverAttachment = false
+
   function showMenu(ev?: Event): void {
     showPopup(ContextMenu, { object }, (ev as MouseEvent).target as HTMLElement)
   }
 
-  function showLead() {
+  function showCard() {
     showPanel(board.component.EditCard, object._id, object._class, 'middle')
   }
+
 </script>
 
-<div class="flex-between mb-4">
-  <div class="flex-col">
-    <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
-  </div>
-  <div class="flex-row-center">
-    <div class="mr-2">
-      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+<AttachmentDroppable
+  bind:loading={loadingAttachment}
+  bind:dragover={dragoverAttachment}
+  objectClass={object._class}
+  objectId={object._id}
+  space={object.space}>
+  <div class:opacity-overlay={dragoverAttachment}>
+  <div class="flex-between mb-4">
+    <div class="flex-col">
+      <div class="fs-title cursor-pointer" on:click={showCard}>{object.title}</div>
+    </div>
+    <div class="flex-row-center">
+      <div class="mr-2">
+        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+      </div>
+      <ActionIcon
+        label={board.string.More}
+        action={(evt) => {
+          showMenu(evt)
+        }}
+        icon={IconMoreH}
+        size="small" />
+    </div>
+  </div>
+  <div class="flex-between">
+    <div class="flex-row-center">
+      {#if (object.attachments ?? 0) > 0}
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
+      {/if}
     </div>
-    <ActionIcon
-      label={board.string.More}
-      action={(evt) => {
-        showMenu(evt)
-      }}
-      icon={IconMoreH}
-      size={'small'}
-    />
-  </div>
-</div>
-<div class="flex-between">
-  <div class="flex-row-center">
-    {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
   </div>
 </div>
+</AttachmentDroppable>
+
diff --git a/plugins/board-resources/src/components/editor/CardActions.svelte b/plugins/board-resources/src/components/editor/CardActions.svelte
index 731ff0dd4c..687c554f52 100644
--- a/plugins/board-resources/src/components/editor/CardActions.svelte
+++ b/plugins/board-resources/src/components/editor/CardActions.svelte
@@ -34,7 +34,8 @@
 
   let actionGroups: { label: IntlString; actions: CardAction[] }[] = []
 
-  getCardActions(client).then(async (result) => {
+  async function fetch() {
+    const result = await getCardActions(client)
     for (const action of result) {
       let supported = true
       if (action.supported) {
@@ -74,7 +75,9 @@
         actions: actions.sort(cardActionSorter)
       }
     ]
-  })
+  }
+
+  $: fetch()
 </script>
 
 {#if value}
@@ -99,8 +102,7 @@
                     const handler = await getResource(action.handler)
                     handler(value, client)
                   }
-                }}
-              />
+                }} />
             {/if}
           {/each}
         </div>
diff --git a/plugins/board-resources/src/components/editor/CardActivity.svelte b/plugins/board-resources/src/components/editor/CardActivity.svelte
index 324f038adf..9491938d25 100644
--- a/plugins/board-resources/src/components/editor/CardActivity.svelte
+++ b/plugins/board-resources/src/components/editor/CardActivity.svelte
@@ -26,8 +26,6 @@
 
 {#if value !== undefined}
   <div class="flex-col-stretch h-full w-full">
-    <!-- TODO attachments-->
-    <!-- TODO checklists -->
     <div class="flex-row-streach mt-4 mb-2">
       <div class="w-9">
         <Icon icon={IconActivity} size="large" />
diff --git a/plugins/board-resources/src/components/editor/CardAttachments.svelte b/plugins/board-resources/src/components/editor/CardAttachments.svelte
new file mode 100644
index 0000000000..47ce37f961
--- /dev/null
+++ b/plugins/board-resources/src/components/editor/CardAttachments.svelte
@@ -0,0 +1,63 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 attachment, { Attachment } from '@anticrm/attachment'
+  import { AddAttachment } from '@anticrm/attachment-resources'
+  import type { Card } from '@anticrm/board'
+  import { getClient } from '@anticrm/presentation'
+  import { Button, Icon, IconAttachment, Label } from '@anticrm/ui'
+  import AttachmentPresenter from '../presenters/AttachmentPresenter.svelte'
+  import board from '../../plugin'
+
+  export let value: Card
+  const client = getClient()
+  let attachments: Attachment[] = []
+
+  let inputFile: HTMLInputElement
+
+  async function fetch() {
+    attachments = await client.findAll(attachment.class.Attachment, { space: value.space, attachedTo: value._id })
+  }
+
+  $: fetch()
+
+</script>
+
+{#if value !== undefined && value.attachments !== undefined && value.attachments > 0}
+  <div class="flex-col w-full">
+    <div class="flex-row-streach mt-4 mb-2">
+      <div class="w-9">
+        <Icon icon={IconAttachment} size="large" />
+      </div>
+      <div class="flex-grow fs-title">
+        <Label label={board.string.Attachments} />
+      </div>
+    </div>
+    <div class="flex-row-streach">
+      <div class="w-9" />
+      <div class="flex-col flex-gap-1 w-full">
+        {#each attachments as attach}
+          <AttachmentPresenter value={attach} />
+        {/each}
+        <div class="mt-2">
+          <AddAttachment bind:inputFile objectClass={value._class} objectId={value._id} space={value.space}>
+            <Button label={board.string.AddAttachment} kind="no-border" slot="control" />
+          </AddAttachment>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte b/plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte
new file mode 100644
index 0000000000..bf5d0cc0f3
--- /dev/null
+++ b/plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {Attachment} from '@anticrm/attachment'
+    import { AttachmentPresenter } from '@anticrm/attachment-resources'
+  
+    export let value: Attachment
+    // TODO: implement
+  </script>
+  
+  <div>
+    <AttachmentPresenter {value} />
+  </div>
+  
\ No newline at end of file
diff --git a/plugins/board-resources/src/plugin.ts b/plugins/board-resources/src/plugin.ts
index 52183d47a3..9b4a749076 100644
--- a/plugins/board-resources/src/plugin.ts
+++ b/plugins/board-resources/src/plugin.ts
@@ -54,6 +54,7 @@ export default mergeIds(boardId, board, {
     Checklist: '' as IntlString,
     Dates: '' as IntlString,
     Attachments: '' as IntlString,
+    AddAttachment: '' as IntlString,
     CustomFields: '' as IntlString,
     Automation: '' as IntlString,
     AddButton: '' as IntlString,

From 543e7616f8d25ff518c9bae6de8b508529336f06 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 10:44:13 +0700
Subject: [PATCH 02/16] Fix AddAttachment control

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/AddAttachment.svelte       |  4 +-
 .../src/components/KanbanCard.svelte          | 59 +++++++++----------
 .../components/editor/CardAttachments.svelte  |  4 +-
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/plugins/attachment-resources/src/components/AddAttachment.svelte b/plugins/attachment-resources/src/components/AddAttachment.svelte
index 32811da319..979b1e70fa 100644
--- a/plugins/attachment-resources/src/components/AddAttachment.svelte
+++ b/plugins/attachment-resources/src/components/AddAttachment.svelte
@@ -31,9 +31,7 @@
 
 <div>
   {#if $$slots.control}
-    <div on:click={openFile}>
-      <slot name="control"/>
-    </div>
+    <slot name="control" click={openFile}/>
   {:else}
     <CircleButton
       icon={IconAdd}
diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index d4de151c00..bb06302732 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -46,37 +46,36 @@
   objectId={object._id}
   space={object.space}>
   <div class:opacity-overlay={dragoverAttachment}>
-  <div class="flex-between mb-4">
-    <div class="flex-col">
-      <div class="fs-title cursor-pointer" on:click={showCard}>{object.title}</div>
-    </div>
-    <div class="flex-row-center">
-      <div class="mr-2">
-        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+    <div class="flex-between mb-4">
+      <div class="flex-col">
+        <div class="fs-title cursor-pointer" on:click={showCard}>{object.title}</div>
+      </div>
+      <div class="flex-row-center">
+        <div class="mr-2">
+          <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+        </div>
+        <ActionIcon
+          label={board.string.More}
+          action={(evt) => {
+            showMenu(evt)
+          }}
+          icon={IconMoreH}
+          size="small" />
+      </div>
+    </div>
+    <div class="flex-between">
+      <div class="flex-row-center">
+        {#if (object.attachments ?? 0) > 0}
+          <div class="step-lr75">
+            <AttachmentsPresenter value={object} />
+          </div>
+        {/if}
+        {#if (object.comments ?? 0) > 0}
+          <div class="step-lr75">
+            <CommentsPresenter value={object} />
+          </div>
+        {/if}
       </div>
-      <ActionIcon
-        label={board.string.More}
-        action={(evt) => {
-          showMenu(evt)
-        }}
-        icon={IconMoreH}
-        size="small" />
     </div>
   </div>
-  <div class="flex-between">
-    <div class="flex-row-center">
-      {#if (object.attachments ?? 0) > 0}
-        <div class="step-lr75">
-          <AttachmentsPresenter value={object} />
-        </div>
-      {/if}
-      {#if (object.comments ?? 0) > 0}
-        <div class="step-lr75">
-          <CommentsPresenter value={object} />
-        </div>
-      {/if}
-    </div>
-  </div>
-</div>
 </AttachmentDroppable>
-
diff --git a/plugins/board-resources/src/components/editor/CardAttachments.svelte b/plugins/board-resources/src/components/editor/CardAttachments.svelte
index 47ce37f961..64e1ff2a6d 100644
--- a/plugins/board-resources/src/components/editor/CardAttachments.svelte
+++ b/plugins/board-resources/src/components/editor/CardAttachments.svelte
@@ -54,7 +54,9 @@
         {/each}
         <div class="mt-2">
           <AddAttachment bind:inputFile objectClass={value._class} objectId={value._id} space={value.space}>
-            <Button label={board.string.AddAttachment} kind="no-border" slot="control" />
+            <svelte:fragment slot="control" let:click>
+              <Button label={board.string.AddAttachment} kind="no-border" on:click={click}/>
+            </svelte:fragment>
           </AddAttachment>
         </div>
       </div>

From 6bc49f596dae0dde93d8a46acbb6a764708b1efc Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 11:14:41 +0700
Subject: [PATCH 03/16] Remove paddings from card-container

Signed-off-by: Anna No <anna.no@xored.com>
---
 packages/kanban/src/components/Kanban.svelte  |  5 --
 packages/theme/styles/_layouts.scss           |  7 ++
 .../src/components/KanbanCard.svelte          | 56 +++++++-------
 .../src/components/KanbanCard.svelte          | 62 ++++++++-------
 .../src/components/KanbanCard.svelte          | 75 ++++++++++---------
 .../src/components/KanbanCard.svelte          | 74 +++++++++---------
 .../src/components/issues/Board.svelte        |  2 +-
 7 files changed, 152 insertions(+), 129 deletions(-)

diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
index 49ab4e8558..2fbd3e9c26 100644
--- a/packages/kanban/src/components/Kanban.svelte
+++ b/packages/kanban/src/components/Kanban.svelte
@@ -246,11 +246,7 @@
     height: 100%;
   }
   .card-container {
-    display: flex;
-    flex-direction: column;
-    padding: .5rem 1rem;
     background-color: var(--board-card-bg-color);
-    border: 1px solid var(--board-card-bg-color);
     border-radius: .25rem;
     user-select: none;
 
@@ -263,7 +259,6 @@
     &.dragged {
       padding: 1rem;
       background-color: var(--board-bg-color);
-      border: unset;
     }
   }
 </style>
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index e13120e4d2..dae2ebc471 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -318,9 +318,16 @@ p:last-child { margin-block-end: 0; }
 .mx-2 { margin: 0 .5rem; }
 .mx-3 { margin: 0 .75rem; }
 
+.pl-2 { padding-left: .5rem; }
+.pl-4 { padding-left: 1rem; }
 .pr-1 { padding-right: .25rem; }
+.pr-2 { padding-right: .5rem; }
 .pr-4 { padding-right: 1rem; }
 .pr-24 { padding-right: 6rem; }
+.pt-2 { padding-top: .5rem; }
+.pt-4 { padding-top: 1rem; }
+.pb-2 { padding-bottom: .5rem; }
+.pb-4 { padding-bottom: 1rem; }
 
 .p-2 { padding: .5rem; }
 .p-3 { padding: .75rem; }
diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index 53318cafb0..911c174f23 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -33,33 +33,39 @@
   function showLead() {
     showPanel(board.component.EditCard, object._id, object._class, 'middle')
   }
+
 </script>
 
-<div class="flex-between mb-4">
-  <div class="flex-col">
-    <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
-  </div>
-  <div class="flex-row-center">
-    <div class="mr-2">
-      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+<div class="flex-col pt-2 pb-2 pr-4 pl-4">
+  <div class="flex-between mb-4">
+    <div class="flex-col">
+      <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
+    </div>
+    <div class="flex-row-center">
+      <div class="mr-2">
+        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+      </div>
+      <ActionIcon
+        label={board.string.More}
+        action={(evt) => {
+          showMenu(evt)
+        }}
+        icon={IconMoreH}
+        size={'small'} />
+    </div>
+  </div>
+  <div class="flex-between">
+    <div class="flex-row-center">
+      {#if (object.attachments ?? 0) > 0}
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
+      {/if}
     </div>
-    <ActionIcon
-      label={board.string.More}
-      action={(evt) => {
-        showMenu(evt)
-      }}
-      icon={IconMoreH}
-      size={'small'}
-    />
-  </div>
-</div>
-<div class="flex-between">
-  <div class="flex-row-center">
-    {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
   </div>
 </div>
diff --git a/plugins/lead-resources/src/components/KanbanCard.svelte b/plugins/lead-resources/src/components/KanbanCard.svelte
index d52a403d7c..312d7fa279 100644
--- a/plugins/lead-resources/src/components/KanbanCard.svelte
+++ b/plugins/lead-resources/src/components/KanbanCard.svelte
@@ -35,36 +35,42 @@
   function showLead() {
     showPanel(view.component.EditDoc, object._id, object._class, 'full')
   }
+
 </script>
 
-<div class="flex-between mb-4">
-  <div class="flex-col">
-    <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
-  </div>
-  <div class="flex-row-center">
-    <div class="mr-2">
-      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+<div class="flex-col pt-2 pb-2 pr-4 pl-4">
+  <div class="flex-between mb-4">
+    <div class="flex-col">
+      <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
+    </div>
+    <div class="flex-row-center">
+      <div class="mr-2">
+        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+      </div>
+      <ActionIcon
+        label={lead.string.More}
+        action={(evt) => {
+          showMenu(evt)
+        }}
+        icon={IconMoreH}
+        size={'small'} />
+    </div>
+  </div>
+  <div class="flex-between">
+    {#if object.$lookup?.attachedTo}
+      <ContactPresenter value={object.$lookup.attachedTo} />
+    {/if}
+    <div class="flex-row-center">
+      {#if (object.attachments ?? 0) > 0}
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
+      {/if}
     </div>
-    <ActionIcon
-      label={lead.string.More}
-      action={(evt) => {
-        showMenu(evt)
-      }}
-      icon={IconMoreH}
-      size={'small'}
-    />
-  </div>
-</div>
-<div class="flex-between">
-  {#if object.$lookup?.attachedTo}
-    <ContactPresenter value={object.$lookup.attachedTo} />
-  {/if}
-  <div class="flex-row-center">
-    {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
   </div>
 </div>
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index 8ec6cb2155..aebeb060f5 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -28,51 +28,56 @@
   export let object: WithLookup<Applicant>
   export let dragged: boolean
 
-  function showCandidate () {
+  function showCandidate() {
     showPanel(view.component.EditDoc, object.attachedTo, object.attachedToClass, 'full')
   }
 
   $: todoItems = (object.$lookup?.todoItems as TodoItem[]) ?? []
   $: doneTasks = todoItems.filter((it) => it.done)
+
 </script>
 
-<div class="flex-between mb-3">
-  <div class="flex-row-center">
-    <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
-    <div class="flex-grow flex-col min-w-0 ml-2">
-      <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>
-        {formatName(object.$lookup?.attachedTo?.name ?? '')}
+<div class="flex-col pt-2 pb-2 pr-4 pl-4">
+  <div class="flex-between mb-3">
+    <div class="flex-row-center">
+      <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
+      <div class="flex-grow flex-col min-w-0 ml-2">
+        <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>
+          {formatName(object.$lookup?.attachedTo?.name ?? '')}
+        </div>
+        <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
       </div>
-      <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
     </div>
-  </div>
-  <div class="tool mr-1 flex-row-center">
-    {#if !dragged}
-      <div class="mr-2">
-        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
-      </div>
-      <ActionIcon label={undefined} icon={IconMoreH} size={'small'} />
-    {/if}
-  </div>
-</div>
-<div class="flex-between">
-  <div class="flex-row-center">
-    <div class="sm-tool-icon step-lr75">
-      <ApplicationPresenter value={object} />
-      {#if todoItems.length > 0}
-        <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
-          <div class="ml-2">
-            ( {doneTasks?.length}/ {todoItems.length} )
-          </div>
-        </Tooltip>
+    <div class="tool mr-1 flex-row-center">
+      {#if !dragged}
+        <div class="mr-2">
+          <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+        </div>
+        <ActionIcon label={undefined} icon={IconMoreH} size={'small'} />
       {/if}
     </div>
-    {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
   </div>
-  <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+  <div class="flex-between">
+    <div class="flex-row-center">
+      <div class="sm-tool-icon step-lr75">
+        <ApplicationPresenter value={object} />
+        {#if todoItems.length > 0}
+          <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
+            <div class="ml-2">( {doneTasks?.length}/ {todoItems.length} )</div>
+          </Tooltip>
+        {/if}
+      </div>
+      {#if (object.attachments ?? 0) > 0}
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
+      {/if}
+    </div>
+    <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+  </div>
 </div>
diff --git a/plugins/task-resources/src/components/KanbanCard.svelte b/plugins/task-resources/src/components/KanbanCard.svelte
index 49eb181ce2..9d62f55134 100644
--- a/plugins/task-resources/src/components/KanbanCard.svelte
+++ b/plugins/task-resources/src/components/KanbanCard.svelte
@@ -32,43 +32,47 @@
 
   $: todoItems = (object.$lookup?.todoItems as TodoItem[]) ?? []
   $: doneTasks = todoItems.filter((it) => it.done)
+
 </script>
 
-<div class="flex-between mb-2">
-  <div class="flex">
-    <TaskPresenter value={object} />
-    {#if todoItems.length > 0}
-      <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
-        <div class="ml-2">
-          ( {doneTasks?.length}/ {todoItems.length} )
-        </div>
-      </Tooltip>
-    {/if}
-  </div>
-  <div class="flex-row-center">
-    <div class="mr-2">
-      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+<div class="flex-col pt-2 pb-2 pr-4 pl-4">
+  <div class="flex-between mb-2">
+    <div class="flex">
+      <TaskPresenter value={object} />
+      {#if todoItems.length > 0}
+        <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
+          <div class="ml-2">( {doneTasks?.length}/ {todoItems.length} )</div>
+        </Tooltip>
+      {/if}
     </div>
-    <ActionIcon
-      label={task.string.More}
-      action={(evt) => {
-        showMenu(evt)
-      }}
-      icon={IconMoreH}
-      size={'small'}
-    />
+    <div class="flex-row-center">
+      <div class="mr-2">
+        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+      </div>
+      <ActionIcon
+        label={task.string.More}
+        action={(evt) => {
+          showMenu(evt)
+        }}
+        icon={IconMoreH}
+        size={'small'} />
+    </div>
+  </div>
+  <div class="caption-color mb-3 lines-limit-4">{object.name}</div>
+  <!-- <div class="text-sm lines-limit-2">{object.description}</div> -->
+  <div class="flex-between">
+    <div class="flex-row-center">
+      {#if (object.attachments ?? 0) > 0}
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
+      {/if}
+    </div>
+    <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
   </div>
 </div>
-<div class="caption-color mb-3 lines-limit-4">{object.name}</div>
-<!-- <div class="text-sm lines-limit-2">{object.description}</div> -->
-<div class="flex-between">
-  <div class="flex-row-center">
-    {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
-  </div>
-  <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
-</div>
diff --git a/plugins/tracker-resources/src/components/issues/Board.svelte b/plugins/tracker-resources/src/components/issues/Board.svelte
index d6e8ad4525..4ac9c310a2 100644
--- a/plugins/tracker-resources/src/components/issues/Board.svelte
+++ b/plugins/tracker-resources/src/components/issues/Board.svelte
@@ -107,7 +107,7 @@
     </svelte:fragment>
     <svelte:fragment slot="card" let:object>
       {@const issue = toIssue(object)}
-      <div class="flex-row h-18">
+      <div class="flex-row h-18 pt-2 pb-2 pr-4 pl-4">
         <div class="flex-between mb-2">
           <IssuePresenter value={object} {currentTeam} />
           {#if issue.$lookup?.assignee}

From 76619163c3e8a4e5c5d2d16623743d53c4a93722 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 11:16:16 +0700
Subject: [PATCH 04/16] Remove paddings from card-container

Signed-off-by: Anna No <anna.no@xored.com>
---
 packages/kanban/src/components/Kanban.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
index 2fbd3e9c26..2a40506a48 100644
--- a/packages/kanban/src/components/Kanban.svelte
+++ b/packages/kanban/src/components/Kanban.svelte
@@ -257,7 +257,6 @@
       cursor: grab;
     }
     &.dragged {
-      padding: 1rem;
       background-color: var(--board-bg-color);
     }
   }

From afa335ba3011c44b5161ead586303bc051c64442 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 11:52:36 +0700
Subject: [PATCH 05/16] fix lint formatting

Signed-off-by: Anna No <anna.no@xored.com>
---
 plugins/board-resources/src/components/KanbanCard.svelte  | 4 ++--
 plugins/lead-resources/src/components/KanbanCard.svelte   | 8 ++++----
 .../recruit-resources/src/components/KanbanCard.svelte    | 3 +--
 plugins/task-resources/src/components/KanbanCard.svelte   | 4 ++--
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index 911c174f23..e59efa3376 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -33,7 +33,6 @@
   function showLead() {
     showPanel(board.component.EditCard, object._id, object._class, 'middle')
   }
-
 </script>
 
 <div class="flex-col pt-2 pb-2 pr-4 pl-4">
@@ -51,7 +50,8 @@
           showMenu(evt)
         }}
         icon={IconMoreH}
-        size={'small'} />
+        size={'small'}
+      />
     </div>
   </div>
   <div class="flex-between">
diff --git a/plugins/lead-resources/src/components/KanbanCard.svelte b/plugins/lead-resources/src/components/KanbanCard.svelte
index 312d7fa279..1e74d3b043 100644
--- a/plugins/lead-resources/src/components/KanbanCard.svelte
+++ b/plugins/lead-resources/src/components/KanbanCard.svelte
@@ -28,14 +28,13 @@
   export let object: WithLookup<Lead>
   export let dragged: boolean
 
-  function showMenu(ev?: Event): void {
+  function showMenu (ev?: Event): void {
     showPopup(ContextMenu, { object }, (ev as MouseEvent).target as HTMLElement)
   }
 
-  function showLead() {
+  function showLead () {
     showPanel(view.component.EditDoc, object._id, object._class, 'full')
   }
-
 </script>
 
 <div class="flex-col pt-2 pb-2 pr-4 pl-4">
@@ -53,7 +52,8 @@
           showMenu(evt)
         }}
         icon={IconMoreH}
-        size={'small'} />
+        size={'small'}
+      />
     </div>
   </div>
   <div class="flex-between">
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index aebeb060f5..9319644864 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -28,13 +28,12 @@
   export let object: WithLookup<Applicant>
   export let dragged: boolean
 
-  function showCandidate() {
+  function showCandidate () {
     showPanel(view.component.EditDoc, object.attachedTo, object.attachedToClass, 'full')
   }
 
   $: todoItems = (object.$lookup?.todoItems as TodoItem[]) ?? []
   $: doneTasks = todoItems.filter((it) => it.done)
-
 </script>
 
 <div class="flex-col pt-2 pb-2 pr-4 pl-4">
diff --git a/plugins/task-resources/src/components/KanbanCard.svelte b/plugins/task-resources/src/components/KanbanCard.svelte
index 9d62f55134..f4c702ddab 100644
--- a/plugins/task-resources/src/components/KanbanCard.svelte
+++ b/plugins/task-resources/src/components/KanbanCard.svelte
@@ -32,7 +32,6 @@
 
   $: todoItems = (object.$lookup?.todoItems as TodoItem[]) ?? []
   $: doneTasks = todoItems.filter((it) => it.done)
-
 </script>
 
 <div class="flex-col pt-2 pb-2 pr-4 pl-4">
@@ -55,7 +54,8 @@
           showMenu(evt)
         }}
         icon={IconMoreH}
-        size={'small'} />
+        size={'small'}
+      />
     </div>
   </div>
   <div class="caption-color mb-3 lines-limit-4">{object.name}</div>

From b8722527461cdf466af0dad33aeb27106cc1c6ed Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 16:18:44 +0700
Subject: [PATCH 06/16] Fix AttachmentDroppable

Signed-off-by: Anna No <anna.no@xored.com>
---
 packages/theme/styles/_layouts.scss           |  1 +
 .../src/components/AttachmentDroppable.svelte |  8 ++++--
 .../src/components/Attachments.svelte         |  4 +--
 plugins/board-assets/lang/en.json             |  1 +
 plugins/board-assets/lang/ru.json             |  1 +
 .../src/components/KanbanCard.svelte          | 28 ++++++++++++++-----
 plugins/board-resources/src/plugin.ts         |  1 +
 7 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 4d96da5c59..c2a73818e2 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -541,6 +541,7 @@ a.no-line {
 }
 
 /* Backgrounds & Colors */
+.background-theme-content-accent { background-color: var(--theme-content-accent-color);}
 .background-theme-bg-color { background-color: var(--theme-bg-color); }
 .background-highlight-red { background-color: var(--highlight-red); }
 .background-button-bg-color { background-color: var(--button-bg-color); }
diff --git a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
index 94701dea5a..d808d41c0d 100644
--- a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
@@ -23,12 +23,14 @@
   export let objectClass: Ref<Class<Doc>>
   export let objectId: Ref<Doc>
   export let space: Ref<Space>
+  export let canDrop: ((e: DragEvent) => boolean) | undefined = undefined
   
   export let dragover = false
 
   const client = getClient()
   
   function fileDrop(e: DragEvent) {
+    dragover = false
     const list = e.dataTransfer?.files
     if (list === undefined || list.length === 0) return
     for (let index = 0; index < list.length; index++) {
@@ -40,8 +42,10 @@
 </script>
 
 <div
-  on:dragover|preventDefault={() => {
-    dragover = true
+  on:dragover|preventDefault={(e) => {
+    if (canDrop?.(e) ?? true) {
+      dragover = true
+    }
   }}
   on:dragleave={() => {
     dragover = false
diff --git a/plugins/attachment-resources/src/components/Attachments.svelte b/plugins/attachment-resources/src/components/Attachments.svelte
index 7047f03933..f6a06ffeb9 100644
--- a/plugins/attachment-resources/src/components/Attachments.svelte
+++ b/plugins/attachment-resources/src/components/Attachments.svelte
@@ -47,10 +47,10 @@
     <AttachmentDroppable bind:loading bind:dragover objectClass={_class} {objectId} {space}>
       <div class="flex-col-center mt-5 zone-container" class:solid={dragover}>
         <UploadDuo size={'large'} />
-        <div class="text-sm content-dark-color mt-2">
+        <div class="text-sm content-dark-color mt-2" style:pointer-events="none">
           <Label label={attachment.string.NoAttachments} />
         </div>
-        <div class="text-sm">
+        <div class="text-sm" style:pointer-events={dragover ? 'none' : 'all'}>
           <div class="over-underline" on:click={() => inputFile.click()}>
             <Label label={attachment.string.UploadDropFilesHere} />
           </div>
diff --git a/plugins/board-assets/lang/en.json b/plugins/board-assets/lang/en.json
index c137c3714c..75e01c6ec3 100644
--- a/plugins/board-assets/lang/en.json
+++ b/plugins/board-assets/lang/en.json
@@ -34,6 +34,7 @@
     "Dates": "Dates",
     "Attachments": "Attachments",
     "AddAttachment": "Add an attachment",
+    "DropFileToUpload": "Drop files to upload.",
     "CustomFields": "Custom Fields",
     "Automation": "Automation",
     "AddButton": "Add Button",
diff --git a/plugins/board-assets/lang/ru.json b/plugins/board-assets/lang/ru.json
index a8dcf5f91a..3fd205ab48 100644
--- a/plugins/board-assets/lang/ru.json
+++ b/plugins/board-assets/lang/ru.json
@@ -34,6 +34,7 @@
     "Dates": "Дата",
     "Attachments": "Прикрепленное",
     "AddAttachment": "Прикрепить",
+    "DropFileToUpload": "Добавьте файлы.",
     "CustomFields": "Дополнительно",
     "Automation": "Автоматизация",
     "AddButton": "Добавить",
diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index bb06302732..0ad570c2e1 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -19,7 +19,7 @@
   import { CommentsPresenter } from '@anticrm/chunter-resources'
   import type { WithLookup } from '@anticrm/core'
   import notification from '@anticrm/notification'
-  import { ActionIcon, Component, IconMoreH, showPanel, showPopup } from '@anticrm/ui'
+  import { ActionIcon, Component, IconMoreH, Label, showPanel, showPopup } from '@anticrm/ui'
   import { ContextMenu } from '@anticrm/view-resources'
   import board from '../plugin'
 
@@ -29,14 +29,18 @@
   let loadingAttachment = 0
   let dragoverAttachment = false
 
-  function showMenu(ev?: Event): void {
+  function showMenu (ev?: Event): void {
     showPopup(ContextMenu, { object }, (ev as MouseEvent).target as HTMLElement)
   }
 
-  function showCard() {
+  function showCard () {
     showPanel(board.component.EditCard, object._id, object._class, 'middle')
   }
 
+  function canDropAttachment (e: DragEvent): boolean {
+    return !!e.dataTransfer?.items && e.dataTransfer?.items.length > 0;
+  }
+
 </script>
 
 <AttachmentDroppable
@@ -44,9 +48,19 @@
   bind:dragover={dragoverAttachment}
   objectClass={object._class}
   objectId={object._id}
-  space={object.space}>
-  <div class:opacity-overlay={dragoverAttachment}>
-    <div class="flex-between mb-4">
+  space={object.space}
+  canDrop={canDropAttachment}>
+  <div class="relative flex-col pt-2 pb-2 pr-4 pl-4">
+    {#if dragoverAttachment}
+      <div style:pointer-events="none" class="abs-full-content h-full w-full flex-center fs-title">
+        <Label label={board.string.DropFileToUpload} />
+      </div>
+      <div
+        style:opacity={0.3}
+        style:pointer-events="none"
+        class="abs-full-content background-theme-content-accent h-full w-full flex-center fs-title" />
+    {/if}
+    <div class="flex-between mb-4" style:pointer-events={dragoverAttachment ? 'none' : 'all'}>
       <div class="flex-col">
         <div class="fs-title cursor-pointer" on:click={showCard}>{object.title}</div>
       </div>
@@ -63,7 +77,7 @@
           size="small" />
       </div>
     </div>
-    <div class="flex-between">
+    <div class="flex-between" style:pointer-events={dragoverAttachment ? 'none' : 'all'}>
       <div class="flex-row-center">
         {#if (object.attachments ?? 0) > 0}
           <div class="step-lr75">
diff --git a/plugins/board-resources/src/plugin.ts b/plugins/board-resources/src/plugin.ts
index 9b4a749076..5742a886e3 100644
--- a/plugins/board-resources/src/plugin.ts
+++ b/plugins/board-resources/src/plugin.ts
@@ -55,6 +55,7 @@ export default mergeIds(boardId, board, {
     Dates: '' as IntlString,
     Attachments: '' as IntlString,
     AddAttachment: '' as IntlString,
+    DropFileToUpload: '' as IntlString,
     CustomFields: '' as IntlString,
     Automation: '' as IntlString,
     AddButton: '' as IntlString,

From 1d5bebcd4c9ef73a43f3baefbd129060d0b77640 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 16:33:22 +0700
Subject: [PATCH 07/16] Fix Attachments spinner

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/Attachments.svelte                 | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/plugins/attachment-resources/src/components/Attachments.svelte b/plugins/attachment-resources/src/components/Attachments.svelte
index f6a06ffeb9..5665e10368 100644
--- a/plugins/attachment-resources/src/components/Attachments.svelte
+++ b/plugins/attachment-resources/src/components/Attachments.svelte
@@ -39,11 +39,14 @@
 <div class="attachments-container">
   <div class="flex-row-center">
     <span class="title"><Label label={attachment.string.Attachments} /></span>
-    <AddAttachment bind:loading bind:inputFile objectClass={_class} {objectId} {space} />
+    {#if loading}
+      <Spinner />
+    {:else}
+      <AddAttachment bind:loading bind:inputFile objectClass={_class} {objectId} {space} />
+    {/if}
   </div>
-  {#if loading}
-    <Spinner />
-  {:else if attachments === 0}
+
+  {#if attachments === 0 && !loading}
     <AttachmentDroppable bind:loading bind:dragover objectClass={_class} {objectId} {space}>
       <div class="flex-col-center mt-5 zone-container" class:solid={dragover}>
         <UploadDuo size={'large'} />

From d7bbf86b9734571fe990bfa6e1635940ace710a2 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 17:46:19 +0700
Subject: [PATCH 08/16] Fix Attachments spinner

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/AddAttachment.svelte       | 22 ++++---
 .../src/components/AttachmentDroppable.svelte | 17 +++---
 plugins/attachment-resources/src/utils.ts     | 58 +++++++++++--------
 3 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/plugins/attachment-resources/src/components/AddAttachment.svelte b/plugins/attachment-resources/src/components/AddAttachment.svelte
index 979b1e70fa..34495a9adf 100644
--- a/plugins/attachment-resources/src/components/AddAttachment.svelte
+++ b/plugins/attachment-resources/src/components/AddAttachment.svelte
@@ -2,7 +2,7 @@
   import { Class, Doc, Ref, Space } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
   import { CircleButton, IconAdd } from '@anticrm/ui'
-  import { createAttachment } from '../utils'
+  import { createAttachments } from '../utils'
 
   export let loading: number = 0
   export let inputFile: HTMLInputElement
@@ -10,16 +10,18 @@
   export let objectClass: Ref<Class<Doc>>
   export let objectId: Ref<Doc>
   export let space: Ref<Space>
-  
 
   const client = getClient()
 
-  function fileSelected() {
+  async function fileSelected() {
     const list = inputFile.files
     if (list === null || list.length === 0) return
-    for (let index = 0; index < list.length; index++) {
-      const file = list.item(index)
-      if (file !== null) createAttachment(client, file, loading, { objectClass, objectId, space })
+
+    loading++
+    try {
+      await createAttachments(client, list, {objectClass, objectId, space})
+    } finally {
+      loading--
     }
   }
 
@@ -31,13 +33,9 @@
 
 <div>
   {#if $$slots.control}
-    <slot name="control" click={openFile}/>
+    <slot name="control" click={openFile} />
   {:else}
-    <CircleButton
-      icon={IconAdd}
-      size="small"
-      selected
-      on:click={openFile} />
+    <CircleButton icon={IconAdd} size="small" selected on:click={openFile} />
   {/if}
   <input
     bind:this={inputFile}
diff --git a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
index d808d41c0d..4ac435dfc8 100644
--- a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
@@ -17,25 +17,28 @@
   import { Class, Doc, Ref, Space } from '@anticrm/core'
 
   import { getClient } from '@anticrm/presentation'
-  import { createAttachment } from '../utils'
+  import { createAttachments } from '../utils'
 
   export let loading: number = 0
   export let objectClass: Ref<Class<Doc>>
   export let objectId: Ref<Doc>
   export let space: Ref<Space>
   export let canDrop: ((e: DragEvent) => boolean) | undefined = undefined
-  
+
   export let dragover = false
 
   const client = getClient()
-  
-  function fileDrop(e: DragEvent) {
+
+  async function fileDrop(e: DragEvent) {
     dragover = false
     const list = e.dataTransfer?.files
     if (list === undefined || list.length === 0) return
-    for (let index = 0; index < list.length; index++) {
-      const file = list.item(index)
-      if (file !== null) createAttachment(client, file, loading, { objectClass, objectId, space })
+
+    loading++
+    try {
+      await createAttachments(client, list, {objectClass, objectId, space})
+    } finally {
+      loading--
     }
   }
 
diff --git a/plugins/attachment-resources/src/utils.ts b/plugins/attachment-resources/src/utils.ts
index 5019e1f8e7..bcc700d847 100644
--- a/plugins/attachment-resources/src/utils.ts
+++ b/plugins/attachment-resources/src/utils.ts
@@ -14,13 +14,13 @@
 // limitations under the License.
 //
 
-import type { Class, Doc, Ref, Space,  TxOperations as Client } from '@anticrm/core'
+import type { Class, Doc, Ref, Space, TxOperations as Client } from '@anticrm/core'
 import login from '@anticrm/login'
 import { getMetadata, setPlatformStatus, unknownError } from '@anticrm/platform'
 
 import attachment from './plugin'
 
-export async function uploadFile (file: File, opts?: { space: Ref<Space>, attachedTo: Ref<Doc> }): Promise<string> {
+export async function uploadFile(file: File, opts?: { space: Ref<Space>; attachedTo: Ref<Doc> }): Promise<string> {
   const uploadUrl = getMetadata(login.metadata.UploadUrl)
 
   if (uploadUrl === undefined) {
@@ -30,12 +30,16 @@ export async function uploadFile (file: File, opts?: { space: Ref<Space>, attach
   const data = new FormData()
   data.append('file', file)
 
-  const params = opts !== undefined
-    ? [['space', opts.space], ['attachedTo', opts.attachedTo]]
-        .filter((x): x is [string, Ref<any>] => x[1] !== undefined)
-        .map(([name, value]) => `${name}=${value}`)
-        .join('&')
-    : ''
+  const params =
+    opts !== undefined
+      ? [
+          ['space', opts.space],
+          ['attachedTo', opts.attachedTo]
+        ]
+          .filter((x): x is [string, Ref<any>] => x[1] !== undefined)
+          .map(([name, value]) => `${name}=${value}`)
+          .join('&')
+      : ''
   const suffix = params === '' ? params : `?${params}`
 
   const url = `${uploadUrl}${suffix}`
@@ -54,7 +58,7 @@ export async function uploadFile (file: File, opts?: { space: Ref<Space>, attach
   return await resp.text()
 }
 
-export async function deleteFile (id: string): Promise<void> {
+export async function deleteFile(id: string): Promise<void> {
   const uploadUrl = getMetadata(login.metadata.UploadUrl)
 
   const url = `${uploadUrl as string}?file=${id}`
@@ -70,27 +74,33 @@ export async function deleteFile (id: string): Promise<void> {
   }
 }
 
-export async function createAttachment (client: Client, file: File, loading: number, attachTo: {objectClass: Ref<Class<Doc>>, space: Ref<Space>, objectId: Ref<Doc>}) {
-  loading++
-  const {objectClass, objectId, space} = attachTo
+export async function createAttachments(
+  client: Client,
+  list: FileList,
+  attachTo: { objectClass: Ref<Class<Doc>>; space: Ref<Space>; objectId: Ref<Doc> }
+) {
+  const { objectClass, objectId, space } = attachTo
   try {
-    const uuid = await uploadFile(file, { space, attachedTo: objectId })
-    console.log('uploaded file uuid', uuid)
-    client.addCollection(attachment.class.Attachment, space, objectId, objectClass, 'attachments', {
-      name: file.name,
-      file: uuid,
-      type: file.type,
-      size: file.size,
-      lastModified: file.lastModified
-    })
+    for (let index = 0; index < list.length; index++) {
+      const file = list.item(index)
+      if (file !== null) {
+        const uuid = await uploadFile(file, { space, attachedTo: objectId })
+        console.log('uploaded file uuid', uuid)
+        client.addCollection(attachment.class.Attachment, space, objectId, objectClass, 'attachments', {
+          name: file.name,
+          file: uuid,
+          type: file.type,
+          size: file.size,
+          lastModified: file.lastModified
+        })
+      }
+    }
   } catch (err: any) {
     setPlatformStatus(unknownError(err))
-  } finally {
-    loading--
   }
 }
 
-export function getType (type: string): 'image' | 'video' | 'audio' | 'pdf' | 'other' {
+export function getType(type: string): 'image' | 'video' | 'audio' | 'pdf' | 'other' {
   if (type.startsWith('image/')) {
     return 'image'
   }

From 53873c03fc37ec26a423d49fdc6fbbd8b2d99657 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 17:50:46 +0700
Subject: [PATCH 09/16] Fix lint issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/AddAttachment.svelte                     | 6 +++---
 .../src/components/AttachmentDroppable.svelte               | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugins/attachment-resources/src/components/AddAttachment.svelte b/plugins/attachment-resources/src/components/AddAttachment.svelte
index 34495a9adf..b70170e29a 100644
--- a/plugins/attachment-resources/src/components/AddAttachment.svelte
+++ b/plugins/attachment-resources/src/components/AddAttachment.svelte
@@ -19,7 +19,7 @@
 
     loading++
     try {
-      await createAttachments(client, list, {objectClass, objectId, space})
+      await createAttachments(client, list, { objectClass, objectId, space })
     } finally {
       loading--
     }
@@ -28,7 +28,6 @@
   function openFile() {
     inputFile.click()
   }
-
 </script>
 
 <div>
@@ -44,5 +43,6 @@
     name="file"
     id="file"
     style="display: none"
-    on:change={fileSelected} />
+    on:change={fileSelected}
+  />
 </div>
diff --git a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
index 4ac435dfc8..5209455200 100644
--- a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
@@ -36,12 +36,11 @@
 
     loading++
     try {
-      await createAttachments(client, list, {objectClass, objectId, space})
+      await createAttachments(client, list, { objectClass, objectId, space })
     } finally {
       loading--
     }
   }
-
 </script>
 
 <div
@@ -53,6 +52,7 @@
   on:dragleave={() => {
     dragover = false
   }}
-  on:drop|preventDefault|stopPropagation={fileDrop}>
+  on:drop|preventDefault|stopPropagation={fileDrop}
+>
   <slot />
 </div>

From b7842e0c4cfbbc1b2c12fe8767a8c0a82ca0c257 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 20:59:15 +0700
Subject: [PATCH 10/16] Fix lint issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 plugins/board-resources/src/components/EditCard.svelte   | 5 -----
 plugins/board-resources/src/components/KanbanCard.svelte | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/plugins/board-resources/src/components/EditCard.svelte b/plugins/board-resources/src/components/EditCard.svelte
index 59d59e0aa9..eb967acc64 100644
--- a/plugins/board-resources/src/components/EditCard.svelte
+++ b/plugins/board-resources/src/components/EditCard.svelte
@@ -139,11 +139,6 @@
 {/if}
 
 <style lang="scss">
-  .close-button {
-    position: absolute;
-    top: 0.7rem;
-    right: 0.7rem;
-  }
   .state-name {
     text-decoration: underline;
 
diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index 0ad570c2e1..3614074bee 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -56,7 +56,7 @@
         <Label label={board.string.DropFileToUpload} />
       </div>
       <div
-        style:opacity={0.3}
+        style:opacity="0.3"
         style:pointer-events="none"
         class="abs-full-content background-theme-content-accent h-full w-full flex-center fs-title" />
     {/if}

From 95ea34d27a9e80bf2e5ac1b19d27d22336b12858 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 21:14:37 +0700
Subject: [PATCH 11/16] Fix card & file drop issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/AttachmentDroppable.svelte        | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
index 5209455200..a4b6d834e1 100644
--- a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
@@ -31,12 +31,19 @@
 
   async function fileDrop(e: DragEvent) {
     dragover = false
+
+    if (canDrop && !canDrop(e)) {
+      return
+    }
+
     const list = e.dataTransfer?.files
     if (list === undefined || list.length === 0) return
 
     loading++
     try {
       await createAttachments(client, list, { objectClass, objectId, space })
+      e.preventDefault()
+      e.stopPropagation()
     } finally {
       loading--
     }
@@ -44,15 +51,16 @@
 </script>
 
 <div
-  on:dragover|preventDefault={(e) => {
+  on:dragover={(e) => {
     if (canDrop?.(e) ?? true) {
       dragover = true
+      e.preventDefault()
     }
   }}
   on:dragleave={() => {
     dragover = false
   }}
-  on:drop|preventDefault|stopPropagation={fileDrop}
+  on:drop={fileDrop}
 >
   <slot />
 </div>

From c5f7d6d1e98187c3a62292fc09738cb18c6b2940 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Wed, 13 Apr 2022 21:16:49 +0700
Subject: [PATCH 12/16] Fix card & file drop issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/AttachmentDroppable.svelte                | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
index a4b6d834e1..856ba9d711 100644
--- a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
@@ -36,14 +36,15 @@
       return
     }
 
+    e.preventDefault()
+    e.stopPropagation()
+
     const list = e.dataTransfer?.files
     if (list === undefined || list.length === 0) return
 
     loading++
     try {
       await createAttachments(client, list, { objectClass, objectId, space })
-      e.preventDefault()
-      e.stopPropagation()
     } finally {
       loading--
     }

From 01d6da49d921dd1b803690ceb09f052e8512f21c Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Thu, 14 Apr 2022 00:09:02 +0700
Subject: [PATCH 13/16] Add attachments live updates

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/editor/CardAttachments.svelte                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/board-resources/src/components/editor/CardAttachments.svelte b/plugins/board-resources/src/components/editor/CardAttachments.svelte
index 64e1ff2a6d..43e509478f 100644
--- a/plugins/board-resources/src/components/editor/CardAttachments.svelte
+++ b/plugins/board-resources/src/components/editor/CardAttachments.svelte
@@ -32,7 +32,7 @@
     attachments = await client.findAll(attachment.class.Attachment, { space: value.space, attachedTo: value._id })
   }
 
-  $: fetch()
+  $: value.attachments > 0 && fetch()
 
 </script>
 

From 9c9287770c250b5cbe18eb47aae3ff390c1e8246 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Thu, 14 Apr 2022 00:46:30 +0700
Subject: [PATCH 14/16] fix lint issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/editor/CardAttachments.svelte                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/board-resources/src/components/editor/CardAttachments.svelte b/plugins/board-resources/src/components/editor/CardAttachments.svelte
index 43e509478f..6d3d7494d8 100644
--- a/plugins/board-resources/src/components/editor/CardAttachments.svelte
+++ b/plugins/board-resources/src/components/editor/CardAttachments.svelte
@@ -32,7 +32,7 @@
     attachments = await client.findAll(attachment.class.Attachment, { space: value.space, attachedTo: value._id })
   }
 
-  $: value.attachments > 0 && fetch()
+  $: value?.attachments && value.attachments > 0 && fetch()
 
 </script>
 

From 5863602afeb2eee9a07e0b4e95944f5f7c465fae Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Thu, 14 Apr 2022 17:35:22 +0700
Subject: [PATCH 15/16] fix review issues: copyright & logging

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/AddAttachment.svelte       | 14 ++++++++
 .../src/components/AttachmentDroppable.svelte |  3 +-
 .../presenters/AttachmentPresenter.svelte     | 36 +++++++++++++------
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/plugins/attachment-resources/src/components/AddAttachment.svelte b/plugins/attachment-resources/src/components/AddAttachment.svelte
index b70170e29a..2fe19c89be 100644
--- a/plugins/attachment-resources/src/components/AddAttachment.svelte
+++ b/plugins/attachment-resources/src/components/AddAttachment.svelte
@@ -1,3 +1,17 @@
+<!--
+// 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 { Class, Doc, Ref, Space } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
diff --git a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
index 856ba9d711..c2348083b4 100644
--- a/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentDroppable.svelte
@@ -1,6 +1,5 @@
 <!--
-// Copyright © 2020, 2021 Anticrm Platform Contributors.
-// Copyright © 2021 Hardcore Engineering Inc.
+// 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
diff --git a/plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte b/plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte
index bf5d0cc0f3..4704c18aaf 100644
--- a/plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte
+++ b/plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte
@@ -1,12 +1,26 @@
+<!--
+// 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 {Attachment} from '@anticrm/attachment'
-    import { AttachmentPresenter } from '@anticrm/attachment-resources'
-  
-    export let value: Attachment
-    // TODO: implement
-  </script>
-  
-  <div>
-    <AttachmentPresenter {value} />
-  </div>
-  
\ No newline at end of file
+  import { Attachment } from '@anticrm/attachment'
+  import { AttachmentPresenter } from '@anticrm/attachment-resources'
+
+  export let value: Attachment
+  // TODO: implement
+
+</script>
+
+<div>
+  <AttachmentPresenter {value} />
+</div>

From e16ac404a31488a46eccf18d27bde03101f1dfd8 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Thu, 14 Apr 2022 17:36:51 +0700
Subject: [PATCH 16/16] fix scss formatting

Signed-off-by: Anna No <anna.no@xored.com>
---
 packages/theme/styles/_layouts.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index c2a73818e2..ef7490555d 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -541,7 +541,7 @@ a.no-line {
 }
 
 /* Backgrounds & Colors */
-.background-theme-content-accent { background-color: var(--theme-content-accent-color);}
+.background-theme-content-accent { background-color: var(--theme-content-accent-color); }
 .background-theme-bg-color { background-color: var(--theme-bg-color); }
 .background-highlight-red { background-color: var(--highlight-red); }
 .background-button-bg-color { background-color: var(--button-bg-color); }