Added closing of the event drawer and fixed stack traces and code block formatting

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/EventsDrawer.svelte

@@ -26,10 +26,11 @@
 
     interface Props {
         changed: (filter: IFilter) => void;
+        close: () => void;
         id: string;
     }
 
-    let { changed, id }: Props = $props();
+    let { changed, close, id }: Props = $props();
 
     function getTabs(event?: null | PersistentEvent, project?: ViewProject): TabType[] {
         if (!event) {
@@ -100,7 +101,11 @@
         activeTab = 'Extended Data';
     }
 
-    // TODO: Navigate on event deletion.
+    $effect(() => {
+        if (eventResponse.isError) {
+            close();
+        }
+    });
 </script>
 
 {#if eventResponse.isLoading}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/ExtendedDataItem.svelte

@@ -81,9 +81,11 @@
         </div>
     </div>
 
-    {#if showRaw}
-        <pre class="overflow-auto whitespace-pre-wrap break-words p-2 text-xs"><Code>{json}</Code></pre>
-    {:else}
-        <ObjectDump value={filteredData} />
-    {/if}
+    <div class="mt-2 flex-grow overflow-auto text-xs">
+        {#if showRaw}
+            <pre class="whitespace-pre-wrap break-words rounded bg-muted p-2"><Code class="px-0"><div class="bg-inherit">{json}</div></Code></pre>
+        {:else}
+            <ObjectDump value={filteredData} />
+        {/if}
+    </div>
 {/if}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/SimpleStackTrace.svelte

@@ -19,9 +19,8 @@
     const errors = getErrors(error);
 </script>
 
-<pre class="whitespace-pre-wrap break-words border p-2"><Code
-        ><StackTraceHeader {errors}></StackTraceHeader>{#each errors.reverse() as error, index}{#if error.stack_trace}<div class="pl-[10px]">{cleanStackTrace(
-                        error.stack_trace
-                    )}</div>{#if index < errors.length - 1}<div
-                        class="text-muted-foreground">--- End of inner error stack trace ---</div>{/if}{/if}{/each}</Code
+<pre class="whitespace-pre-wrap break-words rounded bg-muted p-2"><Code class="px-0"
+        ><StackTraceHeader {errors}></StackTraceHeader>{#each errors.reverse() as error, index}{#if error.stack_trace}<div
+                    class="bg-inherit pl-[10px]">{cleanStackTrace(error.stack_trace)}</div>{#if index < errors.length - 1}<div
+                        class="bg-inherit text-muted-foreground">--- End of inner error stack trace ---</div>{/if}{/if}{/each}</Code
     ></pre>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/StackTrace.svelte

@@ -15,8 +15,8 @@
     const errors = getErrors(error);
 </script>
 
-<pre class="whitespace-pre-wrap break-words border p-2"><Code
+<pre class="whitespace-pre-wrap break-words rounded bg-muted p-2"><Code class="px-0"
         ><StackTraceHeader {errors}></StackTraceHeader>{#each errors.reverse() as error, index}{#if error.stack_trace}<div
-                    class="pl-[10px]">{#each error.stack_trace as frame}{getStackFrame(frame)}<br />{/each}{#if index < errors.length - 1}<div
-                            class="text-muted-foreground">--- End of inner exception stack trace ---</div>{/if}</div>{/if}{/each}</Code
+                    class="bg-inherit pl-[10px]">{#each error.stack_trace as frame}{getStackFrame(frame)}<br />{/each}{#if index < errors.length - 1}<div
+                            class="bg-inherit text-muted-foreground">--- End of inner exception stack trace ---</div>{/if}</div>{/if}{/each}</Code
     ></pre>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/StackTraceHeader.svelte

@@ -8,7 +8,7 @@
     let { errors }: Props = $props();
 </script>
 
-{#each errors as error, index}<div>
+{#each errors as error, index}<div class="bg-inherit">
         {#if index > 0}<span class="ml-6">---> </span>{/if}{#if error.type}<span class="mr-1 font-bold">{error.type}:</span
             >{/if}{#if error.message}{error.message}{/if}
     </div>

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

@@ -70,7 +70,7 @@
         <CopyToClipboardButton title="Copy Stack Trace to Clipboard" value={stackTrace}></CopyToClipboardButton>
     </div>
 </div>
-<div class="mt-2 overflow-auto p-2 text-xs">
+<div class="mb-4 mt-2 overflow-auto text-xs">
     {#if event.data?.['@error']}
         <StackTrace error={event.data['@error']} />
     {:else if event.data?.['@simple_error']}

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

@@ -271,13 +271,13 @@
 {/if}
 
 {#if hasError}
-    <div class="mb-2 mt-4 flex justify-between">
+    <div class="mt-4 flex justify-between">
         <H4>Stack Trace</H4>
         <div class="flex justify-end">
             <CopyToClipboardButton title="Copy Stack Trace to Clipboard" value={stackTrace}></CopyToClipboardButton>
         </div>
     </div>
-    <div class="mt-2 max-h-[150px] overflow-auto p-2 text-xs">
+    <div class="mt-2 max-h-[300px] flex-grow overflow-auto text-xs">
         {#if event.data?.['@error']}
             <StackTrace error={event.data['@error']} />
         {:else if event.data?.['@simple_error']}

src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte

@@ -127,6 +127,6 @@
                 ></Sheet.Title
             >
         </Sheet.Header>
-        <EventsDrawer changed={onDrawerFilterChanged} id={selectedEventId || ''}></EventsDrawer>
+        <EventsDrawer changed={onDrawerFilterChanged} id={selectedEventId || ''} close={() => (selectedEventId = null)}></EventsDrawer>
     </Sheet.Content>
 </Sheet.Root>

src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte

@@ -121,6 +121,6 @@
                 >Event Details <Button href="/event/{eventId}" size="sm" title="Open in new window" variant="ghost"><IconOpenInNew /></Button></Sheet.Title
             >
         </Sheet.Header>
-        <EventsDrawer changed={onDrawerFilterChanged} id={eventId || ''}></EventsDrawer>
+        <EventsDrawer changed={onDrawerFilterChanged} id={eventId || ''} close={() => (selectedStackId = undefined)}></EventsDrawer>
     </Sheet.Content>
 </Sheet.Root>

src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte

@@ -155,6 +155,6 @@
                 ></Sheet.Title
             >
         </Sheet.Header>
-        <EventsDrawer changed={onDrawerFilterChanged} id={selectedEventId || ''}></EventsDrawer>
+        <EventsDrawer changed={onDrawerFilterChanged} id={selectedEventId || ''} close={() => (selectedEventId = null)}></EventsDrawer>
     </Sheet.Content>
 </Sheet.Root>