cmd-k: starting point

frontend/messages/en.json

@@ -708,6 +708,7 @@
 	"dependency": "Dependency",
 	"trust": "Trust",
 	"solutions": "Solutions",
+	"tpSolutions": "Third-Party solutions",
 	"solution": "Solution",
 	"addSolution": "Add solution",
 	"providerEntity": "Provider entity",

frontend/messages/fr.json

@@ -708,6 +708,7 @@
 	"dependency": "Dépendance",
 	"trust": "Confiance",
 	"solutions": "Solutions",
+	"tpSolutions": "Solutions tierces",
 	"solution": "Solution",
 	"addSolution": "Ajouter une solution",
 	"providerEntity": "Entité fournisseur",

frontend/package.json

@@ -81,6 +81,7 @@
 		"@typescript-eslint/parser": "^8.18.0",
 		"@unovis/svelte": "1.4.3-beta.0",
 		"@unovis/ts": "1.4.3-beta.0",
+		"cmdk-sv": "^0.0.18",
 		"dotenv": "^16.4.7",
 		"echarts": "^5.5.1",
 		"eslint-plugin-storybook": "^0.10.2",

frontend/src/lib/components/CommandPalette/CommandPalette.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+	import { Command } from 'cmdk-sv';
+	import { onMount, onDestroy } from 'svelte';
+	import { writable } from 'svelte/store';
+	import { safeTranslate } from '$lib/utils/i18n';
+	import { navigationLinks } from './paletteData.ts';
+	import { goto } from '$app/navigation';
+
+	// Create a store for command palette visibility
+	export const commandPaletteOpen = writable(false);
+
+	// Custom case-insensitive filter
+	function caseInsensitiveFilter(value: string, search: string) {
+		return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
+	}
+
+	// Keyboard shortcut handler
+	function handleKeydown(e: KeyboardEvent) {
+		if (browser && (e.metaKey || e.ctrlKey) && e.key === 'k') {
+			e.preventDefault();
+			commandPaletteOpen.update((current) => !current);
+		}
+	}
+
+	// Generate navigation commands with automatic close
+	const navigationCommands = navigationLinks.map((link) => ({
+		label: safeTranslate(link.label),
+		value: link.href,
+		onSelect: () => {
+			commandPaletteOpen.set(false);
+			goto(link.href);
+		}
+	}));
+
+	// Close command palette on route change
+	$: if ($page.url.pathname) {
+		commandPaletteOpen.set(false);
+	}
+
+	// Add global event listener
+	onMount(() => {
+		if (browser) {
+			window.addEventListener('keydown', handleKeydown);
+		}
+	});
+
+	onDestroy(() => {
+		if (browser) {
+			window.removeEventListener('keydown', handleKeydown);
+		}
+	});
+</script>
+
+<Command.Dialog bind:open={$commandPaletteOpen} label="Command Menu">
+	<Command.Root filter={caseInsensitiveFilter}>
+		<Command.Input placeholder="Type a command..." />
+		<Command.List>
+			<Command.Empty>No results found.</Command.Empty>
+			<Command.Group heading="Navigation">
+				{#each navigationCommands as command}
+					<Command.Item value={command.label} onSelect={command.onSelect}>
+						{command.label}
+					</Command.Item>
+				{/each}
+			</Command.Group>
+			<Command.Separator />
+		</Command.List>
+	</Command.Root>
+</Command.Dialog>
+
+<style lang="postcss">
+	/* Global styles for the command palette */
+	:global([data-cmdk-dialog]) {
+		@apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-2;
+	}
+
+	:global([data-cmdk-root]) {
+		@apply w-full max-w-md bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden;
+	}
+
+	:global([data-cmdk-input]) {
+		@apply w-full px-4 py-3 border-b border-gray-200 outline-none;
+	}
+
+	:global([data-cmdk-list]) {
+		@apply max-h-[300px] overflow-y-auto;
+	}
+
+	:global([data-cmdk-item]) {
+		@apply px-4 py-2 cursor-pointer hover:bg-gray-100
+               focus:bg-gray-100 focus:outline-none;
+	}
+
+	:global([data-cmdk-item][data-selected='true']) {
+		@apply bg-gray-100;
+	}
+
+	:global([data-cmdk-group-heading]) {
+		@apply px-4 py-2 text-xs text-gray-500 uppercase;
+	}
+</style>

frontend/src/lib/components/CommandPalette/paletteData.ts

@@ -0,0 +1,65 @@
+import * as m from '$paraglide/messages';
+
+export interface NavigationLink {
+	label: string;
+	href: string;
+}
+
+export const navigationLinks: NavigationLink[] = [
+	{
+		label: 'analytics',
+		href: '/'
+	},
+	{
+		label: 'myAssignments',
+		href: '/my-assignments'
+	},
+	{
+		label: 'domains',
+		href: '/folders'
+	},
+	{
+		label: 'assets',
+		href: '/assets'
+	},
+	{
+		label: 'complianceAssessments',
+		href: '/compliance-assessments'
+	},
+	{
+		label: 'riskAssessments',
+		href: '/risk-assessments'
+	},
+	{
+		label: 'riskScenarios',
+		href: '/risk-scenarios'
+	},
+	{
+		label: 'actionPlan',
+		href: '/applied-controls'
+	},
+	{
+		label: 'evidences',
+		href: '/evidences'
+	},
+	{
+		label: 'xRays',
+		href: '/x-rays'
+	},
+	{
+		label: 'tpSolutions',
+		href: '/solutions'
+	},
+	{
+		label: 'libraries',
+		href: '/libraries'
+	},
+	{
+		label: 'myProfile',
+		href: '/my-profile'
+	},
+	{
+		label: 'settings',
+		href: '/settings'
+	}
+];