refactor: files table view -> content table view

2023-01-06 02:02:07 +05:30
parent ba017d42f5
commit 77ec9ca335
8 changed files with 201 additions and 90 deletions
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -36,9 +36,10 @@ import { FeatureName } from '@/Controllers/FeatureName'
 import { PanelResizedData } from '@/Types/PanelResizedData'
 import { useForwardedRef } from '@/Hooks/useForwardedRef'
 import FloatingAddButton from './FloatingAddButton'
-import FilesTableView from '../FilesTableView/FilesTableView'
+import ContentTableView from '../ContentTableView/ContentTableView'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'

 type Props = {
  accountMenuController: AccountMenuController
@@ -52,6 +53,7 @@ type Props = {
  searchOptionsController: SearchOptionsController
  linkingController: LinkingController
  featuresController: FeaturesController
+  historyModalController: HistoryModalController
  className?: string
  id: string
  children?: React.ReactNode
@@ -72,6 +74,7 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
      searchOptionsController,
      linkingController,
      featuresController,
+      historyModalController,
      className,
      id,
      children,
@@ -353,12 +356,15 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
        ) : null}
        {!dailyMode && renderedItems.length ? (
          shouldShowFilesTableView ? (
-            <FilesTableView
+            <ContentTableView
+              items={items}
              application={application}
              filesController={filesController}
              featuresController={featuresController}
              linkingController={linkingController}
              navigationController={navigationController}
+              notesController={notesController}
+              historyModalController={historyModalController}
            />
          ) : (
            <ContentList
--- a/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
+++ b/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
@@ -5,7 +5,6 @@ import { formatDateForContextMenu } from '@/Utils/DateUtils'
 import { getIconForFileType } from '@/Utils/Items/Icons/getIconForFileType'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import {
-  ContentType,
  FileItem,
  SortableItem,
  PrefKey,
@@ -13,6 +12,8 @@ import {
  naturalSort,
  FileBackupRecord,
  SystemViewId,
+  DecryptedItemInterface,
+  SNNote,
 } from '@standardnotes/snjs'
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { FileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
@@ -32,21 +33,42 @@ import { FeaturesController } from '@/Controllers/FeaturesController'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useApplication } from '../ApplicationProvider'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
+import { getIconAndTintForNoteType } from '@/Utils/Items/Icons/getIconAndTintForNoteType'
+import NotesOptions from '../NotesOptions/NotesOptions'
+import { NotesController } from '@/Controllers/NotesController/NotesController'
+import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'

 const ContextMenuCell = ({
-  files,
+  items,
  filesController,
  navigationController,
  linkingController,
+  notesController,
+  historyModalController,
 }: {
-  files: FileItem[]
+  items: DecryptedItemInterface[]
  filesController: FilesController
  navigationController: NavigationController
  linkingController: LinkingController
+  notesController: NotesController
+  historyModalController: HistoryModalController
 }) => {
+  const application = useApplication()
  const [contextMenuVisible, setContextMenuVisible] = useState(false)
  const anchorElementRef = useRef<HTMLButtonElement>(null)

+  const allItemsAreNotes = useMemo(() => {
+    return items.every((item) => item instanceof SNNote)
+  }, [items])
+
+  const allItemsAreFiles = useMemo(() => {
+    return items.every((item) => item instanceof FileItem)
+  }, [items])
+
+  if (!allItemsAreNotes && !allItemsAreFiles) {
+    return null
+  }
+
  return (
    <>
      <button
@@ -71,30 +93,45 @@ const ContextMenuCell = ({
        className="py-2"
      >
        <Menu a11yLabel="File context menu" isOpen={contextMenuVisible}>
-          <FileMenuOptions
-            linkingController={linkingController}
-            navigationController={navigationController}
-            closeMenu={() => {
-              setContextMenuVisible(false)
-            }}
-            filesController={filesController}
-            shouldShowRenameOption={false}
-            shouldShowAttachOption={false}
-            selectedFiles={files}
-          />
+          {allItemsAreFiles && (
+            <FileMenuOptions
+              linkingController={linkingController}
+              navigationController={navigationController}
+              closeMenu={() => {
+                setContextMenuVisible(false)
+              }}
+              filesController={filesController}
+              shouldShowRenameOption={false}
+              shouldShowAttachOption={false}
+              selectedFiles={items as FileItem[]}
+            />
+          )}
+          {allItemsAreNotes && (
+            <NotesOptions
+              notes={items as SNNote[]}
+              application={application}
+              navigationController={navigationController}
+              notesController={notesController}
+              linkingController={linkingController}
+              historyModalController={historyModalController}
+              closeMenu={() => {
+                setContextMenuVisible(false)
+              }}
+            />
+          )}
        </Menu>
      </Popover>
    </>
  )
 }

-const FileLinksCell = ({
-  file,
+const ItemLinksCell = ({
+  item,
  filesController,
  linkingController,
  featuresController,
 }: {
-  file: FileItem
+  item: DecryptedItemInterface
  filesController: FilesController
  linkingController: LinkingController
  featuresController: FeaturesController
@@ -130,25 +167,38 @@ const FileLinksCell = ({
          filesController={filesController}
          featuresController={featuresController}
          isOpen={contextMenuVisible}
-          item={file}
+          item={item}
        />
      </Popover>
    </>
  )
 }

-const FileNameCell = ({ file }: { file: FileItem }) => {
+const ItemNameCell = ({ item }: { item: DecryptedItemInterface }) => {
  const application = useApplication()
  const [backupInfo, setBackupInfo] = useState<FileBackupRecord | undefined>(undefined)
+  const isItemFile = item instanceof FileItem
+
+  const noteType =
+    item instanceof SNNote
+      ? item.noteType || application.componentManager.editorForNote(item)?.package_info.note_type
+      : undefined
+  const [noteIcon, noteIconTint] = getIconAndTintForNoteType(noteType)

  useEffect(() => {
-    void application.fileBackups?.getFileBackupInfo(file).then(setBackupInfo)
-  }, [application, file])
+    if (isItemFile) {
+      void application.fileBackups?.getFileBackupInfo(item).then(setBackupInfo)
+    }
+  }, [application, isItemFile, item])

  return (
    <div className="flex items-center gap-3 whitespace-normal">
      <span className="relative">
-        {getFileIconComponent(getIconForFileType(file.mimeType), 'w-6 h-6 flex-shrink-0')}
+        {isItemFile ? (
+          getFileIconComponent(getIconForFileType(item.mimeType), 'w-6 h-6 flex-shrink-0')
+        ) : (
+          <Icon type={noteIcon} className={`text-accessory-tint-${noteIconTint}`} />
+        )}
        {backupInfo && (
          <div
            className="absolute bottom-1 right-1 translate-x-1/2 translate-y-1/2 rounded-full bg-default text-success"
@@ -158,8 +208,8 @@ const FileNameCell = ({ file }: { file: FileItem }) => {
          </div>
        )}
      </span>
-      <span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">{file.title}</span>
-      {file.protected && (
+      <span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">{item.title}</span>
+      {item.protected && (
        <span className="flex items-center" title="File is protected">
          <Icon ariaLabel="File is protected" type="lock-filled" className="h-3.5 w-3.5 text-passive-1" size="custom" />
        </span>
@@ -170,22 +220,26 @@ const FileNameCell = ({ file }: { file: FileItem }) => {

 type Props = {
  application: WebApplication
+  items: DecryptedItemInterface[]
  filesController: FilesController
  featuresController: FeaturesController
  linkingController: LinkingController
  navigationController: NavigationController
+  notesController: NotesController
+  historyModalController: HistoryModalController
 }

-const FilesTableView = ({
+const ContentTableView = ({
  application,
+  items,
  filesController,
  featuresController,
  linkingController,
  navigationController,
+  notesController,
+  historyModalController,
 }: Props) => {
-  const files = application.items
-    .getDisplayableNotesAndFiles()
-    .filter((item) => item.content_type === ContentType.File) as FileItem[]
+  const listHasFiles = items.some((item) => item instanceof FileItem)

  const getSortByPreference = useCallback(() => {
    const globalPrefValue = application.getPreference(PrefKey.SortNotesBy, PrefDefaults[PrefKey.SortNotesBy])
@@ -231,48 +285,48 @@ const FilesTableView = ({
    [application],
  )

-  const [contextMenuFile, setContextMenuFile] = useState<FileItem | undefined>(undefined)
+  const [contextMenuItem, setContextMenuItem] = useState<DecryptedItemInterface | undefined>(undefined)
  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | undefined>(undefined)

  const isSmallBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
  const isMediumBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.md)
  const isLargeBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.lg)

-  const columnDefs: TableColumn<FileItem>[] = useMemo(
+  const columnDefs: TableColumn<DecryptedItemInterface>[] = useMemo(
    () => [
      {
        name: 'Name',
        sortBy: 'title',
-        cell: (file) => <FileNameCell file={file} />,
+        cell: (item) => <ItemNameCell item={item} />,
      },
      {
        name: 'Upload date',
        sortBy: 'created_at',
-        cell: (file) => {
-          return formatDateForContextMenu(file.created_at)
+        cell: (item) => {
+          return formatDateForContextMenu(item.created_at)
        },
        hidden: isSmallBreakpoint,
      },
      {
        name: 'Size',
        sortBy: 'decryptedSize',
-        cell: (file) => {
-          return formatSizeToReadableString(file.decryptedSize)
+        cell: (item) => {
+          return item instanceof FileItem ? formatSizeToReadableString(item.decryptedSize) : null
        },
-        hidden: isSmallBreakpoint,
+        hidden: isSmallBreakpoint || !listHasFiles,
      },
      {
        name: 'Attached to',
        hidden: isSmallBreakpoint || isMediumBreakpoint || isLargeBreakpoint,
-        cell: (file) => {
+        cell: (item) => {
          const links = [
-            ...naturalSort(application.items.referencesForItem(file), 'title').map((item) =>
+            ...naturalSort(application.items.referencesForItem(item), 'title').map((item) =>
              createLinkFromItem(item, 'linked'),
            ),
-            ...naturalSort(application.items.itemsReferencingItem(file), 'title').map((item) =>
+            ...naturalSort(application.items.itemsReferencingItem(item), 'title').map((item) =>
              createLinkFromItem(item, 'linked-by'),
            ),
-            ...application.items.getSortedTagsForItem(file).map((item) => createLinkFromItem(item, 'linked')),
+            ...application.items.getSortedTagsForItem(item).map((item) => createLinkFromItem(item, 'linked')),
          ]

          if (!links.length) {
@@ -286,7 +340,7 @@ const FilesTableView = ({
                link={links[0]}
                key={links[0].id}
                unlinkItem={async (itemToUnlink) => {
-                  void application.items.unlinkItems(file, itemToUnlink)
+                  void application.items.unlinkItems(item, itemToUnlink)
                }}
                isBidirectional={false}
              />
@@ -296,13 +350,13 @@ const FilesTableView = ({
        },
      },
    ],
-    [application.items, isLargeBreakpoint, isMediumBreakpoint, isSmallBreakpoint],
+    [application.items, isLargeBreakpoint, isMediumBreakpoint, isSmallBreakpoint, listHasFiles],
  )

-  const getRowId = useCallback((file: FileItem) => file.uuid, [])
+  const getRowId = useCallback((item: DecryptedItemInterface) => item.uuid, [])

  const table = useTable({
-    data: files,
+    data: items,
    sortBy,
    sortReversed,
    onSortChange,
@@ -310,80 +364,103 @@ const FilesTableView = ({
    columns: columnDefs,
    enableRowSelection: true,
    enableMultipleRowSelection: true,
-    onRowActivate(file) {
-      void filesController.handleFileAction({
-        type: FileItemActionType.PreviewFile,
-        payload: {
-          file,
-          otherFiles: files,
-        },
-      })
+    onRowActivate(item) {
+      if (item instanceof FileItem) {
+        void filesController.handleFileAction({
+          type: FileItemActionType.PreviewFile,
+          payload: {
+            file: item,
+            otherFiles: items.filter((i) => i instanceof FileItem) as FileItem[],
+          },
+        })
+      }
    },
    onRowContextMenu(x, y, file) {
      setContextMenuPosition({ x, y })
-      setContextMenuFile(file)
+      setContextMenuItem(file)
    },
-    rowActions: (file) => {
+    rowActions: (item) => {
      return (
        <div className="flex items-center gap-2">
-          <FileLinksCell
-            file={file}
+          <ItemLinksCell
+            item={item}
            filesController={filesController}
            featuresController={featuresController}
            linkingController={linkingController}
          />
          <ContextMenuCell
-            files={[file]}
+            items={[item]}
            filesController={filesController}
            linkingController={linkingController}
            navigationController={navigationController}
+            notesController={notesController}
+            historyModalController={historyModalController}
          />
        </div>
      )
    },
-    selectionActions: (fileIds) => (
+    selectionActions: (itemIds) => (
      <ContextMenuCell
-        files={files.filter((file) => fileIds.includes(file.uuid))}
+        items={items.filter((item) => itemIds.includes(item.uuid))}
        filesController={filesController}
        linkingController={linkingController}
        navigationController={navigationController}
+        notesController={notesController}
+        historyModalController={historyModalController}
      />
    ),
    showSelectionActions: true,
  })

+  const closeContextMenu = () => {
+    setContextMenuPosition(undefined)
+    setContextMenuItem(undefined)
+  }
+
  return (
    <>
      <Table table={table} />
-      {contextMenuPosition && contextMenuFile && (
+      {contextMenuPosition && contextMenuItem && (
        <Popover
          open={true}
          anchorPoint={contextMenuPosition}
          togglePopover={() => {
            setContextMenuPosition(undefined)
-            setContextMenuFile(undefined)
+            setContextMenuItem(undefined)
          }}
          side="bottom"
          align="start"
          className="py-2"
        >
-          <Menu a11yLabel="File context menu" isOpen={true}>
-            <FileMenuOptions
-              closeMenu={() => {
-                setContextMenuPosition(undefined)
-                setContextMenuFile(undefined)
-              }}
-              filesController={filesController}
-              shouldShowRenameOption={false}
-              shouldShowAttachOption={false}
-              selectedFiles={[contextMenuFile]}
-              linkingController={linkingController}
-              navigationController={navigationController}
-            />
-          </Menu>
+          {contextMenuItem instanceof FileItem && (
+            <Menu a11yLabel="File context menu" isOpen={true}>
+              <FileMenuOptions
+                closeMenu={closeContextMenu}
+                filesController={filesController}
+                shouldShowRenameOption={false}
+                shouldShowAttachOption={false}
+                selectedFiles={[contextMenuItem]}
+                linkingController={linkingController}
+                navigationController={navigationController}
+              />
+            </Menu>
+          )}
+          {contextMenuItem instanceof SNNote && (
+            <Menu className="select-none" a11yLabel="Note context menu" isOpen={true}>
+              <NotesOptions
+                notes={[contextMenuItem]}
+                application={application}
+                navigationController={navigationController}
+                notesController={notesController}
+                linkingController={linkingController}
+                historyModalController={historyModalController}
+                closeMenu={closeContextMenu}
+              />
+            </Menu>
+          )}
        </Popover>
      )}
    </>
  )
 }
-export default FilesTableView
+export default ContentTableView
--- a/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
@@ -47,6 +47,7 @@ const NotesContextMenu = ({
    >
      <Menu className="select-none" a11yLabel="Note context menu" isOpen={contextMenuOpen}>
        <NotesOptions
+          notes={notesController.selectedNotes}
          application={application}
          navigationController={navigationController}
          notesController={notesController}
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -39,6 +39,7 @@ const iconClassWarning = `text-warning mr-2 ${iconSize}`
 const iconClassSuccess = `text-success mr-2 ${iconSize}`

 const NotesOptions = ({
+  notes,
  application,
  navigationController,
  notesController,
@@ -61,7 +62,6 @@ const NotesOptions = ({
    return notesMatchingAttribute.length > notesNotMatchingAttribute.length
  }

-  const notes = notesController.selectedNotes
  const hidePreviews = toggleOn((note) => note.hidePreview)
  const locked = toggleOn((note) => note.locked)
  const protect = toggleOn((note) => note.protected)
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -55,6 +55,7 @@ const NotesOptionsPanel = ({
      >
        <Menu a11yLabel="Note options menu" isOpen={isOpen}>
          <NotesOptions
+            notes={notesController.selectedNotes}
            application={application}
            navigationController={navigationController}
            notesController={notesController}
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsProps.ts
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsProps.ts
@@ -3,8 +3,10 @@ import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalCo
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { LinkingController } from '@/Controllers/LinkingController'
+import { SNNote } from '@standardnotes/snjs'

 export type NotesOptionsProps = {
+  notes: SNNote[]
  application: WebApplication
  navigationController: NavigationController
  notesController: NotesController
--- a/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx
+++ b/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx
@@ -304,6 +304,7 @@ const PanesSystemComponent = () => {
              searchOptionsController={viewControllerManager.searchOptionsController}
              linkingController={viewControllerManager.linkingController}
              featuresController={viewControllerManager.featuresController}
+              historyModalController={viewControllerManager.historyModalController}
            >
              {showPanelResizers && listRef && (
                <PanelResizer
--- a/packages/web/src/javascripts/Components/Table/Table.tsx
+++ b/packages/web/src/javascripts/Components/Table/Table.tsx
@@ -162,7 +162,8 @@ function Table<Data>({ table }: { table: Table<Data> }) {
      const currentRow = Array.from(allRenderedRows).find(
        (row) => row.getAttribute('aria-rowindex') === focusedRowIndex.current.toString(),
      )
-      const allFocusableCells = currentRow?.querySelectorAll<HTMLElement>('[tabindex]')
+      const allFocusableCells = Array.from(currentRow ? currentRow.querySelectorAll<HTMLElement>('[tabindex]') : [])
+      const allRenderedColumnsLength = headers.length

      const focusCell = (rowIndex: number, colIndex: number) => {
        const row = gridElement.querySelector(`[role="row"][aria-rowindex="${rowIndex}"]`)
@@ -190,20 +191,42 @@ function Table<Data>({ table }: { table: Table<Data> }) {
            focusCell(nextRow, focusedCellIndex.current)
          }
          break
-        case KeyboardKey.Left:
+        case KeyboardKey.Left: {
          event.preventDefault()
-          if (focusedCellIndex.current > 1) {
-            const previousCell = focusedCellIndex.current - 1
-            focusCell(focusedRowIndex.current, previousCell)
+          if (!allFocusableCells) {
+            return
          }
+          const currentCellIndex = allFocusableCells.findIndex(
+            (cell) => parseInt(cell.getAttribute('aria-colindex') || '0') === focusedCellIndex.current,
+          )
+          if (currentCellIndex === 0) {
+            return
+          }
+          const previousCell = allFocusableCells[currentCellIndex - 1]
+          if (!previousCell) {
+            return
+          }
+          previousCell.focus()
          break
-        case KeyboardKey.Right:
+        }
+        case KeyboardKey.Right: {
          event.preventDefault()
-          if (focusedCellIndex.current < colCount) {
-            const nextCell = focusedCellIndex.current + 1
-            focusCell(focusedRowIndex.current, nextCell)
+          if (!allFocusableCells) {
+            return
          }
+          const currentCellIndex = allFocusableCells.findIndex(
+            (cell) => parseInt(cell.getAttribute('aria-colindex') || '0') === focusedCellIndex.current,
+          )
+          if (currentCellIndex === allFocusableCells.length - 1) {
+            return
+          }
+          const nextCell = allFocusableCells[currentCellIndex + 1]
+          if (!nextCell) {
+            return
+          }
+          nextCell.focus()
          break
+        }
        case KeyboardKey.Home:
          event.preventDefault()
          if (event.ctrlKey) {
@@ -225,7 +248,7 @@ function Table<Data>({ table }: { table: Table<Data> }) {
        case KeyboardKey.End: {
          event.preventDefault()
          if (event.ctrlKey) {
-            focusCell(allRenderedRows.length, headers.length || colCount)
+            focusCell(allRenderedRows.length, allRenderedColumnsLength || colCount)
            return
          }
          if (!allFocusableCells) {
@@ -338,7 +361,7 @@ function Table<Data>({ table }: { table: Table<Data> }) {
  return (
    <div className="block min-h-0 overflow-auto" onScroll={onScroll}>
      {showSelectionActions && selectedRows.length >= 2 && (
-        <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <div className="sticky top-0 z-[2] flex items-center justify-between border-b border-border bg-default px-3 py-2">
          <span className="text-info-0 text-sm font-medium">{selectedRows.length} selected</span>
          {selectedRows.length > 0 && selectionActions}
        </div>