Update search-attribute-filter components

Author: tegan-temporal

src/lib/components/search-attribute-filter/duration-filter.svelte

@@ -10,10 +10,8 @@
 
   const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
-  $: ({ value } = $filter);
-  $: _value = value;
-
-  let isValid = true;
+  let _value = $derived($filter.value);
+  let isValid = $state(true);
 
   const handleKeydown = (e: KeyboardEvent) => {
     const newValue = _value.trim();
@@ -24,12 +22,12 @@
     }
   };
 
-  const validateDuration = (event: Event & { target: HTMLInputElement }) => {
-    if (isValidDurationQuery(event.target.value.trim())) {
-      isValid = true;
-    } else {
-      isValid = false;
+  const validateDuration = (event: Event) => {
+    if (!(event.currentTarget instanceof HTMLInputElement)) {
+      return;
     }
+
+    isValid = isValidDurationQuery(event.currentTarget.value.trim());
   };
 </script>
 

src/lib/components/search-attribute-filter/number-filter.svelte

@@ -11,8 +11,7 @@
     getContext<FilterContext>(FILTER_CONTEXT);
   const min = 0;
 
-  $: ({ value } = $filter);
-  $: _value = value ? Number(value) : null;
+  let _value = $derived($filter.value ? Number($filter.value) : null);
 
   const handleKeydown = (e: KeyboardEvent) => {
     $focusedElementId = '';

src/lib/components/search-attribute-filter/search-attribute-menu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Input from '$lib/holocene/input/input.svelte';
@@ -24,8 +24,12 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
-  export let options: SearchAttributeOption[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+    options: SearchAttributeOption[];
+  }
+
+  let { filters, options }: Props = $props();
 
   const { filter, activeQueryIndex, focusedElementId } =
     getContext<FilterContext>(FILTER_CONTEXT);
@@ -45,22 +49,26 @@
     $focusedElementId = getFocusedElementId($filter);
   }
 
-  let searchAttributeValue = '';
+  let searchAttributeValue = $state('');
 
-  $: filteredOptions = !searchAttributeValue
-    ? options
-    : options.filter((option) =>
-        option.value.toLowerCase().includes(searchAttributeValue.toLowerCase()),
-      );
+  const filteredOptions = $derived(
+    !searchAttributeValue
+      ? options
+      : options.filter((option) =>
+          option.value
+            .toLowerCase()
+            .includes(searchAttributeValue.toLowerCase()),
+        ),
+  );
 
-  $: query = $page.url.searchParams.get('query');
+  const query = $derived(page.url.searchParams.get('query') ?? '');
 </script>
 
 <MenuContainer>
   <MenuButton
     id="search-attribute-filter-button"
     controls="search-attribute-menu"
-    disabled={$activeQueryIndex !== null || query?.length >= MAX_QUERY_LENGTH}
+    disabled={$activeQueryIndex !== null || query.length >= MAX_QUERY_LENGTH}
     onclick={() => (searchAttributeValue = '')}
     class="text-nowrap"
   >

src/lib/components/search-attribute-filter/text-filter.svelte

@@ -11,8 +11,7 @@
 
   const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
-  $: ({ value } = $filter);
-  $: _value = value;
+  let _value = $derived($filter.value);
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter' && _value !== '') {
@@ -22,13 +21,13 @@
     }
   }
 
-  $: options = [
+  const options = $derived([
     { value: '=', label: translate('common.equal-to') },
     { value: '!=', label: translate('common.not-equal-to') },
     ...($prefixSearchEnabled && $filter.type === SEARCH_ATTRIBUTE_TYPE.KEYWORD
       ? [{ value: 'STARTS_WITH', label: translate('common.starts-with') }]
       : []),
-  ];
+  ]);
 </script>
 
 <ConditionalMenu {options} inputId="text-filter" noBorderLeft>