Added confirm dialog

src/common.ts

@@ -34,4 +34,22 @@ export function openPath(path: string, fromShell: boolean = false): void {
 	update();
 }
 
-Object.assign(globalThis, { openPath, switchTab });
+export function confirm(text: string): Promise<boolean> {
+	const { promise, resolve } = Promise.withResolvers<boolean>();
+
+	const confirm = $<HTMLDialogElement>('#confirm');
+
+	confirm.find('.message').text(text);
+
+	confirm[0].showModal();
+
+	confirm.find('button.okay').on('click', () => resolve(true));
+
+	confirm.find('button.cancel').on('click', () => resolve(false));
+
+	void promise.then(() => confirm[0].close());
+
+	return promise;
+}
+
+Object.assign(globalThis, { openPath, switchTab, confirm });

src/explorer.ts

@@ -3,7 +3,7 @@ import { cwd, dirname, join } from '@zenfs/core/emulation/path.js';
 import $ from 'jquery';
 import { formatCompact } from 'utilium';
 import { cloneTemplate } from 'utilium/dom.js';
-import { openPath } from './common.js';
+import { confirm, openPath } from './common.js';
 
 export const location = $<HTMLInputElement>('#location');
 
@@ -108,7 +108,11 @@ export function update() {
 
 $('#explorer .menu .open').on('click', () => openPath(contextMenuTarget!.name));
 $('#explorer .menu .rename').on('click', () => renameEntry(contextMenuTarget!));
-$('#explorer .menu .delete').on('click', () => removeEntry(contextMenuTarget!));
+$('#explorer .menu .delete').on('click', (async e => {
+	if (e.shiftKey || (await confirm(`Are you sure you want to delete "${contextMenuTarget!.name}"?`))) {
+		removeEntry(contextMenuTarget!);
+	}
+}) as (e: JQuery.Event) => void);
 
 $('#explorer').on('click', () => $('#explorer .menu').hide());
 $('#explorer').on('contextmenu', () => $('#explorer .menu').hide());

src/index.html

@@ -103,6 +103,12 @@
 			<div id="terminal-container"></div>
 		</div>
 
+		<dialog id="confirm">
+			<p class="message"></p>
+			<button class="cancel">Cancel</button>
+			<button class="okay">Okay</button>
+		</dialog>
+
 		<script type="module" src="index.js"></script>
 	</body>
 </html>

src/styles.css

@@ -44,6 +44,13 @@ input:focus {
 	outline: none;
 }
 
+dialog {
+	border: 1px solid #999;
+	border-radius: 0.5em;
+	background-color: #333;
+	min-width: 25em;
+}
+
 #location {
 	padding: 0.25em 1em;
 	border-radius: 0.5em;
@@ -191,11 +198,6 @@ input:focus {
 	}
 
 	dialog.create {
-		border: 1px solid #999;
-		border-radius: 0.5em;
-		background-color: #333;
-		min-width: 25em;
-
 		.inputs {
 			display: flex;
 			flex-direction: column;
@@ -237,3 +239,23 @@ input:focus {
 	position: absolute;
 	inset: 5em 1em 1em 1em;
 }
+
+#confirm {
+	text-align: center;
+
+	.message {
+		margin-bottom: 3em;
+	}
+
+	button.cancel {
+		position: absolute;
+		left: 0.5em;
+		bottom: 0.5em;
+	}
+
+	button.okay {
+		position: absolute;
+		right: 0.5em;
+		bottom: 0.5em;
+	}
+}