feat: widgets and ai chat

apps/dashboard/src/lib/features/ui/search.svelte

@@ -4,6 +4,8 @@
   import SearchIcon from '@lucide/svelte/icons/search';
   import type { ComponentProps } from 'svelte';
   import { t } from '$lib/utils/functions/translations';
+  import { searchStore } from '$features/search/store/search-store.svelte';
+  import type { SearchScope } from '$features/search/utils/types';
 
   interface Props {
     placeholder?: string;
@@ -12,6 +14,7 @@
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onKeydown?: (event: KeyboardEvent) => void;
+    scope?: SearchScope;
   }
 
   let {
@@ -21,17 +24,46 @@
     onFocus,
     onBlur,
     onKeydown,
+    scope = 'org',
     ...restProps
   }: Props & Omit<ComponentProps<typeof InputGroup.Root>, 'class' | 'children'> = $props();
+
+  function openCommandPalette() {
+    searchStore.open(scope);
+  }
+
+  function handleFocus(event: FocusEvent) {
+    onFocus?.(event);
+    openCommandPalette();
+  }
+
+  function handlePointerdown(event: PointerEvent) {
+    event.preventDefault();
+    openCommandPalette();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    onKeydown?.(event);
+
+    if (event.key === 'Tab') {
+      return;
+    }
+
+    event.preventDefault();
+    openCommandPalette();
+  }
 </script>
 
-<InputGroup.Root class={`hidden! max-w-56 md:flex! ${className}`} {...restProps}>
+<InputGroup.Root class={`hidden! max-w-56 md:flex! ${className}`} onpointerdown={handlePointerdown} {...restProps}>
   <InputGroup.Input
     placeholder={placeholder || $t('app.search.placeholder')}
     bind:value
-    on:focus={onFocus}
+    readonly
+    role="button"
+    aria-haspopup="dialog"
+    on:focus={handleFocus}
     on:blur={onBlur}
-    on:keydown={onKeydown}
+    on:keydown={handleKeydown}
   />
   <InputGroup.Addon>
     <SearchIcon />