Feat/attachment improvements by skranee · Pull Request #856 · Adamant-im/adamant-im

skranee · 2025-08-31T20:24:28Z

Attachments in chat now have many improvements and new features to improve its usability and appearance
Lint errors and warnings were fixed
For details, see Issue description [Enhancement] Improve attaching and sending files and images #899

Testing

Additionally:

29. Fix bubbles
30. No Welcome coins screen when sending a file from new account
31. Wrong scroll position after initial image sending to a static chat
32. Downloading files don't have clear UX on mobile devices

Currently has issues

For details, read comments below.

vercel · 2025-08-31T20:24:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
adamant-im	Ready	Preview	Comment	Oct 11, 2025 8:18pm

github-actions · 2025-08-31T20:26:30Z

Deployed to https://msg-adamant-pr-856.surge.sh 🚀

src/components/AChat/AChatAttachment/AChatAttachment.vue

al-onyxprotocol · 2025-10-15T12:58:37Z

✅ Test passed: 2. File attachment without comment styling improvement

al-onyxprotocol · 2025-10-15T14:36:26Z

Styling changes: 3. Show/Hide previews option on Settings page
Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

3.1 If received an image and preview downloading is disabled, show background text Chats.AutoDownloadPreview.Disabled over it.

PWA:

iOS for comparison:

"Chats.AutoDownloadPreview.Disabled" = "Автоматическая загрузка превью отключена";
"Chats.AutoDownloadPreview.Disabled" = "Auto download is disabled";

Also, let's use not black background in the dark theme, but

background: 'black3': #181818
border-color:'black4': #303030
border-width: 1px instead of 4px
(Same as for the header)

Same colors both for images and file attachments.

al-onyxprotocol · 2025-10-15T15:02:46Z

Fix bubbles

They are shown in the header/title, but not in the bottom of attachment block.
Also, size is small compared to regular messages.

For the reference (see regular message with no attachments):

adamant-al · 2025-10-16T13:02:40Z

Building Android App for this branch:
https://github.com/Adamant-im/adamant-im/actions/runs/18562145353

adamant-al · 2025-10-16T13:17:12Z

✅ Test passed: 4. Slider improvements

Chrome on Android

(4.1) Close slider on clicking Back (only on mobile)
(4.2) Click outside doesn’t always close the slider dialog
(4.3) Close the slider on slide down

Android app built from this branch

(4.1) Close slider on clicking Back (only on mobile)
(4.2) Click outside doesn’t always close the slider dialog
(4.3) Close the slider on slide down

adamant-al · 2025-10-16T13:18:00Z

@skranee

Please describe how to test "5. Validate transaction structure using Zod" and provide link to code changes for this part.

adamant-al · 2025-10-16T14:28:06Z

Test failed: 6. Display snackbar with error if the file does not exists on IPFS network
Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

Log in test account
Go to chat with U6386412615727665758 Public ADM3
Scroll to message 2025-10-16 16:25 GMT+3 with two broken attachments. It has "Download arrow" near the message and image shown as broken.

Tap on "Open" ⟶ Preview popup opens with "Download button"
Tap on "Download" ⟶ Nothing happens

Proposed scenario

When unable to download a file

Tap on "Download" in Preview popup opens with "Download button" ⟶ Snackbar (temporary type) file_loading_error
Tap on "Download arrow" near the message: Snackbar (temporary type) attachments_loading_error

When all IPFS nodes are disabled by user

It's a special case. Check it before trying to download, priority check.
Note: all IPFS nodes are disabled by user, it's not when they are unavailable.

Tap on "Download" or Tap on "Download arrow" ⟶ Snackbar (temporary type) ipfs_nodes_disabled

Preview of unavailable images

If a message has several attachments, and some are images that are not available, you can scroll to in preview. It's good, but preview is shown "blank".

Proposed solution: Show "Broken image" icon, and text image_loading_error (like in the chat).

Additionally

When we have "Download" button in Preview, don't duplicate it with "Download arrow" in the top right corner, it's excessive.

Texts

    "file_loading_error": "Unable to load file", (updated)
    "image_loading_error": "Unable to load media", (updated)
    "file_loading_error": "Не удалось загрузить файл",
    "image_loading_error": "Не удалось загрузить медиа",

    "attachments_loading_error": "Unable to load attachments",
    "ipfs_nodes_disabled": "IPFS nodes are turned off in Settings",

metalisk · 2025-10-20T04:00:34Z

✅ Test passed: 8. Styled snackbars improvements and more informative messages

metalisk · 2025-10-20T04:26:40Z

⚠️ Styling changes: 9. Style message block when sending files

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

⚠️ 1- Add 5px padding to svg icons and image previews, so they will be smaller and better fit
5px padding to image previews also.

✅ 2- Use color filters for svg to fit our design. Grayscale? Show some options, let us know how to play with it in debugger.

⚠️ 3- Use max width same as for messages, so we can see file names
Use max width, but don't make unnecessary max width.

⚠️ 4- Use hand cursor (similar to crypto transfers) where there are actions like download / open image
Cursor "Hand" for images, image previews, and whole blocks with file names
Tap -> Open (Keep possibility to copy file name with selection)

metalisk · 2025-10-20T04:53:01Z

✅ Test passed: 10. Change maxFiles to 10 — maximum files to transfer in apps

metalisk · 2025-10-20T06:01:02Z

❌ Test failed: 11. Update Send file/ Send image button in Menu and actions
Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS, Web app in Chrome on Android, Android app

✅ 1- Update icons. Make them same size, emphasize (show some options) to make them a bit different

⚠️ 2- Add thin separator line after Send files/ Send images buttons
Remove separator between "Send media" and "Send file", keep only after "Send file".

✅ 3- On desktops, these two are excessive, they do the same:

Attach…
Добавить…
Icon — for example, a paper clip

⚠️ 4- On mobiles,

“Send image” opens image picker. Web app on mobile: Works correctly. Android app: wrong behaviour, it opens file picker instead of image picker.
“Send file” opens a menu: Camera, Camera, Recorder, Media picker

metalisk · 2025-10-20T06:06:43Z

❌ 30. No Welcome coins screen when sending a file from new account

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

Log in new account
Start chat with exchanger
Send "Test" message without attachment ⟶ App shows Welcome coins screen ✅

Send message with attachment ⟶ App doesn't show Welcome coins screen and try to send a message ❌

Expected: App shows Welcome coins screen, and message with attachment preserved in the input field (User can send it after receiving free coins.

metalisk · 2025-10-20T06:58:20Z

❌ Test failed: 12. Update picked but not sent files selector

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

✅ 1- Make quote and files panels of the same size (I think full size is the best, like it’s file panel now)

✅ 2- For file panel, remove yellow bar to the left and make different background. I suppose we can remove background totally but keep thick left, top, right borders.

✅ 3- Disallow adding one image/file twice (currently you can add the same file several times)

⚠️ 4- Scroll to the last added file
Environment: Chrome on macOS, two panel view
No scrollbar, if attach several files on tight screen, it looks cut.
Add horizontal scroll bar if files do not screen.

⚠️ 5- Add padding-bottom: 5px to file/image preview (right one), and align file name centered horizontally
Add 5px padding-bottom to image, not after file name.

metalisk · 2025-10-20T07:37:37Z

❌ Test failed: 18. Make previews size smaller for better looking

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Android or iOS device with small screen

May be connected with: "31. Wrong scroll position after initial image sending to a static chat" (see below)

Current preview size rules:

Maximum width of all previews: same as a regular text message
Maximum height of a single preview: 1/3 of the screen height
Maximum height of all previews: 2/3 of the screen height

What's wrong

Previews are cut:

Expected: preview of 6 images in chat
Actual: 4 images shown and 2 are cut

Send image on mobile ⟶ With keyboard opened, 1/3 of the screen height is smaller then without keyboard (go back to chat list and then in chat again).

Proposed solution

To calculate 1/3 and 2/3, use device's "screen height" but not "input view" height (independent from keyboard, etc.)
When image count > 3:
- Use max width for message with images same as max width for text message (currently it's smaller)
- Place up to 3 previews in a row (currently, it's 2) when it's enough space (~120 * 3)
  - Min preview width and height is 120 px (set as const)
  - We can cut (zoom) previews if they are rectangle
- Desired but not max message height is 2/3 of screen (not to cut previews if message includes many images)

metalisk · 2025-10-20T08:48:11Z

31. Wrong scroll position after initial image sending to a static chat
May be connected with "18. Make previews size smaller for better looking"

Open app and create an account, log in
Get free ADM coins
Open browser's debugger and set Mobile ⟶ iPhone SE
Open chat with Exchange
Send an image ⟶ Exchange replies

Expected: Scroll position is in the bottom after sending an image (1) and after receiving reply (2)
Actual: Wrong scroll position

Video:

bad-scroll.mov

metalisk · 2025-10-20T09:06:05Z

⚠️ Styling changes: 13- Update how files are show in the Chat list and when quoted

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

Add spaces after file/image count.

metalisk · 2025-10-20T09:10:39Z

✅ Test passed: 14. Hide/Deactivate "Copy" button when the attachment is without a message

metalisk · 2025-10-20T10:45:25Z

❌ Test failed: 5. Validate transaction structure using Zod

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

If the transaction doesn’t match the structure described in AIP-18 it must be marked as “Unsupported“.

Test case:

Log in test account
Go to chat with U4251902088204123161 "keyone test"
Check messages ⟶ Message mistakenly treated as not supported.

To reproduce, quote the very first message in this chat, and reply with attaching a file.

Sender: Message is good. After re-login: Message mistakenly treated as not supported.
Recipient: Message mistakenly treated as not supported.

metalisk · 2025-10-20T10:58:19Z

✅ Test passed:

15. Show the previews immediately with a spinner while the files are being encrypted
26. Do not send message until the file is loaded

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS, Web app in Chrome on Android, Android app, Web app in Safari on iPhone/iOS

After choosing a file:

It's immediately appears in the message field
It has spinner while it's reading and encrypting
It's not possible to send a message until files are encrypted and prepared — "Send" button is not active, and Enter key does nothing
Once files are prepared, they are ready to send

⟶

metalisk · 2025-10-20T11:30:48Z

✅ Test passed:

25. Fix spinner bug
27. Check fallback for upload progress

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS, Web app in Safari on iPhone/iOS

After sending files:

They immediately appear in the message field
They have progress bars while they are uploading
App uploads them one by one
Once files are uploaded, app sends a message

metalisk · 2025-10-20T11:46:26Z

Downloading files don't have clear UX on mobile devices

Environment: Android app, Web app in Safari on iPhone/iOS

How it's in Android app:

Log in test account
Go to chat with files
Tap on a file
Tap on "Download" button ⟶ Spinner in the button + "Downloading file" popup ⟶ "File is downloaded" popup with a button to show Downloads folder

Compare how it's in Chrome on Android:

Tap on "Download" button ⟶ Spinner in the button (nothing more, no popup) ⟶ Dialog how to open a file

Can we do in similar way, with a possibility to show Downloads folder?

Same is in the Web app in Safari on iPhone/iOS — can we provide a possibility to show Downloads folder?

metalisk · 2025-10-20T12:02:17Z

⚠️ Styling changes: 16. Check file size before and after encryption

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

Expected: 250

@skranee

Please describe how to test "16. Check file size before and after encryption" and provide link to code changes for this part.

metalisk · 2025-10-20T12:03:43Z

"17. Fix scroll when adding/removing attached files" is probably connected with "31. Wrong scroll position after initial image sending to a static chat"

metalisk · 2025-10-20T12:09:49Z

✅ Test passed: 19. Retry downloading images/files

Log in test account
Block all IPFS nodes
Go to chat with files ⟶ Files are not available

Tap on "Download arrow"
Images are downloaded and appear in chat

metalisk · 2025-10-20T12:16:11Z

✅ Test passed:

20. Performance improvements
21. Show preview instead of a full image in the chat

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS, Web app in Safari on iPhone/iOS

When Full media auto-download are not enabled in settings, app downloads only previews. Full media available by request.
App works fast.

metalisk · 2025-10-20T12:17:48Z

@skranee

Please describe how to test "22. Better native support for download/preview files on Android" and provide link to code changes for this part.

Is it connected with "32. Downloading files don't have clear UX on mobile devices"?

metalisk · 2025-10-20T12:18:50Z

@skranee

Please describe how to test "23. Get CID from IPFS instead of generating it locally" and provide link to code changes for this part.

metalisk · 2025-10-20T12:54:11Z

✅ Test passed: 24. Move the download tasks to the background instead of running them only while the modal is open

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS, Android app

Log in test account
Go to chat with files
Tap on a file
Tap on "Download" button ⟶ Spinner in the button
Go to another chat instantly
Minimize browser / App ⟶ File is downloaded in the background

Same with images, app downloads them in the background.

metalisk · 2025-10-20T12:56:31Z

✅ Test passed: 28. Now 250mb is a barrier for every single file instead of combination of all files attached to the message

Test link: https://adamant-2etqu1ijp-adamant-team.vercel.app/
Environment: Chrome on macOS

Added and sent 4 files ~270 MB total.

⟶

adamant-al · 2026-01-25T13:44:49Z

@skranee Can we move forward with this?

skranee added 10 commits July 27, 2025 03:56

fix: attachments not downloading except for the first one

d6b6f4c

Merge branch 'fix/attachments-upload' into feat/attachment-improvements

1d5392a

Merge branch 'dev' into feat/attachment-improvements

85c00e5

resolve conflicts

aae67f7

Merge branch 'dev' into feat/attachment-improvements

7618fdc

Merge branch 'dev' into feat/attachment-improvements

f8d14ba

Merge branch 'dev' into feat/attachment-improvements

bb673f2

Merge branch 'dev' into feat/attachment-improvements

4053c7b

Merge branch 'dev' into feat/attachment-improvements

c98c660

feat: attachment improvements

a0aeb1d

skranee requested review from a team, Linhead, S-FrontendDev, adamant-al and kalpovskii August 31, 2025 20:24

skranee self-assigned this Aug 31, 2025

skranee temporarily deployed to testing August 31, 2025 20:24 — with GitHub Actions Inactive

skranee marked this pull request as draft August 31, 2025 20:27

skranee added 2 commits September 4, 2025 13:31

chore: resolve conflicts

71c809b

feat: tasks finished and most of bugs fixed

d2e225f

skranee temporarily deployed to testing September 8, 2025 01:14 — with GitHub Actions Inactive

vercel bot deployed to Preview September 8, 2025 01:15 View deployment

skranee added 2 commits September 10, 2025 13:18

Merge branch 'dev' into feat/attachment-improvements

608f48d

fix: modal window bug and chat menu buttons for different devices

4f1740e

skranee temporarily deployed to testing September 11, 2025 16:16 — with GitHub Actions Inactive

skranee marked this pull request as ready for review September 11, 2025 16:17

vercel bot deployed to Preview September 11, 2025 16:18 View deployment

S-FrontendDev reviewed Sep 15, 2025

View reviewed changes

src/components/AChat/AChatAttachment/AChatAttachment.vue Outdated Show resolved Hide resolved

Uh oh!

Comments

Conversation

skranee commented Aug 31, 2025 • edited by metalisk Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Currently has issues

Uh oh!

vercel bot commented Aug 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

al-onyxprotocol commented Oct 15, 2025

Uh oh!

al-onyxprotocol commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

al-onyxprotocol commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adamant-al commented Oct 16, 2025

Uh oh!

adamant-al commented Oct 16, 2025

Uh oh!

adamant-al commented Oct 16, 2025

Uh oh!

adamant-al commented Oct 16, 2025

Proposed scenario

When unable to download a file

When all IPFS nodes are disabled by user

Preview of unavailable images

Additionally

Texts

Uh oh!

metalisk commented Oct 20, 2025

Uh oh!

metalisk commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metalisk commented Oct 20, 2025

Uh oh!

metalisk commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metalisk commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metalisk commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metalisk commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's wrong

Proposed solution

Uh oh!

metalisk commented Oct 20, 2025

Uh oh!

metalisk commented Oct 20, 2025

Uh oh!

metalisk commented Oct 20, 2025

Uh oh!

metalisk commented Oct 20, 2025

Uh oh!

metalisk commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metalisk commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metalisk commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metalisk commented Oct 20, 2025

Uh oh!

metalisk commented Oct 20, 2025

Uh oh!

metalisk commented Oct 20, 2025

skranee commented Aug 31, 2025 •

edited by metalisk

Loading

vercel bot commented Aug 31, 2025 •

edited

Loading

github-actions bot commented Aug 31, 2025 •

edited

Loading

al-onyxprotocol commented Oct 15, 2025 •

edited

Loading

al-onyxprotocol commented Oct 15, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading

metalisk commented Oct 20, 2025 •

edited

Loading