From 369530b0193eb344e0bf83776ff1e330113ebb88 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 16:18:55 +0530
Subject: [PATCH 01/24] feat: add file view

---
 .../Components/FilePreview/FilePreview.tsx    |  81 ++++++++++++++
 .../FilePreview/FilePreviewError.tsx          |  62 +++++++++++
 .../FilePreview/PreviewComponent.tsx          |  50 +++++++++
 .../Components/FilePreview/TextPreview.tsx    |  26 +++++
 .../FilePreview/isFilePreviewable.ts          |  15 +++
 .../Components/FileView/FileView.tsx          | 101 ++++++++++++++++++
 .../NoteGroupView/NoteGroupView.tsx           |  40 +++++--
 7 files changed, 367 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/javascripts/Components/FilePreview/FilePreview.tsx
 create mode 100644 app/assets/javascripts/Components/FilePreview/FilePreviewError.tsx
 create mode 100644 app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
 create mode 100644 app/assets/javascripts/Components/FilePreview/TextPreview.tsx
 create mode 100644 app/assets/javascripts/Components/FilePreview/isFilePreviewable.ts
 create mode 100644 app/assets/javascripts/Components/FileView/FileView.tsx

diff --git a/app/assets/javascripts/Components/FilePreview/FilePreview.tsx b/app/assets/javascripts/Components/FilePreview/FilePreview.tsx
new file mode 100644
index 00000000000..bbea2383bd7
--- /dev/null
+++ b/app/assets/javascripts/Components/FilePreview/FilePreview.tsx
@@ -0,0 +1,81 @@
+import { WebApplication } from '@/Application/Application'
+import { concatenateUint8Arrays } from '@/Utils'
+import { FileItem } from '@standardnotes/snjs'
+import { useEffect, useMemo, useState } from 'react'
+import FilePreviewError from './FilePreviewError'
+import { isFileTypePreviewable } from './isFilePreviewable'
+import PreviewComponent from './PreviewComponent'
+
+type Props = {
+  application: WebApplication
+  file: FileItem
+}
+
+const FilePreview = ({ file, application }: Props) => {
+  const isFilePreviewable = useMemo(() => {
+    return isFileTypePreviewable(file.mimeType)
+  }, [file.mimeType])
+
+  const [isDownloading, setIsDownloading] = useState(false)
+  const [downloadProgress, setDownloadProgress] = useState(0)
+  const [downloadedBytes, setDownloadedBytes] = useState<Uint8Array>()
+
+  useEffect(() => {
+    if (!isFilePreviewable) {
+      setIsDownloading(false)
+      setDownloadProgress(0)
+      setDownloadedBytes(undefined)
+      return
+    }
+
+    const downloadFileForPreview = async () => {
+      if (downloadedBytes) {
+        return
+      }
+
+      setIsDownloading(true)
+
+      try {
+        const chunks: Uint8Array[] = []
+        setDownloadProgress(0)
+        await application.files.downloadFile(file, async (decryptedChunk, progress) => {
+          chunks.push(decryptedChunk)
+          if (progress) {
+            setDownloadProgress(Math.round(progress.percentComplete))
+          }
+        })
+        const finalDecryptedBytes = concatenateUint8Arrays(chunks)
+        setDownloadedBytes(finalDecryptedBytes)
+      } catch (error) {
+        console.error(error)
+      } finally {
+        setIsDownloading(false)
+      }
+    }
+
+    void downloadFileForPreview()
+  }, [application.files, downloadedBytes, file, isFilePreviewable])
+
+  return isDownloading ? (
+    <div className="flex flex-col justify-center items-center flex-grow">
+      <div className="flex items-center">
+        <div className="sk-spinner w-5 h-5 spinner-info mr-3"></div>
+        <div className="text-base font-semibold">{downloadProgress}%</div>
+      </div>
+      <span className="mt-3">Loading file...</span>
+    </div>
+  ) : downloadedBytes ? (
+    <PreviewComponent file={file} bytes={downloadedBytes} />
+  ) : (
+    <FilePreviewError
+      application={application}
+      file={file}
+      tryAgainCallback={() => {
+        setDownloadedBytes(undefined)
+      }}
+      isFilePreviewable={isFilePreviewable}
+    />
+  )
+}
+
+export default FilePreview
diff --git a/app/assets/javascripts/Components/FilePreview/FilePreviewError.tsx b/app/assets/javascripts/Components/FilePreview/FilePreviewError.tsx
new file mode 100644
index 00000000000..ca0013af6d5
--- /dev/null
+++ b/app/assets/javascripts/Components/FilePreview/FilePreviewError.tsx
@@ -0,0 +1,62 @@
+import { WebApplication } from '@/Application/Application'
+import { NoPreviewIllustration } from '@standardnotes/icons'
+import { FileItem } from '@standardnotes/snjs'
+import Button from '../Button/Button'
+
+type Props = {
+  application: WebApplication
+  file: FileItem
+  isFilePreviewable: boolean
+  tryAgainCallback: () => void
+}
+
+const FilePreviewError = ({ application, file, isFilePreviewable, tryAgainCallback }: Props) => {
+  return (
+    <div className="flex flex-col justify-center items-center flex-grow">
+      <NoPreviewIllustration className="w-30 h-30 mb-4" />
+      <div className="font-bold text-base mb-2">This file can't be previewed.</div>
+      {isFilePreviewable ? (
+        <>
+          <div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
+            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">
+            <Button
+              variant="primary"
+              className="mr-3"
+              onClick={() => {
+                tryAgainCallback()
+              }}
+            >
+              Try again
+            </Button>
+            <Button
+              variant="normal"
+              onClick={() => {
+                application.getViewControllerManager().filesController.downloadFile(file).catch(console.error)
+              }}
+            >
+              Download
+            </Button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
+            To view this file, download it and open it using another application.
+          </div>
+          <Button
+            variant="primary"
+            onClick={() => {
+              application.getViewControllerManager().filesController.downloadFile(file).catch(console.error)
+            }}
+          >
+            Download
+          </Button>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default FilePreviewError
diff --git a/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx b/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
new file mode 100644
index 00000000000..ad8526df81d
--- /dev/null
+++ b/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
@@ -0,0 +1,50 @@
+import { FileItem } from '@standardnotes/snjs'
+import { FunctionComponent, useEffect, useState } from 'react'
+import ImagePreview from './ImagePreview'
+import { PreviewableTextFileTypes } from './isFilePreviewable'
+import TextPreview from './TextPreview'
+
+type Props = {
+  file: FileItem
+  bytes: Uint8Array
+}
+
+const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
+  const [objectUrl, setObjectUrl] = useState('')
+
+  useEffect(() => {
+    if (!objectUrl) {
+      setObjectUrl(
+        URL.createObjectURL(
+          new Blob([bytes], {
+            type: file.mimeType,
+          }),
+        ),
+      )
+    }
+
+    return () => {
+      URL.revokeObjectURL(objectUrl)
+    }
+  }, [bytes, file.mimeType, objectUrl])
+
+  if (file.mimeType.startsWith('image/')) {
+    return <ImagePreview objectUrl={objectUrl} />
+  }
+
+  if (file.mimeType.startsWith('video/')) {
+    return <video className="w-full h-full" src={objectUrl} controls autoPlay />
+  }
+
+  if (file.mimeType.startsWith('audio/')) {
+    return <audio src={objectUrl} controls />
+  }
+
+  if (PreviewableTextFileTypes.includes(file.mimeType)) {
+    return <TextPreview bytes={bytes} />
+  }
+
+  return <object className="w-full h-full" data={objectUrl} />
+}
+
+export default PreviewComponent
diff --git a/app/assets/javascripts/Components/FilePreview/TextPreview.tsx b/app/assets/javascripts/Components/FilePreview/TextPreview.tsx
new file mode 100644
index 00000000000..41a97622cf5
--- /dev/null
+++ b/app/assets/javascripts/Components/FilePreview/TextPreview.tsx
@@ -0,0 +1,26 @@
+import { ElementIds } from '@/Constants/ElementIDs'
+import { useMemo } from 'react'
+
+type Props = {
+  bytes: Uint8Array
+}
+
+const TextPreview = ({ bytes }: Props) => {
+  const text = useMemo(() => {
+    const textDecoder = new TextDecoder()
+    return textDecoder.decode(bytes)
+  }, [bytes])
+
+  return (
+    <textarea
+      autoComplete="off"
+      className="flex-grow font-editor focus:shadow-none focus:outline-none"
+      dir="auto"
+      id={ElementIds.FileTextPreview}
+      defaultValue={text}
+      readOnly={true}
+    ></textarea>
+  )
+}
+
+export default TextPreview
diff --git a/app/assets/javascripts/Components/FilePreview/isFilePreviewable.ts b/app/assets/javascripts/Components/FilePreview/isFilePreviewable.ts
new file mode 100644
index 00000000000..2b0615b0cc8
--- /dev/null
+++ b/app/assets/javascripts/Components/FilePreview/isFilePreviewable.ts
@@ -0,0 +1,15 @@
+export const PreviewableTextFileTypes = ['text/plain', 'application/json']
+
+export const isFileTypePreviewable = (fileType: string) => {
+  const isImage = fileType.startsWith('image/')
+  const isVideo = fileType.startsWith('video/')
+  const isAudio = fileType.startsWith('audio/')
+  const isPdf = fileType === 'application/pdf'
+  const isText = PreviewableTextFileTypes.includes(fileType)
+
+  if (isImage || isVideo || isAudio || isText || isPdf) {
+    return true
+  }
+
+  return false
+}
diff --git a/app/assets/javascripts/Components/FileView/FileView.tsx b/app/assets/javascripts/Components/FileView/FileView.tsx
new file mode 100644
index 00000000000..056896a6ac9
--- /dev/null
+++ b/app/assets/javascripts/Components/FileView/FileView.tsx
@@ -0,0 +1,101 @@
+import { WebApplication } from '@/Application/Application'
+import { ElementIds } from '@/Constants/ElementIDs'
+import { KeyboardKey } from '@/Services/IOService'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { FileItem } from '@standardnotes/snjs/dist/@types'
+import { observer } from 'mobx-react-lite'
+import { ChangeEventHandler, KeyboardEventHandler, useCallback, useEffect, useState } from 'react'
+import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
+import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
+import FilePreview from '@/Components/FilePreview/FilePreview'
+import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
+
+type Props = {
+  application: WebApplication
+  viewControllerManager: ViewControllerManager
+  file: FileItem
+}
+
+const FileView = observer(({ application, viewControllerManager, file }: Props) => {
+  const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(async () => {
+    /** @TODO */
+  }, [])
+
+  const onTitleEnter: KeyboardEventHandler<HTMLInputElement> = useCallback(({ key, currentTarget }) => {
+    if (key !== KeyboardKey.Enter) {
+      return
+    }
+
+    currentTarget.blur()
+  }, [])
+
+  return (
+    <div className="sn-component section editor" aria-label="File">
+      <div className="flex flex-col">
+        <div className="content-title-bar section-title-bar w-full" id="file-title-bar">
+          <div className="flex items-center justify-between h-8">
+            <div className="flex-grow">
+              <div className="title overflow-auto">
+                <input
+                  className="input"
+                  id={ElementIds.FileTitleEditor}
+                  onChange={onTitleChange}
+                  onFocus={(event) => {
+                    event.target.select()
+                  }}
+                  onKeyUp={onTitleEnter}
+                  spellCheck={false}
+                  value={file.name}
+                  autoComplete="off"
+                />
+              </div>
+            </div>
+            <div className="flex items-center">
+              <div className="mr-3">
+                <AttachedFilesButton application={application} viewControllerManager={viewControllerManager} />
+              </div>
+              <FileOptionsPanel
+                filesController={viewControllerManager.filesController}
+                selectionController={viewControllerManager.selectionController}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <FilePreview file={file} application={application} key={file.uuid} />
+    </div>
+  )
+})
+
+const FileViewWithProtectedOverlay = ({ application, viewControllerManager, file }: Props) => {
+  const [shouldShowProtectedOverlay, setShouldShowProtectedOverlay] = useState(
+    file.protected && !application.hasProtectionSources(),
+  )
+
+  useEffect(() => {
+    setShouldShowProtectedOverlay(viewControllerManager.filesController.showProtectedOverlay)
+  }, [viewControllerManager.filesController.showProtectedOverlay])
+
+  const dismissProtectedWarning = useCallback(() => {
+    void viewControllerManager.filesController.toggleFileProtection(file)
+  }, [file, viewControllerManager.filesController])
+
+  return shouldShowProtectedOverlay ? (
+    <div aria-label="Note" className="section editor sn-component">
+      {shouldShowProtectedOverlay && (
+        <div className="h-full flex justify-center items-center">
+          <ProtectedItemOverlay
+            viewControllerManager={viewControllerManager}
+            hasProtectionSources={application.hasProtectionSources()}
+            onViewItem={dismissProtectedWarning}
+            itemType={'note'}
+          />
+        </div>
+      )}
+    </div>
+  ) : (
+    <FileView application={application} viewControllerManager={viewControllerManager} file={file} />
+  )
+}
+
+export default observer(FileViewWithProtectedOverlay)
diff --git a/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx b/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
index 0814233ab91..657fe7b6d87 100644
--- a/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
@@ -1,15 +1,17 @@
-import { NoteViewController } from '@standardnotes/snjs'
+import { FileItem, NoteViewController } from '@standardnotes/snjs'
 import { PureComponent } from '@/Components/Abstract/PureComponent'
 import { WebApplication } from '@/Application/Application'
 import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes'
 import NoteView from '@/Components/NoteView/NoteView'
 import MultipleSelectedFiles from '../MultipleSelectedFiles/MultipleSelectedFiles'
 import { ElementIds } from '@/Constants/ElementIDs'
+import FileView from '@/Components/FileView/FileView'
 
 type State = {
   showMultipleSelectedNotes: boolean
   showMultipleSelectedFiles: boolean
   controllers: NoteViewController[]
+  selectedFile: FileItem | undefined
 }
 
 type Props = {
@@ -25,6 +27,7 @@ class NoteGroupView extends PureComponent<Props, State> {
       showMultipleSelectedNotes: false,
       showMultipleSelectedFiles: false,
       controllers: [],
+      selectedFile: undefined,
     }
   }
 
@@ -56,6 +59,14 @@ class NoteGroupView extends PureComponent<Props, State> {
         })
       }
     })
+
+    this.autorun(() => {
+      if (this.viewControllerManager && this.viewControllerManager.selectionController) {
+        this.setState({
+          selectedFile: this.viewControllerManager.selectionController.selectedFiles[0],
+        })
+      }
+    })
   }
 
   override deinit() {
@@ -79,13 +90,26 @@ class NoteGroupView extends PureComponent<Props, State> {
           />
         )}
 
-        {!this.state.showMultipleSelectedNotes && (
-          <>
-            {this.state.controllers.map((controller) => {
-              return <NoteView key={controller.note.uuid} application={this.application} controller={controller} />
-            })}
-          </>
-        )}
+        {!this.state.showMultipleSelectedNotes &&
+          !this.state.showMultipleSelectedFiles &&
+          this.state.controllers.length > 0 && (
+            <>
+              {this.state.controllers.map((controller) => {
+                return <NoteView key={controller.note.uuid} application={this.application} controller={controller} />
+              })}
+            </>
+          )}
+
+        {!this.state.showMultipleSelectedNotes &&
+          !this.state.showMultipleSelectedFiles &&
+          this.state.controllers.length < 1 &&
+          this.state.selectedFile && (
+            <FileView
+              application={this.application}
+              viewControllerManager={this.viewControllerManager}
+              file={this.state.selectedFile}
+            />
+          )}
       </div>
     )
   }

From 5db4e8c357d6dd00e12b63534e2341fb7eacae8c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 16:19:57 +0530
Subject: [PATCH 02/24] refactor: rename

---
 .../ApplicationView/ApplicationView.tsx       |  2 +-
 .../FilePreviewInfoPanel.tsx                  |  0
 .../FilePreviewModal.tsx                      | 93 ++++---------------
 .../{Files => FilePreview}/ImagePreview.tsx   |  0
 .../Components/Files/PreviewComponent.tsx     | 26 ------
 .../Components/Files/isFilePreviewable.ts     | 12 ---
 .../Components/NoteView/NoteView.tsx          |  9 +-
 .../ProtectedItemOverlay.tsx}                 | 17 ++--
 8 files changed, 34 insertions(+), 125 deletions(-)
 rename app/assets/javascripts/Components/{Files => FilePreview}/FilePreviewInfoPanel.tsx (100%)
 rename app/assets/javascripts/Components/{Files => FilePreview}/FilePreviewModal.tsx (70%)
 rename app/assets/javascripts/Components/{Files => FilePreview}/ImagePreview.tsx (100%)
 delete mode 100644 app/assets/javascripts/Components/Files/PreviewComponent.tsx
 delete mode 100644 app/assets/javascripts/Components/Files/isFilePreviewable.ts
 rename app/assets/javascripts/Components/{ProtectedNoteOverlay/ProtectedNoteOverlay.tsx => ProtectedItemOverlay/ProtectedItemOverlay.tsx} (60%)

diff --git a/app/assets/javascripts/Components/ApplicationView/ApplicationView.tsx b/app/assets/javascripts/Components/ApplicationView/ApplicationView.tsx
index 50a2005ca56..cd3d0086ee5 100644
--- a/app/assets/javascripts/Components/ApplicationView/ApplicationView.tsx
+++ b/app/assets/javascripts/Components/ApplicationView/ApplicationView.tsx
@@ -19,7 +19,7 @@ import PremiumModalProvider from '@/Hooks/usePremiumModal'
 import ConfirmSignoutContainer from '@/Components/ConfirmSignoutModal/ConfirmSignoutModal'
 import TagsContextMenuWrapper from '@/Components/Tags/TagContextMenu'
 import { ToastContainer } from '@standardnotes/stylekit'
-import FilePreviewModalWrapper from '@/Components/Files/FilePreviewModal'
+import FilePreviewModalWrapper from '@/Components/FilePreview/FilePreviewModal'
 import ContentListView from '@/Components/ContentListView/ContentListView'
 import FileContextMenuWrapper from '@/Components/FileContextMenu/FileContextMenu'
 import PermissionsModalWrapper from '@/Components/PermissionsModal/PermissionsModalWrapper'
diff --git a/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx b/app/assets/javascripts/Components/FilePreview/FilePreviewInfoPanel.tsx
similarity index 100%
rename from app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
rename to app/assets/javascripts/Components/FilePreview/FilePreviewInfoPanel.tsx
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
similarity index 70%
rename from app/assets/javascripts/Components/Files/FilePreviewModal.tsx
rename to app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
index 2798e4500d3..a7b1d311552 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -2,7 +2,6 @@ import { WebApplication } from '@/Application/Application'
 import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
 import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { addToast, ToastType } from '@standardnotes/stylekit'
-import { NoPreviewIllustration } from '@standardnotes/icons'
 import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { getFileIconComponent } from '@/Components/AttachedFilesPopover/getFileIconComponent'
 import Button from '@/Components/Button/Button'
@@ -14,6 +13,7 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { KeyboardKey } from '@/Services/IOService'
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
+import FilePreviewError from './FilePreviewError'
 
 type Props = {
   application: WebApplication
@@ -27,7 +27,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
     return null
   }
 
-  const [objectUrl, setObjectUrl] = useState<string>()
+  const [downloadedBytes, setDownloadedBytes] = useState<Uint8Array>()
   const [isFilePreviewable, setIsFilePreviewable] = useState(false)
   const [isLoadingFile, setIsLoadingFile] = useState(true)
   const [fileDownloadProgress, setFileDownloadProgress] = useState(0)
@@ -35,7 +35,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
   const currentFileIdRef = useRef<string>()
   const closeButtonRef = useRef<HTMLButtonElement>(null)
 
-  const getObjectUrl = useCallback(async () => {
+  const downloadFile = useCallback(async () => {
     try {
       const chunks: Uint8Array[] = []
       setFileDownloadProgress(0)
@@ -46,13 +46,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
         }
       })
       const finalDecryptedBytes = concatenateUint8Arrays(chunks)
-      setObjectUrl(
-        URL.createObjectURL(
-          new Blob([finalDecryptedBytes], {
-            type: currentFile.mimeType,
-          }),
-        ),
-      )
+      setDownloadedBytes(finalDecryptedBytes)
     } catch (error) {
       console.error(error)
     } finally {
@@ -69,22 +63,16 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
     setIsFilePreviewable(isPreviewable)
 
     if (!isPreviewable) {
-      setObjectUrl('')
+      setDownloadedBytes(undefined)
       setIsLoadingFile(false)
     }
 
     if (currentFileIdRef.current !== currentFile.uuid && isPreviewable) {
-      getObjectUrl().catch(console.error)
+      downloadFile().catch(console.error)
     }
 
     currentFileIdRef.current = currentFile.uuid
-
-    return () => {
-      if (objectUrl) {
-        URL.revokeObjectURL(objectUrl)
-      }
-    }
-  }, [currentFile, getObjectUrl, objectUrl])
+  }, [currentFile, downloadFile, downloadedBytes])
 
   const keyDownHandler: KeyboardEventHandler = useCallback(
     (event) => {
@@ -161,12 +149,12 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
             >
               <Icon type="info" className="color-neutral" />
             </button>
-            {objectUrl && (
+            {downloadedBytes && (
               <Button
                 variant="primary"
                 className="mr-4"
                 onClick={() => {
-                  application.getArchiveService().downloadData(objectUrl, currentFile.name)
+                  void viewControllerManager.filesController.downloadFile(currentFile)
                   addToast({
                     type: ToastType.Success,
                     message: 'Successfully downloaded file',
@@ -196,60 +184,17 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
                 </div>
                 <span className="mt-3">Loading file...</span>
               </div>
-            ) : objectUrl ? (
-              <PreviewComponent file={currentFile} objectUrl={objectUrl} />
+            ) : downloadedBytes ? (
+              <PreviewComponent file={currentFile} bytes={downloadedBytes} />
             ) : (
-              <div className="flex flex-col items-center">
-                <NoPreviewIllustration className="w-30 h-30 mb-4" />
-                <div className="font-bold text-base mb-2">This file can't be previewed.</div>
-                {isFilePreviewable ? (
-                  <>
-                    <div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
-                      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">
-                      <Button
-                        variant="primary"
-                        className="mr-3"
-                        onClick={() => {
-                          getObjectUrl().catch(console.error)
-                        }}
-                      >
-                        Try again
-                      </Button>
-                      <Button
-                        variant="normal"
-                        onClick={() => {
-                          application
-                            .getViewControllerManager()
-                            .filesController.downloadFile(currentFile)
-                            .catch(console.error)
-                        }}
-                      >
-                        Download
-                      </Button>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
-                      To view this file, download it and open it using another application.
-                    </div>
-                    <Button
-                      variant="primary"
-                      onClick={() => {
-                        application
-                          .getViewControllerManager()
-                          .filesController.downloadFile(currentFile)
-                          .catch(console.error)
-                      }}
-                    >
-                      Download
-                    </Button>
-                  </>
-                )}
-              </div>
+              <FilePreviewError
+                application={application}
+                file={currentFile}
+                isFilePreviewable={isFilePreviewable}
+                tryAgainCallback={() => {
+                  void downloadFile()
+                }}
+              />
             )}
           </div>
           {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
diff --git a/app/assets/javascripts/Components/Files/ImagePreview.tsx b/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx
similarity index 100%
rename from app/assets/javascripts/Components/Files/ImagePreview.tsx
rename to app/assets/javascripts/Components/FilePreview/ImagePreview.tsx
diff --git a/app/assets/javascripts/Components/Files/PreviewComponent.tsx b/app/assets/javascripts/Components/Files/PreviewComponent.tsx
deleted file mode 100644
index b0729bbd09a..00000000000
--- a/app/assets/javascripts/Components/Files/PreviewComponent.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent } from 'react'
-import ImagePreview from './ImagePreview'
-
-type Props = {
-  file: FileItem
-  objectUrl: string
-}
-
-const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl }) => {
-  if (file.mimeType.startsWith('image/')) {
-    return <ImagePreview objectUrl={objectUrl} />
-  }
-
-  if (file.mimeType.startsWith('video/')) {
-    return <video className="w-full h-full" src={objectUrl} controls autoPlay />
-  }
-
-  if (file.mimeType.startsWith('audio/')) {
-    return <audio src={objectUrl} controls />
-  }
-
-  return <object className="w-full h-full" data={objectUrl} />
-}
-
-export default PreviewComponent
diff --git a/app/assets/javascripts/Components/Files/isFilePreviewable.ts b/app/assets/javascripts/Components/Files/isFilePreviewable.ts
deleted file mode 100644
index 23e46379f98..00000000000
--- a/app/assets/javascripts/Components/Files/isFilePreviewable.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const isFileTypePreviewable = (fileType: string) => {
-  const isImage = fileType.startsWith('image/')
-  const isVideo = fileType.startsWith('video/')
-  const isAudio = fileType.startsWith('audio/')
-  const isPdf = fileType === 'application/pdf'
-
-  if (isImage || isVideo || isAudio || isPdf) {
-    return true
-  }
-
-  return false
-}
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 6e04192e9cc..449bc650cd2 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -19,7 +19,7 @@ import { KeyboardModifier, KeyboardKey } from '@/Services/IOService'
 import { STRING_DELETE_PLACEHOLDER_ATTEMPT, STRING_DELETE_LOCKED_ATTEMPT, StringDeleteNote } from '@/Constants/Strings'
 import { confirmDialog } from '@/Services/AlertService'
 import { PureComponent } from '@/Components/Abstract/PureComponent'
-import ProtectedNoteOverlay from '@/Components/ProtectedNoteOverlay/ProtectedNoteOverlay'
+import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
 import PinNoteButton from '@/Components/PinNoteButton/PinNoteButton'
 import NotesOptionsPanel from '@/Components/NotesOptions/NotesOptionsPanel'
 import NoteTagsContainer from '@/Components/NoteTags/NoteTagsContainer'
@@ -871,10 +871,11 @@ class NoteView extends PureComponent<NoteViewProps, State> {
         <div aria-label="Note" className="section editor sn-component">
           {this.state.showProtectedWarning && (
             <div className="h-full flex justify-center items-center">
-              <ProtectedNoteOverlay
+              <ProtectedItemOverlay
                 viewControllerManager={this.viewControllerManager}
                 hasProtectionSources={this.application.hasProtectionSources()}
-                onViewNote={this.dismissProtectedWarning}
+                onViewItem={this.dismissProtectedWarning}
+                itemType={'note'}
               />
             </div>
           )}
@@ -906,7 +907,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
           )}
 
           {this.note && (
-            <div id="editor-title-bar" className="section-title-bar w-full">
+            <div id="editor-title-bar" className="content-title-bar section-title-bar w-full">
               <div className="flex items-center justify-between h-8">
                 <div className={(this.state.noteLocked ? 'locked' : '') + ' flex-grow'}>
                   <div className="title overflow-auto">
diff --git a/app/assets/javascripts/Components/ProtectedNoteOverlay/ProtectedNoteOverlay.tsx b/app/assets/javascripts/Components/ProtectedItemOverlay/ProtectedItemOverlay.tsx
similarity index 60%
rename from app/assets/javascripts/Components/ProtectedNoteOverlay/ProtectedNoteOverlay.tsx
rename to app/assets/javascripts/Components/ProtectedItemOverlay/ProtectedItemOverlay.tsx
index f8b7a682a29..de0642fe12d 100644
--- a/app/assets/javascripts/Components/ProtectedNoteOverlay/ProtectedNoteOverlay.tsx
+++ b/app/assets/javascripts/Components/ProtectedItemOverlay/ProtectedItemOverlay.tsx
@@ -2,18 +2,19 @@ import { ViewControllerManager } from '@/Services/ViewControllerManager'
 
 type Props = {
   viewControllerManager: ViewControllerManager
-  onViewNote: () => void
+  onViewItem: () => void
   hasProtectionSources: boolean
+  itemType: 'note' | 'file'
 }
 
-const ProtectedNoteOverlay = ({ viewControllerManager, onViewNote, hasProtectionSources }: Props) => {
+const ProtectedItemOverlay = ({ viewControllerManager, onViewItem, hasProtectionSources, itemType }: Props) => {
   const instructionText = hasProtectionSources
-    ? 'Authenticate to view this note.'
-    : 'Add a passcode or create an account to require authentication to view this note.'
+    ? `Authenticate to view this ${itemType}.`
+    : `Add a passcode or create an account to require authentication to view this ${itemType}.`
 
   return (
     <div className="flex flex-col items-center justify-center text-center max-w-md">
-      <h1 className="text-2xl m-0 w-full">This note is protected</h1>
+      <h1 className="text-2xl m-0 w-full">This {itemType} is protected</h1>
       <p className="text-lg mt-2 w-full">{instructionText}</p>
       <div className="mt-4 flex gap-3">
         {!hasProtectionSources && (
@@ -26,12 +27,12 @@ const ProtectedNoteOverlay = ({ viewControllerManager, onViewNote, hasProtection
             Open account menu
           </button>
         )}
-        <button className="sn-button small outlined normal-focus-brightness" onClick={onViewNote}>
-          {hasProtectionSources ? 'Authenticate' : 'View Note'}
+        <button className="sn-button small outlined normal-focus-brightness" onClick={onViewItem}>
+          {hasProtectionSources ? 'Authenticate' : `View ${itemType}`}
         </button>
       </div>
     </div>
   )
 }
 
-export default ProtectedNoteOverlay
+export default ProtectedItemOverlay

From 7596e6cdb63e88773dad7fbd2fcda0fe64aa3be7 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 16:20:29 +0530
Subject: [PATCH 03/24] feat: file view

---
 .../AttachedFilesPopover/AttachedFilesButton.tsx | 11 ++++++++---
 .../AttachedFilesPopover.tsx                     |  5 ++++-
 .../Components/ContentListView/FileListItem.tsx  | 16 ++--------------
 app/assets/javascripts/Constants/ElementIDs.ts   |  2 ++
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 20f49327e8c..3b2ade7b6bc 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -4,10 +4,10 @@ import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants/Constants'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import VisuallyHidden from '@reach/visually-hidden'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { ContentType, FileItem, SNNote } from '@standardnotes/snjs'
+import { ContentType, FileItem, SNNote, SystemViewId } from '@standardnotes/snjs'
 import { addToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
 import AttachedFilesPopover from './AttachedFilesPopover'
@@ -48,7 +48,11 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
     }
   }, [viewControllerManager.filePreviewModalController.isOpen, keepMenuOpen])
 
-  const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles)
+  const isInFilesView = useMemo(
+    () => viewControllerManager.navigationController.selectedUuid === SystemViewId.Files,
+    [viewControllerManager.navigationController.selectedUuid],
+  )
+  const [currentTab, setCurrentTab] = useState(isInFilesView ? PopoverTabs.AllFiles : PopoverTabs.AttachedFiles)
   const [allFiles, setAllFiles] = useState<FileItem[]>([])
   const [attachedFiles, setAttachedFiles] = useState<FileItem[]>([])
   const attachedFilesCount = attachedFiles.length
@@ -290,6 +294,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
               currentTab={currentTab}
               isDraggingFiles={isDraggingFiles}
               setCurrentTab={setCurrentTab}
+              isInFilesView={isInFilesView}
             />
           )}
         </DisclosurePanel>
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index a827a0fc3f4..0c8fd4cf359 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -20,6 +20,7 @@ type Props = {
   currentTab: PopoverTabs
   isDraggingFiles: boolean
   setCurrentTab: Dispatch<SetStateAction<PopoverTabs>>
+  isInFilesView: boolean
 }
 
 const AttachedFilesPopover: FunctionComponent<Props> = ({
@@ -31,6 +32,7 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
   currentTab,
   isDraggingFiles,
   setCurrentTab,
+  isInFilesView,
 }) => {
   const [searchQuery, setSearchQuery] = useState('')
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -81,11 +83,12 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
           id={PopoverTabs.AttachedFiles}
           className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
             currentTab === PopoverTabs.AttachedFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
-          }`}
+          } ${isInFilesView ? 'color-neutral cursor-not-allowed' : ''}`}
           onClick={() => {
             setCurrentTab(PopoverTabs.AttachedFiles)
           }}
           onBlur={closeOnBlur}
+          disabled={isInFilesView}
         >
           Attached
         </button>
diff --git a/app/assets/javascripts/Components/ContentListView/FileListItem.tsx b/app/assets/javascripts/Components/ContentListView/FileListItem.tsx
index b1c32c6640f..f9304798ebe 100644
--- a/app/assets/javascripts/Components/ContentListView/FileListItem.tsx
+++ b/app/assets/javascripts/Components/ContentListView/FileListItem.tsx
@@ -41,20 +41,8 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
   )
 
   const onClick = useCallback(() => {
-    void viewControllerManager.selectionController.selectItem(item.uuid, true).then(({ didSelect }) => {
-      if (didSelect && viewControllerManager.selectionController.selectedItemsCount < 2) {
-        viewControllerManager.filePreviewModalController.activate(
-          item as FileItem,
-          viewControllerManager.filesController.allFiles,
-        )
-      }
-    })
-  }, [
-    viewControllerManager.filePreviewModalController,
-    viewControllerManager.filesController.allFiles,
-    viewControllerManager.selectionController,
-    item,
-  ])
+    void viewControllerManager.selectionController.selectItem(item.uuid, true)
+  }, [item.uuid, viewControllerManager.selectionController])
 
   const IconComponent = () =>
     getFileIconComponent(
diff --git a/app/assets/javascripts/Constants/ElementIDs.ts b/app/assets/javascripts/Constants/ElementIDs.ts
index 5170b995b37..7782651541d 100644
--- a/app/assets/javascripts/Constants/ElementIDs.ts
+++ b/app/assets/javascripts/Constants/ElementIDs.ts
@@ -1,6 +1,8 @@
 export const ElementIds = {
   NoteTextEditor: 'note-text-editor',
   NoteTitleEditor: 'note-title-editor',
+  FileTitleEditor: 'file-title-editor',
+  FileTextPreview: 'file-text-preview',
   EditorContent: 'editor-content',
   EditorColumn: 'editor-column',
 }

From e925c3804639dfb4b35d0811f1d810e61748b052 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 16:20:37 +0530
Subject: [PATCH 04/24] feat: add file uuid

---
 .../Components/FileContextMenu/FileMenuOptions.tsx         | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx b/app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
index d129174ced8..828f25a0ae4 100644
--- a/app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
+++ b/app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
@@ -134,6 +134,13 @@ const FileMenuOptions: FunctionComponent<Props> = ({
         <Icon type="trash" className="mr-2 color-danger" />
         <span className="color-danger">Delete permanently</span>
       </button>
+      {selectedFiles.length === 1 && (
+        <div className="px-3 pt-1.5 pb-0.5 text-xs color-neutral font-medium">
+          <div>
+            <span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}
+          </div>
+        </div>
+      )}
     </>
   )
 }

From b4b32fb41be3e9a9bb348971629b35116287d015 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 16:21:54 +0530
Subject: [PATCH 05/24] fix: protected overlay

---
 .../javascripts/Controllers/FilesController.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Controllers/FilesController.ts b/app/assets/javascripts/Controllers/FilesController.ts
index c58895702a0..777c0762f8e 100644
--- a/app/assets/javascripts/Controllers/FilesController.ts
+++ b/app/assets/javascripts/Controllers/FilesController.ts
@@ -30,6 +30,7 @@ export class FilesController extends AbstractViewController {
   allFiles: FileItem[] = []
   attachedFiles: FileItem[] = []
   showFileContextMenu = false
+  showProtectedOverlay = false
   fileContextMenuLocation: FileContextMenuLocation = { x: 0, y: 0 }
 
   override deinit(): void {
@@ -52,9 +53,12 @@ export class FilesController extends AbstractViewController {
       showFileContextMenu: observable,
       fileContextMenuLocation: observable,
 
+      showProtectedOverlay: observable,
+
       reloadAllFiles: action,
       reloadAttachedFiles: action,
       setShowFileContextMenu: action,
+      setShowProtectedOverlay: action,
       setFileContextMenuLocation: action,
     })
 
@@ -79,6 +83,10 @@ export class FilesController extends AbstractViewController {
     this.showFileContextMenu = enabled
   }
 
+  setShowProtectedOverlay = (enabled: boolean) => {
+    this.showProtectedOverlay = enabled
+  }
+
   setFileContextMenuLocation = (location: FileContextMenuLocation) => {
     this.fileContextMenuLocation = location
   }
@@ -404,9 +412,15 @@ export class FilesController extends AbstractViewController {
 
   setProtectionForFiles = async (protect: boolean, files: FileItem[]) => {
     if (protect) {
-      await this.application.mutator.protectItems(files)
+      const protectedItems = await this.application.mutator.protectItems(files)
+      if (protectedItems) {
+        this.setShowProtectedOverlay(true)
+      }
     } else {
-      await this.application.mutator.unprotectItems(files, ChallengeReason.UnprotectFile)
+      const unprotectedItems = await this.application.mutator.unprotectItems(files, ChallengeReason.UnprotectFile)
+      if (unprotectedItems) {
+        this.setShowProtectedOverlay(false)
+      }
     }
   }
 

From 831d88c1951c3a3070d58e609fc8ff5855c230ab Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 16:22:05 +0530
Subject: [PATCH 06/24] feat: add new utility class

---
 app/assets/stylesheets/utils/_padding.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/utils/_padding.scss b/app/assets/stylesheets/utils/_padding.scss
index 161df3af034..d23f9e4a684 100644
--- a/app/assets/stylesheets/utils/_padding.scss
+++ b/app/assets/stylesheets/utils/_padding.scss
@@ -62,6 +62,10 @@
   padding-bottom: 0;
 }
 
+.pb-0\.5 {
+  padding-bottom: 0.125rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }

From fade133bb846632a4946eb329f22d253aa02560a Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 16:22:14 +0530
Subject: [PATCH 07/24] fix: styles

---
 app/assets/stylesheets/_editor.scss | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/_editor.scss b/app/assets/stylesheets/_editor.scss
index 3933e7223c0..35d880ba202 100644
--- a/app/assets/stylesheets/_editor.scss
+++ b/app/assets/stylesheets/_editor.scss
@@ -26,7 +26,7 @@ $heading-height: 75px;
   max-width: 500px;
 }
 
-#editor-title-bar {
+.content-title-bar {
   width: 100%;
 
   padding-top: 14px;
@@ -108,19 +108,21 @@ $heading-height: 75px;
     flex: 1;
     width: 100%;
   }
+}
 
-  .editable {
-    overflow-y: scroll;
-    width: 100%;
-    background-color: var(--editor-pane-editor-background-color);
-    color: var(--editor-pane-editor-foreground-color);
-
-    border: none;
-    outline: none;
-    padding: 15px;
-    font-size: var(--sn-stylekit-font-size-editor);
-    resize: none;
-  }
+.editor-content .editable,
+#editor-content .editable,
+#file-text-preview {
+  overflow-y: scroll;
+  width: 100%;
+  background-color: var(--editor-pane-editor-background-color);
+  color: var(--editor-pane-editor-foreground-color);
+
+  border: none;
+  outline: none;
+  padding: 15px;
+  font-size: var(--sn-stylekit-font-size-editor);
+  resize: none;
 }
 
 #editor-pane-component-stack {

From a5373e722a51134bbd20e585ea4bbb98243005b8 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 20:24:04 +0530
Subject: [PATCH 08/24] fix: object url revocation

---
 .../FilePreview/PreviewComponent.tsx          | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx b/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
index ad8526df81d..bae60aed27e 100644
--- a/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
+++ b/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
@@ -1,5 +1,5 @@
 import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent, useEffect, useState } from 'react'
+import { FunctionComponent, MutableRefObject, useEffect, useMemo, useRef } from 'react'
 import ImagePreview from './ImagePreview'
 import { PreviewableTextFileTypes } from './isFilePreviewable'
 import TextPreview from './TextPreview'
@@ -9,24 +9,38 @@ type Props = {
   bytes: Uint8Array
 }
 
+const createObjectURLWithRef = (
+  type: FileItem['mimeType'],
+  bytes: Uint8Array,
+  ref: MutableRefObject<string | undefined>,
+) => {
+  const objectURL = URL.createObjectURL(
+    new Blob([bytes], {
+      type,
+    }),
+  )
+
+  ref.current = objectURL
+
+  return objectURL
+}
+
 const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
-  const [objectUrl, setObjectUrl] = useState('')
+  const objectUrlRef = useRef<string>()
+
+  const objectUrl = useMemo(() => {
+    return createObjectURLWithRef(file.mimeType, bytes, objectUrlRef)
+  }, [bytes, file.mimeType])
 
   useEffect(() => {
-    if (!objectUrl) {
-      setObjectUrl(
-        URL.createObjectURL(
-          new Blob([bytes], {
-            type: file.mimeType,
-          }),
-        ),
-      )
-    }
+    const objectUrl = objectUrlRef.current
 
     return () => {
-      URL.revokeObjectURL(objectUrl)
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl)
+      }
     }
-  }, [bytes, file.mimeType, objectUrl])
+  }, [])
 
   if (file.mimeType.startsWith('image/')) {
     return <ImagePreview objectUrl={objectUrl} />

From 5449e2c1e8ab35324a86e1e38d6ee48775e0074d Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 20:57:01 +0530
Subject: [PATCH 09/24] fix: audio sizing

fix: clear object url ref after revoking
---
 .../Components/FilePreview/PreviewComponent.tsx            | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx b/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
index bae60aed27e..d19a90c0469 100644
--- a/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
+++ b/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
@@ -38,6 +38,7 @@ const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
     return () => {
       if (objectUrl) {
         URL.revokeObjectURL(objectUrl)
+        objectUrlRef.current = ''
       }
     }
   }, [])
@@ -51,7 +52,11 @@ const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
   }
 
   if (file.mimeType.startsWith('audio/')) {
-    return <audio src={objectUrl} controls />
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <audio src={objectUrl} controls />
+      </div>
+    )
   }
 
   if (PreviewableTextFileTypes.includes(file.mimeType)) {

From 0c0211f16f20b9878ffff4fbb663f8d968a04a96 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 21:17:35 +0530
Subject: [PATCH 10/24] fix: text preview sizing

---
 app/assets/javascripts/Components/FilePreview/TextPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Components/FilePreview/TextPreview.tsx b/app/assets/javascripts/Components/FilePreview/TextPreview.tsx
index 41a97622cf5..a6965951399 100644
--- a/app/assets/javascripts/Components/FilePreview/TextPreview.tsx
+++ b/app/assets/javascripts/Components/FilePreview/TextPreview.tsx
@@ -14,7 +14,7 @@ const TextPreview = ({ bytes }: Props) => {
   return (
     <textarea
       autoComplete="off"
-      className="flex-grow font-editor focus:shadow-none focus:outline-none"
+      className="w-full h-full flex-grow font-editor focus:shadow-none focus:outline-none"
       dir="auto"
       id={ElementIds.FileTextPreview}
       defaultValue={text}

From 9a0dff640b921bd0b18e26b1eea3ebb567c9a211 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 22:09:24 +0530
Subject: [PATCH 11/24] fix: file image/video preview size

---
 .../Components/FilePreview/ImagePreview.tsx           |  2 +-
 app/assets/stylesheets/_columns.scss                  | 11 ++---------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx b/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx
index 6d4e4fb8234..ed4beff64c1 100644
--- a/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx
+++ b/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx
@@ -12,7 +12,7 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
   const [imageZoomPercent, setImageZoomPercent] = useState(100)
 
   return (
-    <div className="flex items-center justify-center w-full h-full">
+    <div className="flex items-center justify-center w-full h-full min-h-0">
       <div className="flex items-center justify-center w-full h-full relative overflow-auto">
         <img
           src={objectUrl}
diff --git a/app/assets/stylesheets/_columns.scss b/app/assets/stylesheets/_columns.scss
index 9bf22927ec2..96006b5b6bf 100644
--- a/app/assets/stylesheets/_columns.scss
+++ b/app/assets/stylesheets/_columns.scss
@@ -1,21 +1,14 @@
 .app-column-container {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: auto auto 2fr;
 }
 
 .app-column-first {
   width: 220px;
-  flex-shrink: 0.2;
 }
 
 .app-column-second {
   width: 350px;
-  flex-shrink: 0.5;
-}
-
-.app-column-third {
-  flex-grow: 1;
-  flex-shrink: 0.3;
 }
 
 .app-column {

From 214b854e7fd40ecbba6a26dd98f86b2cb5ccc251 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 22:14:46 +0530
Subject: [PATCH 12/24] fix: image zoom

---
 app/assets/javascripts/Components/FilePreview/ImagePreview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx b/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx
index ed4beff64c1..677c26a59bc 100644
--- a/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx
+++ b/app/assets/javascripts/Components/FilePreview/ImagePreview.tsx
@@ -26,6 +26,7 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
               : {
                   position: 'absolute',
                   top: 0,
+                  left: 0,
                   margin: 'auto',
                 }),
           }}

From 9ed5939e155e3b68cd39e63e4df26c2d48c42436 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 22:22:05 +0530
Subject: [PATCH 13/24] feat: use common FilePreview component

---
 .../FilePreview/FilePreviewModal.tsx          | 89 +------------------
 1 file changed, 3 insertions(+), 86 deletions(-)

diff --git a/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx b/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
index a7b1d311552..b6648943ab3 100644
--- a/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -1,19 +1,14 @@
 import { WebApplication } from '@/Application/Application'
-import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
 import { DialogContent, DialogOverlay } from '@reach/dialog'
-import { addToast, ToastType } from '@standardnotes/stylekit'
-import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { FunctionComponent, KeyboardEventHandler, useCallback, useMemo, useRef, useState } from 'react'
 import { getFileIconComponent } from '@/Components/AttachedFilesPopover/getFileIconComponent'
-import Button from '@/Components/Button/Button'
 import Icon from '@/Components/Icon/Icon'
 import FilePreviewInfoPanel from './FilePreviewInfoPanel'
-import { isFileTypePreviewable } from './isFilePreviewable'
-import PreviewComponent from './PreviewComponent'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { KeyboardKey } from '@/Services/IOService'
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
-import FilePreviewError from './FilePreviewError'
+import FilePreview from './FilePreview'
 
 type Props = {
   application: WebApplication
@@ -27,53 +22,9 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
     return null
   }
 
-  const [downloadedBytes, setDownloadedBytes] = useState<Uint8Array>()
-  const [isFilePreviewable, setIsFilePreviewable] = useState(false)
-  const [isLoadingFile, setIsLoadingFile] = useState(true)
-  const [fileDownloadProgress, setFileDownloadProgress] = useState(0)
   const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
-  const currentFileIdRef = useRef<string>()
   const closeButtonRef = useRef<HTMLButtonElement>(null)
 
-  const downloadFile = useCallback(async () => {
-    try {
-      const chunks: Uint8Array[] = []
-      setFileDownloadProgress(0)
-      await application.files.downloadFile(currentFile, async (decryptedChunk, progress) => {
-        chunks.push(decryptedChunk)
-        if (progress) {
-          setFileDownloadProgress(Math.round(progress.percentComplete))
-        }
-      })
-      const finalDecryptedBytes = concatenateUint8Arrays(chunks)
-      setDownloadedBytes(finalDecryptedBytes)
-    } catch (error) {
-      console.error(error)
-    } finally {
-      setIsLoadingFile(false)
-    }
-  }, [application.files, currentFile])
-
-  useEffect(() => {
-    setIsLoadingFile(true)
-  }, [currentFile.uuid])
-
-  useEffect(() => {
-    const isPreviewable = isFileTypePreviewable(currentFile.mimeType)
-    setIsFilePreviewable(isPreviewable)
-
-    if (!isPreviewable) {
-      setDownloadedBytes(undefined)
-      setIsLoadingFile(false)
-    }
-
-    if (currentFileIdRef.current !== currentFile.uuid && isPreviewable) {
-      downloadFile().catch(console.error)
-    }
-
-    currentFileIdRef.current = currentFile.uuid
-  }, [currentFile, downloadFile, downloadedBytes])
-
   const keyDownHandler: KeyboardEventHandler = useCallback(
     (event) => {
       if (event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right) {
@@ -149,21 +100,6 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
             >
               <Icon type="info" className="color-neutral" />
             </button>
-            {downloadedBytes && (
-              <Button
-                variant="primary"
-                className="mr-4"
-                onClick={() => {
-                  void viewControllerManager.filesController.downloadFile(currentFile)
-                  addToast({
-                    type: ToastType.Success,
-                    message: 'Successfully downloaded file',
-                  })
-                }}
-              >
-                Download
-              </Button>
-            )}
             <button
               ref={closeButtonRef}
               onClick={dismiss}
@@ -176,26 +112,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
         </div>
         <div className="flex flex-grow min-h-0">
           <div className="flex flex-grow items-center justify-center relative max-w-full">
-            {isLoadingFile ? (
-              <div className="flex flex-col items-center">
-                <div className="flex items-center">
-                  <div className="sk-spinner w-5 h-5 spinner-info mr-3"></div>
-                  <div className="text-base font-semibold">{fileDownloadProgress}%</div>
-                </div>
-                <span className="mt-3">Loading file...</span>
-              </div>
-            ) : downloadedBytes ? (
-              <PreviewComponent file={currentFile} bytes={downloadedBytes} />
-            ) : (
-              <FilePreviewError
-                application={application}
-                file={currentFile}
-                isFilePreviewable={isFilePreviewable}
-                tryAgainCallback={() => {
-                  void downloadFile()
-                }}
-              />
-            )}
+            <FilePreview file={currentFile} application={application} key={currentFile.uuid} />
           </div>
           {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
         </div>

From 5e06b0db2bd9730007f6e9d727343d8a792ec335 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 22:22:55 +0530
Subject: [PATCH 14/24] feat: make loading the default state

---
 app/assets/javascripts/Components/FilePreview/FilePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Components/FilePreview/FilePreview.tsx b/app/assets/javascripts/Components/FilePreview/FilePreview.tsx
index bbea2383bd7..6777a74cb8e 100644
--- a/app/assets/javascripts/Components/FilePreview/FilePreview.tsx
+++ b/app/assets/javascripts/Components/FilePreview/FilePreview.tsx
@@ -16,7 +16,7 @@ const FilePreview = ({ file, application }: Props) => {
     return isFileTypePreviewable(file.mimeType)
   }, [file.mimeType])
 
-  const [isDownloading, setIsDownloading] = useState(false)
+  const [isDownloading, setIsDownloading] = useState(true)
   const [downloadProgress, setDownloadProgress] = useState(0)
   const [downloadedBytes, setDownloadedBytes] = useState<Uint8Array>()
 

From dc19977494c6d44209921465b2d2988cb66c3dd3 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 23:15:55 +0530
Subject: [PATCH 15/24] refactor: pass in controllers instead of controller
 manager

---
 .../AttachedFilesButton.tsx                   | 50 +++++++++++--------
 .../ContentListView/ContentList.tsx           |  5 +-
 .../ContentListView/ContentListItem.tsx       |  2 +-
 .../ContentListView/FileListItem.tsx          | 17 ++++---
 .../ContentListView/NoteListItem.tsx          | 13 ++---
 .../Types/AbstractListItemProps.ts            | 10 +++-
 .../Components/FilePreview/FilePreview.tsx    |  2 +-
 .../FilePreview/FilePreviewError.tsx          | 10 ++--
 .../Components/FileView/FileView.tsx          |  9 +++-
 .../Components/NoteView/NoteView.tsx          |  6 ++-
 .../Navigation/NavigationController.ts        |  6 +++
 11 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 3b2ade7b6bc..c27f9e443b7 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -1,33 +1,45 @@
 import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants/Constants'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import VisuallyHidden from '@reach/visually-hidden'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { ContentType, FileItem, SNNote, SystemViewId } from '@standardnotes/snjs'
+import { ContentType, FileItem, SNNote } from '@standardnotes/snjs'
 import { addToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
 import AttachedFilesPopover from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { PopoverTabs } from './PopoverTabs'
 import { isHandlingFileDrag } from '@/Utils/DragTypeCheck'
+import { NotesController } from '@/Controllers/NotesController'
+import { FilePreviewModalController } from '@/Controllers/FilePreviewModalController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
+import { FeaturesController } from '@/Controllers/FeaturesController'
+import { FilesController } from '@/Controllers/FilesController'
 
 type Props = {
   application: WebApplication
-  viewControllerManager: ViewControllerManager
+  featuresController: FeaturesController
+  filePreviewModalController: FilePreviewModalController
+  filesController: FilesController
+  navigationController: NavigationController
+  notesController: NotesController
   onClickPreprocessing?: () => Promise<void>
 }
 
 const AttachedFilesButton: FunctionComponent<Props> = ({
   application,
-  viewControllerManager,
+  featuresController,
+  filesController,
+  filePreviewModalController,
+  navigationController,
+  notesController,
   onClickPreprocessing,
 }: Props) => {
   const premiumModal = usePremiumModal()
-  const note: SNNote | undefined = viewControllerManager.notesController.firstSelectedNote
+  const note: SNNote | undefined = notesController.firstSelectedNote
 
   const [open, setOpen] = useState(false)
   const [position, setPosition] = useState({
@@ -41,18 +53,16 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
   const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen)
 
   useEffect(() => {
-    if (viewControllerManager.filePreviewModalController.isOpen) {
+    if (filePreviewModalController.isOpen) {
       keepMenuOpen(true)
     } else {
       keepMenuOpen(false)
     }
-  }, [viewControllerManager.filePreviewModalController.isOpen, keepMenuOpen])
+  }, [filePreviewModalController.isOpen, keepMenuOpen])
 
-  const isInFilesView = useMemo(
-    () => viewControllerManager.navigationController.selectedUuid === SystemViewId.Files,
-    [viewControllerManager.navigationController.selectedUuid],
+  const [currentTab, setCurrentTab] = useState(
+    navigationController.isInFilesView ? PopoverTabs.AllFiles : PopoverTabs.AttachedFiles,
   )
-  const [currentTab, setCurrentTab] = useState(isInFilesView ? PopoverTabs.AllFiles : PopoverTabs.AttachedFiles)
   const [allFiles, setAllFiles] = useState<FileItem[]>([])
   const [attachedFiles, setAttachedFiles] = useState<FileItem[]>([])
   const attachedFilesCount = attachedFiles.length
@@ -96,10 +106,10 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
   }, [onClickPreprocessing, open])
 
   const prospectivelyShowFilesPremiumModal = useCallback(() => {
-    if (!viewControllerManager.featuresController.hasFiles) {
+    if (!featuresController.hasFiles) {
       premiumModal.activate('Files')
     }
-  }, [viewControllerManager.featuresController.hasFiles, premiumModal])
+  }, [featuresController.hasFiles, premiumModal])
 
   const toggleAttachedFilesMenuWithEntitlementCheck = useCallback(async () => {
     prospectivelyShowFilesPremiumModal()
@@ -196,7 +206,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
 
       setIsDraggingFiles(false)
 
-      if (!viewControllerManager.featuresController.hasFiles) {
+      if (!featuresController.hasFiles) {
         prospectivelyShowFilesPremiumModal()
         return
       }
@@ -211,7 +221,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
             return
           }
 
-          const uploadedFiles = await viewControllerManager.filesController.uploadNewFile(fileOrHandle)
+          const uploadedFiles = await filesController.uploadNewFile(fileOrHandle)
 
           if (!uploadedFiles) {
             return
@@ -229,8 +239,8 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
       }
     },
     [
-      viewControllerManager.filesController,
-      viewControllerManager.featuresController.hasFiles,
+      filesController,
+      featuresController.hasFiles,
       attachFileToNote,
       currentTab,
       application,
@@ -287,14 +297,14 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
           {open && (
             <AttachedFilesPopover
               application={application}
-              filesController={viewControllerManager.filesController}
+              filesController={filesController}
               attachedFiles={attachedFiles}
               allFiles={allFiles}
               closeOnBlur={closeOnBlur}
               currentTab={currentTab}
               isDraggingFiles={isDraggingFiles}
               setCurrentTab={setCurrentTab}
-              isInFilesView={isInFilesView}
+              isInFilesView={navigationController.isInFilesView}
             />
           )}
         </DisclosurePanel>
diff --git a/app/assets/javascripts/Components/ContentListView/ContentList.tsx b/app/assets/javascripts/Components/ContentListView/ContentList.tsx
index 8e5709e751b..45d20aa207d 100644
--- a/app/assets/javascripts/Components/ContentListView/ContentList.tsx
+++ b/app/assets/javascripts/Components/ContentListView/ContentList.tsx
@@ -64,7 +64,6 @@ const ContentList: FunctionComponent<Props> = ({
         <ContentListItem
           key={item.uuid}
           application={application}
-          viewControllerManager={viewControllerManager}
           item={item}
           selected={!!selectedItems[item.uuid]}
           hideDate={hideDate}
@@ -72,6 +71,10 @@ const ContentList: FunctionComponent<Props> = ({
           hideTags={hideTags}
           hideIcon={hideEditorIcon}
           sortBy={sortBy}
+          filesController={viewControllerManager.filesController}
+          selectionController={viewControllerManager.selectionController}
+          navigationController={viewControllerManager.navigationController}
+          notesController={viewControllerManager.notesController}
         />
       ))}
     </div>
diff --git a/app/assets/javascripts/Components/ContentListView/ContentListItem.tsx b/app/assets/javascripts/Components/ContentListView/ContentListItem.tsx
index ab4ebcbaf14..ce3b64556a9 100644
--- a/app/assets/javascripts/Components/ContentListView/ContentListItem.tsx
+++ b/app/assets/javascripts/Components/ContentListView/ContentListItem.tsx
@@ -10,7 +10,7 @@ const ContentListItem: FunctionComponent<AbstractListItemProps> = (props) => {
       return []
     }
 
-    const selectedTag = props.viewControllerManager.navigationController.selected
+    const selectedTag = props.navigationController.selected
     if (!selectedTag) {
       return []
     }
diff --git a/app/assets/javascripts/Components/ContentListView/FileListItem.tsx b/app/assets/javascripts/Components/ContentListView/FileListItem.tsx
index f9304798ebe..b99d8cadf00 100644
--- a/app/assets/javascripts/Components/ContentListView/FileListItem.tsx
+++ b/app/assets/javascripts/Components/ContentListView/FileListItem.tsx
@@ -10,7 +10,8 @@ import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 
 const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
   application,
-  viewControllerManager,
+  filesController,
+  selectionController,
   hideDate,
   hideIcon,
   hideTags,
@@ -21,28 +22,28 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
 }) => {
   const openFileContextMenu = useCallback(
     (posX: number, posY: number) => {
-      viewControllerManager.filesController.setFileContextMenuLocation({
+      filesController.setFileContextMenuLocation({
         x: posX,
         y: posY,
       })
-      viewControllerManager.filesController.setShowFileContextMenu(true)
+      filesController.setShowFileContextMenu(true)
     },
-    [viewControllerManager.filesController],
+    [filesController],
   )
 
   const openContextMenu = useCallback(
     async (posX: number, posY: number) => {
-      const { didSelect } = await viewControllerManager.selectionController.selectItem(item.uuid)
+      const { didSelect } = await selectionController.selectItem(item.uuid)
       if (didSelect) {
         openFileContextMenu(posX, posY)
       }
     },
-    [viewControllerManager.selectionController, item.uuid, openFileContextMenu],
+    [selectionController, item.uuid, openFileContextMenu],
   )
 
   const onClick = useCallback(() => {
-    void viewControllerManager.selectionController.selectItem(item.uuid, true)
-  }, [item.uuid, viewControllerManager.selectionController])
+    void selectionController.selectItem(item.uuid, true)
+  }, [item.uuid, selectionController])
 
   const IconComponent = () =>
     getFileIconComponent(
diff --git a/app/assets/javascripts/Components/ContentListView/NoteListItem.tsx b/app/assets/javascripts/Components/ContentListView/NoteListItem.tsx
index 7672fe7e882..f55029e005a 100644
--- a/app/assets/javascripts/Components/ContentListView/NoteListItem.tsx
+++ b/app/assets/javascripts/Components/ContentListView/NoteListItem.tsx
@@ -11,7 +11,8 @@ import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 
 const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
   application,
-  viewControllerManager,
+  notesController,
+  selectionController,
   hideDate,
   hideIcon,
   hideTags,
@@ -27,16 +28,16 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
   const hasFiles = application.items.getFilesForNote(item as SNNote).length > 0
 
   const openNoteContextMenu = (posX: number, posY: number) => {
-    viewControllerManager.notesController.setContextMenuClickLocation({
+    notesController.setContextMenuClickLocation({
       x: posX,
       y: posY,
     })
-    viewControllerManager.notesController.reloadContextMenuLayout()
-    viewControllerManager.notesController.setContextMenuOpen(true)
+    notesController.reloadContextMenuLayout()
+    notesController.setContextMenuOpen(true)
   }
 
   const openContextMenu = async (posX: number, posY: number) => {
-    const { didSelect } = await viewControllerManager.selectionController.selectItem(item.uuid, true)
+    const { didSelect } = await selectionController.selectItem(item.uuid, true)
     if (didSelect) {
       openNoteContextMenu(posX, posY)
     }
@@ -49,7 +50,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
       }`}
       id={item.uuid}
       onClick={() => {
-        void viewControllerManager.selectionController.selectItem(item.uuid, true)
+        void selectionController.selectItem(item.uuid, true)
       }}
       onContextMenu={(event) => {
         event.preventDefault()
diff --git a/app/assets/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts b/app/assets/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts
index 8b1b2ded4ef..8b294d03c33 100644
--- a/app/assets/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts
+++ b/app/assets/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts
@@ -1,11 +1,17 @@
 import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { FilesController } from '@/Controllers/FilesController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
+import { NotesController } from '@/Controllers/NotesController'
+import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { SortableItem } from '@standardnotes/snjs'
 import { ListableContentItem } from './ListableContentItem'
 
 export type AbstractListItemProps = {
   application: WebApplication
-  viewControllerManager: ViewControllerManager
+  filesController: FilesController
+  selectionController: SelectedItemsController
+  navigationController: NavigationController
+  notesController: NotesController
   hideDate: boolean
   hideIcon: boolean
   hideTags: boolean
diff --git a/app/assets/javascripts/Components/FilePreview/FilePreview.tsx b/app/assets/javascripts/Components/FilePreview/FilePreview.tsx
index 6777a74cb8e..bdadb3b4991 100644
--- a/app/assets/javascripts/Components/FilePreview/FilePreview.tsx
+++ b/app/assets/javascripts/Components/FilePreview/FilePreview.tsx
@@ -68,8 +68,8 @@ const FilePreview = ({ file, application }: Props) => {
     <PreviewComponent file={file} bytes={downloadedBytes} />
   ) : (
     <FilePreviewError
-      application={application}
       file={file}
+      filesController={application.getViewControllerManager().filesController}
       tryAgainCallback={() => {
         setDownloadedBytes(undefined)
       }}
diff --git a/app/assets/javascripts/Components/FilePreview/FilePreviewError.tsx b/app/assets/javascripts/Components/FilePreview/FilePreviewError.tsx
index ca0013af6d5..fbb41a70e83 100644
--- a/app/assets/javascripts/Components/FilePreview/FilePreviewError.tsx
+++ b/app/assets/javascripts/Components/FilePreview/FilePreviewError.tsx
@@ -1,16 +1,16 @@
-import { WebApplication } from '@/Application/Application'
+import { FilesController } from '@/Controllers/FilesController'
 import { NoPreviewIllustration } from '@standardnotes/icons'
 import { FileItem } from '@standardnotes/snjs'
 import Button from '../Button/Button'
 
 type Props = {
-  application: WebApplication
   file: FileItem
+  filesController: FilesController
   isFilePreviewable: boolean
   tryAgainCallback: () => void
 }
 
-const FilePreviewError = ({ application, file, isFilePreviewable, tryAgainCallback }: Props) => {
+const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCallback }: Props) => {
   return (
     <div className="flex flex-col justify-center items-center flex-grow">
       <NoPreviewIllustration className="w-30 h-30 mb-4" />
@@ -33,7 +33,7 @@ const FilePreviewError = ({ application, file, isFilePreviewable, tryAgainCallba
             <Button
               variant="normal"
               onClick={() => {
-                application.getViewControllerManager().filesController.downloadFile(file).catch(console.error)
+                filesController.downloadFile(file).catch(console.error)
               }}
             >
               Download
@@ -48,7 +48,7 @@ const FilePreviewError = ({ application, file, isFilePreviewable, tryAgainCallba
           <Button
             variant="primary"
             onClick={() => {
-              application.getViewControllerManager().filesController.downloadFile(file).catch(console.error)
+              filesController.downloadFile(file).catch(console.error)
             }}
           >
             Download
diff --git a/app/assets/javascripts/Components/FileView/FileView.tsx b/app/assets/javascripts/Components/FileView/FileView.tsx
index 056896a6ac9..3c3f6438875 100644
--- a/app/assets/javascripts/Components/FileView/FileView.tsx
+++ b/app/assets/javascripts/Components/FileView/FileView.tsx
@@ -52,7 +52,14 @@ const FileView = observer(({ application, viewControllerManager, file }: Props)
             </div>
             <div className="flex items-center">
               <div className="mr-3">
-                <AttachedFilesButton application={application} viewControllerManager={viewControllerManager} />
+                <AttachedFilesButton
+                  application={application}
+                  featuresController={viewControllerManager.featuresController}
+                  filePreviewModalController={viewControllerManager.filePreviewModalController}
+                  filesController={viewControllerManager.filesController}
+                  navigationController={viewControllerManager.navigationController}
+                  notesController={viewControllerManager.notesController}
+                />
               </div>
               <FileOptionsPanel
                 filesController={viewControllerManager.filesController}
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 449bc650cd2..4be1b1ba212 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -944,8 +944,12 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                   <div className="mr-3">
                     <AttachedFilesButton
                       application={this.application}
-                      viewControllerManager={this.viewControllerManager}
                       onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
+                      featuresController={this.viewControllerManager.featuresController}
+                      filePreviewModalController={this.viewControllerManager.filePreviewModalController}
+                      filesController={this.viewControllerManager.filesController}
+                      navigationController={this.viewControllerManager.navigationController}
+                      notesController={this.viewControllerManager.notesController}
                     />
                   </div>
                   <div className="mr-3">
diff --git a/app/assets/javascripts/Controllers/Navigation/NavigationController.ts b/app/assets/javascripts/Controllers/Navigation/NavigationController.ts
index e56740dbc43..ec84731589b 100644
--- a/app/assets/javascripts/Controllers/Navigation/NavigationController.ts
+++ b/app/assets/javascripts/Controllers/Navigation/NavigationController.ts
@@ -92,6 +92,8 @@ export class NavigationController extends AbstractViewController {
       setContextMenuClickLocation: action,
       setContextMenuPosition: action,
       setContextMenuMaxHeight: action,
+
+      isInFilesView: computed,
     })
 
     this.disposers.push(
@@ -257,6 +259,10 @@ export class NavigationController extends AbstractViewController {
     }
   }
 
+  public get isInFilesView(): boolean {
+    return this.selectedUuid === SystemViewId.Files
+  }
+
   public get allLocalRootTags(): SNTag[] {
     if (this.editing_ instanceof SNTag && this.application.items.isTemplateItem(this.editing_)) {
       return [this.editing_, ...this.rootTags]

From 59f3e9852817b3f69047cd8cc9f547ba15070520 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 23:24:50 +0530
Subject: [PATCH 16/24] refactor: move create[..]Ref function into new file

---
 .../FilePreview/CreateObjectURLWithRef.tsx    | 18 ++++++++++++++++++
 .../FilePreview/PreviewComponent.tsx          | 19 ++-----------------
 2 files changed, 20 insertions(+), 17 deletions(-)
 create mode 100644 app/assets/javascripts/Components/FilePreview/CreateObjectURLWithRef.tsx

diff --git a/app/assets/javascripts/Components/FilePreview/CreateObjectURLWithRef.tsx b/app/assets/javascripts/Components/FilePreview/CreateObjectURLWithRef.tsx
new file mode 100644
index 00000000000..6eae4de1a60
--- /dev/null
+++ b/app/assets/javascripts/Components/FilePreview/CreateObjectURLWithRef.tsx
@@ -0,0 +1,18 @@
+import { FileItem } from '@standardnotes/snjs'
+import { MutableRefObject } from 'react'
+
+export const createObjectURLWithRef = (
+  type: FileItem['mimeType'],
+  bytes: Uint8Array,
+  ref: MutableRefObject<string | undefined>,
+) => {
+  const objectURL = URL.createObjectURL(
+    new Blob([bytes], {
+      type,
+    }),
+  )
+
+  ref.current = objectURL
+
+  return objectURL
+}
diff --git a/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx b/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
index d19a90c0469..632247cde92 100644
--- a/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
+++ b/app/assets/javascripts/Components/FilePreview/PreviewComponent.tsx
@@ -1,5 +1,6 @@
 import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent, MutableRefObject, useEffect, useMemo, useRef } from 'react'
+import { FunctionComponent, useEffect, useMemo, useRef } from 'react'
+import { createObjectURLWithRef } from './CreateObjectURLWithRef'
 import ImagePreview from './ImagePreview'
 import { PreviewableTextFileTypes } from './isFilePreviewable'
 import TextPreview from './TextPreview'
@@ -9,22 +10,6 @@ type Props = {
   bytes: Uint8Array
 }
 
-const createObjectURLWithRef = (
-  type: FileItem['mimeType'],
-  bytes: Uint8Array,
-  ref: MutableRefObject<string | undefined>,
-) => {
-  const objectURL = URL.createObjectURL(
-    new Blob([bytes], {
-      type,
-    }),
-  )
-
-  ref.current = objectURL
-
-  return objectURL
-}
-
 const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
   const objectUrlRef = useRef<string>()
 

From d438e4202787b464f412433d6476eb0aec4daab2 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 23:27:57 +0530
Subject: [PATCH 17/24] refactor: move condition to named const

---
 .../javascripts/Components/FilePreview/FilePreviewModal.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx b/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
index b6648943ab3..f2aa1ef08f7 100644
--- a/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -27,7 +27,9 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
 
   const keyDownHandler: KeyboardEventHandler = useCallback(
     (event) => {
-      if (event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right) {
+      const hasNotPressedLeftOrRightKeys = event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right
+
+      if (hasNotPressedLeftOrRightKeys) {
         return
       }
 

From b0508b3c169cdac58eadfb7de7a16df1f60c60f7 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 23:31:08 +0530
Subject: [PATCH 18/24] refactor: move to separate file

---
 .../Components/FileView/FileView.tsx          | 48 ++-----------------
 .../Components/FileView/FileViewProps.tsx     |  9 ++++
 .../FileView/FileViewWithProtectedOverlay.tsx | 38 +++++++++++++++
 .../NoteGroupView/NoteGroupView.tsx           |  4 +-
 4 files changed, 53 insertions(+), 46 deletions(-)
 create mode 100644 app/assets/javascripts/Components/FileView/FileViewProps.tsx
 create mode 100644 app/assets/javascripts/Components/FileView/FileViewWithProtectedOverlay.tsx

diff --git a/app/assets/javascripts/Components/FileView/FileView.tsx b/app/assets/javascripts/Components/FileView/FileView.tsx
index 3c3f6438875..149ccb0d0d8 100644
--- a/app/assets/javascripts/Components/FileView/FileView.tsx
+++ b/app/assets/javascripts/Components/FileView/FileView.tsx
@@ -1,22 +1,13 @@
-import { WebApplication } from '@/Application/Application'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { KeyboardKey } from '@/Services/IOService'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
-import { FileItem } from '@standardnotes/snjs/dist/@types'
 import { observer } from 'mobx-react-lite'
-import { ChangeEventHandler, KeyboardEventHandler, useCallback, useEffect, useState } from 'react'
+import { ChangeEventHandler, KeyboardEventHandler, useCallback } from 'react'
 import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
 import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
 import FilePreview from '@/Components/FilePreview/FilePreview'
-import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
+import { FileViewProps } from './FileViewProps'
 
-type Props = {
-  application: WebApplication
-  viewControllerManager: ViewControllerManager
-  file: FileItem
-}
-
-const FileView = observer(({ application, viewControllerManager, file }: Props) => {
+const FileView = observer(({ application, viewControllerManager, file }: FileViewProps) => {
   const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(async () => {
     /** @TODO */
   }, [])
@@ -74,35 +65,4 @@ const FileView = observer(({ application, viewControllerManager, file }: Props)
   )
 })
 
-const FileViewWithProtectedOverlay = ({ application, viewControllerManager, file }: Props) => {
-  const [shouldShowProtectedOverlay, setShouldShowProtectedOverlay] = useState(
-    file.protected && !application.hasProtectionSources(),
-  )
-
-  useEffect(() => {
-    setShouldShowProtectedOverlay(viewControllerManager.filesController.showProtectedOverlay)
-  }, [viewControllerManager.filesController.showProtectedOverlay])
-
-  const dismissProtectedWarning = useCallback(() => {
-    void viewControllerManager.filesController.toggleFileProtection(file)
-  }, [file, viewControllerManager.filesController])
-
-  return shouldShowProtectedOverlay ? (
-    <div aria-label="Note" className="section editor sn-component">
-      {shouldShowProtectedOverlay && (
-        <div className="h-full flex justify-center items-center">
-          <ProtectedItemOverlay
-            viewControllerManager={viewControllerManager}
-            hasProtectionSources={application.hasProtectionSources()}
-            onViewItem={dismissProtectedWarning}
-            itemType={'note'}
-          />
-        </div>
-      )}
-    </div>
-  ) : (
-    <FileView application={application} viewControllerManager={viewControllerManager} file={file} />
-  )
-}
-
-export default observer(FileViewWithProtectedOverlay)
+export default observer(FileView)
diff --git a/app/assets/javascripts/Components/FileView/FileViewProps.tsx b/app/assets/javascripts/Components/FileView/FileViewProps.tsx
new file mode 100644
index 00000000000..0cb9a4fb1c0
--- /dev/null
+++ b/app/assets/javascripts/Components/FileView/FileViewProps.tsx
@@ -0,0 +1,9 @@
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { FileItem } from '@standardnotes/snjs/dist/@types'
+
+export type FileViewProps = {
+  application: WebApplication
+  viewControllerManager: ViewControllerManager
+  file: FileItem
+}
diff --git a/app/assets/javascripts/Components/FileView/FileViewWithProtectedOverlay.tsx b/app/assets/javascripts/Components/FileView/FileViewWithProtectedOverlay.tsx
new file mode 100644
index 00000000000..ee44153d0b3
--- /dev/null
+++ b/app/assets/javascripts/Components/FileView/FileViewWithProtectedOverlay.tsx
@@ -0,0 +1,38 @@
+import { observer } from 'mobx-react-lite'
+import { useCallback, useEffect, useState } from 'react'
+import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
+import FileView from './FileView'
+import { FileViewProps } from './FileViewProps'
+
+const FileViewWithProtectedOverlay = ({ application, viewControllerManager, file }: FileViewProps) => {
+  const [shouldShowProtectedOverlay, setShouldShowProtectedOverlay] = useState(
+    file.protected && !application.hasProtectionSources(),
+  )
+
+  useEffect(() => {
+    setShouldShowProtectedOverlay(viewControllerManager.filesController.showProtectedOverlay)
+  }, [viewControllerManager.filesController.showProtectedOverlay])
+
+  const dismissProtectedWarning = useCallback(() => {
+    void viewControllerManager.filesController.toggleFileProtection(file)
+  }, [file, viewControllerManager.filesController])
+
+  return shouldShowProtectedOverlay ? (
+    <div aria-label="Note" className="section editor sn-component">
+      {shouldShowProtectedOverlay && (
+        <div className="h-full flex justify-center items-center">
+          <ProtectedItemOverlay
+            viewControllerManager={viewControllerManager}
+            hasProtectionSources={application.hasProtectionSources()}
+            onViewItem={dismissProtectedWarning}
+            itemType={'note'}
+          />
+        </div>
+      )}
+    </div>
+  ) : (
+    <FileView application={application} viewControllerManager={viewControllerManager} file={file} />
+  )
+}
+
+export default observer(FileViewWithProtectedOverlay)
diff --git a/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx b/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
index 657fe7b6d87..4b35d49cae6 100644
--- a/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
@@ -5,7 +5,7 @@ import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSe
 import NoteView from '@/Components/NoteView/NoteView'
 import MultipleSelectedFiles from '../MultipleSelectedFiles/MultipleSelectedFiles'
 import { ElementIds } from '@/Constants/ElementIDs'
-import FileView from '@/Components/FileView/FileView'
+import FileViewWithProtectedOverlay from '@/Components/FileView/FileViewWithProtectedOverlay'
 
 type State = {
   showMultipleSelectedNotes: boolean
@@ -104,7 +104,7 @@ class NoteGroupView extends PureComponent<Props, State> {
           !this.state.showMultipleSelectedFiles &&
           this.state.controllers.length < 1 &&
           this.state.selectedFile && (
-            <FileView
+            <FileViewWithProtectedOverlay
               application={this.application}
               viewControllerManager={this.viewControllerManager}
               file={this.state.selectedFile}

From 3d51c5d4aba8e23c39ad9d5bfccce65d209f218b Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Jun 2022 23:33:00 +0530
Subject: [PATCH 19/24] refactor: move conditional into named const

---
 .../NoteGroupView/NoteGroupView.tsx           | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx b/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
index 4b35d49cae6..07532689360 100644
--- a/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
@@ -77,6 +77,9 @@ class NoteGroupView extends PureComponent<Props, State> {
   }
 
   override render() {
+    const shouldNotShowMultipleSelectedItems =
+      !this.state.showMultipleSelectedNotes && !this.state.showMultipleSelectedFiles
+
     return (
       <div id={ElementIds.EditorColumn} className="h-full app-column app-column-third">
         {this.state.showMultipleSelectedNotes && (
@@ -90,26 +93,21 @@ class NoteGroupView extends PureComponent<Props, State> {
           />
         )}
 
-        {!this.state.showMultipleSelectedNotes &&
-          !this.state.showMultipleSelectedFiles &&
-          this.state.controllers.length > 0 && (
-            <>
-              {this.state.controllers.map((controller) => {
-                return <NoteView key={controller.note.uuid} application={this.application} controller={controller} />
-              })}
-            </>
-          )}
-
-        {!this.state.showMultipleSelectedNotes &&
-          !this.state.showMultipleSelectedFiles &&
-          this.state.controllers.length < 1 &&
-          this.state.selectedFile && (
-            <FileViewWithProtectedOverlay
-              application={this.application}
-              viewControllerManager={this.viewControllerManager}
-              file={this.state.selectedFile}
-            />
-          )}
+        {shouldNotShowMultipleSelectedItems && this.state.controllers.length > 0 && (
+          <>
+            {this.state.controllers.map((controller) => {
+              return <NoteView key={controller.note.uuid} application={this.application} controller={controller} />
+            })}
+          </>
+        )}
+
+        {shouldNotShowMultipleSelectedItems && this.state.controllers.length < 1 && this.state.selectedFile && (
+          <FileViewWithProtectedOverlay
+            application={this.application}
+            viewControllerManager={this.viewControllerManager}
+            file={this.state.selectedFile}
+          />
+        )}
       </div>
     )
   }

From 1613bd22f47def048075fa4cebcad2434a13027f Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 4 Jun 2022 00:16:54 +0530
Subject: [PATCH 20/24] fix: file title change

---
 .../Components/FileView/FileView.tsx          | 28 +++++++++++++++----
 app/assets/javascripts/Constants/Constants.ts |  3 ++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/Components/FileView/FileView.tsx b/app/assets/javascripts/Components/FileView/FileView.tsx
index 149ccb0d0d8..12dd97bf92a 100644
--- a/app/assets/javascripts/Components/FileView/FileView.tsx
+++ b/app/assets/javascripts/Components/FileView/FileView.tsx
@@ -1,16 +1,32 @@
 import { ElementIds } from '@/Constants/ElementIDs'
 import { KeyboardKey } from '@/Services/IOService'
 import { observer } from 'mobx-react-lite'
-import { ChangeEventHandler, KeyboardEventHandler, useCallback } from 'react'
+import { ChangeEventHandler, KeyboardEventHandler, useCallback, useRef } from 'react'
 import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
 import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
 import FilePreview from '@/Components/FilePreview/FilePreview'
 import { FileViewProps } from './FileViewProps'
+import { SYNC_TIMEOUT_DEBOUNCE, SYNC_TIMEOUT_NO_DEBOUNCE } from '@/Constants/Constants'
 
-const FileView = observer(({ application, viewControllerManager, file }: FileViewProps) => {
-  const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(async () => {
-    /** @TODO */
-  }, [])
+const FileView = ({ application, viewControllerManager, file }: FileViewProps) => {
+  const syncTimeoutRef = useRef<number>()
+
+  const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    async (event) => {
+      void application.items.renameFile(file, event.target.value)
+
+      if (syncTimeoutRef.current) {
+        clearTimeout(syncTimeoutRef.current)
+      }
+
+      const debounceTime = application.noAccount() ? SYNC_TIMEOUT_NO_DEBOUNCE : SYNC_TIMEOUT_DEBOUNCE
+
+      syncTimeoutRef.current = window.setTimeout(() => {
+        void application.sync.sync()
+      }, debounceTime)
+    },
+    [application, file],
+  )
 
   const onTitleEnter: KeyboardEventHandler<HTMLInputElement> = useCallback(({ key, currentTarget }) => {
     if (key !== KeyboardKey.Enter) {
@@ -63,6 +79,6 @@ const FileView = observer(({ application, viewControllerManager, file }: FileVie
       <FilePreview file={file} application={application} key={file.uuid} />
     </div>
   )
-})
+}
 
 export default observer(FileView)
diff --git a/app/assets/javascripts/Constants/Constants.ts b/app/assets/javascripts/Constants/Constants.ts
index d109eb9dcd3..2038c007057 100644
--- a/app/assets/javascripts/Constants/Constants.ts
+++ b/app/assets/javascripts/Constants/Constants.ts
@@ -22,3 +22,6 @@ export const TAG_FOLDERS_FEATURE_TOOLTIP = 'A Plus or Pro plan is required to en
 export const SMART_TAGS_FEATURE_NAME = 'Smart Tags'
 
 export const PLAIN_EDITOR_NAME = 'Plain Text'
+
+export const SYNC_TIMEOUT_DEBOUNCE = 350
+export const SYNC_TIMEOUT_NO_DEBOUNCE = 100

From a7d799262d702bbf6d09f5046a6f9be74d3e96f6 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 6 Jun 2022 17:54:41 +0530
Subject: [PATCH 21/24] refactor: rename variable to attachedTabDisabled

---
 .../AttachedFilesPopover/AttachedFilesButton.tsx          | 2 +-
 .../AttachedFilesPopover/AttachedFilesPopover.tsx         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index c27f9e443b7..3b95c318ae8 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -304,7 +304,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
               currentTab={currentTab}
               isDraggingFiles={isDraggingFiles}
               setCurrentTab={setCurrentTab}
-              isInFilesView={navigationController.isInFilesView}
+              attachedTabDisabled={navigationController.isInFilesView}
             />
           )}
         </DisclosurePanel>
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index 0c8fd4cf359..5c005c3388b 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -20,7 +20,7 @@ type Props = {
   currentTab: PopoverTabs
   isDraggingFiles: boolean
   setCurrentTab: Dispatch<SetStateAction<PopoverTabs>>
-  isInFilesView: boolean
+  attachedTabDisabled: boolean
 }
 
 const AttachedFilesPopover: FunctionComponent<Props> = ({
@@ -32,7 +32,7 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
   currentTab,
   isDraggingFiles,
   setCurrentTab,
-  isInFilesView,
+  attachedTabDisabled,
 }) => {
   const [searchQuery, setSearchQuery] = useState('')
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -83,12 +83,12 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
           id={PopoverTabs.AttachedFiles}
           className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
             currentTab === PopoverTabs.AttachedFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
-          } ${isInFilesView ? 'color-neutral cursor-not-allowed' : ''}`}
+          } ${attachedTabDisabled ? 'color-neutral cursor-not-allowed' : ''}`}
           onClick={() => {
             setCurrentTab(PopoverTabs.AttachedFiles)
           }}
           onBlur={closeOnBlur}
-          disabled={isInFilesView}
+          disabled={attachedTabDisabled}
         >
           Attached
         </button>

From 2285c30a10d8c35998b9a2a20f74535e3a8651b3 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 6 Jun 2022 18:01:48 +0530
Subject: [PATCH 22/24] refactor: rename file view

---
 .../Components/FileView/FileView.tsx          | 98 +++++--------------
 .../FileView/FileViewWithProtectedOverlay.tsx | 38 -------
 .../FileView/FileViewWithoutProtection.tsx    | 84 ++++++++++++++++
 .../NoteGroupView/NoteGroupView.tsx           |  4 +-
 4 files changed, 112 insertions(+), 112 deletions(-)
 delete mode 100644 app/assets/javascripts/Components/FileView/FileViewWithProtectedOverlay.tsx
 create mode 100644 app/assets/javascripts/Components/FileView/FileViewWithoutProtection.tsx

diff --git a/app/assets/javascripts/Components/FileView/FileView.tsx b/app/assets/javascripts/Components/FileView/FileView.tsx
index 12dd97bf92a..4dadd6ce386 100644
--- a/app/assets/javascripts/Components/FileView/FileView.tsx
+++ b/app/assets/javascripts/Components/FileView/FileView.tsx
@@ -1,83 +1,37 @@
-import { ElementIds } from '@/Constants/ElementIDs'
-import { KeyboardKey } from '@/Services/IOService'
 import { observer } from 'mobx-react-lite'
-import { ChangeEventHandler, KeyboardEventHandler, useCallback, useRef } from 'react'
-import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
-import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
-import FilePreview from '@/Components/FilePreview/FilePreview'
+import { useCallback, useEffect, useState } from 'react'
+import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
+import FileViewWithoutProtection from './FileViewWithoutProtection'
 import { FileViewProps } from './FileViewProps'
-import { SYNC_TIMEOUT_DEBOUNCE, SYNC_TIMEOUT_NO_DEBOUNCE } from '@/Constants/Constants'
 
 const FileView = ({ application, viewControllerManager, file }: FileViewProps) => {
-  const syncTimeoutRef = useRef<number>()
-
-  const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    async (event) => {
-      void application.items.renameFile(file, event.target.value)
-
-      if (syncTimeoutRef.current) {
-        clearTimeout(syncTimeoutRef.current)
-      }
-
-      const debounceTime = application.noAccount() ? SYNC_TIMEOUT_NO_DEBOUNCE : SYNC_TIMEOUT_DEBOUNCE
-
-      syncTimeoutRef.current = window.setTimeout(() => {
-        void application.sync.sync()
-      }, debounceTime)
-    },
-    [application, file],
+  const [shouldShowProtectedOverlay, setShouldShowProtectedOverlay] = useState(
+    file.protected && !application.hasProtectionSources(),
   )
 
-  const onTitleEnter: KeyboardEventHandler<HTMLInputElement> = useCallback(({ key, currentTarget }) => {
-    if (key !== KeyboardKey.Enter) {
-      return
-    }
-
-    currentTarget.blur()
-  }, [])
-
-  return (
-    <div className="sn-component section editor" aria-label="File">
-      <div className="flex flex-col">
-        <div className="content-title-bar section-title-bar w-full" id="file-title-bar">
-          <div className="flex items-center justify-between h-8">
-            <div className="flex-grow">
-              <div className="title overflow-auto">
-                <input
-                  className="input"
-                  id={ElementIds.FileTitleEditor}
-                  onChange={onTitleChange}
-                  onFocus={(event) => {
-                    event.target.select()
-                  }}
-                  onKeyUp={onTitleEnter}
-                  spellCheck={false}
-                  value={file.name}
-                  autoComplete="off"
-                />
-              </div>
-            </div>
-            <div className="flex items-center">
-              <div className="mr-3">
-                <AttachedFilesButton
-                  application={application}
-                  featuresController={viewControllerManager.featuresController}
-                  filePreviewModalController={viewControllerManager.filePreviewModalController}
-                  filesController={viewControllerManager.filesController}
-                  navigationController={viewControllerManager.navigationController}
-                  notesController={viewControllerManager.notesController}
-                />
-              </div>
-              <FileOptionsPanel
-                filesController={viewControllerManager.filesController}
-                selectionController={viewControllerManager.selectionController}
-              />
-            </div>
-          </div>
+  useEffect(() => {
+    setShouldShowProtectedOverlay(viewControllerManager.filesController.showProtectedOverlay)
+  }, [viewControllerManager.filesController.showProtectedOverlay])
+
+  const dismissProtectedWarning = useCallback(() => {
+    void viewControllerManager.filesController.toggleFileProtection(file)
+  }, [file, viewControllerManager.filesController])
+
+  return shouldShowProtectedOverlay ? (
+    <div aria-label="Note" className="section editor sn-component">
+      {shouldShowProtectedOverlay && (
+        <div className="h-full flex justify-center items-center">
+          <ProtectedItemOverlay
+            viewControllerManager={viewControllerManager}
+            hasProtectionSources={application.hasProtectionSources()}
+            onViewItem={dismissProtectedWarning}
+            itemType={'note'}
+          />
         </div>
-      </div>
-      <FilePreview file={file} application={application} key={file.uuid} />
+      )}
     </div>
+  ) : (
+    <FileViewWithoutProtection application={application} viewControllerManager={viewControllerManager} file={file} />
   )
 }
 
diff --git a/app/assets/javascripts/Components/FileView/FileViewWithProtectedOverlay.tsx b/app/assets/javascripts/Components/FileView/FileViewWithProtectedOverlay.tsx
deleted file mode 100644
index ee44153d0b3..00000000000
--- a/app/assets/javascripts/Components/FileView/FileViewWithProtectedOverlay.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { observer } from 'mobx-react-lite'
-import { useCallback, useEffect, useState } from 'react'
-import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
-import FileView from './FileView'
-import { FileViewProps } from './FileViewProps'
-
-const FileViewWithProtectedOverlay = ({ application, viewControllerManager, file }: FileViewProps) => {
-  const [shouldShowProtectedOverlay, setShouldShowProtectedOverlay] = useState(
-    file.protected && !application.hasProtectionSources(),
-  )
-
-  useEffect(() => {
-    setShouldShowProtectedOverlay(viewControllerManager.filesController.showProtectedOverlay)
-  }, [viewControllerManager.filesController.showProtectedOverlay])
-
-  const dismissProtectedWarning = useCallback(() => {
-    void viewControllerManager.filesController.toggleFileProtection(file)
-  }, [file, viewControllerManager.filesController])
-
-  return shouldShowProtectedOverlay ? (
-    <div aria-label="Note" className="section editor sn-component">
-      {shouldShowProtectedOverlay && (
-        <div className="h-full flex justify-center items-center">
-          <ProtectedItemOverlay
-            viewControllerManager={viewControllerManager}
-            hasProtectionSources={application.hasProtectionSources()}
-            onViewItem={dismissProtectedWarning}
-            itemType={'note'}
-          />
-        </div>
-      )}
-    </div>
-  ) : (
-    <FileView application={application} viewControllerManager={viewControllerManager} file={file} />
-  )
-}
-
-export default observer(FileViewWithProtectedOverlay)
diff --git a/app/assets/javascripts/Components/FileView/FileViewWithoutProtection.tsx b/app/assets/javascripts/Components/FileView/FileViewWithoutProtection.tsx
new file mode 100644
index 00000000000..7d7bc9151c6
--- /dev/null
+++ b/app/assets/javascripts/Components/FileView/FileViewWithoutProtection.tsx
@@ -0,0 +1,84 @@
+import { ElementIds } from '@/Constants/ElementIDs'
+import { KeyboardKey } from '@/Services/IOService'
+import { observer } from 'mobx-react-lite'
+import { ChangeEventHandler, KeyboardEventHandler, useCallback, useRef } from 'react'
+import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
+import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
+import FilePreview from '@/Components/FilePreview/FilePreview'
+import { FileViewProps } from './FileViewProps'
+import { SYNC_TIMEOUT_DEBOUNCE, SYNC_TIMEOUT_NO_DEBOUNCE } from '@/Constants/Constants'
+
+const FileViewWithoutProtection = ({ application, viewControllerManager, file }: FileViewProps) => {
+  const syncTimeoutRef = useRef<number>()
+
+  const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    async (event) => {
+      void application.items.renameFile(file, event.target.value)
+
+      if (syncTimeoutRef.current) {
+        clearTimeout(syncTimeoutRef.current)
+      }
+
+      const debounceTime = application.noAccount() ? SYNC_TIMEOUT_NO_DEBOUNCE : SYNC_TIMEOUT_DEBOUNCE
+
+      syncTimeoutRef.current = window.setTimeout(() => {
+        void application.sync.sync()
+      }, debounceTime)
+    },
+    [application, file],
+  )
+
+  const onTitleEnter: KeyboardEventHandler<HTMLInputElement> = useCallback(({ key, currentTarget }) => {
+    if (key !== KeyboardKey.Enter) {
+      return
+    }
+
+    currentTarget.blur()
+  }, [])
+
+  return (
+    <div className="sn-component section editor" aria-label="File">
+      <div className="flex flex-col">
+        <div className="content-title-bar section-title-bar w-full" id="file-title-bar">
+          <div className="flex items-center justify-between h-8">
+            <div className="flex-grow">
+              <div className="title overflow-auto">
+                <input
+                  className="input"
+                  id={ElementIds.FileTitleEditor}
+                  onChange={onTitleChange}
+                  onFocus={(event) => {
+                    event.target.select()
+                  }}
+                  onKeyUp={onTitleEnter}
+                  spellCheck={false}
+                  value={file.name}
+                  autoComplete="off"
+                />
+              </div>
+            </div>
+            <div className="flex items-center">
+              <div className="mr-3">
+                <AttachedFilesButton
+                  application={application}
+                  featuresController={viewControllerManager.featuresController}
+                  filePreviewModalController={viewControllerManager.filePreviewModalController}
+                  filesController={viewControllerManager.filesController}
+                  navigationController={viewControllerManager.navigationController}
+                  notesController={viewControllerManager.notesController}
+                />
+              </div>
+              <FileOptionsPanel
+                filesController={viewControllerManager.filesController}
+                selectionController={viewControllerManager.selectionController}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <FilePreview file={file} application={application} key={file.uuid} />
+    </div>
+  )
+}
+
+export default observer(FileViewWithoutProtection)
diff --git a/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx b/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
index 07532689360..cb4477dd748 100644
--- a/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
@@ -5,7 +5,7 @@ import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSe
 import NoteView from '@/Components/NoteView/NoteView'
 import MultipleSelectedFiles from '../MultipleSelectedFiles/MultipleSelectedFiles'
 import { ElementIds } from '@/Constants/ElementIDs'
-import FileViewWithProtectedOverlay from '@/Components/FileView/FileViewWithProtectedOverlay'
+import FileView from '@/Components/FileView/FileView'
 
 type State = {
   showMultipleSelectedNotes: boolean
@@ -102,7 +102,7 @@ class NoteGroupView extends PureComponent<Props, State> {
         )}
 
         {shouldNotShowMultipleSelectedItems && this.state.controllers.length < 1 && this.state.selectedFile && (
-          <FileViewWithProtectedOverlay
+          <FileView
             application={this.application}
             viewControllerManager={this.viewControllerManager}
             file={this.state.selectedFile}

From 1be38509512df88029481738bc7d129fc9cc3e4e Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 6 Jun 2022 20:46:27 +0530
Subject: [PATCH 23/24] fix: remove unnecessary conditional

---
 .../Components/FileView/FileView.tsx           | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/Components/FileView/FileView.tsx b/app/assets/javascripts/Components/FileView/FileView.tsx
index 4dadd6ce386..9e3a0453f35 100644
--- a/app/assets/javascripts/Components/FileView/FileView.tsx
+++ b/app/assets/javascripts/Components/FileView/FileView.tsx
@@ -19,16 +19,14 @@ const FileView = ({ application, viewControllerManager, file }: FileViewProps) =
 
   return shouldShowProtectedOverlay ? (
     <div aria-label="Note" className="section editor sn-component">
-      {shouldShowProtectedOverlay && (
-        <div className="h-full flex justify-center items-center">
-          <ProtectedItemOverlay
-            viewControllerManager={viewControllerManager}
-            hasProtectionSources={application.hasProtectionSources()}
-            onViewItem={dismissProtectedWarning}
-            itemType={'note'}
-          />
-        </div>
-      )}
+      <div className="h-full flex justify-center items-center">
+        <ProtectedItemOverlay
+          viewControllerManager={viewControllerManager}
+          hasProtectionSources={application.hasProtectionSources()}
+          onViewItem={dismissProtectedWarning}
+          itemType={'note'}
+        />
+      </div>
     </div>
   ) : (
     <FileViewWithoutProtection application={application} viewControllerManager={viewControllerManager} file={file} />

From a0938fda4f7eb5d300f662c52dea475325ef6b6f Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 6 Jun 2022 21:12:45 +0530
Subject: [PATCH 24/24] feat: rename file only on submit

---
 .../FileView/FileViewWithoutProtection.tsx    | 45 ++++++++-----------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/Components/FileView/FileViewWithoutProtection.tsx b/app/assets/javascripts/Components/FileView/FileViewWithoutProtection.tsx
index 7d7bc9151c6..ff260248ae6 100644
--- a/app/assets/javascripts/Components/FileView/FileViewWithoutProtection.tsx
+++ b/app/assets/javascripts/Components/FileView/FileViewWithoutProtection.tsx
@@ -1,48 +1,40 @@
 import { ElementIds } from '@/Constants/ElementIDs'
-import { KeyboardKey } from '@/Services/IOService'
 import { observer } from 'mobx-react-lite'
-import { ChangeEventHandler, KeyboardEventHandler, useCallback, useRef } from 'react'
+import { ChangeEventHandler, FormEventHandler, useCallback, useEffect, useState } from 'react'
 import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
 import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
 import FilePreview from '@/Components/FilePreview/FilePreview'
 import { FileViewProps } from './FileViewProps'
-import { SYNC_TIMEOUT_DEBOUNCE, SYNC_TIMEOUT_NO_DEBOUNCE } from '@/Constants/Constants'
 
 const FileViewWithoutProtection = ({ application, viewControllerManager, file }: FileViewProps) => {
-  const syncTimeoutRef = useRef<number>()
+  const [name, setName] = useState(file.name)
 
-  const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    async (event) => {
-      void application.items.renameFile(file, event.target.value)
+  useEffect(() => {
+    setName(file.name)
+  }, [file.name])
+
+  const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(async (event) => {
+    setName(event.target.value)
+  }, [])
 
-      if (syncTimeoutRef.current) {
-        clearTimeout(syncTimeoutRef.current)
-      }
+  const onFormSubmit: FormEventHandler = useCallback(
+    async (event) => {
+      event.preventDefault()
 
-      const debounceTime = application.noAccount() ? SYNC_TIMEOUT_NO_DEBOUNCE : SYNC_TIMEOUT_DEBOUNCE
+      await application.items.renameFile(file, name)
 
-      syncTimeoutRef.current = window.setTimeout(() => {
-        void application.sync.sync()
-      }, debounceTime)
+      void application.sync.sync()
     },
-    [application, file],
+    [application.items, application.sync, file, name],
   )
 
-  const onTitleEnter: KeyboardEventHandler<HTMLInputElement> = useCallback(({ key, currentTarget }) => {
-    if (key !== KeyboardKey.Enter) {
-      return
-    }
-
-    currentTarget.blur()
-  }, [])
-
   return (
     <div className="sn-component section editor" aria-label="File">
       <div className="flex flex-col">
         <div className="content-title-bar section-title-bar w-full" id="file-title-bar">
           <div className="flex items-center justify-between h-8">
             <div className="flex-grow">
-              <div className="title overflow-auto">
+              <form onSubmit={onFormSubmit} className="title overflow-auto">
                 <input
                   className="input"
                   id={ElementIds.FileTitleEditor}
@@ -50,12 +42,11 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
                   onFocus={(event) => {
                     event.target.select()
                   }}
-                  onKeyUp={onTitleEnter}
                   spellCheck={false}
-                  value={file.name}
+                  value={name}
                   autoComplete="off"
                 />
-              </div>
+              </form>
             </div>
             <div className="flex items-center">
               <div className="mr-3">