From 50c024e643b4c34b4d5700ee678cf1c92d1bd3cc Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 7 Jul 2022 15:51:16 +0530
Subject: [PATCH] feat: add selected file size in context menu (#1224)

---
 .../Components/AttachedFilesPopover/PopoverFileSubmenu.tsx  | 6 +++++-
 .../Components/FileContextMenu/FileMenuOptions.tsx          | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
index 2ed4ce0cb..a68f10000 100644
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
@@ -8,6 +8,7 @@ import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { PopoverFileSubmenuProps } from './PopoverFileItemProps'
 import { PopoverFileItemActionType } from './PopoverFileItemAction'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
 
 const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
   file,
@@ -188,9 +189,12 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
                 <span className="text-danger">Delete permanently</span>
               </button>
               <div className="px-3 py-1 text-xs font-medium text-neutral">
-                <div>
+                <div className="mb-1">
                   <span className="font-semibold">File ID:</span> {file.uuid}
                 </div>
+                <div>
+                  <span className="font-semibold">Size:</span> {formatSizeToReadableString(file.decryptedSize)}
+                </div>
               </div>
             </>
           )}
diff --git a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx b/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
index 94fe4d317..795778698 100644
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
@@ -7,6 +7,7 @@ import { observer } from 'mobx-react-lite'
 import { FilesController } from '@/Controllers/FilesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
 
 type Props = {
   closeMenu: () => void
@@ -149,9 +150,12 @@ const FileMenuOptions: FunctionComponent<Props> = ({
       </button>
       {selectedFiles.length === 1 && (
         <div className="px-3 pt-1.5 pb-0.5 text-xs font-medium text-neutral">
-          <div>
+          <div className="mb-1">
             <span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}
           </div>
+          <div>
+            <span className="font-semibold">Size:</span> {formatSizeToReadableString(selectedFiles[0].decryptedSize)}
+          </div>
         </div>
       )}
     </>