feat: dedicated files layout (#1928)

2022-11-02 11:06:19 -05:00
parent 1498cce37f
commit dd821c95e6
18 changed files with 226 additions and 98 deletions
--- a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
@@ -12,7 +12,7 @@ import { NavigationController } from '@/Controllers/Navigation/NavigationControl
 import { NotesController } from '@/Controllers/NotesController'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@/Utils/ConcatenateClassNames'
-import { SNTag } from '@standardnotes/snjs'
+import { ContentType, SNTag } from '@standardnotes/snjs'

 type Props = {
  application: WebApplication
@@ -95,35 +95,44 @@ const ContentList: FunctionComponent<Props> = ({
    [hideTags, selectedTag, application],
  )

+  const hasNotes = items.some((item) => item.content_type === ContentType.Note)
+
  return (
    <div
      className={classNames(
        'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
        'md:max-h-full md:overflow-y-hidden md:hover:overflow-y-auto pointer-coarse:md:overflow-y-auto',
-        'md:hover:[overflow-y:_overlay]',
+        'flex flex-wrap pb-2 md:hover:[overflow-y:_overlay]',
+        hasNotes ? 'justify-center' : 'justify-center md:justify-start md:pl-1',
      )}
      id={ElementIds.ContentList}
      onScroll={onScroll}
      onKeyDown={onKeyDown}
      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
    >
-      {items.map((item) => (
-        <ContentListItem
-          key={item.uuid}
-          application={application}
-          item={item}
-          selected={selectedUuids.has(item.uuid)}
-          hideDate={hideDate}
-          hidePreview={hideNotePreview}
-          hideTags={hideTags}
-          hideIcon={hideEditorIcon}
-          sortBy={sortBy}
-          filesController={filesController}
-          onSelect={selectItem}
-          tags={getTagsForItem(item)}
-          notesController={notesController}
-        />
-      ))}
+      {items.map((item, index) => {
+        const previousItem = items[index - 1]
+        const nextItem = items[index + 1]
+        return (
+          <ContentListItem
+            key={item.uuid}
+            application={application}
+            item={item}
+            selected={selectedUuids.has(item.uuid)}
+            hideDate={hideDate}
+            hidePreview={hideNotePreview}
+            hideTags={hideTags}
+            hideIcon={hideEditorIcon}
+            sortBy={sortBy}
+            filesController={filesController}
+            onSelect={selectItem}
+            tags={getTagsForItem(item)}
+            notesController={notesController}
+            isPreviousItemTiled={previousItem?.content_type === ContentType.File}
+            isNextItemTiled={nextItem?.content_type === ContentType.File}
+          />
+        )
+      })}
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListItem.tsx
@@ -1,15 +1,16 @@
-import { ContentType } from '@standardnotes/snjs'
+import { ContentType, FileItem, SNNote } from '@standardnotes/snjs'
 import React, { FunctionComponent } from 'react'
 import FileListItem from './FileListItem'
 import NoteListItem from './NoteListItem'
 import { AbstractListItemProps, doListItemPropsMeritRerender } from './Types/AbstractListItemProps'
+import { ListableContentItem } from './Types/ListableContentItem'

-const ContentListItem: FunctionComponent<AbstractListItemProps> = (props) => {
+const ContentListItem: FunctionComponent<AbstractListItemProps<ListableContentItem>> = (props) => {
  switch (props.item.content_type) {
    case ContentType.Note:
-      return <NoteListItem {...props} />
+      return <NoteListItem {...props} item={props.item as SNNote} />
    case ContentType.File:
-      return <FileListItem {...props} />
+      return <FileListItem {...props} item={props.item as FileItem} />
    default:
      return null
  }
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -1,7 +1,7 @@
 import { KeyboardKey, KeyboardModifier } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/Application'
 import { PANEL_NAME_NOTES } from '@/Constants/Constants'
-import { FileItem, PrefKey, SystemViewId } from '@standardnotes/snjs'
+import { FileItem, PrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react'
 import ContentList from '@/Components/ContentListView/ContentList'
@@ -118,10 +118,7 @@ const ContentListView: FunctionComponent<Props> = ({

  const icon = selectedTag?.iconString

-  const isFilesSmartView = useMemo(
-    () => navigationController.selected?.uuid === SystemViewId.Files,
-    [navigationController.selected?.uuid],
-  )
+  const isFilesSmartView = useMemo(() => navigationController.isInFilesView, [navigationController.isInFilesView])

  const addNewItem = useCallback(async () => {
    if (isFilesSmartView) {
@@ -215,10 +212,14 @@ const ContentListView: FunctionComponent<Props> = ({

  const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
    (width, _lastLeft, _isMaxWidth, isCollapsed) => {
-      application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
+      if (selectedAsTag) {
+        navigationController.setPanelWidthForTag(selectedAsTag, width)
+      } else {
+        application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
+      }
      application.publishPanelDidResizeEvent(PANEL_NAME_NOTES, isCollapsed)
    },
-    [application],
+    [application, selectedAsTag, navigationController],
  )

  const addButtonLabel = useMemo(
@@ -243,15 +244,26 @@ const ContentListView: FunctionComponent<Props> = ({
    [selectionController],
  )

+  useEffect(() => {
+    const hasEditorPane = selectedUuids.size > 0
+    if (!hasEditorPane) {
+      itemsViewPanelRef.current?.style.removeProperty('width')
+    }
+  }, [selectedUuids, itemsViewPanelRef])
+
+  const hasEditorPane = selectedUuids.size > 0 || renderedItems.length === 0
+
  return (
    <div
      id="items-column"
      className={classNames(
        'sn-component section app-column flex h-full flex-col overflow-hidden pt-safe-top',
-        'xl:w-87.5 xsm-only:!w-full sm-only:!w-full',
-        isTabletScreenSize && !isNotesListVisibleOnTablets
-          ? 'pointer-coarse:md-only:!w-0 pointer-coarse:lg-only:!w-0'
-          : 'pointer-coarse:md-only:!w-60 pointer-coarse:lg-only:!w-60',
+        hasEditorPane ? 'xl:w-[24rem] xsm-only:!w-full sm-only:!w-full' : 'w-full md:min-w-[400px]',
+        hasEditorPane
+          ? isTabletScreenSize && !isNotesListVisibleOnTablets
+            ? 'pointer-coarse:md-only:!w-0 pointer-coarse:lg-only:!w-0'
+            : 'pointer-coarse:md-only:!w-60 pointer-coarse:lg-only:!w-60'
+          : '',
      )}
      aria-label={'Notes & Files'}
      ref={itemsViewPanelRef}
@@ -327,7 +339,7 @@ const ContentListView: FunctionComponent<Props> = ({
        ) : null}
        <div className="absolute bottom-0 h-safe-bottom w-full" />
      </ResponsivePaneContent>
-      {itemsViewPanelRef.current && (
+      {hasEditorPane && itemsViewPanelRef.current && (
        <PanelResizer
          collapsable={true}
          hoverable={true}
--- a/packages/web/src/javascripts/Components/ContentListView/Daily/DailyItemCell.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Daily/DailyItemCell.tsx
@@ -1,5 +1,5 @@
 import { formatDateAndTimeForNote } from '@/Utils/DateUtils'
-import { SNTag } from '@standardnotes/snjs'
+import { isNote, SNTag } from '@standardnotes/snjs'
 import { ComponentPropsWithoutRef, forwardRef, FunctionComponent, Ref } from 'react'
 import ListItemFlagIcons from '../ListItemFlagIcons'
 import ListItemMetadata from '../ListItemMetadata'
@@ -65,7 +65,7 @@ export const DailyItemCell = forwardRef(
              {item && (
                <>
                  <ListItemTitle item={item} />
-                  <ListItemNotePreviewText hidePreview={hidePreview} item={item} lineLimit={5} />
+                  {isNote(item) && <ListItemNotePreviewText hidePreview={hidePreview} item={item} lineLimit={5} />}
                  <ListItemMetadata item={item} hideDate={hideDate} sortBy={'created_at'} />
                  <ListItemTags hideTags={hideTags} tags={tags} />
                </>
--- a/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
@@ -3,15 +3,16 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useRef } from 'react'
 import { getFileIconComponent } from '../FilePreview/getFileIconComponent'
 import ListItemConflictIndicator from './ListItemConflictIndicator'
-import ListItemFlagIcons from './ListItemFlagIcons'
 import ListItemTags from './ListItemTags'
 import ListItemMetadata from './ListItemMetadata'
 import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useContextMenuEvent } from '@/Hooks/useContextMenuEvent'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'

-const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
+const FileListItem: FunctionComponent<DisplayableListItemProps<FileItem>> = ({
  application,
  filesController,
  hideDate,
@@ -67,7 +68,7 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
  const IconComponent = () =>
    getFileIconComponent(
      application.iconsController.getIconForFileType((item as FileItem).mimeType),
-      'w-5 h-5 flex-shrink-0',
+      'w-10 h-10 flex-shrink-0',
    )

  useContextMenuEvent(listItemRef, openContextMenu)
@@ -75,28 +76,41 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
  return (
    <div
      ref={listItemRef}
-      className={`content-list-item flex w-full cursor-pointer items-stretch text-text ${
-        selected && 'selected border-l-2px border-solid border-info'
-      }`}
+      className={classNames('flex max-h-[300px] w-[190px] cursor-pointer px-1 pt-2 text-text md:w-[200px]')}
      id={item.uuid}
      onClick={onClick}
    >
-      {!hideIcon ? (
-        <div className="mr-0 flex flex-col items-center justify-between p-4.5 pr-3">
-          <IconComponent />
+      <div
+        className={`flex flex-col justify-between overflow-hidden rounded bg-passive-5 pt-5 transition-all hover:bg-passive-4 ${
+          selected ? 'border-[1px] border-solid border-info' : 'border-[1px] border-solid border-border'
+        }`}
+      >
+        <div className={'px-5'}>
+          {!hideIcon ? (
+            <div className="mr-0">
+              <IconComponent />
+            </div>
+          ) : (
+            <div className="pr-4" />
+          )}
+          <div className="min-w-0 flex-grow py-4 px-0">
+            <div className="line-clamp-2 overflow-hidden text-editor font-semibold">
+              <div className="break-word line-clamp-2 mr-2 overflow-hidden">{item.title}</div>
+            </div>
+            <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
+            <ListItemTags hideTags={hideTags} tags={tags} />
+            <ListItemConflictIndicator item={item} />
+          </div>
        </div>
-      ) : (
-        <div className="pr-4" />
-      )}
-      <div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
-        <div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
-          <div className="break-word mr-2">{item.title}</div>
+        <div
+          className={classNames(
+            'border-t-[1px] border-solid border-border p-3 text-xs font-bold',
+            selected ? 'bg-info text-info-contrast' : 'bg-passive-4 text-neutral',
+          )}
+        >
+          {formatSizeToReadableString(item.decryptedSize)}
        </div>
-        <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
-        <ListItemTags hideTags={hideTags} tags={tags} />
-        <ListItemConflictIndicator item={item} />
      </div>
-      <ListItemFlagIcons item={item} />
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
@@ -11,11 +11,13 @@ type Props = {
    starred: ListableContentItem['starred']
  }
  hasFiles?: boolean
+  hasBorder?: boolean
+  className?: string
 }

-const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false }) => {
+const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false, hasBorder = true, className }) => {
  return (
-    <div className="flex items-start border-b border-solid border-border p-4 pl-0">
+    <div className={`flex items-start ${hasBorder && 'border-b border-solid border-border'} ${className} pl-0`}>
      {item.locked && (
        <span className="flex items-center" title="Editing Disabled">
          <Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="medium" />
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx
@@ -1,9 +1,8 @@
-import { sanitizeHtmlString } from '@standardnotes/snjs'
+import { sanitizeHtmlString, SNNote } from '@standardnotes/snjs'
 import { FunctionComponent } from 'react'
-import { ListableContentItem } from './Types/ListableContentItem'

 type Props = {
-  item: ListableContentItem
+  item: SNNote
  hidePreview: boolean
  lineLimit?: number
 }
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
@@ -1,10 +1,11 @@
 import { FunctionComponent } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
+import { ListableContentItem } from './Types/ListableContentItem'

 type Props = {
  hideTags: boolean
-  tags: DisplayableListItemProps['tags']
+  tags: DisplayableListItemProps<ListableContentItem>['tags']
 }

 const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
--- a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
@@ -14,8 +14,9 @@ import { useContextMenuEvent } from '@/Hooks/useContextMenuEvent'
 import ListItemNotePreviewText from './ListItemNotePreviewText'
 import { ListItemTitle } from './ListItemTitle'
 import { log, LoggingDomain } from '@/Logging'
+import { classNames } from '@/Utils/ConcatenateClassNames'

-const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
+const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
  application,
  notesController,
  onSelect,
@@ -27,6 +28,8 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
  selected,
  sortBy,
  tags,
+  isPreviousItemTiled,
+  isNextItemTiled,
 }) => {
  const { toggleAppPane } = useResponsiveAppPane()

@@ -73,12 +76,17 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({

  log(LoggingDomain.ItemsList, 'Rendering note list item', item.title)

+  const hasOffsetBorder = !isNextItemTiled
+
  return (
    <div
      ref={listItemRef}
-      className={`content-list-item flex w-full cursor-pointer items-stretch text-text ${
-        selected && `selected border-l-2 border-solid border-accessory-tint-${tint}`
-      }`}
+      className={classNames(
+        'content-list-item text-tex flex w-full cursor-pointer items-stretch',
+        selected && `selected border-l-2 border-solid border-accessory-tint-${tint}`,
+        isPreviousItemTiled && 'mt-3 border-t border-solid border-t-border',
+        isNextItemTiled && 'mb-3 border-b border-solid border-b-border',
+      )}
      id={item.uuid}
      onClick={onClick}
    >
@@ -89,14 +97,14 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
      ) : (
        <div className="pr-4" />
      )}
-      <div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
+      <div className={`min-w-0 flex-grow ${hasOffsetBorder && 'border-b border-solid border-border'} py-4 px-0`}>
        <ListItemTitle item={item} />
        <ListItemNotePreviewText item={item} hidePreview={hidePreview} />
        <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
        <ListItemTags hideTags={hideTags} tags={tags} />
        <ListItemConflictIndicator item={item} />
      </div>
-      <ListItemFlagIcons item={item} hasFiles={hasFiles} />
+      <ListItemFlagIcons className="p-4" item={item} hasFiles={hasFiles} hasBorder={hasOffsetBorder} />
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts
+++ b/packages/web/src/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts
@@ -4,7 +4,9 @@ import { NotesController } from '@/Controllers/NotesController'
 import { SortableItem, SNTag, Uuids } from '@standardnotes/snjs'
 import { ListableContentItem } from './ListableContentItem'

-export type AbstractListItemProps = {
+type KeysOfUnion<T> = T extends T ? keyof T : never
+
+export type AbstractListItemProps<I extends ListableContentItem> = {
  application: WebApplication
  filesController: FilesController
  notesController: NotesController
@@ -13,14 +15,19 @@ export type AbstractListItemProps = {
  hideIcon: boolean
  hideTags: boolean
  hidePreview: boolean
-  item: ListableContentItem
+  item: I
  selected: boolean
  sortBy: keyof SortableItem | undefined
  tags: SNTag[]
+  isPreviousItemTiled?: boolean
+  isNextItemTiled?: boolean
 }

-export function doListItemPropsMeritRerender(previous: AbstractListItemProps, next: AbstractListItemProps): boolean {
-  const simpleComparison: (keyof AbstractListItemProps)[] = [
+export function doListItemPropsMeritRerender(
+  previous: AbstractListItemProps<ListableContentItem>,
+  next: AbstractListItemProps<ListableContentItem>,
+): boolean {
+  const simpleComparison: (keyof AbstractListItemProps<ListableContentItem>)[] = [
    'onSelect',
    'hideDate',
    'hideIcon',
@@ -28,6 +35,8 @@ export function doListItemPropsMeritRerender(previous: AbstractListItemProps, ne
    'hidePreview',
    'selected',
    'sortBy',
+    'isPreviousItemTiled',
+    'isNextItemTiled',
  ]

  for (const key of simpleComparison) {
@@ -83,7 +92,7 @@ function doesItemChangeMeritRerender(previous: ListableContentItem, next: Listab
    return true
  }

-  const propertiesMeritingRerender: (keyof ListableContentItem)[] = [
+  const propertiesMeritingRerender: KeysOfUnion<ListableContentItem>[] = [
    'title',
    'protected',
    'updatedAtString',
@@ -97,7 +106,7 @@ function doesItemChangeMeritRerender(previous: ListableContentItem, next: Listab
  ]

  for (const key of propertiesMeritingRerender) {
-    if (previous[key] !== next[key]) {
+    if (previous[key as keyof ListableContentItem] !== next[key as keyof ListableContentItem]) {
      return true
    }
  }
--- a/packages/web/src/javascripts/Components/ContentListView/Types/DisplayableListItemProps.ts
+++ b/packages/web/src/javascripts/Components/ContentListView/Types/DisplayableListItemProps.ts
@@ -1,7 +1,8 @@
 import { SNTag } from '@standardnotes/snjs'
 import { AbstractListItemProps } from './AbstractListItemProps'
+import { ListableContentItem } from './ListableContentItem'

-export type DisplayableListItemProps = AbstractListItemProps & {
+export type DisplayableListItemProps<I extends ListableContentItem> = AbstractListItemProps<I> & {
  tags: {
    uuid: SNTag['uuid']
    title: SNTag['title']
--- a/packages/web/src/javascripts/Components/ContentListView/Types/ListableContentItem.ts
+++ b/packages/web/src/javascripts/Components/ContentListView/Types/ListableContentItem.ts
@@ -1,12 +1,3 @@
-import { DecryptedItem, ItemContent } from '@standardnotes/snjs'
+import { FileItem, SNNote } from '@standardnotes/snjs'

-export type ListableContentItem = DecryptedItem<ItemContent> & {
-  title: string
-  protected: boolean
-  updatedAtString?: string
-  createdAtString?: string
-  hidePreview?: boolean
-  preview_html?: string
-  preview_plain?: string
-  text?: string
-}
+export type ListableContentItem = SNNote | FileItem