start working on selecting entries

navigator-vue/src/components/DirectoryEntry.vue

@@ -1,11 +1,20 @@
 <template>
 	<template v-if="settings.directoryView?.view === 'list'">
-		<tr v-show="show || showEntries" @dblclick="doubleClickCallback" class="hover:!bg-red-600/10">
+		<tr
+			v-show="show || showEntries"
+			@dblclick.stop="doubleClickCallback"
+			@click.stop="$emit('toggleSelected')"
+			:class="['hover:!bg-red-600/10']"
+			v-bind="$attrs"
+		>
 			<td class="flex items-center gap-1 !pl-1">
 				<div :style="{ width: `${24 * level}px` }"></div>
 				<div class="relative w-6">
 					<component :is="icon" class="size-icon icon-default" />
-					<LinkIcon v-if="entry.type === 'symbolic link'" class="w-2 h-2 absolute right-0 bottom-0 text-default" />
+					<LinkIcon
+						v-if="entry.type === 'symbolic link'"
+						class="w-2 h-2 absolute right-0 bottom-0 text-default"
+					/>
 				</div>
 				<button v-if="directoryLike" @click.stop="toggleShowEntries">
 					<ChevronDownIcon v-if="!showEntries" class="size-icon icon-default" />
@@ -43,6 +52,7 @@
 			@edit="(...args) => $emit('edit', ...args)"
 			@startProcessing="(...args) => $emit('startProcessing', ...args)"
 			@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
+			@cancelShowEntries="showEntries = false"
 			ref="directoryViewRef"
 			:level="level + 1"
 		/>
@@ -50,7 +60,8 @@
 	<div
 		v-else
 		v-show="show"
-		@dblclick="doubleClickCallback"
+		@dblclick.stop="doubleClickCallback"
+		@click.stop="$emit('toggleSelected')"
 		class="flex flex-col items-center w-20 overflow-hidden"
 	>
 		<div class="relative w-20">
@@ -115,6 +126,8 @@ export default {
 			})
 		}
 
+		const getSelected = () => directoryViewRef.value?.getSelected?.() ?? [];
+
 		watch(props.entry, () => {
 			if (props.entry.type === 'directory' || (props.entry.type === 'symbolic link' && props.entry.target?.type === 'directory')) {
 				icon.value = FolderIcon;
@@ -134,6 +147,7 @@ export default {
 			doubleClickCallback,
 			getEntries,
 			toggleShowEntries,
+			getSelected,
 			DirectoryEntryList,
 			nextTick,
 		}
@@ -152,6 +166,7 @@ export default {
 	emits: [
 		'cd',
 		'edit',
+		'toggleSelected',
 		'startProcessing',
 		'stopProcessing',
 	]

navigator-vue/src/components/DirectoryEntryList.vue

@@ -7,12 +7,14 @@
 			:searchFilterRegExp="searchFilterRegExp"
 			@cd="(...args) => $emit('cd', ...args)"
 			@edit="(...args) => $emit('edit', ...args)"
+			@toggleSelected="entry.selected = !entry.selected"
 			@sortEntries="sortEntries"
 			@updateStats="emitStats"
 			@startProcessing="(...args) => $emit('startProcessing', ...args)"
 			@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
 			ref="entryRefs"
 			:level="level"
+			:class="['border-2 box-border', entry.selected ? 'border-dashed border-x-red-600/50' : 'border-x-transparent', (entry.selected && !entries[index - 1]?.selected) ? 'border-t-red-600/50' : 'border-t-transparent', (entry.selected && !entries[index + 1]?.selected) ? 'border-b-red-600/50' : 'border-b-transparent']"
 		/>
 	</template>
 	<tr
@@ -153,7 +155,7 @@ export default {
 				]
 				tmpEntries =
 					entryNames.length
-						? (await useSpawn(['stat', `--printf=${fields.join(US)}${RS}`, ...entryNames], { superuser: 'try', directory: cwd }).promise()).stdout
+						? (await useSpawn(['stat', `--printf=${fields.join(US)}${RS}`, ...entryNames], { superuser: 'try', directory: cwd }).promise().catch(state => state)).stdout
 							.split(RS)
 							.filter(record => record) // remove empty lines
 							.map(record => {
@@ -176,6 +178,7 @@ export default {
 										atime,
 										type,
 										target: {},
+										selected: false,
 									});
 									if (type === 'symbolic link') {
 										entry.target.rawPath = symlinkStr.split(/\s*->\s*/)[1].trim().replace(/^['"]|['"]$/g, '');
@@ -202,6 +205,7 @@ export default {
 			} catch (error) {
 				entries.value = [];
 				notifications.value.constructNotification("Error getting directory entries", errorStringHTML(error), 'error');
+				emit('cancelShowEntries');
 			} finally {
 				processingHandler.stop();
 			}
@@ -231,6 +235,11 @@ export default {
 			(!/^\./.test(entry.name) || settings?.directoryView?.showHidden)
 			&& (props.searchFilterRegExp?.test(entry.name) ?? true);
 
+		const getSelected = () => [
+			...entries.value.filter(entry => entry.selected),
+			...entryRefs.value.filter(entryRef => entryRef.showEntries).map(entryRef => entryRef.getSelected()).flat(1),
+		];
+
 		onBeforeUnmount(() => {
 			processingHandler.resolveDangling();
 		});
@@ -252,6 +261,7 @@ export default {
 			emitStats,
 			sortEntries,
 			entryFilterCallback,
+			getSelected,
 		}
 	},
 	components: {
@@ -263,6 +273,7 @@ export default {
 		'updateStats',
 		'startProcessing',
 		'stopProcessing',
+		'cancelShowEntries',
 	]
 }
 </script>

navigator-vue/src/components/DirectoryView.vue

@@ -125,6 +125,8 @@ export default {
 			return directoryEntryListRef.value?.getEntries?.();
 		}
 
+		const getSelected = () => directoryEntryListRef.value?.getSelected?.() ?? [];
+
 		return {
 			settings,
 			processing,
@@ -132,6 +134,7 @@ export default {
 			sortCallbacks,
 			sortCallback,
 			getEntries,
+			getSelected,
 		}
 	},
 	components: {