start abstracting cd, edit, etc to entryAction event

navigator/src/views/Browser.vue

@@ -3,7 +3,7 @@
 		<div class="h-full flex flex-col items-stretch">
 			<div
 				class="grid grid-cols-[auto_1fr] grid-rows-[1fr 1fr] md:grid-cols-[auto_3fr_1fr] md:grid-row-[1fr] items-stretch divide-x divide-y divide-default">
-				<div class="button-group-row p-1 md:px-4 md:py-2">
+				<div class="button-group-row p-1 md:px-4 md:py-2 border-t border-default">
 					<button class="p-2 rounded-lg hover:bg-accent relative" :disabled="!pathHistory.backAllowed()"
 						@click="back()" @mouseenter="backHistoryDropdown.mouseEnter"
 						@mouseleave="backHistoryDropdown.mouseLeave">
@@ -68,11 +68,25 @@
 			<div class="grow overflow-hidden">
 				<DirectoryView :host="pathHistory.current()?.host" :path="pathHistory.current()?.path"
 					:searchFilterRegExp="searchFilterRegExp" @cd="path => cd({ path })" @edit="openEditor"
-					@updateStats="stats => $emit('updateFooterText', `${stats.files} file${stats.files === 1 ? '' : 's'}, ${stats.dirs} director${stats.dirs === 1 ? 'y' : 'ies'} (${cockpit.format_bytes(stats.size, 1000).replace(/(?<!B)$/, ' B')})`)"
+					@entryAction="handleEntryAction"
 					ref="directoryViewRef" />
 			</div>
 		</div>
 	</div>
+	<ModalPopup :showModal="openPrompt.show" :headerText="openPrompt.entry?.name ?? 'NULL'" @close="() => openPrompt.close()">
+		What would you like to do with this file?
+		<template #footer>
+			<button type="button" class="btn btn-secondary" @click="() => openPrompt.close()">
+				Cancel
+			</button>
+			<button type="button" class="btn btn-primary" @click="() => openEditor(openPrompt.entry.path)">
+				Open for editing
+			</button>
+			<button type="button" class="btn btn-primary">
+				Download
+			</button>
+		</template>
+	</ModalPopup>
 	<Teleport to="#footer-buttons">
 		<IconToggle v-model="darkMode" v-slot="{ value }">
 			<MoonIcon v-if="value" class="size-icon icon-default" />
@@ -97,6 +111,7 @@ import PathBreadCrumbs from '../components/PathBreadCrumbs.vue';
 import { notificationsInjectionKey, pathHistoryInjectionKey, lastPathStorageKey, settingsInjectionKey } from '../keys';
 import { ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, RefreshIcon, ChevronDownIcon, SearchIcon, SunIcon, MoonIcon, EyeIcon, EyeOffIcon, ViewListIcon, ViewGridIcon } from '@heroicons/vue/solid';
 import IconToggle from '../components/IconToggle.vue';
+import ModalPopup from '../components/ModalPopup.vue';
 
 const encodePartial = (string) =>
 	encodeURIComponent(string)
@@ -145,6 +160,20 @@ export default {
 				forwardHistoryDropdown.showDropdown = false;
 			}
 		});
+		const openPrompt = reactive({
+			show: false,
+			entry: null,
+			resetTimeoutHandle: null,
+			open: (entry) => {
+				clearTimeout(openPrompt.resetTimeoutHandle);
+				openPrompt.entry = entry;
+				openPrompt.show = true;
+			},
+			close: () => {
+				openPrompt.show = false;
+				openPrompt.resetTimeoutHandle = setTimeout(() => openPrompt.resetTimeoutHandle = openPrompt.entry = null, 500);
+			},
+		});
 
 		const cd = ({ path, host }) => {
 			const newHost = host ?? (pathHistory.current().host);
@@ -172,6 +201,23 @@ export default {
 
 		const getSelected = () => directoryViewRef.value?.getSelected?.() ?? [];
 
+		const handleEntryAction = (action, entry) => {
+			switch (action) {
+				case 'cd':
+					cd({path: entry.path});
+					break;
+				case 'edit':
+					openEditor({path: entry.path})
+					break;
+				case 'openPrompt':
+					openPrompt.open(entry);
+					break;
+				default:
+					console.error('Unknown entryAction:', action, entry);
+					break;
+			}
+		}
+
 		watch(searchFilterStr, () => {
 			searchFilterRegExp.value = new RegExp(
 				`^${searchFilterStr.value
@@ -203,12 +249,14 @@ export default {
 			searchFilterRegExp,
 			backHistoryDropdown,
 			forwardHistoryDropdown,
+			openPrompt,
 			cd,
 			back,
 			forward,
 			up,
 			openEditor,
 			getSelected,
+			handleEntryAction,
 		}
 	},
 	components: {
@@ -227,9 +275,7 @@ export default {
 		EyeOffIcon,
 		ViewListIcon,
 		ViewGridIcon,
+		ModalPopup,
 	},
-	emits: [
-		'updateFooterText'
-	],
 }
 </script>