Merge pull request #1908 from exceptionless/ui-tweaks

Remove page cards and change page title

Author: niemyjski

src/Exceptionless.Web/ClientApp/package-lock.json

@@ -25,73 +25,73 @@
         "upgrade": "ncu -i"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^4.0.0",
-        "@eslint/compat": "^1.3.0",
-        "@eslint/js": "^9.29.0",
-        "@iconify-json/lucide": "^1.2.49",
-        "@playwright/test": "^1.53.0",
-        "@storybook/addon-a11y": "^9.0.10",
-        "@storybook/addon-docs": "^9.0.10",
-        "@storybook/addon-svelte-csf": "^5.0.3",
-        "@storybook/sveltekit": "^9.0.10",
+        "@chromatic-com/storybook": "^4.0.1",
+        "@eslint/compat": "^1.3.1",
+        "@eslint/js": "^9.30.0",
+        "@iconify-json/lucide": "^1.2.53",
+        "@playwright/test": "^1.53.1",
+        "@storybook/addon-a11y": "^9.0.14",
+        "@storybook/addon-docs": "^9.0.14",
+        "@storybook/addon-svelte-csf": "^5.0.4",
+        "@storybook/sveltekit": "^9.0.14",
         "@sveltejs/adapter-static": "^3.0.8",
-        "@sveltejs/kit": "^2.21.5",
+        "@sveltejs/kit": "^2.22.2",
         "@sveltejs/vite-plugin-svelte": "^5.1.0",
-        "@tailwindcss/vite": "^4.1.10",
+        "@tailwindcss/vite": "^4.1.11",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.8",
         "@types/eslint": "^9.6.1",
-        "@types/node": "^24.0.1",
+        "@types/node": "^24.0.6",
         "@types/throttle-debounce": "^5.0.2",
         "cross-env": "^7.0.3",
-        "eslint": "^9.29.0",
+        "eslint": "^9.30.0",
         "eslint-config-prettier": "^10.1.5",
-        "eslint-plugin-perfectionist": "^4.14.0",
-        "eslint-plugin-storybook": "^9.0.10",
-        "eslint-plugin-svelte": "^3.9.2",
+        "eslint-plugin-perfectionist": "^4.15.0",
+        "eslint-plugin-storybook": "^9.0.14",
+        "eslint-plugin-svelte": "^3.10.1",
         "jsdom": "^26.1.0",
-        "prettier": "^3.5.3",
+        "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
-        "prettier-plugin-tailwindcss": "^0.6.12",
-        "storybook": "^9.0.10",
-        "svelte": "^5.34.3",
-        "svelte-check": "^4.2.1",
-        "swagger-typescript-api": "^13.2.2",
+        "prettier-plugin-tailwindcss": "^0.6.13",
+        "storybook": "^9.0.14",
+        "svelte": "^5.34.8",
+        "svelte-check": "^4.2.2",
+        "swagger-typescript-api": "^13.2.7",
         "tslib": "^2.8.1",
         "typescript": "^5.8.3",
-        "typescript-eslint": "^8.34.0",
+        "typescript-eslint": "^8.35.0",
         "vite": "^6.3.5",
-        "vitest": "3.2.3"
+        "vitest": "3.2.4"
     },
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
         "@exceptionless/fetchclient": "^0.42.0",
-        "@lucide/svelte": "^0.515.0",
+        "@lucide/svelte": "^0.525.0",
         "@tanstack/svelte-query": "https://pkg.pr.new/@tanstack/svelte-query@8c9ce9",
         "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@8c9ce9",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
         "@types/d3-scale": "^4.0.9",
         "@types/d3-shape": "^3.1.7",
         "@typeschema/class-validator": "^0.3.0",
-        "bits-ui": "^2.8.0",
+        "bits-ui": "^2.8.10",
         "class-validator": "^0.14.2",
         "clsx": "^2.1.1",
         "d3-scale": "^4.0.2",
         "dompurify": "^3.2.6",
         "formsnap": "^2.0.1",
         "kit-query-params": "^0.0.26",
-        "layerchart": "^2.0.0-next.21",
-        "mode-watcher": "^1.0.8",
-        "oidc-client-ts": "^3.2.1",
+        "layerchart": "^2.0.0-next.27",
+        "mode-watcher": "^1.1.0",
+        "oidc-client-ts": "^3.3.0",
         "pretty-ms": "^9.2.0",
-        "runed": "^0.28.0",
-        "shiki": "^3.6.0",
+        "runed": "^0.29.1",
+        "shiki": "^3.7.0",
         "svelte-sonner": "^1.0.5",
         "svelte-time": "^2.0.1",
-        "sveltekit-superforms": "^2.26.1",
+        "sveltekit-superforms": "^2.27.1",
         "tailwind-merge": "^3.3.1",
         "tailwind-variants": "^1.0.0",
-        "tailwindcss": "^4.1.10",
+        "tailwindcss": "^4.1.11",
         "throttle-debounce": "^5.0.2",
         "tw-animate-css": "^1.3.4"
     },

src/Exceptionless.Web/ClientApp/package.json

@@ -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/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: 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/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,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/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,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/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,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/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,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/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: 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/session-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>