More keyboards shortcuts for Edit on detailviews; flash and table mode (

#1192)

enterprise/frontend/src/routes/+layout.svelte

@@ -26,6 +26,9 @@
 	const flash = getFlash(page);
 	const toastStore = getToastStore();
 
+	import CommandPalette from '$lib/components/CommandPalette/CommandPalette.svelte';
+	import commandPaletteOpen from '$lib/components/CommandPalette/CommandPalette.svelte';
+
 	const toast = (message: string, options: Record<string, string>) => {
 		const t: ToastSettings = {
 			message: message,
@@ -112,6 +115,7 @@
 <ParaglideJsProvider>
 	<Modal components={modalRegistry} />
 	<Toast />
+	<CommandPalette />
 	<slot />
 
 	{#if $flash}

frontend/src/lib/components/DetailView/DetailView.svelte

@@ -26,6 +26,9 @@
 	import List from '$lib/components/List/List.svelte';
 	import { SECURITY_OBJECTIVE_SCALE_MAP } from '$lib/utils/constants';
 
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+
 	const modalStore: ModalStore = getModalStore();
 	const toastStore: ToastStore = getToastStore();
 
@@ -73,6 +76,25 @@
 		}
 	}
 
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.metaKey || event.ctrlKey) return;
+		// Check if the pressed key is 'e' and the edit button should be displayed
+		if (event.key === 'e' && displayEditButton()) {
+			event.preventDefault();
+			goto(`${$page.url.pathname}/edit?next=${$page.url.pathname}`);
+		}
+	}
+
+	onMount(() => {
+		// Add event listener to the document
+		document.addEventListener('keydown', handleKeydown);
+
+		// Cleanup function to remove event listener
+		return () => {
+			document.removeEventListener('keydown', handleKeydown);
+		};
+	});
+
 	function modalCreateForm(model: Record<string, any>): void {
 		let modalComponent: ModalComponent = {
 			ref: CreateModal,

frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/flash-mode/+page.svelte

@@ -69,9 +69,9 @@
 		});
 	}
 	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'ArrowRight' || event.key === 'l') {
+		if (event.key === 'n' || event.key === 'l') {
 			nextItem();
-		} else if (event.key === 'ArrowLeft' || event.key === 'h') {
+		} else if (event.key === 'p' || event.key === 'h') {
 			previousItem();
 		}
 	}

frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte

@@ -4,6 +4,8 @@
 	import { breadcrumbObject } from '$lib/utils/stores';
 	import { displayOnlyAssessableNodes } from './store';
 
+	import { onMount } from 'svelte';
+
 	import type {
 		ModalComponent,
 		ModalSettings,
@@ -55,6 +57,29 @@
 		`change_${requirementAssessmentModel.name}`
 	);
 
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.metaKey || event.ctrlKey) return;
+		// Check if the pressed key is 'e' and the edit button should be displayed
+		if (event.key === 'f') {
+			event.preventDefault();
+			goto(`${$page.url.pathname}/flash-mode`);
+		}
+		if (event.key === 't') {
+			event.preventDefault();
+			goto(`${$page.url.pathname}/table-mode`);
+		}
+	}
+
+	onMount(() => {
+		// Add event listener to the document
+		document.addEventListener('keydown', handleKeydown);
+
+		// Cleanup function to remove event listener
+		return () => {
+			document.removeEventListener('keydown', handleKeydown);
+		};
+	});
+
 	const countResults = (
 		node: Node,
 		resultCounts: Record<string, number> = {}