feat: initial implementation of responsive app panes (#1198)

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -17,6 +17,8 @@ import { NotesController } from '@/Controllers/NotesController'
 import { AccountMenuController } from '@/Controllers/AccountMenu/AccountMenuController'
 import { ElementIds } from '@/Constants/ElementIDs'
 import ContentListHeader from './Header/ContentListHeader'
+import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
+import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -168,11 +170,11 @@ const ContentListView: FunctionComponent<Props> = ({
   return (
     <div
       id="items-column"
-      className="sn-component section app-column app-column-second"
+      className="sn-component section app-column app-column-second border-b border-solid border-border"
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
     >
-      <div className="content">
+      <ResponsivePaneContent paneId={AppPaneId.Items}>
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
           <div id="items-title-bar-container">
             <ContentListHeader
@@ -204,7 +206,7 @@ const ContentListView: FunctionComponent<Props> = ({
             selectionController={selectionController}
           />
         ) : null}
-      </div>
+      </ResponsivePaneContent>
       {itemsViewPanelRef.current && (
         <PanelResizer
           collapsable={true}

packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx

@@ -7,6 +7,8 @@ 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'
 
 const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
   application,
@@ -20,6 +22,8 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
   sortBy,
   tags,
 }) => {
+  const { toggleAppPane } = useResponsiveAppPane()
+
   const openFileContextMenu = useCallback(
     (posX: number, posY: number) => {
       filesController.setFileContextMenuLocation({
@@ -41,9 +45,12 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
     [selectionController, item.uuid, openFileContextMenu],
   )
 
-  const onClick = useCallback(() => {
-    void selectionController.selectItem(item.uuid, true)
-  }, [item.uuid, selectionController])
+  const onClick = useCallback(async () => {
+    const { didSelect } = await selectionController.selectItem(item.uuid, true)
+    if (didSelect) {
+      toggleAppPane(AppPaneId.Editor)
+    }
+  }, [item.uuid, selectionController, toggleAppPane])
 
   const IconComponent = () =>
     getFileIconComponent(

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -1,13 +1,15 @@
 import { PLAIN_EDITOR_NAME } from '@/Constants/Constants'
 import { sanitizeHtmlString, SNNote } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'react'
+import { FunctionComponent, useCallback } from 'react'
 import Icon from '@/Components/Icon/Icon'
 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'
 
 const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
   application,
@@ -22,6 +24,8 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
   sortBy,
   tags,
 }) => {
+  const { toggleAppPane } = useResponsiveAppPane()
+
   const editorForNote = application.componentManager.editorForNote(item as SNNote)
   const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
   const [icon, tint] = application.iconsController.getIconAndTintForNoteType(editorForNote?.package_info.note_type)
@@ -43,15 +47,20 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
     }
   }
 
+  const onClick = useCallback(async () => {
+    const { didSelect } = await selectionController.selectItem(item.uuid, true)
+    if (didSelect) {
+      toggleAppPane(AppPaneId.Editor)
+    }
+  }, [item.uuid, selectionController, toggleAppPane])
+
   return (
     <div
       className={`content-list-item flex w-full cursor-pointer items-stretch text-text ${
         selected && 'selected border-l-2 border-solid border-info'
       }`}
       id={item.uuid}
-      onClick={() => {
-        void selectionController.selectItem(item.uuid, true)
-      }}
+      onClick={onClick}
       onContextMenu={(event) => {
         event.preventDefault()
         void openContextMenu(event.clientX, event.clientY)