feat: release Files view (#1236)

2022-07-09 16:07:20 +05:30
parent 0aef604167
commit 5393eb71fe
9 changed files with 47 additions and 41 deletions
--- a/packages/web/src/javascripts/Application/Application.ts
+++ b/packages/web/src/javascripts/Application/Application.ts
@@ -26,7 +26,6 @@ import { makeObservable, observable } from 'mobx'
 import { PanelResizedData } from '@/Types/PanelResizedData'
 import { WebAppEvent } from './WebAppEvent'
 import { isDesktopApplication } from '@/Utils'
-import { storage, StorageKey } from '@/Services/LocalStorage'

 type WebServices = {
  viewControllerManager: ViewControllerManager
@@ -63,7 +62,7 @@ export class WebApplication extends SNApplication {
      defaultHost: defaultSyncServerHost,
      appVersion: deviceInterface.appVersion,
      webSocketUrl: webSocketUrl,
-      supportsFileNavigation: storage.get(StorageKey.FilesNavigationEnabled) || false,
+      supportsFileNavigation: true,
    })

    makeObservable(this, {
--- a/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
@@ -37,12 +37,20 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({

  const openContextMenu = useCallback(
    async (posX: number, posY: number) => {
-      const { didSelect } = await selectionController.selectItem(item.uuid)
-      if (didSelect) {
+      let shouldOpenContextMenu = selected
+
+      if (!selected) {
+        const { didSelect } = await selectionController.selectItem(item.uuid)
+        if (didSelect) {
+          shouldOpenContextMenu = true
+        }
+      }
+
+      if (shouldOpenContextMenu) {
        openFileContextMenu(posX, posY)
      }
    },
-    [selectionController, item.uuid, openFileContextMenu],
+    [selected, selectionController, item.uuid, openFileContextMenu],
  )

  const onClick = useCallback(async () => {
--- a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
@@ -41,8 +41,16 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
  }

  const openContextMenu = async (posX: number, posY: number) => {
-    const { didSelect } = await selectionController.selectItem(item.uuid, true)
-    if (didSelect) {
+    let shouldOpenContextMenu = selected
+
+    if (!selected) {
+      const { didSelect } = await selectionController.selectItem(item.uuid)
+      if (didSelect) {
+        shouldOpenContextMenu = true
+      }
+    }
+
+    if (shouldOpenContextMenu) {
      openNoteContextMenu(posX, posY)
    }
  }
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
@@ -34,6 +34,12 @@ const FileMenuOptions: FunctionComponent<Props> = ({
  const { handleFileAction } = filesController

  const hasProtectedFiles = useMemo(() => selectedFiles.some((file) => file.protected), [selectedFiles])
+  const hasSelectedMultipleFiles = useMemo(() => selectedFiles.length > 1, [selectedFiles.length])
+
+  const totalFileSize = useMemo(
+    () => selectedFiles.map((file) => file.decryptedSize).reduce((prev, next) => prev + next, 0),
+    [selectedFiles],
+  )

  const onPreview = useCallback(() => {
    void handleFileAction({
@@ -149,16 +155,17 @@ const FileMenuOptions: FunctionComponent<Props> = ({
        <span className="text-danger">Delete permanently</span>
      </button>
      <HorizontalSeparator classes="my-2" />
-      {selectedFiles.length === 1 && (
-        <div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
+      <div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
+        {!hasSelectedMultipleFiles && (
          <div className="mb-1">
            <span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}
          </div>
-          <div>
-            <span className="font-semibold">Size:</span> {formatSizeToReadableString(selectedFiles[0].decryptedSize)}
-          </div>
+        )}
+        <div>
+          <span className="font-semibold">{hasSelectedMultipleFiles ? 'Total Size:' : 'Size:'}</span>{' '}
+          {formatSizeToReadableString(totalFileSize)}
        </div>
-      )}
+      </div>
    </>
  )
 }
--- a/packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx
@@ -28,6 +28,7 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
                  top: 0,
                  left: 0,
                  margin: 'auto',
+                  maxWidth: 'none',
                }),
          }}
          ref={(imgElement) => {
--- a/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
@@ -45,7 +45,7 @@ const NotesContextMenu = ({
  return contextMenuOpen ? (
    <div
      ref={contextMenuRef}
-      className="max-h-120 fixed z-dropdown-menu flex min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default pt-2 shadow-main"
+      className="max-h-120 fixed z-dropdown-menu flex min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main"
      style={{
        ...contextMenuPosition,
        maxHeight: contextMenuMaxHeight,
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -95,7 +95,7 @@ const NoteAttributes: FunctionComponent<{
  const format = editor?.package_info?.file_type || 'txt'

  return (
-    <div className="px-3 pt-1.5 pb-2.5 text-xs font-medium text-neutral">
+    <div className="px-3 py-1.5 text-xs font-medium text-neutral">
      {typeof words === 'number' && (format === 'txt' || format === 'md') ? (
        <>
          <div className="mb-1">
@@ -159,12 +159,15 @@ const NoteSizeWarning: FunctionComponent<{
  note: SNNote
 }> = ({ note }) => {
  return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
-    <div className="bg-warning-faded relative flex items-center px-3 py-3.5">
-      <Icon type="warning" className="mr-3 flex-shrink-0 text-accessory-tint-3" />
-      <div className="leading-140% max-w-80% select-none text-warning">
-        This note may have trouble syncing to the mobile application due to its size.
+    <>
+      <HorizontalSeparator classes="my-2" />
+      <div className="bg-warning-faded relative flex items-center px-3 py-3.5">
+        <Icon type="warning" className="mr-3 flex-shrink-0 text-accessory-tint-3" />
+        <div className="leading-140% max-w-80% select-none text-warning">
+          This note may have trouble syncing to the mobile application due to its size.
+        </div>
      </div>
-    </div>
+    </>
  ) : null
 }

--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -90,7 +90,7 @@ const NotesOptionsPanel = ({
        }}
        className={`${
          open ? 'flex' : 'hidden'
-        } max-h-120 slide-down-animation fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default pt-2 shadow-main transition-transform duration-150`}
+        } max-h-120 slide-down-animation fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main transition-transform duration-150`}
        onBlur={closeOnBlur}
        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
      >
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx
@@ -6,7 +6,6 @@ import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import PreferencesGroup from '../../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../../PreferencesComponents/PreferencesSegment'
 import LabsFeature from './LabsFeature'
-import { StorageKey, useLocalStorageItem } from '@/Services/LocalStorage'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'

 type ExperimentalFeatureItem = {
@@ -25,7 +24,6 @@ type Props = {

 const LabsPane: FunctionComponent<Props> = ({ application }) => {
  const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
-  const [isFilesNavigationEnabled, setFilesNavigation] = useLocalStorageItem(StorageKey.FilesNavigationEnabled)

  const reloadExperimentalFeatures = useCallback(() => {
    const experimentalFeatures = application.features.getExperimentalFeatures().map((featureIdentifier) => {
@@ -47,17 +45,6 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {

  const premiumModal = usePremiumModal()

-  const toggleFilesNavigation = useCallback(() => {
-    const isEntitled = application.features.getFeatureStatus(FeatureIdentifier.Files) === FeatureStatus.Entitled
-
-    if (!isEntitled) {
-      premiumModal.activate('Files navigation')
-      return
-    }
-
-    setFilesNavigation(!isFilesNavigationEnabled)
-  }, [application.features, isFilesNavigationEnabled, premiumModal, setFilesNavigation])
-
  return (
    <PreferencesGroup>
      <PreferencesSegment>
@@ -88,13 +75,6 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
              </Fragment>
            )
          })}
-          <HorizontalSeparator classes="mt-2.5 mb-3" />
-          <LabsFeature
-            name="Files navigation"
-            description={'Enables a "Files" view which allows for better files navigation. Requires reload.'}
-            toggleFeature={toggleFilesNavigation}
-            isEnabled={!!isFilesNavigationEnabled}
-          />
          {experimentalFeatures.length === 0 && (
            <div className="flex items-center justify-between">
              <div className="flex flex-col">