#270 #282 - Enhancements for page bundles and related folders + files

src/dashboardWebView/components/Media/FolderItem.tsx

@@ -1,5 +1,5 @@
-import {FolderIcon} from '@heroicons/react/solid';
-import { basename } from 'path';
+import {DocumentIcon, FolderIcon} from '@heroicons/react/solid';
+import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
 import { SelectedMediaFolderAtom } from '../../state';
@@ -14,12 +14,19 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({ folder,
   const [ , setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
 
   const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
+
+  const isContentFolder = React.useMemo(() => !relFolderPath.includes(join('/', staticFolder || '', '/')), [relFolderPath, staticFolder]);
   
   return (
     <li className={`group relative hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
-      <button className={`w-full flex flex-row items-center h-full`} onClick={() => setSelectedFolder(folder)}>
-        <div>
-          <FolderIcon className={`h-12 w-12 mr-4`} />
+      <button title={isContentFolder ? 'Content directory folder' : 'Public directory folder'} className={`w-full flex flex-row items-center h-full`} onClick={() => setSelectedFolder(folder)}>
+        <div className='relative mr-4'>
+          <FolderIcon className={`h-12 w-12`} />
+          {
+            isContentFolder && (
+              <span className='text-whisper-800 dark:text-vulcan-500 font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2'>C</span>
+            )
+          }
         </div>
 
         <p className="text-sm font-bold pointer-events-none flex items-center text-left overflow-hidden break-words">

src/dashboardWebView/components/Media/Media.tsx

@@ -16,6 +16,8 @@ import { FolderItem } from './FolderItem';
 import useMedia from '../../hooks/useMedia';
 import { TelemetryEvent } from '../../../constants';
 import { PageLayout } from '../Layout/PageLayout';
+import { parseWinPath } from '../../../helpers/parseWinPath';
+import { join } from 'path';
 
 export interface IMediaProps {}
 
@@ -27,6 +29,25 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
   const folders = useRecoilValue(MediaFoldersAtom);
   const loading = useRecoilValue(LoadingAtom);
 
+
+  const allFolders = React.useMemo(() => {
+    // Check if content allows page bundle
+    if (viewData && viewData.data && typeof viewData.data.pageBundle !== "undefined" && !viewData.data.pageBundle) {
+      return folders.filter(f => parseWinPath(f).includes(join('/', settings?.staticFolder || '', '/')));
+    }
+
+    return folders;
+  }, [folders, viewData, settings?.staticFolder]);
+
+  const allMedia = React.useMemo(() => {
+    // Check if content allows page bundle
+    if (viewData && viewData.data && typeof viewData.data.pageBundle !== "undefined" && !viewData.data.pageBundle) {
+      return media.filter(m => parseWinPath(m.fsPath).includes(join('/', settings?.staticFolder || '', '/')));
+    }
+
+    return media;
+  }, [media, viewData, settings?.staticFolder]); 
+
   const onDrop = useCallback((acceptedFiles: File[]) => {
     acceptedFiles.forEach((file) => {
       const reader = new FileReader();
@@ -79,7 +100,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
         }
 
         {
-          (media.length === 0 && folders.length === 0 && !loading) && (
+          (allMedia.length === 0 && folders.length === 0 && !loading) && (
             <div className={`flex items-center justify-center h-full`}>
               <div className={`max-w-xl text-center`}>
                 <FrontMatterIcon className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`} />
@@ -91,11 +112,11 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
         }
 
         {
-          folders && folders.length > 0 && (
+          allFolders && allFolders.length > 0 && (
             <div className={`mb-8`}>
               <List gap={0}>
                 {
-                  folders && folders.map((folder) => (
+                  allFolders.map((folder) => (
                     <FolderItem key={folder} folder={folder} staticFolder={settings?.staticFolder} wsFolder={settings?.wsFolder} />
                   ))
                 }
@@ -106,7 +127,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
 
         <List>
           {
-            media.map((file) => (
+            allMedia.map((file) => (
               <Item key={file.fsPath} media={file} />
             ))
           }