feat: release Files view (#1236)

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -34,6 +34,12 @@ const FileMenuOptions: FunctionComponent<Props> = ({
   const { handleFileAction } = filesController
 
   const hasProtectedFiles = useMemo(() => selectedFiles.some((file) => file.protected), [selectedFiles])
+  const hasSelectedMultipleFiles = useMemo(() => selectedFiles.length > 1, [selectedFiles.length])
+
+  const totalFileSize = useMemo(
+    () => selectedFiles.map((file) => file.decryptedSize).reduce((prev, next) => prev + next, 0),
+    [selectedFiles],
+  )
 
   const onPreview = useCallback(() => {
     void handleFileAction({
@@ -149,16 +155,17 @@ const FileMenuOptions: FunctionComponent<Props> = ({
         <span className="text-danger">Delete permanently</span>
       </button>
       <HorizontalSeparator classes="my-2" />
-      {selectedFiles.length === 1 && (
-        <div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
+      <div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
+        {!hasSelectedMultipleFiles && (
           <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>
+          <span className="font-semibold">{hasSelectedMultipleFiles ? 'Total Size:' : 'Size:'}</span>{' '}
+          {formatSizeToReadableString(totalFileSize)}
         </div>
-      )}
+      </div>
     </>
   )
 }