From c4a48d510b52c3908569c97e85e84696de164bcb Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Thu, 5 Jun 2025 00:00:36 +0200
Subject: [PATCH] feat: Add download button for file attachments

---
 .../attachments/Attachments/ItemContent.jsx   | 53 +++++++++++++------
 .../Attachments/ItemContent.module.scss       |  4 ++
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/client/src/components/attachments/Attachments/ItemContent.jsx b/client/src/components/attachments/Attachments/ItemContent.jsx
index 2312f12c..33389bf5 100644
--- a/client/src/components/attachments/Attachments/ItemContent.jsx
+++ b/client/src/components/attachments/Attachments/ItemContent.jsx
@@ -54,6 +54,19 @@ const ItemContent = React.forwardRef(({ id, onOpen }, ref) => {
     }
   }, [onOpen, attachment.data]);
 
+  const handleDownloadClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+
+      const linkElement = document.createElement('a');
+      linkElement.href = attachment.data.url;
+      linkElement.download = attachment.data.filename;
+      linkElement.target = '_blank';
+      linkElement.click();
+    },
+    [attachment.data.url, attachment.data.filename],
+  );
+
   const handleToggleCoverClick = useCallback(
     (event) => {
       event.stopPropagation();
@@ -114,25 +127,31 @@ const ItemContent = React.forwardRef(({ id, onOpen }, ref) => {
         <span className={styles.information}>
           <TimeAgo date={attachment.createdAt} />
         </span>
-        {attachment.type === AttachmentTypes.FILE && attachment.data.image && canEdit && (
+        {attachment.type === AttachmentTypes.FILE && (
           <span className={styles.options}>
-            <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
-              <Icon
-                name="window maximize outline"
-                flipped="vertically"
-                size="small"
-                className={styles.optionIcon}
-              />
-              <span className={styles.optionText}>
-                {isCover
-                  ? t('action.removeCover', {
-                      context: 'title',
-                    })
-                  : t('action.makeCover', {
-                      context: 'title',
-                    })}
-              </span>
+            <button type="button" className={styles.option} onClick={handleDownloadClick}>
+              <Icon name="download" size="small" className={styles.optionIcon} />
+              <span className={styles.optionText}>Download</span>
             </button>
+            {attachment.data.image && canEdit && (
+              <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
+                <Icon
+                  name="window maximize outline"
+                  flipped="vertically"
+                  size="small"
+                  className={styles.optionIcon}
+                />
+                <span className={styles.optionText}>
+                  {isCover
+                    ? t('action.removeCover', {
+                        context: 'title',
+                      })
+                    : t('action.makeCover', {
+                        context: 'title',
+                      })}
+                </span>
+              </button>
+            )}
           </span>
         )}
       </div>
diff --git a/client/src/components/attachments/Attachments/ItemContent.module.scss b/client/src/components/attachments/Attachments/ItemContent.module.scss
index 9b7b01f7..83ba13fe 100644
--- a/client/src/components/attachments/Attachments/ItemContent.module.scss
+++ b/client/src/components/attachments/Attachments/ItemContent.module.scss
@@ -52,6 +52,10 @@
     outline: none;
     padding: 0;
 
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+
     &:hover {
       color: #172b4d;
     }