feat: dedicated files layout

packages/models/src/Domain/Syncable/Tag/TagPreferences.ts

@@ -17,4 +17,5 @@ export interface TagPreferences {
   customNoteTitleFormat?: string
   editorIdentifier?: FeatureIdentifier | string
   entryMode?: 'normal' | 'daily'
+  panelWidth?: number
 }

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>
   )
 }

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
   }

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}

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} />
                 </>

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,36 +68,49 @@ 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)
 
   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>
   )
 }

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" />

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
 }

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 }) => {

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>
   )
 }