Adds support for custom filter trigger content

Allows custom content to be displayed within the filter trigger, rather than only the default filter icon.
This enables more flexibility in representing different filter states or providing additional visual cues.

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,14 +9,19 @@
 
     type Props = AProps & {
         changed: (filter: BooleanFilter) => void;
+        children?: Snippet;
         term: string;
         value?: boolean;
     };
-    let { changed, class: className, term, value, ...props }: Props = $props();
+    let { changed, children, class: className, term, value, ...props }: Props = $props();
 
     const title = `Search ${term}:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new BooleanFilter(term, value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,14 +9,19 @@
 
     type Props = AProps & {
         changed: (filter: DateFilter) => void;
+        children?: Snippet;
         term: string;
         value?: Date | string;
     };
-    let { changed, class: className, term, value, ...props }: Props = $props();
+    let { changed, children, class: className, term, value, ...props }: Props = $props();
 
     const title = `Search ${term}:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new DateFilter(term, value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,13 +9,18 @@
 
     type Props = AProps & {
         changed: (filter: LevelFilter) => void;
+        children?: Snippet;
         value: string[];
     };
-    let { changed, class: className, value, ...props }: Props = $props();
+    let { changed, children, class: className, value, ...props }: Props = $props();
 
     const title = `Search level:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new LevelFilter(value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,14 +9,19 @@
 
     type Props = AProps & {
         changed: (filter: NumberFilter) => void;
+        children?: Snippet;
         term: string;
         value?: number;
     };
-    let { changed, class: className, term, value, ...props }: Props = $props();
+    let { changed, children, class: className, term, value, ...props }: Props = $props();
 
     const title = `Search ${term}:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new NumberFilter(term, value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,12 +9,17 @@
 
     type Props = AProps & {
         changed: (filter: ProjectFilter) => void;
+        children?: Snippet;
         value: string[];
     };
-    let { changed, class: className, value, ...props }: Props = $props();
+    let { changed, children, class: className, value, ...props }: Props = $props();
     const title = `Search project:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new ProjectFilter(value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,13 +9,18 @@
 
     type Props = AProps & {
         changed: (filter: ReferenceFilter) => void;
+        children?: Snippet;
         value: string;
     };
-    let { changed, class: className, value, ...props }: Props = $props();
+    let { changed, children, class: className, value, ...props }: Props = $props();
 
     const title = `Search reference:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new ReferenceFilter(value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,13 +9,18 @@
 
     type Props = AProps & {
         changed: (filter: SessionFilter) => void;
+        children?: Snippet;
         value: string;
     };
-    let { changed, class: className, value, ...props }: Props = $props();
+    let { changed, children, class: className, value, ...props }: Props = $props();
 
     const title = `Search ref.session:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new SessionFilter(value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
+    import type { Snippet } from 'svelte';
 
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
@@ -9,13 +10,18 @@
 
     type Props = AProps & {
         changed: (filter: StatusFilter) => void;
+        children?: Snippet;
         value: StackStatus[];
     };
-    let { changed, class: className, value, ...props }: Props = $props();
+    let { changed, children, class: className, value, ...props }: Props = $props();
 
     const title = `Search status:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new StatusFilter(value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,13 +9,18 @@
 
     type Props = AProps & {
         changed: (filter: TagFilter) => void;
+        children?: Snippet;
         value: string[];
     };
-    let { changed, class: className, value, ...props }: Props = $props();
+    let { changed, children, class: className, value, ...props }: Props = $props();
 
     const title = `Search tag:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new TagFilter(value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
     import Filter from '@lucide/svelte/icons/filter';
@@ -7,13 +9,18 @@
 
     type Props = AProps & {
         changed: (filter: TypeFilter) => void;
+        children?: Snippet;
         value: string[];
     };
-    let { changed, class: className, value, ...props }: Props = $props();
+    let { changed, children, class: className, value, ...props }: Props = $props();
 
     const title = `Search type:${value}`;
 </script>
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new TypeFilter(value))} {title} {...props}>
-    <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {#if children}
+        {@render children()}
+    {:else}
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
+    {/if}
 </A>