fix: lazy load embedded files in super editor (#2043)

packages/web/src/javascripts/Components/FilePreview/FilePreview.tsx

@@ -6,7 +6,8 @@ import Spinner from '@/Components/Spinner/Spinner'
 import FilePreviewError from './FilePreviewError'
 import { isFileTypePreviewable } from './isFilePreviewable'
 import PreviewComponent from './PreviewComponent'
-import ProtectedItemOverlay from '../ProtectedItemOverlay/ProtectedItemOverlay'
+import Button from '../Button/Button'
+import { ProtectedIllustration } from '@standardnotes/icons'
 
 type Props = {
   application: WebApplication
@@ -77,13 +78,28 @@ const FilePreview = ({ file, application }: Props) => {
   }, [application.files, downloadedBytes, file, isFilePreviewable, isAuthorized])
 
   if (!isAuthorized) {
+    const hasProtectionSources = application.hasProtectionSources()
+
     return (
-      <ProtectedItemOverlay
-        showAccountMenu={application.showAccountMenu}
-        itemType={'file'}
-        onViewItem={() => application.protections.authorizeItemAccess(file)}
-        hasProtectionSources={application.hasProtectionSources()}
-      />
+      <div className="flex flex-grow flex-col items-center justify-center">
+        <ProtectedIllustration className="mb-4 h-30 w-30" />
+        <div className="mb-2 text-base font-bold">This file is protected.</div>
+        <p className="max-w-[35ch] text-center text-sm text-passive-0">
+          {hasProtectionSources
+            ? 'Authenticate to view this file.'
+            : 'Add a passcode or create an account to require authentication to view this file.'}
+        </p>
+        <div className="mt-3 flex gap-3">
+          {!hasProtectionSources && (
+            <Button primary small onClick={() => application.showAccountMenu()}>
+              Open account menu
+            </Button>
+          )}
+          <Button primary onClick={() => application.protections.authorizeItemAccess(file)}>
+            {hasProtectionSources ? 'Authenticate' : 'View file'}
+          </Button>
+        </div>
+      </div>
     )
   }
 

packages/web/src/javascripts/Components/FilePreview/FilePreviewError.tsx

@@ -17,7 +17,7 @@ const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCa
       <div className="mb-2 text-base font-bold">This file can't be previewed.</div>
       {isFilePreviewable ? (
         <>
-          <div className="max-w-35ch mb-4 text-center text-sm text-passive-0">
+          <div className="mb-4 max-w-[35ch] text-center text-sm text-passive-0">
             There was an error loading the file. Try again, or download the file and open it using another application.
           </div>
           <div className="flex items-center">
@@ -41,7 +41,7 @@ const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCa
         </>
       ) : (
         <>
-          <div className="max-w-35ch mb-4 text-center text-sm text-passive-0">
+          <div className="mb-4 max-w-[35ch] text-center text-sm text-passive-0">
             To view this file, download it and open it using another application.
           </div>
           <Button