feat: update mobile design (#1526)

packages/web/src/javascripts/App.tsx

@@ -66,6 +66,7 @@ const startApplication: StartApplication = async function startApplication(
     root = createRoot(appendedRootNode)
 
     disableIosTextFieldZoom()
+    document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`)
 
     root.render(
       <ApplicationGroupView

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

@@ -68,7 +68,7 @@ const ContentList: FunctionComponent<Props> = ({
   return (
     <div
       className={classNames(
-        'infinite-scroll max-h-[75vh] overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
+        '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',
         'md:hover:[overflow-y:_overlay]',
       )}

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

@@ -185,13 +185,13 @@ const ContentListView: FunctionComponent<Props> = ({
     <div
       id="items-column"
       className={classNames(
-        'sn-component section app-column flex flex-col border-b border-solid border-border ',
+        'sn-component section app-column flex h-screen flex-col md:h-full',
         'xl:w-87.5 xsm-only:!w-full sm-only:!w-full pointer-coarse:md-only:!w-52 pointer-coarse:lg-only:!w-52',
       )}
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
     >
-      <ResponsivePaneContent paneId={AppPaneId.Items} contentClassName="min-h-[85vh]">
+      <ResponsivePaneContent paneId={AppPaneId.Items} className="min-h-[85vh]">
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
           <div id="items-title-bar-container">
             <input

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

@@ -4,6 +4,7 @@ import Icon from '../../Icon/Icon'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import Popover from '@/Components/Popover/Popover'
 import DisplayOptionsMenu from './DisplayOptionsMenu'
+import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu'
 
 type Props = {
   application: {
@@ -35,7 +36,8 @@ const ContentListHeader = ({
   }, [])
 
   return (
-    <div className="section-title-bar-header gap-1">
+    <div className="section-title-bar-header items-start gap-1">
+      <NavigationMenuButton />
       <div className="flex flex-grow flex-col">
         <div className="text-lg font-semibold text-text">{panelTitle}</div>
         {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}

packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx

@@ -60,7 +60,7 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
           </div>
         </div>
       </div>
-      <div className="flex min-h-screen flex-col md:min-h-full md:flex-grow">
+      <div className="flex min-h-0 flex-grow flex-col">
         <FilePreview file={file} application={application} key={file.uuid} />
       </div>
     </div>

packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx

@@ -30,11 +30,11 @@ const AccountMenuButton = ({
         onClick={toggleMenu}
         className={classNames(
           isOpen ? 'bg-border' : '',
-          'flex h-full w-12 cursor-pointer items-center justify-center rounded-full md:w-8',
+          'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
         )}
       >
         <div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
-          <Icon type="account-circle" className="h-6 w-6 hover:text-info md:h-5 md:w-5" />
+          <Icon type="account-circle" className="h-5 w-5 hover:text-info" />
         </div>
       </button>
       <Popover anchorElement={buttonRef.current} open={isOpen} togglePopover={toggleMenu} side="top" className="py-2">

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

@@ -341,7 +341,7 @@ class Footer extends PureComponent<Props, State> {
       <div className="sn-component">
         <footer
           id="footer-bar"
-          className="z-footer-bar flex h-12 w-full select-none items-center justify-between border-t border-border bg-contrast pl-3.5 pr-6 text-text md:h-8 md:px-3"
+          className="z-footer-bar hidden h-8 w-full select-none items-center justify-between border-t border-border bg-contrast px-3 text-text md:flex"
         >
           <div className="left flex h-full">
             <div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none">

packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx

@@ -28,7 +28,7 @@ const QuickSettingsButton = ({
     <>
       <button
         onClick={toggleMenu}
-        className="flex h-full w-12 cursor-pointer items-center justify-center md:w-8"
+        className="flex h-full w-8 cursor-pointer items-center justify-center"
         ref={buttonRef}
       >
         <div className="h-5">

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

@@ -11,6 +11,7 @@ export const ICONS = {
   'check-bold': icons.CheckBoldIcon,
   'check-circle': icons.CheckCircleIcon,
   'chevron-down': icons.ChevronDownIcon,
+  'chevron-left': icons.ChevronLeftIcon,
   'chevron-right': icons.ChevronRightIcon,
   'clear-circle-filled': icons.ClearCircleFilledIcon,
   'cloud-off': icons.CloudOffIcon,
@@ -33,6 +34,7 @@ export const ICONS = {
   'menu-arrow-down': icons.MenuArrowDownIcon,
   'menu-arrow-right': icons.MenuArrowRightIcon,
   'menu-close': icons.MenuCloseIcon,
+  'menu-variant': icons.MenuVariantIcon,
   'notes-filled': icons.NotesFilledIcon,
   'pencil-filled': icons.PencilFilledIcon,
   'pencil-off': icons.PencilOffIcon,

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

@@ -9,6 +9,8 @@ import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '
 import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneContent'
 import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
 import { classNames } from '@/Utils/ConcatenateClassNames'
+import Icon from '../Icon/Icon'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 
 type Props = {
   application: WebApplication
@@ -18,6 +20,7 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
   const viewControllerManager = useMemo(() => application.getViewControllerManager(), [application])
   const ref = useRef<HTMLDivElement>(null)
   const [panelWidth, setPanelWidth] = useState<number>(0)
+  const { toggleAppPane } = useResponsiveAppPane()
 
   useEffect(() => {
     const removeObserver = application.addEventObserver(async () => {
@@ -48,13 +51,15 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
   return (
     <div
       id="navigation"
-      className={'sn-component section app-column w-[220px] xsm-only:!w-full sm-only:!w-full'}
+      className="sn-component section app-column h-screen max-h-screen w-[220px] overflow-hidden pb-8 md:h-full md:min-h-0 md:py-0 xsm-only:!w-full sm-only:!w-full"
       ref={ref}
     >
-      <ResponsivePaneContent
+      <ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">
-        paneId={AppPaneId.Navigation}
+        <div
-        contentElementId="navigation-content"
+          className={classNames(
-        contentClassName="min-h-[85vh]"
+            'flex-grow overflow-y-auto overflow-x-hidden md:overflow-y-hidden md:hover:overflow-y-auto',
+            'md:hover:[overflow-y:_overlay]',
+          )}
         >
           <div className={'section-title-bar'}>
             <div className="section-title-bar-header">
@@ -63,16 +68,41 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
               </div>
             </div>
           </div>
-        <div
-          className={classNames(
-            'h-full overflow-y-auto overflow-x-hidden',
-            'md:overflow-y-hidden md:hover:overflow-y-auto',
-            'md:hover:[overflow-y:_overlay]',
-          )}
-        >
           <SmartViewsSection viewControllerManager={viewControllerManager} />
           <TagsSection viewControllerManager={viewControllerManager} />
         </div>
+        <div className="flex items-center border-t border-border px-3.5 pt-2.5 md:hidden">
+          <button
+            className="flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
+            onClick={() => {
+              toggleAppPane(AppPaneId.Items)
+            }}
+            title="Go to items list"
+            aria-label="Go to items list"
+          >
+            <Icon type="chevron-left" />
+          </button>
+          <button
+            className="ml-auto flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
+            onClick={() => {
+              viewControllerManager.accountMenuController.toggleShow()
+            }}
+            title="Go to items list"
+            aria-label="Go to items list"
+          >
+            <Icon type="account-circle" />
+          </button>
+          <button
+            className="ml-2.5 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
+            onClick={() => {
+              viewControllerManager.quickSettingsMenuController.toggle()
+            }}
+            title="Go to items list"
+            aria-label="Go to items list"
+          >
+            <Icon type="tune" />
+          </button>
+        </div>
       </ResponsivePaneContent>
       {ref.current && (
         <PanelResizer

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

@@ -0,0 +1,20 @@
+import Icon from '../Icon/Icon'
+import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
+
+export const NavigationMenuButton = () => {
+  const { toggleAppPane } = useResponsiveAppPane()
+
+  return (
+    <button
+      className="bg-text-padding mr-3 inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border align-middle text-neutral hover:bg-contrast focus:bg-contrast md:hidden"
+      onClick={() => {
+        toggleAppPane(AppPaneId.Navigation)
+      }}
+      title="Navigation menu"
+      aria-label="Navigation menu"
+    >
+      <Icon type="menu-variant" />
+    </button>
+  )
+}

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

@@ -9,6 +9,27 @@ import FileView from '@/Components/FileView/FileView'
 import { FileDnDContext } from '@/Components/FileDragNDropProvider/FileDragNDropProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
+import Icon from '../Icon/Icon'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
+
+const MobileItemsListButton = () => {
+  const { toggleAppPane } = useResponsiveAppPane()
+
+  return (
+    <div className="px-3.5 pt-2.5 md:hidden">
+      <button
+        className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
+        onClick={() => {
+          toggleAppPane(AppPaneId.Items)
+        }}
+        title="Go to items list"
+        aria-label="Go to items list"
+      >
+        <Icon type="chevron-left" />
+      </button>
+    </div>
+  )
+}
 
 type State = {
   showMultipleSelectedNotes: boolean
@@ -89,8 +110,12 @@ class NoteGroupView extends PureComponent<Props, State> {
       !this.state.showMultipleSelectedNotes && !this.state.showMultipleSelectedFiles
 
     return (
-      <div id={ElementIds.EditorColumn} className="app-column app-column-third h-full">
+      <div
-        <ResponsivePaneContent paneId={AppPaneId.Editor}>
+        id={ElementIds.EditorColumn}
+        className="app-column app-column-third flex min-h-screen flex-col md:h-full md:min-h-0"
+      >
+        <ResponsivePaneContent paneId={AppPaneId.Editor} className="flex-grow">
+          <MobileItemsListButton />
           {this.state.showMultipleSelectedNotes && (
             <MultipleSelectedNotes
               application={this.application}

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

@@ -890,7 +890,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
 
     return (
       <div aria-label="Note" className="section editor sn-component">
-        <div className="flex-grow flex-col md:flex">
         {this.state.noteLocked && (
           <EditingDisabledBanner
             onMouseLeave={() => {
@@ -949,9 +948,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                       >
                         {this.state.noteStatus?.message}
                       </div>
-                        {this.state.noteStatus?.desc && (
+                      {this.state.noteStatus?.desc && <div className="desc text-xs">{this.state.noteStatus.desc}</div>}
-                          <div className="desc text-xs">{this.state.noteStatus.desc}</div>
-                        )}
                     </div>
                   </div>
                 )}
@@ -1067,9 +1064,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                       className="flex flex-grow cursor-pointer items-center justify-center [&:not(:first-child)]:ml-3"
                     >
                       <div className="flex h-full items-center [&:not(:first-child)]:ml-2">
-                          {this.stackComponentExpanded(component) && component.active && (
+                        {this.stackComponentExpanded(component) && component.active && <IndicatorCircle style="info" />}
-                            <IndicatorCircle style="info" />
-                          )}
                         {!this.stackComponentExpanded(component) && <IndicatorCircle style="neutral" />}
                       </div>
                       <div className="flex h-full items-center [&:not(:first-child)]:ml-2">
@@ -1093,7 +1088,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
           </div>
         </div>
       </div>
-      </div>
     )
   }
 }

packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx

@@ -1,43 +1,27 @@
 import { useMemo, ReactNode } from 'react'
-import Icon from '@/Components/Icon/Icon'
+import { AppPaneId } from './AppPaneMetadata'
-import { AppPaneIcons, AppPaneId, AppPaneTitles } from './AppPaneMetadata'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { useResponsiveAppPane } from './ResponsivePaneProvider'
 
 type Props = {
   children: ReactNode
-  contentClassName?: string
+  className?: string
   contentElementId?: string
   paneId: AppPaneId
 }
 
-const ResponsivePaneContent = ({ children, contentClassName, contentElementId, paneId }: Props) => {
+const ResponsivePaneContent = ({ children, className, contentElementId, paneId }: Props) => {
-  const { selectedPane, toggleAppPane: togglePane } = useResponsiveAppPane()
+  const { selectedPane } = useResponsiveAppPane()
 
   const isSelectedPane = useMemo(() => selectedPane === paneId, [paneId, selectedPane])
 
   return (
-    <>
-      <button
-        className={classNames(
-          'flex w-full items-center justify-between border-b border-solid border-border px-4 py-2 focus:shadow-none focus:outline-none md:hidden',
-          isSelectedPane ? 'bg-contrast' : 'bg-default',
-        )}
-        onClick={() => togglePane(paneId)}
-      >
-        <div className="flex items-center gap-2 font-semibold">
-          <Icon type={AppPaneIcons[paneId]} />
-          <span>{AppPaneTitles[paneId]}</span>
-        </div>
-        <Icon type="chevron-down" />
-      </button>
     <div
       id={contentElementId}
-        className={classNames('content flex flex-col', isSelectedPane ? 'h-full' : 'hidden md:flex', contentClassName)}
+      className={classNames('content flex flex-col', isSelectedPane ? 'h-full' : 'hidden md:flex', className)}
     >
       {children}
     </div>
-    </>
   )
 }
 

packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx

@@ -112,7 +112,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
   return (
     <>
       <div
-        className={classNames('tag', isSelected && 'selected', isFaded && 'opacity-50')}
+        className={classNames('tag py-2 px-3.5 md:py-1', isSelected && 'selected', isFaded && 'opacity-50')}
         onClick={selectCurrentTag}
         style={{
           paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,

packages/web/src/javascripts/Components/Tags/TagsListItem.tsx

@@ -22,6 +22,7 @@ import { useDrag, useDrop } from 'react-dnd'
 import { DropItem, DropProps, ItemTypes } from './DragNDrop'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   tag: SNTag
@@ -202,7 +203,11 @@ export const TagsListItem: FunctionComponent<Props> = observer(({ tag, features,
   return (
     <>
       <button
-        className={`tag focus:shadow-inner ${isSelected ? 'selected' : ''} ${readyToDrop ? 'is-drag-over' : ''}`}
+        className={classNames(
+          'tag py-2 px-3.5 focus:shadow-inner md:py-1',
+          isSelected && 'selected',
+          readyToDrop && 'is-drag-over',
+        )}
         onClick={selectCurrentTag}
         ref={dragRef}
         style={{

packages/web/src/stylesheets/_columns.scss

@@ -26,8 +26,9 @@
     }
 
     &:not(.selected) {
+      min-height: 0;
       height: auto;
-      border-bottom: 1px solid var(--sn-stylekit-border-color);
+      padding: 0;
     }
   }
 }

packages/web/src/stylesheets/_main.scss

@@ -150,16 +150,9 @@ $footer-height: 2rem;
   width: 100%;
 
   .section {
-    padding-bottom: 0px;
     position: relative;
     overflow: hidden;
 
-    > .content {
-      height: 100%;
-      max-height: 100%;
-      position: relative;
-    }
-
     .section-title-bar {
       .add-button {
         font-size: 12px;
@@ -168,7 +161,6 @@ $footer-height: 2rem;
       .section-title-bar-header {
         display: flex;
         justify-content: space-between;
-        align-items: center;
         // This was causing problems with tags + button cutting off on right when the panel is a certain size
         // overflow: hidden;
 

packages/web/src/stylesheets/_navigation.scss

@@ -57,7 +57,6 @@ $content-horizontal-padding: 16px;
   .tag,
   .root-drop {
     font-size: 14px;
-    padding: 4px 14px;
     cursor: pointer;
     transition: height 0.1s ease-in-out;
     width: 100%;

packages/web/tailwind.config.js

@@ -42,12 +42,17 @@ module.exports = {
         89: '22.25rem',
         125: '31.25rem',
       },
+      height: {
+        screen: 'var(--viewport-height)',
+      },
       minHeight: {
         1: '0.25rem',
         2: '0.5rem',
+        screen: 'var(--viewport-height)',
       },
       maxHeight: {
         110: '27.5rem',
+        screen: 'var(--viewport-height)',
       },
       zIndex: {
         'editor-content': 'var(--z-index-editor-content)',