#61 - Implementation of recently modified files

src/viewpanel/ViewPanel.tsx

@@ -10,6 +10,7 @@ import { OtherActions } from './components/OtherActions';
 import { SeoStatus } from './components/SeoStatus';
 import { Spinner } from './components/Spinner';
 import { TagPicker } from './components/TagPicker';
+import { FileList } from './components/FileList';
 import useMessages from './hooks/useMessages';
 import { TagType } from './TagType';
 
@@ -78,6 +79,26 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
           }
         </Collapsible>
 
+        {
+          (settings?.contentInfo && settings?.contentInfo.length > 0) && (
+            <Collapsible id={`content`} title="Recently modified">
+              <div className="information">
+                {
+                  settings.contentInfo.map(folder => (
+                    <>
+                      {folder.lastModified && (
+                        <div key={folder.title}>
+                          <FileList folderName={folder.title} totalFiles={folder.files} files={folder.lastModified} />
+                        </div>
+                      )}
+                    </>
+                  ))
+                }
+              </div>
+            </Collapsible>
+          )
+        }
+
         <OtherActions settings={settings} isFile={true} />
       </div>
     </div>

src/viewpanel/components/BaseView.tsx

@@ -6,6 +6,7 @@ import { Collapsible } from './Collapsible';
 import { GlobalSettings } from './GlobalSettings';
 import { OtherActions } from './OtherActions';
 import { FileList } from './FileList';
+import { VsLabel } from './VscodeComponents';
 
 export interface IBaseViewProps {
   settings: PanelSettings | undefined;
@@ -36,15 +37,15 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings}: Re
 
         {
           settings?.contentInfo && (
-            <Collapsible id={`base_content`} title="Content information">
+            <Collapsible id={`base_content`} title="Recently modified">
               <div className="base__information">
                 {
                   settings.contentInfo.map(folder => (
                     <div key={folder.title}>
-                      {folder.title}: {folder.files} file{folder.files > 1 ? 's' : ''}
-
                       {
-                        folder.lastModified ? <FileList files={folder.lastModified} /> : null
+                        folder.lastModified ? <FileList folderName={folder.title} totalFiles={folder.files} files={folder.lastModified} /> : (
+                          <VsLabel>{folder.title}: {folder.files} file{folder.files > 1 ? 's' : ''}</VsLabel>
+                        )
                       }
                     </div>
                   ))

src/viewpanel/components/FileList.tsx

@@ -2,30 +2,49 @@ import * as React from 'react';
 import { FileInfo } from '../../models';
 import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../helper/MessageHelper';
+import { FileIcon } from './Icons/FileIcon';
+import { MarkdownIcon } from './Icons/MarkdownIcon';
+import { VsLabel } from './VscodeComponents';
 
 export interface IFileListProps {
+  folderName: string;
   files: FileInfo[];
+  totalFiles: number;
 }
 
-export const FileList: React.FunctionComponent<IFileListProps> = ({files}: React.PropsWithChildren<IFileListProps>) => {
+export const FileList: React.FunctionComponent<IFileListProps> = ({files, folderName, totalFiles}: React.PropsWithChildren<IFileListProps>) => {
   
   const openFile = (filePath: string) => {
     MessageHelper.sendMessage(CommandToCode.openInEditor, filePath);
   };
+
+  if (!files || files.length === 0) {
+    return null;
+  }
   
   return (
-    <>
-      {
-        files && (
-          <ul>
-            {
-              files.map(file => (
-                <li key={file.fileName} onClick={() => openFile(file.filePath)}>{file.fileName}</li>
-              ))
-            }
-          </ul>
-        )
-      }
-    </>
+    <div className={`file_list`}>
+      <VsLabel>{folderName} - file{files.length === 1 ? '' : 's'}: {totalFiles}</VsLabel>
+
+      <ul className="file_list__items">
+        {
+          files.map(file => (
+            <li key={file.fileName}
+                className={`file_list__items__item`}
+                onClick={() => openFile(file.filePath)}>
+              {
+                (file.fileName.endsWith('.md') || file.fileName.endsWith('.mdx')) ? (
+                  <MarkdownIcon />
+                ) : (
+                  <FileIcon />
+                )
+              }
+
+              <span>{file.fileName}</span>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
   );
 };

src/viewpanel/components/Icons/MarkdownIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IMarkdownIconProps {}
+
+export const MarkdownIcon: React.FunctionComponent<IMarkdownIconProps> = (props: React.PropsWithChildren<IMarkdownIconProps>) => {
+  return (
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M6.345 5h2.1v6.533H6.993l.055-5.31-1.774 5.31H4.072l-1.805-5.31c.04.644.06 5.31.06 5.31H1V5h2.156s1.528 4.493 1.577 4.807L6.345 5zm6.71 3.617v-3.5H11.11v3.5H9.166l2.917 2.916L15 8.617h-1.945z"/></svg>
+  );
+};