feat: add file view (#1064)

app/assets/javascripts/Components/FileView/FileView.tsx

@@ -0,0 +1,36 @@
+import { observer } from 'mobx-react-lite'
+import { useCallback, useEffect, useState } from 'react'
+import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
+import FileViewWithoutProtection from './FileViewWithoutProtection'
+import { FileViewProps } from './FileViewProps'
+
+const FileView = ({ 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">
+      <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} />
+  )
+}
+
+export default observer(FileView)