Fix preview, delete, extras menu showing, media header, remove view controls from media library

packages/core/dev-test/config.yml

@@ -844,8 +844,6 @@ collections:
         label: Site Settings
         file: _data/settings.json
         description: General Site Settings
-        editor:
-          preview: true
         fields:
           - label: Number of posts on frontpage
             name: front_limit

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

@@ -76,8 +76,18 @@ const CollectionHeader = ({
   return (
     <>
       <div className="flex flex-grow gap-4">
-        <h2 className="text-xl font-semibold flex items-center text-gray-800 dark:text-gray-300">
+        <h2
-          <div className="mr-2 flex">{icon}</div>
+          className="
+            text-xl
+            font-semibold
+            flex
+            items-center
+            text-gray-800
+            dark:text-gray-300
+            gap-2
+          "
+        >
+          <div className="flex items-center">{icon}</div>
           {pluralLabel}
         </h2>
         {newEntryUrl ? (

packages/core/src/components/entry-editor/Editor.tsx

@@ -47,7 +47,6 @@ const Editor: FC<TranslatedProps<EditorProps>> = ({
   displayUrl,
   isModification,
   draftKey,
-  showDelete,
   slug,
   localBackup,
   scrollSyncActive,
@@ -292,7 +291,6 @@ const Editor: FC<TranslatedProps<EditorProps>> = ({
         onPersist={handlePersistEntry}
         onDelete={handleDeleteEntry}
         onDuplicate={handleDuplicateEntry}
-        showDelete={showDelete ?? true}
         hasChanged={hasChanged}
         displayUrl={displayUrl}
         isNewEntry={!slug}
@@ -312,7 +310,6 @@ interface CollectionViewOwnProps {
   name: string;
   slug?: string;
   newRecord: boolean;
-  showDelete?: boolean;
 }
 
 function mapStateToProps(state: RootState, ownProps: CollectionViewOwnProps) {

packages/core/src/components/entry-editor/EditorInterface.tsx

@@ -62,7 +62,6 @@ interface EditorInterfaceProps {
   onPersist: (opts?: EditorPersistOptions) => void;
   onDelete: () => Promise<void>;
   onDuplicate: () => void;
-  showDelete: boolean;
   hasChanged: boolean;
   displayUrl: string | undefined;
   isNewEntry: boolean;
@@ -78,7 +77,6 @@ const EditorInterface = ({
   entry,
   fields = [],
   fieldsErrors,
-  showDelete,
   onDelete,
   onDuplicate,
   onPersist,
@@ -99,6 +97,7 @@ const EditorInterface = ({
   const [previewActive, setPreviewActive] = useState(
     localStorage.getItem(PREVIEW_VISIBLE) !== 'false',
   );
+
   const [i18nActive, setI18nActive] = useState(
     Boolean(localStorage.getItem(I18N_VISIBLE) !== 'false' && locales && locales.length > 0),
   );
@@ -137,13 +136,16 @@ const EditorInterface = ({
   }, []);
 
   const [showPreviewToggle, previewInFrame] = useMemo(() => {
+    console.log('[PREVIEW] collection', collection);
     let preview = collection.editor?.preview ?? true;
+    console.log('[PREVIEW] preview', preview);
     let frame = collection.editor?.frame ?? true;
 
     if ('files' in collection) {
       const file = getFileFromSlug(collection, entry.slug);
       if (file?.editor?.preview !== undefined) {
         preview = file.editor.preview;
+        console.log('[PREVIEW] preview file', preview);
       }
 
       if (file?.editor?.frame !== undefined) {
@@ -154,6 +156,11 @@ const EditorInterface = ({
     return [preview, frame];
   }, [collection, entry.slug]);
 
+  const finalPreviewActive = useMemo(
+    () => showPreviewToggle && previewActive,
+    [previewActive, showPreviewToggle],
+  );
+
   const collectHasI18n = hasI18n(collection);
 
   const editor = (
@@ -174,7 +181,7 @@ const EditorInterface = ({
         fieldsErrors={fieldsErrors}
         locale={defaultLocale}
         submitted={submitted}
-        hideBorder={!previewActive && !i18nActive}
+        hideBorder={!finalPreviewActive && !i18nActive}
         t={t}
       />
     </div>
@@ -240,6 +247,8 @@ const EditorInterface = ({
   );
   const breadcrumbs = useBreadcrumbs(collection, nestedFieldPath, { isNewEntry, summary, t });
 
+  console.log('[PREVIEW] showPreviewToggle', showPreviewToggle);
+
   return (
     <MainView
       breadcrumbs={breadcrumbs}
@@ -253,7 +262,6 @@ const EditorInterface = ({
           onPersistAndNew={() => handleOnPersist({ createNew: true })}
           onPersistAndDuplicate={() => handleOnPersist({ createNew: true, duplicate: true })}
           onDelete={onDelete}
-          showDelete={showDelete}
           onDuplicate={onDuplicate}
           hasChanged={hasChanged}
           displayUrl={displayUrl}
@@ -261,7 +269,7 @@ const EditorInterface = ({
           isNewEntry={isNewEntry}
           isModification={isModification}
           showPreviewToggle={showPreviewToggle}
-          previewActive={previewActive}
+          previewActive={finalPreviewActive}
           scrollSyncActive={scrollSyncActive}
           showI18nToggle={collectHasI18n}
           i18nActive={i18nActive}
@@ -274,7 +282,7 @@ const EditorInterface = ({
       <EditorContent
         key={draftKey}
         i18nActive={i18nActive}
-        previewActive={previewActive && !i18nActive}
+        previewActive={finalPreviewActive && !i18nActive}
         editor={editor}
         editorSideBySideLocale={editorSideBySideLocale}
         editorWithPreview={editorWithPreview}

packages/core/src/components/entry-editor/EditorToolbar.tsx

@@ -25,7 +25,6 @@ export interface EditorToolbarProps {
   onPersistAndNew: () => Promise<void>;
   onPersistAndDuplicate: () => Promise<void>;
   onDelete: () => Promise<void>;
-  showDelete: boolean;
   onDuplicate: () => void;
   hasChanged: boolean;
   displayUrl: string | undefined;
@@ -52,7 +51,6 @@ const EditorToolbar = ({
   onPersistAndDuplicate,
   onPersistAndNew,
   isNewEntry,
-  showDelete,
   onDelete,
   t,
   showPreviewToggle,
@@ -110,10 +108,17 @@ const EditorToolbar = ({
     return items;
   }, [canCreate, isPublished, onDuplicate, onPersist, onPersistAndDuplicate, onPersistAndNew, t]);
 
+  console.log(
+    '[PREVIEW] showI18nToggle || showPreviewToggle || showDelete',
+    showI18nToggle,
+    showPreviewToggle,
+    canDelete,
+  );
+
   return useMemo(
     () => (
       <div className="flex gap-2">
-        {showI18nToggle || showPreviewToggle || showDelete ? (
+        {showI18nToggle || showPreviewToggle || canDelete ? (
           <Menu
             key="extra-menu"
             label={<MoreVertIcon className="w-5 h-5" />}
@@ -154,7 +159,7 @@ const EditorToolbar = ({
                 </>
               )}
             </MenuGroup>
-            {showDelete && canDelete ? (
+            {canDelete ? (
               <MenuGroup key="delete-button">
                 <MenuItemButton onClick={onDelete} startIcon={TrashIcon} color="error">
                   {t('editor.editorToolbar.deleteEntry')}
@@ -174,7 +179,6 @@ const EditorToolbar = ({
     [
       showI18nToggle,
       showPreviewToggle,
-      showDelete,
       toggleI18n,
       i18nActive,
       t,

packages/core/src/components/media-library/common/MediaLibrary.tsx

@@ -4,7 +4,6 @@ import isEmpty from 'lodash/isEmpty';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { translate } from 'react-polyglot';
 
-import { changeViewStyle } from '@staticcms/core/actions/entries';
 import {
   closeMediaLibrary,
   deleteMedia,
@@ -16,20 +15,17 @@ import {
 import useMediaFiles from '@staticcms/core/lib/hooks/useMediaFiles';
 import { fileExtension } from '@staticcms/core/lib/util';
 import MediaLibraryCloseEvent from '@staticcms/core/lib/util/events/MediaLibraryCloseEvent';
-import { selectViewStyle } from '@staticcms/core/reducers/selectors/entries';
 import { selectMediaLibraryState } from '@staticcms/core/reducers/selectors/mediaLibrary';
 import { useAppDispatch, useAppSelector } from '@staticcms/core/store/hooks';
 import alert from '../../common/alert/Alert';
 import Button from '../../common/button/Button';
 import confirm from '../../common/confirm/Confirm';
-import ViewStyleControl from '../../common/view-style/ViewStyleControl';
 import CurrentMediaDetails from './CurrentMediaDetails';
 import EmptyMessage from './EmptyMessage';
 import FileUploadButton from './FileUploadButton';
 import MediaLibraryCardGrid from './MediaLibraryCardGrid';
 import MediaLibrarySearch from './MediaLibrarySearch';
 
-import type { ViewStyle } from '@staticcms/core/constants/views';
 import type { MediaFile, TranslatedProps } from '@staticcms/core/interface';
 import type { ChangeEvent, FC, KeyboardEvent } from 'react';
 
@@ -59,7 +55,6 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals
   const [query, setQuery] = useState<string | undefined>(undefined);
 
   const dispatch = useAppDispatch();
-  const viewStyle = useAppSelector(selectViewStyle);
   const {
     isVisible,
     displayURLs,
@@ -86,13 +81,6 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals
 
   const files = useMediaFiles(field);
 
-  const handleViewStyleChange = useCallback(
-    (viewStyle: ViewStyle) => {
-      dispatch(changeViewStyle(viewStyle));
-    },
-    [dispatch],
-  );
-
   useEffect(() => {
     if (!prevIsVisible && isVisible) {
       setSelectedFile(null);
@@ -378,10 +366,20 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals
       />
       <div className="flex items-center px-5 pt-4">
         <div className="flex flex-grow gap-4 mr-8">
-          <h2 className="text-xl font-semibold flex items-center text-gray-800 dark:text-gray-300">
+          <h2
-            <span className="mr-2">
+            className="
+              text-xl
+              font-semibold
+              flex
+              items-center
+              gap-2
+              text-gray-800
+              dark:text-gray-300
+            "
+          >
+            <div className="flex items-center">
               <PhotoIcon className="w-5 h-5" />
-            </span>
+            </div>
             {t('app.header.media')}
           </h2>
           <MediaLibrarySearch
@@ -393,7 +391,6 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals
           />
         </div>
         <div className="flex gap-3 items-center relative z-20">
-          <ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={handleViewStyleChange} />
           <FileUploadButton imagesOnly={forImage} onChange={handlePersist} />
           {canInsert ? (
             <Button

packages/demo/public/config.yml

@@ -845,8 +845,6 @@ collections:
         label: Site Settings
         file: _data/settings.json
         description: General Site Settings
-        editor:
-          preview: true
         fields:
           - label: Number of posts on frontpage
             name: front_limit