feat: view as list (#157)

close #151
moshfeu · Aug 28, 2024 · d9fd84a · d9fd84a
1 parent 0cdba8d
commit d9fd84a
Show file tree

Hide file tree

Showing 18 changed files with 272 additions and 53 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -13,6 +13,7 @@
 			"args": [
 				"--extensionDevelopmentPath=${workspaceFolder}"
 			],
+      "sourceMaps": true,
 			"outFiles": [
 				"${workspaceFolder}/out/**/*.js"
 			],

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## Change log
 
+**0.25.0**
+
+- [#151](https://github.com/moshfeu/vscode-compare-folders/issues/151) - View as list like source control (Thanks [@michaelmesser](https://github.com/michaelmesser))
+
 **0.24.0**
 
 - [#2](https://github.com/moshfeu/vscode-compare-folders/issues/2) - Allow to remove file from the diff tree

diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ The extension allows you to compare folders, show the diffs in a list and presen
 
 ![Screen record](https://user-images.githubusercontent.com/3723951/92312411-f1f3b600-efc8-11ea-93b8-e90a3e25e9cb.gif)
 
-### Thanks
+## Thanks
 
 The extension uses the great [`dir-compare`](https://github.com/gliviu/dir-compare) package made by [Liviu Grigorescu](https://github.com/gliviu). If you like this extension, please give a star to `dir-compare`!
 
@@ -22,7 +22,7 @@ Please take this under consideration.
 
 There are several ways to choose folders to compare:
 
-- Command Palette -
+- Command Palette
   - `Compare a folder against workspace` choose a folder to compare against the workspace's folder (when workspace is not empty)
   - `Choose 2 folders and compare` - opens OS folder chooser twice
 - Compare Folders Panel (Click on the icon in the Activity Bar)
@@ -34,7 +34,23 @@ There are several ways to choose folders to compare:
   - `Pick from recent compares` chose one of the pairs you compared in the past.
   - (The list can be reset by `Clear recent compares`)
 
-`Refresh` - If there are changes in the compared folders' files, click on the `refresh` button will re-compare the folders.
+## UI Features per Panel Section:
+
+### Differences
+- Toolbar
+  - `Pick from History`: Choose one of the pairs you compared in the past.
+  - `Swap Sides`: Swap the sides of the compared folders.
+  - `Refresh`: Re-compare the folders if there are changes in the compared folders' files.
+  - `View as List / View as Tree`: Toggle between list and tree view modes.
+- Files
+  - `Dismiss`: Remove the file from the list of compared items.
+  - `Take My File / Take Compared File`: Replace the file with the one from the other side.
+
+### Only in My Folder / Only in Compared Folder
+- Files
+  - `Copy to My Folder / Copy to Compared Folder`: Copy the file to the other side.
+  - `Delete`: Permanently delete the file from the file system.
+
 
 ## Options (under vscode settings)
 
@@ -58,18 +74,18 @@ There are several ways to choose folders to compare:
 - `useDiffMerge` - boolean - Whether or not using [`Diff & Merge`](https://marketplace.visualstudio.com/items?itemName=moshfeu.diff-merge) extension as the Diff viewer. In order to use this option, you should install the extension
 - `folderLeft` + `folderRight` - strings - paths of 2 folders, compare them on the extension load.
 - `ignoreExtension` - Set groups of extensions so while comparing, pairs of files considered the same file if both of the files extension are in the same group. **Note:** each extension can show **only once** it this list
-- `ignoreLineEnding` - boolean - ignore crlf/lf line ending differences
-- `ignoreWhiteSpaces` - boolean - ignore white spaces at the beginning and ending of a line (similar to `diff -b`)
-- `ignoreAllWhiteSpaces` - boolean - ignore all white space differences (similar to `diff -w`)
-- `ignoreEmptyLines` - boolean - ignore differences caused by empty lines (similar to `diff -B`)
-- `respectGitIgnore` - boolean - include / exclude files based on .gitignore - this option works together with `includeFilter` and `excludeFilter` options. ⚠️ The extension supports the main basic gitignore rules. For instance, it supports negation (`!`), but it doesn't support .gitignore files in subfolders. If there is an important use case that is not supported, please open an issue.
-
 ***Example***
 ```json
 "compareFolders.ignoreExtension": [
   ["php", "cs"]
 ]
 ```
+- `ignoreLineEnding` - boolean - ignore crlf/lf line ending differences
+- `ignoreWhiteSpaces` - boolean - ignore white spaces at the beginning and ending of a line (similar to `diff -b`)
+- `ignoreAllWhiteSpaces` - boolean - ignore all white space differences (similar to `diff -w`)
+- `ignoreEmptyLines` - boolean - ignore differences caused by empty lines (similar to `diff -B`)
+- `respectGitIgnore` - boolean - include / exclude files based on .gitignore - this option works together with `includeFilter` and `excludeFilter` options. ⚠️ The extension supports the main basic gitignore rules. For instance, it supports negation (`!`), but it doesn't support .gitignore files in subfolders. If there is an important use case that is not supported, please open an issue.
+- `defaultDiffViewMode` - One of the options: "tree" or "list". The default view mode when vscode is opened. Later it can be toggled by the "View as list / View as tree" button
 
 ## CLI
 
@@ -79,10 +95,6 @@ By calling the following command from the terminal / command line, the extension
 COMPARE_FOLDERS=DIFF code path/to/folder1 path/to/folder2
 ```
 
-### Read more about the development process
-
-You can find the series of the posts about how this extension developed step by step in [medium.com](https://medium.com/@moshfeu/comparefolders-visual-studio-code-extension-journey-intro-b540a0539629?source=friends_link&sk=db37e1889766ccd8fe553958a12a8f69).
-
 ## Contributors
 
 <table>
@@ -95,6 +107,38 @@ You can find the series of the posts about how this extension developed step by
         </div>
       </a>
     </td>
+    <td>
+      <a href="https://github.com/md2perpe" target="_blank">
+        <img width="40" height="40" src="https://avatars.githubusercontent.com/u/543239?v=4" alt="md2perpe">
+        <div>
+          Per Persson
+        </div>
+      </a>
+    </td>
+    <td>
+      <a href="https://github.com/orellabac" target="_blank">
+        <img width="40" height="40" src="https://avatars.githubusercontent.com/u/4247006?v=4" alt="orellabac">
+        <div>
+          orellabac
+        </div>
+      </a>
+    </td>
+    <td>
+      <a href="https://github.com/niccolomineo" target="_blank">
+        <img width="40" height="40" src="https://avatars.githubusercontent.com/u/5409469?v=4" alt="Niccolò Mineo">
+        <div>
+          Niccolò Mineo
+        </div>
+      </a>
+    </td>
+    <td>
+      <a href="https://github.com/sampellino" target="_blank">
+        <img width="40" height="40" src="https://avatars.githubusercontent.com/u/5458241?v=4" alt="Sam Pellino">
+        <div>
+          Sam Pellino
+        </div>
+      </a>
+    </td>
   </tr>
 </table>
 
@@ -117,3 +161,7 @@ You can find it [here](/CHANGELOG.md)
 Activity bar's icon (and more) by [Stockio.com](https://www.stockio.com/free-icon/folders)
 Null icon made from <a href="http://www.onlinewebfonts.com/icon">Icon Fonts</a> is licensed by CC BY 3.0
 External link icon made by <a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+
+## Read more about the development process
+
+You can find the series of the posts about how this extension developed step by step in [medium.com](https://medium.com/@moshfeu/comparefolders-visual-studio-code-extension-journey-intro-b540a0539629?source=friends_link&sk=db37e1889766ccd8fe553958a12a8f69).
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "compare-folders",
   "displayName": "Compare Folders",
   "description": "Compare folders by contents, present the files that have differences and display the diffs side by side",
-  "version": "0.24.3",
+  "version": "0.25.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/moshfeu/vscode-compare-folders"
@@ -148,6 +148,19 @@
           "markdownDescription": "Specifies which file will be in the left and the right sides of the diff view",
           "scope": "window"
         },
+        "compareFolders.defaultDiffViewMode": {
+          "type": "string",
+          "default": "tree",
+          "enum": [
+            "tree",
+            "list"
+          ],
+          "enumDescriptions": [
+            "Presents files and folders in a hierarchical tree structure, allowing for a more organized and nested view",
+            "Displays files and folders in a simple, flat list format"
+          ],
+          "scope": "window"
+        },
         "compareFolders.showIdentical": {
           "type": "boolean",
           "default": false,
@@ -212,19 +225,29 @@
         }
       ],
       "view/title": [
+        {
+          "command": "foldersCompare.viewAsList",
+          "group": "navigation@1",
+          "when": "view == foldersCompareAppService && foldersCompareContext.hasFolders && foldersCompare.diffViewMode == 'tree'"
+        },
+        {
+          "command": "foldersCompare.viewAsTree",
+          "group": "navigation@1",
+          "when": "view == foldersCompareAppService && foldersCompareContext.hasFolders && foldersCompare.diffViewMode == 'list'"
+        },
         {
           "command": "foldersCompare.refresh",
           "group": "navigation@2",
           "when": "view == foldersCompareAppService && foldersCompareContext.hasFolders"
         },
         {
           "command": "foldersCompare.swap",
-          "group": "navigation@1",
+          "group": "navigation@3",
           "when": "view == foldersCompareAppService && foldersCompareContext.hasFolders"
         },
         {
           "command": "foldersCompare.pickFromRecentCompares",
-          "group": "navigation@3",
+          "group": "navigation@4",
           "when": "view == foldersCompareAppService"
         }
       ],
@@ -268,12 +291,13 @@
     },
     "commands": [
       {
-        "title": "Compare Folders: Pick from recent compares",
+        "title": "Pick from recent compares",
         "command": "foldersCompare.pickFromRecentCompares",
         "icon": {
           "dark": "resources/dark/history.svg",
           "light": "resources/light/history.svg"
-        }
+        },
+        "category": "CompareFolders"
       },
       {
         "title": "Compare Folders: Clear recent compares",
@@ -322,15 +346,29 @@
         "icon": {
           "light": "resources/light/refresh.svg",
           "dark": "resources/dark/refresh.svg"
-        }
+        },
+        "category": "CompareFolders"
       },
       {
         "title": "Swap Sides",
         "command": "foldersCompare.swap",
         "icon": {
           "light": "resources/light/swap.svg",
           "dark": "resources/dark/swap.svg"
-        }
+        },
+        "category": "CompareFolders"
+      },
+      {
+        "title": "View as list",
+        "command": "foldersCompare.viewAsList",
+        "icon": "$(list-selection)",
+        "category": "CompareFolders"
+      },
+      {
+        "title": "View as tree",
+        "command": "foldersCompare.viewAsTree",
+        "icon": "$(list-tree)",
+        "category": "CompareFolders"
       },
       {
         "command": "foldersCompare.compareSelectedFolders",

diff --git a/src/constants/commands.ts b/src/constants/commands.ts
@@ -5,6 +5,8 @@ export const COMPARE_FOLDERS_AGAINST_EACH_OTHER = 'foldersCompare.compareFolders
 export const COMPARE_SELECTED_FOLDERS = 'foldersCompare.compareSelectedFolders';
 export const REFRESH = 'foldersCompare.refresh';
 export const SWAP = 'foldersCompare.swap';
+export const VIEW_AS_LIST = 'foldersCompare.viewAsList';
+export const VIEW_AS_TREE = 'foldersCompare.viewAsTree';
 export const COPY_TO_COMPARED = 'foldersCompare.copyToCompared';
 export const COPY_TO_MY = 'foldersCompare.copyToMy';
 export const TAKE_MY_FILE = 'foldersCompare.takeMyFile';

diff --git a/src/constants/contextKeys.ts b/src/constants/contextKeys.ts
@@ -1 +1,2 @@
-export const HAS_FOLDERS = 'foldersCompareContext.hasFolders';
+export const HAS_FOLDERS = 'foldersCompareContext.hasFolders' as const;
+export const FILES_VIEW_MODE = 'foldersCompare.diffViewMode' as const;
diff --git a/src/context/global.ts b/src/context/global.ts
@@ -1,5 +1,8 @@
 import { commands } from 'vscode';
+import { HAS_FOLDERS, type FILES_VIEW_MODE } from '../constants/contextKeys';
 
-export const setContext = (key: string, value: string | boolean): void => {
+type ContextKey = typeof HAS_FOLDERS | typeof FILES_VIEW_MODE;
+
+export const setContext = (key: ContextKey, value: string | boolean): void => {
   commands.executeCommand('setContext', key, value);
 };
diff --git a/src/context/ui.ts b/src/context/ui.ts
@@ -0,0 +1,31 @@
+import { getConfiguration } from '../services/configuration';
+import { setContext } from './global';
+
+export type DiffViewMode = 'tree' | 'list';
+
+class UIContext {
+  private _diffViewMode?: DiffViewMode;
+
+  init() {
+    this.updateFromConfiguration();
+  }
+
+  updateFromConfiguration() {
+    // don't update from configuration if diffViewMode is already set
+    if (this._diffViewMode) {
+      return;
+    }
+    this.diffViewMode = getConfiguration('defaultDiffViewMode');
+  }
+
+  set diffViewMode(mode: DiffViewMode) {
+    setContext('foldersCompare.diffViewMode', mode);
+    this._diffViewMode = mode;
+  }
+
+  get diffViewMode(): DiffViewMode {
+    return this._diffViewMode || getConfiguration('defaultDiffViewMode');
+  }
+}
+
+export const uiContext = new UIContext();
diff --git a/src/extension.ts b/src/extension.ts
@@ -1,15 +1,17 @@
 import { window, commands, ExtensionContext, workspace, Uri, version} from 'vscode';
 import { CompareFoldersProvider } from './providers/foldersCompareProvider';
-import { COMPARE_FILES, CHOOSE_FOLDERS_AND_COMPARE, REFRESH, COMPARE_FOLDERS_AGAINST_EACH_OTHER, COMPARE_FOLDERS_AGAINST_WORKSPACE, COMPARE_SELECTED_FOLDERS, SWAP, COPY_TO_COMPARED, COPY_TO_MY, TAKE_MY_FILE, TAKE_COMPARED_FILE, DELETE_FILE, PICK_FROM_RECENT_COMPARES, CLEAR_RECENT_COMPARES, DISMISS_DIFFERENCE } from './constants/commands';
+import { COMPARE_FILES, CHOOSE_FOLDERS_AND_COMPARE, REFRESH, COMPARE_FOLDERS_AGAINST_EACH_OTHER, COMPARE_FOLDERS_AGAINST_WORKSPACE, COMPARE_SELECTED_FOLDERS, SWAP, COPY_TO_COMPARED, COPY_TO_MY, TAKE_MY_FILE, TAKE_COMPARED_FILE, DELETE_FILE, PICK_FROM_RECENT_COMPARES, CLEAR_RECENT_COMPARES, DISMISS_DIFFERENCE, VIEW_AS_LIST, VIEW_AS_TREE } from './constants/commands';
 import { ViewOnlyProvider } from './providers/viewOnlyProvider';
 import { globalState } from './services/globalState';
 import { pickFromRecents } from './services/pickFromRecentCompares';
 import { getConfiguration } from './services/configuration';
 import { showDoneableInfo } from './utils/ui';
 import { validate } from './services/ignoreExtensionTools';
+import { uiContext } from './context/ui';
 
 export async function activate(context: ExtensionContext) {
   globalState.init(context);
+  uiContext.init();
   const onlyInA = new ViewOnlyProvider();
   const onlyInB = new ViewOnlyProvider();
   const identicals = new ViewOnlyProvider(false);
@@ -27,6 +29,8 @@ export async function activate(context: ExtensionContext) {
       commands.registerCommand(DISMISS_DIFFERENCE, foldersCompareProvider.dismissDifference),
       commands.registerCommand(REFRESH, foldersCompareProvider.refresh),
       commands.registerCommand(SWAP, foldersCompareProvider.swap),
+      commands.registerCommand(VIEW_AS_LIST, foldersCompareProvider.viewAs('list')),
+      commands.registerCommand(VIEW_AS_TREE, foldersCompareProvider.viewAs('tree')),
       commands.registerCommand(COPY_TO_COMPARED, foldersCompareProvider.copyToCompared),
       commands.registerCommand(COPY_TO_MY, foldersCompareProvider.copyToMy),
       commands.registerCommand(TAKE_MY_FILE, foldersCompareProvider.takeMyFile),

diff --git a/src/models/file.ts b/src/models/file.ts
@@ -16,12 +16,14 @@ export class File extends TreeItem {
 		public readonly collapsibleState?: TreeItemCollapsibleState,
     public readonly command?: TreeItemCommand,
     public readonly children?: File[],
-    public resourceUri?: Uri
+    public resourceUri?: Uri,
+    public readonly description?: TreeItem['description'],
+    public readonly tooltip?: string,
 	) {
 		super(label, collapsibleState);
 
     try {
-      this.tooltip = this.label;
+      this.tooltip ??= this.resourceUri?.fsPath || this.label;
       this.resourceUri = this.resourceUri || (
         this.hasIcon ?
           undefined :