feat: add file information panel to file preview modal (#965)

app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx

@@ -0,0 +1,37 @@
+import { formatSizeToReadableString } from '@standardnotes/filepicker';
+import { SNFile } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { Icon } from '../Icon';
+
+type Props = {
+  file: SNFile;
+};
+
+export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
+  return (
+    <div className="flex flex-col min-w-70 p-4 border-0 border-l-1px border-solid border-main">
+      <div className="flex items-center mb-4">
+        <Icon type="info" className="mr-2" />
+        <div className="font-semibold">File information</div>
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Type:</span> {file.mimeType}
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Size:</span>{' '}
+        {formatSizeToReadableString(file.size)}
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Created:</span>{' '}
+        {file.created_at.toLocaleString()}
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Last Modified:</span>{' '}
+        {file.userModifiedDate.toLocaleString()}
+      </div>
+      <div>
+        <span className="font-semibold">File ID:</span> {file.uuid}
+      </div>
+    </div>
+  );
+};

app/assets/javascripts/components/Files/FilePreviewModal.tsx

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { getFileIconComponent } from '../AttachedFilesPopover/PopoverFileItem';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
+import { FilePreviewInfoPanel } from './FilePreviewInfoPanel';
 import { isFileTypePreviewable } from './isFilePreviewable';
 
 type Props = {
@@ -40,6 +41,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
   const [objectUrl, setObjectUrl] = useState<string>();
   const [isFilePreviewable, setIsFilePreviewable] = useState(false);
   const [isLoadingFile, setIsLoadingFile] = useState(false);
+  const [showFileInfoPanel, setShowFileInfoPanel] = useState(false);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
 
   const getObjectUrl = useCallback(async () => {
@@ -109,6 +111,12 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
             <span className="ml-3 font-medium">{file.name}</span>
           </div>
           <div className="flex items-center">
+            <button
+              className="flex p-1.5 mr-4 bg-transparent hover:bg-contrast border-solid border-main border-1 cursor-pointer rounded"
+              onClick={() => setShowFileInfoPanel((show) => !show)}
+            >
+              <Icon type="info" className="color-neutral" />
+            </button>
             {objectUrl && (
               <Button
                 variant="primary"
@@ -126,13 +134,14 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
               ref={closeButtonRef}
               onClick={onDismiss}
               aria-label="Close modal"
-              className="flex p-1 bg-transparent border-0 cursor-pointer"
+              className="flex p-1 bg-transparent hover:bg-contrast border-0 cursor-pointer rounded"
             >
               <Icon type="close" className="color-neutral" />
             </button>
           </div>
         </div>
-        <div className="flex flex-grow items-center justify-center min-h-0 overflow-auto">
+        <div className="flex flex-grow min-h-0 overflow-auto">
+          <div className="flex flex-grow items-center justify-center">
             {objectUrl ? (
               getPreviewComponentForFile(file, objectUrl)
             ) : isLoadingFile ? (
@@ -146,8 +155,8 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                 {isFilePreviewable ? (
                   <>
                     <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
-                    There was an error loading the file. Try again, or download
+                      There was an error loading the file. Try again, or
-                    it and open it using another application.
+                      download the file and open it using another application.
                     </div>
                     <div className="flex items-center">
                       <Button
@@ -188,6 +197,8 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
               </div>
             )}
           </div>
+          {showFileInfoPanel && <FilePreviewInfoPanel file={file} />}
+        </div>
       </DialogContent>
     </DialogOverlay>
   );

app/assets/stylesheets/_sn.scss

@@ -473,6 +473,10 @@
   border-right-width: 1px;
 }
 
+.sn-component .border-l-1px {
+  border-left-width: 1px;
+}
+
 .sn-component .border-t-1px {
   border-top-width: 1px;
 }
@@ -493,6 +497,10 @@
   padding: 0.25rem;
 }
 
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-8 {
   padding: 2rem;
 }