From 11232c503cd1778d9bf10a01dd20673e78f55146 Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <aonnikov@hardcoreeng.com>
Date: Fri, 11 Apr 2025 00:27:43 +0700
Subject: [PATCH] UBERF-9759 Scroll attachments in chat (#8523)

* UBERF-9759 Scroll attachments in chat

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

* fix: use Array.from(...)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

---------

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 .../src/components/DrawingBoard.svelte        |  1 +
 .../src/components/FilePreviewPopup.svelte    | 15 +++-
 packages/ui/src/popups.ts                     |  2 +-
 .../src/components/AttachmentList.svelte      | 21 ++++-
 .../src/components/AttachmentPresenter.svelte |  3 +-
 .../components/AttachmentPreviewPopup.svelte  | 78 +++++++++++++++++++
 .../src/components/AttachmentsGrid.svelte     | 10 ++-
 plugins/attachment-resources/src/utils.ts     | 64 ++-------------
 8 files changed, 126 insertions(+), 68 deletions(-)
 create mode 100644 plugins/attachment-resources/src/components/AttachmentPreviewPopup.svelte

diff --git a/packages/presentation/src/components/DrawingBoard.svelte b/packages/presentation/src/components/DrawingBoard.svelte
index 1a3aa40b29..36e468e112 100644
--- a/packages/presentation/src/components/DrawingBoard.svelte
+++ b/packages/presentation/src/components/DrawingBoard.svelte
@@ -166,6 +166,7 @@
       updateToolbarPosition(readonly, board, toolbar)
     }}
     use:drawing={{
+      autoSize: imageWidth === undefined || imageHeight === undefined,
       readonly,
       imageWidth,
       imageHeight,
diff --git a/packages/presentation/src/components/FilePreviewPopup.svelte b/packages/presentation/src/components/FilePreviewPopup.svelte
index 3c0c8ccb23..b452093b36 100644
--- a/packages/presentation/src/components/FilePreviewPopup.svelte
+++ b/packages/presentation/src/components/FilePreviewPopup.svelte
@@ -47,10 +47,9 @@
 
   const dispatch = createEventDispatcher()
 
-  onMount(() => {
-    if (fullSize) {
-      dispatch('fullsize')
-    }
+  $: void loadDrawings(file)
+
+  async function loadDrawings (file: Ref<Blob> | undefined): Promise<void> {
     if (props.drawingAvailable === true) {
       if (props.loadDrawings !== undefined) {
         drawingLoading = true
@@ -66,6 +65,14 @@
             console.error('Failed to load drawings for file', file, error)
           })
       }
+    }
+  }
+
+  onMount(() => {
+    if (fullSize) {
+      dispatch('fullsize')
+    }
+    if (props.drawingAvailable === true) {
       if (props.createDrawing !== undefined) {
         createDrawing = props.createDrawing
         props.createDrawing = async (data: any): Promise<any> => {
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index 4f8c1a2869..a7424e003e 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -57,7 +57,7 @@ export function updatePopup (id: string, props: Partial<CompAndProps>): void {
       (p: CompAndProps) => p.id === id
     )
     if (popupIndex !== -1) {
-      ;(modals[popupIndex] as CompAndProps).update?.(props)
+      ;(modals[popupIndex] as CompAndProps).update?.(props.props)
     }
     return modals
   })
diff --git a/plugins/attachment-resources/src/components/AttachmentList.svelte b/plugins/attachment-resources/src/components/AttachmentList.svelte
index 377bf0c74e..c9eee5fc5d 100644
--- a/plugins/attachment-resources/src/components/AttachmentList.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentList.svelte
@@ -15,7 +15,8 @@
 <script lang="ts">
   import { Attachment } from '@hcengineering/attachment'
   import { Ref, type WithLookup } from '@hcengineering/core'
-  import { Scroller } from '@hcengineering/ui'
+  import { ListSelectionProvider } from '@hcengineering/view-resources'
+  import { Scroller, updatePopup } from '@hcengineering/ui'
   import { AttachmentImageSize } from '../types'
   import AttachmentPreview from './AttachmentPreview.svelte'
 
@@ -23,6 +24,22 @@
   export let savedAttachmentsIds: Ref<Attachment>[] = []
   export let imageSize: AttachmentImageSize | undefined = undefined
   export let videoPreload = false
+
+  let attachmentPopupId = ''
+
+  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0) => {
+    const current = listProvider.current()
+    if (current === undefined) return
+    let pos = current + offset
+    if (pos < 0) pos = 0
+    if (pos >= attachments.length) pos = attachments.length - 1
+    const doc = listProvider.docs()[pos] as Attachment
+    if (doc !== undefined && attachmentPopupId !== '') {
+      listProvider.updateFocus(doc)
+      updatePopup(attachmentPopupId, { props: { value: doc } })
+    }
+  })
+  $: listProvider.update(attachments.filter((p) => p.type.startsWith('image/')))
 </script>
 
 {#if attachments.length}
@@ -33,6 +50,8 @@
         isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false}
         {imageSize}
         {videoPreload}
+        {listProvider}
+        on:open={(res) => (attachmentPopupId = res.detail)}
       />
     {/each}
   </Scroller>
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index 7095988f62..96e2de22cf 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -99,7 +99,8 @@
       return
     }
     if (value.type.startsWith('image/') || value.type.startsWith('video/') || value.type.startsWith('audio/')) {
-      showAttachmentPreviewPopup(value)
+      const popup = showAttachmentPreviewPopup(value)
+      dispatch('open', popup.id)
     } else {
       await openAttachmentInSidebar(value)
     }
diff --git a/plugins/attachment-resources/src/components/AttachmentPreviewPopup.svelte b/plugins/attachment-resources/src/components/AttachmentPreviewPopup.svelte
new file mode 100644
index 0000000000..52e8fc5c3d
--- /dev/null
+++ b/plugins/attachment-resources/src/components/AttachmentPreviewPopup.svelte
@@ -0,0 +1,78 @@
+<!--
+// Copyright © 2024 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, { type Attachment, type Drawing } from '@hcengineering/attachment'
+  import core, { SortingOrder } from '@hcengineering/core'
+  import { DrawingData, FilePreviewPopup, getClient } from '@hcengineering/presentation'
+  import { isAttachment } from '../utils'
+
+  export let value: Attachment
+
+  export let fullSize = false
+  export let showIcon = true
+
+  $: drawingAvailable = value?.type?.startsWith('image/') && isAttachment(value)
+
+  async function loadDrawings (): Promise<Drawing[]> {
+    const client = getClient()
+    const drawings = await client.findAll(
+      attachment.class.Drawing,
+      {
+        parent: value.file,
+        space: value.space
+      },
+      {
+        sort: {
+          createdOn: SortingOrder.Descending
+        },
+        limit: 1
+      }
+    )
+
+    return Array.from(drawings ?? [])
+  }
+
+  async function createDrawing (data: DrawingData): Promise<DrawingData> {
+    const client = getClient()
+    const newId = await client.createDoc(attachment.class.Drawing, value.space, {
+      parent: value.file,
+      parentClass: core.class.Blob,
+      content: data.content
+    })
+    const newDrawing = await client.findOne(attachment.class.Drawing, { _id: newId })
+    if (newDrawing === undefined) {
+      throw new Error('Unable to find just created drawing')
+    }
+    return newDrawing
+  }
+</script>
+
+<FilePreviewPopup
+  file={value.file}
+  name={value.name}
+  metadata={value.metadata}
+  contentType={value.type}
+  props={{
+    drawingAvailable,
+    loadDrawings,
+    createDrawing
+  }}
+  {fullSize}
+  {showIcon}
+  on:open
+  on:close
+  on:update
+  on:fullsize
+/>
diff --git a/plugins/attachment-resources/src/components/AttachmentsGrid.svelte b/plugins/attachment-resources/src/components/AttachmentsGrid.svelte
index d4ff1025bf..05d2d9027e 100644
--- a/plugins/attachment-resources/src/components/AttachmentsGrid.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentsGrid.svelte
@@ -34,7 +34,7 @@
     const sel = listProvider.docs()[selected] as Attachment
     if (sel !== undefined && attachmentPopupId !== '') {
       listProvider.updateFocus(sel)
-      updatePopup(attachmentPopupId, { props: { file: sel.file, name: sel.name, contentType: sel.type } })
+      updatePopup(attachmentPopupId, { props: { value: sel } })
     }
   })
   $: listProvider.update(attachments.filter((p) => p.type.startsWith('image/')))
@@ -52,7 +52,13 @@
             on:open={(res) => (attachmentPopupId = res.detail)}
           />
         {:else}
-          <AttachmentPresenter value={attachment} removable={!readonly} showPreview on:remove />
+          <AttachmentPresenter
+            value={attachment}
+            removable={!readonly}
+            showPreview
+            on:remove
+            on:open={(res) => (attachmentPopupId = res.detail)}
+          />
         {/if}
       {/each}
       {#if progress}
diff --git a/plugins/attachment-resources/src/utils.ts b/plugins/attachment-resources/src/utils.ts
index cc329e41e2..3ebc81709e 100644
--- a/plugins/attachment-resources/src/utils.ts
+++ b/plugins/attachment-resources/src/utils.ts
@@ -14,10 +14,9 @@
 // limitations under the License.
 //
 
-import { type Attachment, type Drawing } from '@hcengineering/attachment'
-import core, {
+import { type Attachment } from '@hcengineering/attachment'
+import {
   type BlobMetadata,
-  SortingOrder,
   type Blob,
   type Class,
   type TxOperations as Client,
@@ -30,19 +29,18 @@ import core, {
 } from '@hcengineering/core'
 import { getResource, setPlatformStatus, unknownError } from '@hcengineering/platform'
 import {
-  type DrawingData,
   type FileOrBlob,
   getClient,
   getFileMetadata,
   getPreviewAlignment,
-  uploadFile,
-  FilePreviewPopup
+  uploadFile
 } from '@hcengineering/presentation'
 import { closeTooltip, showPopup, type PopupResult } from '@hcengineering/ui'
 import workbench, { type WidgetTab } from '@hcengineering/workbench'
 import view from '@hcengineering/view'
 
 import attachment from './plugin'
+import AttachmentPreviewPopup from './components/AttachmentPreviewPopup.svelte'
 
 export async function createAttachments (
   client: Client,
@@ -158,60 +156,8 @@ export function isAttachment (value: Attachment | BlobType): value is WithLookup
 }
 
 export function showAttachmentPreviewPopup (value: WithLookup<Attachment> | BlobType): PopupResult {
-  const props: Record<string, any> = {}
-
-  if (value?.type?.startsWith('image/') && isAttachment(value)) {
-    props.drawingAvailable = true
-    props.loadDrawings = async (): Promise<Drawing[] | undefined> => {
-      const client = getClient()
-      const drawings = await client.findAll(
-        attachment.class.Drawing,
-        {
-          parent: value.file,
-          space: value.space
-        },
-        {
-          sort: {
-            createdOn: SortingOrder.Descending
-          },
-          limit: 1
-        }
-      )
-      const result = []
-      if (drawings !== undefined) {
-        for (const drawing of drawings) {
-          result.push(drawing)
-        }
-      }
-      return result
-    }
-    props.createDrawing = async (data: DrawingData): Promise<DrawingData> => {
-      const client = getClient()
-      const newId = await client.createDoc(attachment.class.Drawing, value.space, {
-        parent: value.file,
-        parentClass: core.class.Blob,
-        content: data.content
-      })
-      const newDrawing = await client.findOne(attachment.class.Drawing, { _id: newId })
-      if (newDrawing === undefined) {
-        throw new Error('Unable to find just created drawing')
-      }
-      return newDrawing
-    }
-  }
-
   closeTooltip()
-  return showPopup(
-    FilePreviewPopup,
-    {
-      file: value.file,
-      contentType: value.type,
-      name: value.name,
-      metadata: value.metadata,
-      props
-    },
-    getPreviewAlignment(value.type ?? '')
-  )
+  return showPopup(AttachmentPreviewPopup, { value }, getPreviewAlignment(value.type ?? ''))
 }
 
 interface ImageDimensions {