Add Project Explorer feature and fix known issue

README.md

@@ -8,21 +8,21 @@ With the introduction of [Next.js 13](https://nextjs.org/), the `app` directory
 
 ## Features
 
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+You can access the Project Explorer through the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) by searching for `Project Explorer`. This allows you to search for, create and delete page and layout files.
 
-For example if there is an image subfolder under your extension project workspace:
+![Alt text](src\assets\features\command-palette.gif)
 
-\!\[feature X\]\(images/feature-x.png\)
-
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+You can also access the Project Explorer through the sidebar. This allows you to search for and delete page and layout files. However, you can also rename file paths through the sidebar.
+![Alt text](src\assets\features\treeview.gif)
 
 ## Requirements
 
 This extension works in Next.js 13 projects with `app` directory enabled **only**.
 
 ## Known Issues
 
-Calling out known issues can help limit users opening duplicate issues against your extension.
+When you delete a file through the command palette, VS Code will through an error saying that the file is not found. *See screenshot below*. This is a known issue with VS Code and is not related to this extension.
+![Alt text](delete-error.png)
 
 ## Release Notes
 

package.json

@@ -9,6 +9,10 @@
   "categories": [
     "Other"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/monstajoe2002/project-explorer.git"
+  },
   "activationEvents": [],
   "main": "./out/extension.js",
   "contributes": {

src/commands/nextjs-command.ts

@@ -10,7 +10,6 @@ export default class NextJsCommand implements Command {
     this.commandId = `project-explorer.${name}`;
   }
   async deletePageOrLayout(uri: vscode.Uri): Promise<void> {
-    // TODO: group option by folder level
     const items = await this._getQuickPickOptions(uri);
 
     const selectedItem = await vscode.window.showQuickPick(items, {
@@ -20,6 +19,7 @@ export default class NextJsCommand implements Command {
       return;
     }
     const selectedUri = vscode.Uri.joinPath(uri, selectedItem.fileName);
+    console.log(selectedUri);
     if (!selectedItem.isDirectory) {
       const option = await vscode.window.showWarningMessage(
         "Are you sure you want to delete this file?",
@@ -32,6 +32,7 @@ export default class NextJsCommand implements Command {
       await vscode.workspace.fs.delete(selectedUri, {
         useTrash: true,
       });
+      vscode.window.showInformationMessage(`Deleted ${selectedItem.fileName}`);
     }
 
     await this.deletePageOrLayout(selectedUri);

src/extension.ts

@@ -34,8 +34,9 @@ export function activate(_: vscode.ExtensionContext) {
   vscode.window.createTreeView("projectExplorer.layouts", {
     treeDataProvider: layoutsTree,
   });
-  vscode.commands.registerCommand("next-project-explorer.tree.refresh", () => {
+  vscode.commands.registerCommand("project-explorer.tree.refresh", () => {
     pagesTree.refresh();
+    layoutsTree.refresh();
   });
   vscode.commands.registerCommand(
     "project-explorer.tree.delete",