Add diff viewer

xcmd-tauri/dist/index.mjs

@@ -3,7 +3,7 @@ import Database from './modules/tauri-plugin-store-sql.mjs';
 
 import stylesheet from './index.css' assert { type: 'css' };
 import defaultThemeStylesheet from './themes/light.css' assert { type: 'css' };
-import { Code, getKey } from './keyboard.mjs';
+import { Code, Mod, getKey } from './keyboard.mjs';
 import { Palette } from './palette/palette.mjs';
 import { Pane } from './pane.mjs';
 import { VSplit } from './vsplit/vsplit.mjs';
@@ -31,10 +31,8 @@ const rightPaneElement = /** @type {HTMLElement} */ (leftPaneElement.cloneNode(t
 vsplit.appendChild(rightPaneElement);
 
 new VSplit(vsplit);
-const leftPane = new Pane(leftPaneElement);
-const rightPane = new Pane(rightPaneElement);
-Pane.activePane = leftPane;
-Pane.otherPane = rightPane;
+const leftPane = new Pane(leftPaneElement, true);
+const rightPane = new Pane(rightPaneElement, false);
 const palette = new Palette(/** @type {HTMLElement} */ (document.getElementById('palette')));
 const commands = [
 	{ name: "Developer: Reload Window", action: () => location.reload() },
@@ -56,7 +54,7 @@ document.body.addEventListener('keydown', async e => {
 		return;
 	}
 	switch (getKey(e)) {
-		case Code.F3:
+		case Code.F3: {
 			e.preventDefault();
 			const pane = Pane.activePane;
 			const table = pane.table;
@@ -83,6 +81,54 @@ document.body.addEventListener('keydown', async e => {
 				});
 			}
 			return false;
+		}
+		case Mod.Shift | Code.F4: {
+			e.preventDefault();
+			const [leftPane, rightPane] = [Pane.leftPane, Pane.rightPane];
+			const [leftTable, rightTable] = [leftPane.table, rightPane.table];
+			const [leftDataSource, rightDataSource] = [leftTable.dataSource, rightTable.dataSource];
+			const [leftItem, rightItem] = await Promise.all([
+				leftDataSource.getItem(leftTable.activeIndex),
+				rightDataSource.getItem(rightTable.activeIndex),
+			]);
+			console.log('diff', leftItem?.key, rightItem?.key);
+			if (leftItem !== undefined && !leftItem.isDirectory && leftDataSource instanceof RemoteDataSource
+					&& rightItem !== undefined && !rightItem.isDirectory && rightDataSource instanceof RemoteDataSource) {
+				const [leftBuffer, rightBuffer] = await Promise.all([
+					leftDataSource.read({
+						path: leftPane.address?.value,
+						key: leftItem.key,
+					}),
+					rightDataSource.read({
+						path: rightPane.address?.value,
+						key: rightItem.key,
+					}),
+				]);
+				const [leftString, rightString] = [
+					new TextDecoder().decode(leftBuffer),
+					new TextDecoder().decode(rightBuffer),
+				];
+				const { window: win } = window.__TAURI__;
+				const webview = new win.WebviewWindow('lister', {
+					title: 'Cross Lister',
+					url: 'lister/lister.html',
+					focus: true,
+					visible: false,
+				});
+				webview.once('tauri://created', async e => {
+					setTimeout(async () => {
+						await webview.emit('data', {
+							mode: 'diff',
+							value: leftString,
+							filename: leftItem.key,
+							otherValue: rightString,
+							otherFilename: rightItem.key
+						});
+					}, 200);
+				});
+			}
+			return false;
+		}
 		case Code.F4:
 		case Code.F5:
 		case Code.F6:

xcmd-tauri/dist/lister/lister.css

@@ -1,24 +1,23 @@
-html {
-	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	font-size: small;
-}
-
-body {
-	width: 100vw;
-	height: 100vh;
-	overflow: hidden;
-	margin: 0;
-	padding: 0;
-	padding-top: 3px;
-	color: var(--foreground);
-	background: var(--background);
-	box-sizing: border-box;
-	cursor: default;
-	-webkit-user-select: none;
-	user-select: none;
-}
-
-#container {
-    width: 100%;
-    height: 100%;
-}
+html {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	font-size: small;
+}
+
+body {
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
+	color: var(--foreground);
+	background: var(--background);
+	box-sizing: border-box;
+	cursor: default;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+	height: 100%;
+}

xcmd-tauri/dist/lister/lister.html

@@ -22,18 +22,41 @@
 			require.config({ paths: { vs: '../monaco-editor/min/vs' } });
 			require(['vs/editor/editor.main'], async function () {
 				const container = document.getElementById('container');
-
-				const editor = monaco.editor.create(container, {
-					readOnly: true,
-				});
 				const awaitedData = await data;
-				const model = monaco.editor.createModel(
-					await awaitedData.value,
-					undefined, // language
-					monaco.Uri.file(`file:///${awaitedData.filename}`) // uri
-				);
-				editor.setModel(model);
-				editor.focus();
+
+				if (awaitedData.mode === 'diff') {
+					const diffEditor = monaco.editor.createDiffEditor(container, {
+						readOnly: true,
+						originalEditable: false,
+						automaticLayout: true,
+					});
+					const originalModel = monaco.editor.createModel(
+						awaitedData.value,
+						undefined, // language
+						monaco.Uri.file(`file:///original/${awaitedData.filename}`) // uri
+					);
+					const modifiedModel = monaco.editor.createModel(
+						awaitedData.otherValue,
+						undefined, // language
+						monaco.Uri.file(`file:///modified/${awaitedData.otherFilename}`) // uri
+					);
+					diffEditor.setModel({
+						original: originalModel,
+						modified: modifiedModel,
+					});
+					diffEditor.focus();
+				} else {
+					const editor = monaco.editor.create(container, {
+						readOnly: true,
+					});
+					const model = monaco.editor.createModel(
+						awaitedData.value,
+						undefined, // language
+						monaco.Uri.file(`file:///${awaitedData.filename}`) // uri
+					);
+					editor.setModel(model);
+					editor.focus();
+				}
 			});
 		</script>
 	</body>

xcmd-tauri/dist/pane.mjs

@@ -9,6 +9,12 @@ export class Pane {
 	/** @type {Pane} */
 	static otherPane;
 
+	/** @type {Pane} */
+	static leftPane;
+
+	/** @type {Pane} */
+	static rightPane;
+
 	/** @type {Tabs} */
 	tabs;
 
@@ -25,11 +31,20 @@ export class Pane {
 	 * Constructor.
 	 *
 	 * @param {Element} element Pane element.
+	 * @param {boolean} primary Indicates whether the pane is a primary (left) pane.
 	 */
-	constructor(element) {
+	constructor(element, primary) {
 		this.tabs = new Tabs(element.querySelector('.tabs'));
 		this.table = new VTable(element.querySelector('.vtable'));
 
+		if (primary) {
+			Pane.leftPane = this;
+			Pane.activePane = this;
+		} else {
+			Pane.rightPane = this;
+			Pane.otherPane = this;
+		}
+
 		element.addEventListener('focusin', (evt) => {
 			if (Pane.activePane !== this) {
 				const activePane = Pane.activePane;