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,67 +134,70 @@ 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">
-          {objectUrl ? (
+          <div className="flex flex-grow items-center justify-center">
-            getPreviewComponentForFile(file, objectUrl)
+            {objectUrl ? (
-          ) : isLoadingFile ? (
+              getPreviewComponentForFile(file, objectUrl)
-            <div className="sk-spinner w-5 h-5 spinner-info"></div>
+            ) : isLoadingFile ? (
-          ) : (
+              <div className="sk-spinner w-5 h-5 spinner-info"></div>
-            <div className="flex flex-col items-center">
+            ) : (
-              <NoPreviewIllustration className="w-30 h-30 mb-4" />
+              <div className="flex flex-col items-center">
-              <div className="font-bold text-base mb-2">
+                <NoPreviewIllustration className="w-30 h-30 mb-4" />
-                This file can't be previewed.
+                <div className="font-bold text-base mb-2">
-              </div>
+                  This file can't be previewed.
-              {isFilePreviewable ? (
+                </div>
-                <>
+                {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
+                    <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
-                    it and open it using another application.
+                      There was an error loading the file. Try again, or
-                  </div>
+                      download the file and open it using another application.
-                  <div className="flex items-center">
+                    </div>
+                    <div className="flex items-center">
+                      <Button
+                        variant="primary"
+                        className="mr-3"
+                        onClick={() => {
+                          getObjectUrl();
+                        }}
+                      >
+                        Try again
+                      </Button>
+                      <Button
+                        variant="normal"
+                        onClick={() => {
+                          application.getAppState().files.downloadFile(file);
+                        }}
+                      >
+                        Download
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
+                      To view this file, download it and open it using another
+                      application.
+                    </div>
                     <Button
                       variant="primary"
-                      className="mr-3"
-                      onClick={() => {
-                        getObjectUrl();
-                      }}
-                    >
-                      Try again
-                    </Button>
-                    <Button
-                      variant="normal"
                       onClick={() => {
                         application.getAppState().files.downloadFile(file);
                       }}
                     >
                       Download
                     </Button>
-                  </div>
+                  </>
-                </>
+                )}
-              ) : (
+              </div>
-                <>
+            )}
-                  <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
+          </div>
-                    To view this file, download it and open it using another
+          {showFileInfoPanel && <FilePreviewInfoPanel file={file} />}
-                    application.
-                  </div>
-                  <Button
-                    variant="primary"
-                    onClick={() => {
-                      application.getAppState().files.downloadFile(file);
-                    }}
-                  >
-                    Download
-                  </Button>
-                </>
-              )}
-            </div>
-          )}
         </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;
 }