feat: mobile support

packages/core/dev-test/config.yml

@@ -870,7 +870,7 @@ collections:
               - value: 2
                 label: Another fancy label
               - value: c
-                label: And one more fancy label
+                label: And one more fancy label test test test test test test test
           - label: Value and Label With Default
             name: value_and_label_with_default
             widget: select

packages/core/package.json

@@ -84,9 +84,9 @@
     "@styled-icons/material-rounded": "10.47.0",
     "@styled-icons/remix-editor": "10.46.0",
     "@styled-icons/simple-icons": "10.46.0",
-    "@udecode/plate": "21.1.4",
-    "@udecode/plate-juice": "21.0.0",
-    "@udecode/plate-serializer-md": "21.0.0",
+    "@udecode/plate": "21.3.2",
+    "@udecode/plate-juice": "21.3.2",
+    "@udecode/plate-serializer-md": "21.3.2",
     "@uiw/codemirror-extensions-langs": "4.19.16",
     "@uiw/react-codemirror": "4.19.16",
     "ajv": "8.12.0",
@@ -156,10 +156,10 @@
     "sanitize-filename": "1.6.3",
     "scheduler": "0.23.0",
     "semaphore": "1.1.0",
-    "slate": "0.91.4",
-    "slate-history": "0.86.0",
+    "slate": "0.94.1",
+    "slate-history": "0.93.0",
     "slate-hyperscript": "0.77.0",
-    "slate-react": "0.91.10",
+    "slate-react": "0.95.0",
     "stream-browserify": "3.0.0",
     "styled-components": "5.3.10",
     "symbol-observable": "4.0.0",
@@ -271,6 +271,7 @@
     "tailwindcss": "3.3.1",
     "to-string-loader": "1.2.0",
     "ts-jest": "29.1.0",
+    "ts-node": "10.9.1",
     "tsconfig-paths-webpack-plugin": "4.0.1",
     "typescript": "5.0.4",
     "webpack": "5.80.0",

packages/core/src/bootstrap.tsx

@@ -16,6 +16,7 @@ import addExtensions from './extensions';
 import { getPhrases } from './lib/phrases';
 import { selectLocale } from './reducers/selectors/config';
 import { store } from './store';
+import useMeta from './lib/hooks/useMeta';
 
 import type { AnyAction } from '@reduxjs/toolkit';
 import type { ConnectedProps } from 'react-redux';
@@ -45,6 +46,8 @@ import ReactDOM from 'react-dom';
 ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = true;
 
 const TranslatedApp = ({ locale, config }: AppRootProps) => {
+  useMeta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' });
+
   if (!config) {
     return null;
   }

packages/core/src/components/MainView.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import TopBarProgress from 'react-topbar-progress-indicator';
 
 import classNames from '../lib/util/classNames.util';
+import BottomNavigation from './navbar/BottomNavigation';
 import Navbar from './navbar/Navbar';
 import Sidebar from './navbar/Sidebar';
 
 import type { ReactNode } from 'react';
-import type { Breadcrumb } from '../interface';
+import type { Breadcrumb, Collection } from '../interface';
 
 TopBarProgress.config({
   barColors: {
@@ -25,6 +26,7 @@ interface MainViewProps {
   noMargin?: boolean;
   noScroll?: boolean;
   children: ReactNode;
+  collection?: Collection;
 }
 
 const MainView = ({
@@ -35,6 +37,7 @@ const MainView = ({
   noMargin = false,
   noScroll = false,
   navbarActions,
+  collection,
 }: MainViewProps) => {
   return (
     <>
@@ -48,11 +51,12 @@ const MainView = ({
         <div
           id="main-view"
           className={classNames(
-            showLeftNav ? 'w-main left-64' : 'w-full',
+            showLeftNav ? ' w-full left-0 md:w-main' : 'w-full',
             !noMargin && 'px-5 py-4',
             noScroll ? 'overflow-hidden' : 'overflow-y-auto',
             `
-              h-main
+              h-main-mobile
+              md:h-main
               relative
               styled-scrollbars
             `,
@@ -61,6 +65,7 @@ const MainView = ({
           {children}
         </div>
       </div>
+      <BottomNavigation collection={collection} />
     </>
   );
 };

packages/core/src/components/collections/CollectionControls.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import ViewStyleControl from '../common/view-style/ViewStyleControl';
 import FilterControl from './FilterControl';
 import GroupControl from './GroupControl';
+import MobileCollectionControls from './mobile/MobileCollectionControls';
 import SortControl from './SortControl';
-import ViewStyleControl from '../common/view-style/ViewStyleControl';
 
 import type { ViewStyle } from '@staticcms/core/constants/views';
 import type {
@@ -12,7 +13,6 @@ import type {
   SortableField,
   SortDirection,
   SortMap,
-  TranslatedProps,
   ViewFilter,
   ViewGroup,
 } from '@staticcms/core/interface';
@@ -41,34 +41,69 @@ const CollectionControls = ({
   viewGroups,
   onFilterClick,
   onGroupClick,
-  t,
   filter,
   group,
-}: TranslatedProps<CollectionControlsProps>) => {
+}: CollectionControlsProps) => {
+  const showGroupControl = useMemo(
+    () => Boolean(viewGroups && onGroupClick && group && viewGroups.length > 0),
+    [group, onGroupClick, viewGroups],
+  );
+
+  const showFilterControl = useMemo(
+    () => Boolean(viewFilters && onFilterClick && filter && viewFilters.length > 0),
+    [filter, onFilterClick, viewFilters],
+  );
+
+  const showSortControl = useMemo(
+    () => Boolean(sortableFields && onSortClick && sort && sortableFields.length > 0),
+    [onSortClick, sort, sortableFields],
+  );
+
   return (
-    <div className="flex gap-2 items-center relative z-20">
-      <ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} />
-      {viewGroups && onGroupClick && group
-        ? viewGroups.length > 0 && (
-            <GroupControl viewGroups={viewGroups} onGroupClick={onGroupClick} t={t} group={group} />
-          )
-        : null}
-      {viewFilters && onFilterClick && filter
-        ? viewFilters.length > 0 && (
-            <FilterControl
-              viewFilters={viewFilters}
-              onFilterClick={onFilterClick}
-              t={t}
-              filter={filter}
-            />
-          )
-        : null}
-      {sortableFields && onSortClick && sort
-        ? sortableFields.length > 0 && (
-            <SortControl fields={sortableFields} sort={sort} onSortClick={onSortClick} />
-          )
-        : null}
-    </div>
+    <>
+      <div
+        className="
+          flex
+          items-center
+          relative
+          z-20
+          w-full
+          justify-end
+          gap-1.5
+          sm:w-auto
+          sm:justify-normal
+          lg:gap-2
+          flex-[1_0_0%]
+        "
+      >
+        <ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} />
+        {showGroupControl || showFilterControl || showFilterControl ? (
+          <MobileCollectionControls
+            showFilterControl={showFilterControl}
+            viewFilters={viewFilters}
+            onFilterClick={onFilterClick}
+            filter={filter}
+            showGroupControl={showGroupControl}
+            viewGroups={viewGroups}
+            onGroupClick={onGroupClick}
+            group={group}
+            showSortControl={showSortControl}
+            fields={sortableFields}
+            sort={sort}
+            onSortClick={onSortClick}
+          />
+        ) : null}
+        {showGroupControl ? (
+          <GroupControl viewGroups={viewGroups} onGroupClick={onGroupClick} group={group} />
+        ) : null}
+        {showFilterControl ? (
+          <FilterControl viewFilters={viewFilters} onFilterClick={onFilterClick} filter={filter} />
+        ) : null}
+        {showSortControl ? (
+          <SortControl fields={sortableFields} sort={sort} onSortClick={onSortClick} />
+        ) : null}
+      </div>
+    </>
   );
 };
 

packages/core/src/components/collections/CollectionHeader.tsx

@@ -11,26 +11,25 @@ import {
 import { isNotEmpty } from '@staticcms/core/lib/util/string.util';
 import { addFileTemplateFields } from '@staticcms/core/lib/widgets/stringTemplate';
 import Button from '../common/button/Button';
+import useNewEntryUrl from '@staticcms/core/lib/hooks/useNewEntryUrl';
 
 import type { Collection, Entry, TranslatedProps } from '@staticcms/core/interface';
+import type { FC } from 'react';
 
 interface CollectionHeaderProps {
   collection: Collection;
-  newEntryUrl?: string;
 }
 
-const CollectionHeader = ({
-  collection,
-  newEntryUrl,
-  t,
-}: TranslatedProps<CollectionHeaderProps>) => {
+const CollectionHeader: FC<TranslatedProps<CollectionHeaderProps>> = ({ collection, t }) => {
   const collectionLabel = collection.label;
   const collectionLabelSingular = collection.label_singular;
 
-  const icon = useIcon(collection.icon);
-
   const params = useParams();
   const filterTerm = useMemo(() => params['*'], [params]);
+  const newEntryUrl = useNewEntryUrl(collection, filterTerm);
+
+  const icon = useIcon(collection.icon);
+
   const entries = useEntries(collection);
 
   const pluralLabel = useMemo(() => {
@@ -65,7 +64,18 @@ const CollectionHeader = ({
 
   return (
     <>
-      <div className="flex flex-grow gap-4">
+      <div
+        className="
+          flex
+          flex-grow
+          gap-4
+          justify-normal
+          xs:justify-between
+          sm:justify-normal
+          w-full
+          truncate
+        "
+      >
         <h2
           className="
             text-xl
@@ -75,13 +85,25 @@ const CollectionHeader = ({
             text-gray-800
             dark:text-gray-300
             gap-2
+            flex-grow
+            w-full
+            md:grow-0
+            md:w-auto
           "
         >
           <div className="flex items-center">{icon}</div>
-          {pluralLabel}
+          <div
+            className="
+              w-collection-header
+              flex-grow
+              truncate
+            "
+          >
+            {pluralLabel}
+          </div>
         </h2>
         {newEntryUrl ? (
-          <Button to={newEntryUrl}>
+          <Button to={newEntryUrl} className="hidden md:flex">
             {t('collection.collectionTop.newButton', {
               collectionLabel: collectionLabelSingular || pluralLabel,
             })}
@@ -92,4 +114,4 @@ const CollectionHeader = ({
   );
 };
 
-export default translate()(CollectionHeader);
+export default translate()(CollectionHeader) as FC<CollectionHeaderProps>;

packages/core/src/components/collections/CollectionPage.tsx

@@ -42,7 +42,14 @@ const SingleCollectionPage: FC<SingleCollectionPageProps> = ({
   const breadcrumbs = useBreadcrumbs(collection, filterTerm);
 
   return (
-    <MainView breadcrumbs={breadcrumbs} showQuickCreate showLeftNav noScroll noMargin>
+    <MainView
+      breadcrumbs={breadcrumbs}
+      collection={collection}
+      showQuickCreate
+      showLeftNav
+      noScroll
+      noMargin
+    >
       <CollectionView
         name={name}
         searchTerm={searchTerm}

packages/core/src/components/collections/CollectionSearch.tsx

@@ -136,6 +136,10 @@ const CollectionSearch = ({
     [submitSearch],
   );
 
+  const handleClick = useCallback((event: MouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
   return (
     <div>
       <div className="relative">
@@ -171,6 +175,7 @@ const CollectionSearch = ({
           onFocus={handleFocus}
           value={query}
           onChange={handleQueryChange}
+          onClick={handleClick}
         />
       </div>
       <PopperUnstyled
@@ -191,7 +196,7 @@ const CollectionSearch = ({
           ring-opacity-5
           focus:outline-none
           sm:text-sm
-          z-40
+          z-[1300]
           dark:bg-slate-700
           dark:shadow-lg
         "