feat: display file backup status in file context menu (#2044) (skip e2e)

* feat: show file backup status in context menu

* feat: show backup status in list cell

* feat: mapping cache

* feat: add to linking menu + date format

* fix: types

packages/web/src/javascripts/Components/FileContextMenu/FileContextMenuBackupOption.tsx

@@ -0,0 +1,57 @@
+import { FunctionComponent, useCallback, useEffect, useState } from 'react'
+import MenuItem from '../Menu/MenuItem'
+import { useApplication } from '../ApplicationView/ApplicationProvider'
+import { FileBackupRecord, FileItem } from '@standardnotes/snjs'
+import { dateToStringStyle1 } from '@/Utils/DateUtils'
+
+export const FileContextMenuBackupOption: FunctionComponent<{ file: FileItem }> = ({ file }) => {
+  const application = useApplication()
+
+  const [backupInfo, setBackupInfo] = useState<FileBackupRecord | undefined>(undefined)
+
+  useEffect(() => {
+    void application.fileBackups?.getFileBackupInfo(file).then(setBackupInfo)
+  }, [application, file])
+
+  const openFileBackup = useCallback(() => {
+    if (backupInfo) {
+      void application.fileBackups?.openFileBackup(backupInfo)
+    }
+  }, [backupInfo, application])
+
+  const configureFileBackups = useCallback(() => {
+    application.openPreferences('backups')
+  }, [application])
+
+  return (
+    <>
+      {backupInfo && (
+        <MenuItem
+          icon={'check-circle'}
+          iconClassName={'text-success mt-1'}
+          className={'items-start'}
+          onClick={openFileBackup}
+        >
+          <div className="ml-2">
+            <div className="font-semibold text-success">Backed up on {dateToStringStyle1(backupInfo.backedUpOn)}</div>
+            <div className="text-xs text-neutral">{backupInfo.absolutePath}</div>
+          </div>
+        </MenuItem>
+      )}
+
+      {!backupInfo && application.fileBackups && (
+        <MenuItem
+          icon={'safe-square'}
+          className={'items-start'}
+          iconClassName={'text-neutral mt-1'}
+          onClick={configureFileBackups}
+        >
+          <div className="ml-2">
+            <div>Configure file backups</div>
+            <div className="text-xs text-neutral">File not backed up locally</div>
+          </div>
+        </MenuItem>
+      )}
+    </>
+  )
+}

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -10,6 +10,7 @@ import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import MenuItem from '../Menu/MenuItem'
 import { MenuItemType } from '../Menu/MenuItemType'
+import { FileContextMenuBackupOption } from './FileContextMenuBackupOption'
 
 type Props = {
   closeMenu: () => void
@@ -120,6 +121,9 @@ const FileMenuOptions: FunctionComponent<Props> = ({
         <Icon type="trash" className="mr-2 text-danger" />
         <span className="text-danger">Delete permanently</span>
       </MenuItem>
+
+      <FileContextMenuBackupOption file={selectedFiles[0]} />
+
       <HorizontalSeparator classes="my-2" />
       <div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
         {!hasSelectedMultipleFiles && (