Frontend improvements, keyboard handling, confirm dialog improvement

Author: Stefan Ernst

frontend/src/lib/components/AlertBox.svelte

@@ -2,10 +2,11 @@
   import { AlertCircle, CircleCheck, Info, AlertTriangle } from 'lucide-svelte';
 
   let {
-    variant = 'error', // 'error', 'warning', 'info', 'success'
+    variant = 'error', // 'error', 'warning', 'info', 'success', 'neutral'
     message = '',
     showIcon = true,
-    class: className = ''
+    class: className = '',
+    children
   } = $props();
 
   const styles = $derived({
@@ -39,14 +40,20 @@
   const IconComponent = $derived(styles?.icon || AlertCircle);
 </script>
 
-{#if message}
+{#if message || children}
   <div
     class="px-4 py-3 rounded flex items-start gap-3 {className}"
     style="background: var(--ds-surface-raised); border: 1px solid var(--ds-border); border-left: 4px solid {styles?.borderColor}; color: var(--ds-text);"
   >
     {#if showIcon}
       <IconComponent class="w-5 h-5 flex-shrink-0 mt-0.5" style="color: {styles?.iconColor};" />
     {/if}
-    <span class="text-sm">{message}</span>
+    {#if children}
+      <div class="text-sm flex-1">
+        {@render children()}
+      </div>
+    {:else}
+      <span class="text-sm">{message}</span>
+    {/if}
   </div>
 {/if}

frontend/src/lib/components/EmptyState.svelte

@@ -18,6 +18,7 @@
     title = '',
     description = '',
     action = null,
+    hasGradient = false,
     class: className = ''
   } = $props();
 </script>
@@ -28,5 +29,6 @@
   {title}
   {description}
   {action}
+  {hasGradient}
   class={className}
 />

frontend/src/lib/components/StateDisplay.svelte

@@ -32,15 +32,33 @@
     action = null, // Snippet for custom action
     size = 'md', // For loading spinner: 'sm' | 'md' | 'lg'
     inline = false, // For loading: horizontal layout
+    hasGradient = false, // Whether displayed on a gradient background
     class: className = ''
   } = $props();
 
-  // Computed icon color based on type
-  const iconColor = $derived({
-    error: 'var(--ds-icon-danger)',
-    empty: 'var(--ds-icon-disabled)',
-    loading: 'var(--ds-icon-subtle)'
-  }[type] || 'var(--ds-icon-disabled)');
+  // Computed icon color based on type and gradient
+  const iconColor = $derived(
+    hasGradient && type === 'empty'
+      ? 'rgba(255, 255, 255, 0.6)'
+      : {
+          error: 'var(--ds-icon-danger)',
+          empty: 'var(--ds-icon-disabled)',
+          loading: 'var(--ds-icon-subtle)'
+        }[type] || 'var(--ds-icon-disabled)'
+  );
+
+  // Text colors based on gradient
+  const titleColor = $derived(
+    hasGradient && type === 'empty'
+      ? 'rgba(255, 255, 255, 0.8)'
+      : type === 'error' ? 'var(--ds-text)' : 'var(--ds-text-subtle)'
+  );
+
+  const messageColor = $derived(
+    hasGradient && type === 'empty'
+      ? 'rgba(255, 255, 255, 0.6)'
+      : 'var(--ds-text-subtle)'
+  );
 
   // Default icons per type
   const defaultIcon = $derived({
@@ -89,22 +107,22 @@
     {#if title}
       <h3
         class="text-lg font-medium mb-1"
-        style="color: {type === 'error' ? 'var(--ds-text)' : 'var(--ds-text-subtle)'};"
+        style="color: {titleColor};"
       >
         {title}
       </h3>
     {:else if type === 'error'}
-      <h3 class="text-lg font-medium mb-1" style="color: var(--ds-text);">
+      <h3 class="text-lg font-medium mb-1" style="color: {titleColor};">
         {t('components.errorState.title')}
       </h3>
     {:else if type === 'empty'}
-      <h3 class="text-lg font-medium mb-1" style="color: var(--ds-text-subtle);">
+      <h3 class="text-lg font-medium mb-1" style="color: {titleColor};">
         {t('common.noData')}
       </h3>
     {/if}
 
     {#if displayMessage}
-      <p class="text-sm mb-4" style="color: var(--ds-text-subtle);">{displayMessage}</p>
+      <p class="text-sm mb-4" style="color: {messageColor};">{displayMessage}</p>
     {/if}
 
     {#if action}

frontend/src/lib/components/Tabs.svelte

@@ -1,20 +1,18 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-
-  const dispatch = createEventDispatcher();
-
-  // Props
-  export let tabs = []; // Array of { id, label, icon?, badge?, className? }
-  export let activeTab = ''; // Current active tab ID (bindable)
+  let { tabs = [], activeTab = $bindable(''), onTabChange = null, children } = $props();
 
   // Initialize activeTab to first tab if not set
-  $: if (!activeTab && tabs.length > 0) {
-    activeTab = tabs[0].id;
-  }
+  $effect(() => {
+    if (!activeTab && tabs.length > 0) {
+      activeTab = tabs[0].id;
+    }
+  });
 
   function switchTab(tabId) {
     activeTab = tabId;
-    dispatch('tab-change', { tab: tabId });
+    if (onTabChange) {
+      onTabChange({ tab: tabId });
+    }
   }
 </script>
 
@@ -42,6 +40,6 @@
 
   <!-- Tab Content -->
   <div class="p-6">
-    <slot />
+    {@render children?.()}
   </div>
 </div>

frontend/src/lib/dialogs/ConfirmDialog.svelte

@@ -4,6 +4,7 @@
   import { AlertTriangle, X, Trash2, Check } from 'lucide-svelte';
   import Button from '../components/Button.svelte';
   import { t } from '../stores/i18n.svelte.js';
+  import { getShortcut, matchesShortcut } from '../utils/keyboardShortcuts.js';
 
   const dispatch = createEventDispatcher();  // Keep for backward compatibility
 
@@ -19,20 +20,64 @@
     oncancel = null
   } = $props();
 
+  // Get shortcut configurations
+  const submitShortcut = getShortcut('modal', 'submit');
+  const cancelShortcut = getShortcut('modal', 'cancel');
+
+  // Focus management
+  let backdropRef = $state(null);
+  let previouslyFocusedElement = null;
+
+  // Store previously focused element when show becomes true
+  $effect(() => {
+    if (show && !previouslyFocusedElement) {
+      previouslyFocusedElement = document.activeElement;
+    }
+    if (!show && previouslyFocusedElement) {
+      // Restore focus when modal closes
+      previouslyFocusedElement?.focus();
+      previouslyFocusedElement = null;
+    }
+  });
+
+  // Focus backdrop after intro transition completes
+  function handleIntroEnd() {
+    backdropRef?.focus();
+  }
+
   // Use translations for defaults
   const resolvedTitle = $derived(title ?? t('common.areYouSure'));
   const resolvedMessage = $derived(message ?? t('common.confirmAction'));
   const resolvedConfirmText = $derived(confirmText ?? t('common.confirm'));
   const resolvedCancelText = $derived(cancelText ?? t('common.cancel'));
 
-  // Auto-close on escape key
+  // Handle keyboard navigation using standard shortcuts
   function handleKeydown(event) {
-    if (event.key === 'Escape' && show) {
+    // Check for cancel shortcut (Escape)
+    if (matchesShortcut(event, cancelShortcut)) {
       cancel();
+      return;
+    }
+
+    // Check for submit shortcut (Cmd/Ctrl+Enter)
+    if (matchesShortcut(event, submitShortcut)) {
+      event.preventDefault();
+      doConfirm();
+      return;
+    }
+
+    // Enter without modifier confirms (unless on cancel button)
+    if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
+      const activeElement = document.activeElement;
+      const isOnCancelButton = activeElement?.textContent?.trim() === resolvedCancelText;
+      if (!isOnCancelButton) {
+        event.preventDefault();
+        doConfirm();
+      }
     }
   }
 
-  function confirm() {
+  function doConfirm() {
     dispatch('confirm');  // Keep for backward compatibility
     onconfirm?.();        // New Svelte 5 style
     show = false;
@@ -80,18 +125,20 @@
   let styles = $derived(getVariantStyles(variant));
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
 {#if show}
   <!-- Modal backdrop -->
   <div
+    bind:this={backdropRef}
     transition:fade={{ duration: 150 }}
-    class="modal-backdrop fixed inset-0 z-50 flex items-center justify-center p-4"
+    onintroend={handleIntroEnd}
+    class="modal-backdrop fixed inset-0 z-50 flex items-center justify-center p-4 focus:outline-none"
     onclick={handleBackdropClick}
+    onkeydown={handleKeydown}
     role="dialog"
     aria-modal="true"
     aria-labelledby="dialog-title"
     aria-describedby="dialog-description"
+    tabindex="-1"
   >
     <!-- Modal content -->
     <div
@@ -142,14 +189,16 @@
           variant="default"
           onclick={cancel}
           size="small"
+          keyboardHint="Esc"
         >
           {resolvedCancelText}
         </Button>
 
         <Button
           variant={styles.buttonVariant}
-          onclick={confirm}
+          onclick={doConfirm}
           size="small"
+          keyboardHint="↵"
         >
           {resolvedConfirmText}
         </Button>