#61 - Implementation of recently modified files

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [2.6.0]
+
+- [#61](https://github.com/estruyf/vscode-front-matter/issues/61): List of recently modified files
+
 ## [2.5.1] - 2020-08-23
 
 - Fix typo in the `package.json` file for the preview command

assets/media/styles.css

@@ -357,4 +357,48 @@
 
 .table__cell__validation .warning {
   color: #E6AF2E;
+}
+
+/* File list */
+.file_list vscode-label {
+  border-bottom: 1px solid var(--vscode-foreground);
+}
+
+.file_list__items {
+  padding: 0;
+  list-style: none;
+}
+
+.file_list__items__item {
+	color: var(--vscode-foreground);
+  font-size: var(--vscode-font-size);
+  font-weight: var(--vscode-font-weight);
+  cursor: pointer;
+  height: 22px;
+  line-height: 22px;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.file_list__items__item:hover {
+	background-color: var(--vscode-list-hoverBackground);
+  color: var(--vscode-list-hoverForeground);
+  cursor: pointer;
+}
+
+.file_list__items__item svg {
+  display: block;
+  flex-shrink: 0;
+  height: 20px;
+  width: 20px;
+  margin-right: .25rem;
+}
+
+.file_list__items__item span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }

src/extension.ts

@@ -127,12 +127,20 @@ export async function activate({ subscriptions, extensionUri, extensionPath }: v
 	editDebounce = debounceCallback();
 	subscriptions.push(vscode.workspace.onDidChangeTextDocument(triggerFileChange));
 
+	// Listener for file saves
+	subscriptions.push(vscode.workspace.onDidSaveTextDocument((doc: vscode.TextDocument) => {
+		if (doc.languageId === 'markdown') {
+			// Optimize the list of recently changed files
+			ExplorerView.getInstance().getSettings();
+		}
+	}));
+
 	// Listener for setting changes
 	subscriptions.push(vscode.workspace.onDidChangeConfiguration(MarkdownFoldingProvider.triggerHighlighting));
 
 	// Webview for preview
 	Preview.init();
-	subscriptions.push(vscode.commands.registerCommand('frontMatter.preview', () => Preview.open(extensionPath) ));
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.preview, () => Preview.open(extensionPath) ));
 
 	// Subscribe all commands
 	subscriptions.push(

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>
+  );
+};

src/webview/ExplorerView.ts

@@ -286,7 +286,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
   /**
    * Retrieve the extension settings
    */
-  private async getSettings() {
+  public async getSettings() {
     const config = SettingsHelper.getConfig();
 
     this.postWebviewMessage({