Polish event detail sheet: tabs, stack traces, syntax colors

src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts

@@ -4,7 +4,7 @@ import type { CountResult, WorkInProgressResult } from '$shared/models';
 import { accessToken } from '$features/auth/index.svelte';
 import { DEFAULT_OFFSET } from '$shared/api/api.svelte';
 import { type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-import { createMutation, createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
+import { createMutation, createQuery, keepPreviousData, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
 import type { EventSummaryModel, SummaryTemplateKeys } from './components/summary/index';
 import type { PersistentEvent } from './models';
@@ -215,10 +215,7 @@ export function getEventWithNavigationQuery(request: GetEventRequest) {
     const queryClient = useQueryClient();
     return createQuery<EventWithNavigation, ProblemDetails>(() => ({
         enabled: () => !!accessToken.current && !!request.route.id,
-        placeholderData: () => {
-            const cachedEvent = queryClient.getQueryData<PersistentEvent>(queryKeys.id(request.route.id));
-            return cachedEvent ? { event: cachedEvent, navigation: { nextId: null, previousId: null } } : undefined;
-        },
+        placeholderData: keepPreviousData,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
             const response = await client.getJSON<PersistentEvent>(`events/${request.route.id}`, {

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte

@@ -293,11 +293,14 @@
                 {/if}
                 <Tabs.List
                     bind:ref={tabsListRef}
-                    class="no-scrollbar w-full justify-normal overflow-x-auto overflow-y-hidden scroll-smooth"
+                    class="no-scrollbar h-auto w-full justify-normal gap-1 overflow-x-auto overflow-y-hidden scroll-smooth p-1"
                     onscroll={updateTabsOverflow}
                 >
                     {#each tabs as tab (tab)}
-                        <Tabs.Trigger class="flex-none px-3" value={tab}>{tab}</Tabs.Trigger>
+                        <Tabs.Trigger
+                            class="dark:data-[state=active]:bg-background flex-none shrink-0 px-3 py-1.5 data-[state=active]:shadow-xs dark:data-[state=active]:border-transparent"
+                            value={tab}>{tab}</Tabs.Trigger
+                        >
                     {/each}
                 </Tabs.List>
                 {#if canScrollTabsRight}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace-header.svelte

@@ -9,5 +9,5 @@
 </script>
 
 <div class="bg-inherit">
-    {#if error.type}<span class="mr-1 font-bold text-purple-400">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
+    {#if error.type}<span class="mr-1 font-bold text-purple-300">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte

@@ -16,7 +16,7 @@
     const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"
+<pre class="bg-muted/50 border-border rounded-xl border p-2 wrap-break-word whitespace-pre-wrap"><Code class="bg-transparent px-0 py-0"
         >{#each errors.reverse() as error, index (index)}<SimpleStackTraceHeader {error} /><SimpleStackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-generic-arguments.svelte

@@ -8,4 +8,4 @@
     let { frame }: Props = $props();
 </script>
 
-{#if frame.generic_arguments?.length}&lt;<span class="text-purple-400">{frame.generic_arguments.join(', ')}</span>&gt;{/if}
+{#if frame.generic_arguments?.length}&lt;<span class="text-purple-300">{frame.generic_arguments.join(', ')}</span>&gt;{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-method-name.svelte

@@ -8,4 +8,4 @@
     let { frame }: Props = $props();
 </script>
 
-<span class="text-emerald-400">{frame.name || '<anonymous>'}</span>
+<span class="text-green-300">{frame.name || '<anonymous>'}</span>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-namespace.svelte

@@ -8,6 +8,6 @@
     let { frame }: Props = $props();
 </script>
 
-{#if frame.declaring_namespace || frame.declaring_type}<span class="text-purple-400"
+{#if frame.declaring_namespace || frame.declaring_type}<span class="text-purple-300"
         >{#if frame.declaring_namespace}{frame.declaring_namespace}.{/if}{#if frame.declaring_type}{frame.declaring_type.replace('+', '')}.{/if}</span
     >{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-generic-arguments.svelte

@@ -8,4 +8,4 @@
     let { parameter }: Props = $props();
 </script>
 
-{#if parameter.generic_arguments?.length}&lt;<span class="text-purple-400">{parameter.generic_arguments.join(', ')}</span>&gt;{/if}
+{#if parameter.generic_arguments?.length}&lt;<span class="text-purple-300">{parameter.generic_arguments.join(', ')}</span>&gt;{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-namespace.svelte

@@ -8,6 +8,6 @@
     let { parameter }: Props = $props();
 </script>
 
-{#if parameter.type_namespace}<span class="text-purple-400">{parameter.type_namespace}.</span>{/if}{#if parameter.type}<span class="text-purple-400"
+{#if parameter.type_namespace}<span class="text-purple-300">{parameter.type_namespace}.</span>{/if}{#if parameter.type}<span class="text-purple-300"
         >{parameter.type.replace('+', '')}</span
     >{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-header.svelte

@@ -9,5 +9,5 @@
 </script>
 
 <div class="bg-inherit">
-    {#if error.type}<span class="mr-1 font-bold text-purple-400">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
+    {#if error.type}<span class="mr-1 font-bold text-purple-300">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte

@@ -16,7 +16,7 @@
     const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"
+<pre class="bg-muted/50 border-border rounded-xl border p-2 wrap-break-word whitespace-pre-wrap"><Code class="bg-transparent px-0 py-0"
         >{#each errors.reverse() as error, index (index)}<StackTraceHeader {error} /><StackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/error.svelte

@@ -64,7 +64,7 @@
 <div class="mt-4 mb-2 flex justify-between">
     <H3>Stack Trace</H3>
     <div class="flex justify-end">
-        <CopyToClipboardButton title="Copy Stack Trace to Clipboard" value={stackTrace}></CopyToClipboardButton>
+        <CopyToClipboardButton size="icon-sm" title="Copy Stack Trace to Clipboard" value={stackTrace} variant="outline"></CopyToClipboardButton>
     </div>
 </div>
 <div class="mt-2 mb-4 overflow-auto text-xs">

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte

@@ -227,7 +227,7 @@
     <div class="mt-4 flex justify-between">
         <H3>Stack Trace</H3>
         <div class="flex justify-end">
-            <CopyToClipboardButton title="Copy Stack Trace to Clipboard" value={stackTrace}></CopyToClipboardButton>
+            <CopyToClipboardButton size="icon-sm" title="Copy Stack Trace to Clipboard" value={stackTrace} variant="outline"></CopyToClipboardButton>
         </div>
     </div>
     <div class="mt-2 max-h-75 grow overflow-auto text-xs">

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
     import type { HTMLAttributes } from 'svelte/elements';
 
+    import { cn } from '$lib/utils';
+
     type Props = HTMLAttributes<Element>;
 
     let { children, class: className, ...props }: Props = $props();
 </script>
 
-<code class={['bg-muted relative rounded px-[0.6rem] py-2 font-mono text-sm', className]} {...props}>
-    {#if children}
-        {@render children()}
-    {/if}
-</code>
+<code class={cn('bg-muted relative rounded px-[0.6rem] py-2 font-mono text-sm', className)} {...props}
+    >{#if children}{@render children()}{/if}</code
+>