next: Tweaked table tables, filtering icon sizes and addressed other feedback

niemyjski · niemyjski · commit eb6dceca6709 · 2025-02-23T10:15:12.000-06:00
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-drawer.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-drawer.svelte
@@ -117,25 +117,25 @@
     <Table.Body>
         <Table.Row class="group">
             {#if eventResponse.isSuccess}
-                <Table.Head class="w-40 whitespace-nowrap">Occurred On</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Occurred On</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell class="flex items-center"
                     ><DateTime value={eventResponse.data.date}></DateTime> (<TimeAgo value={eventResponse.data.date}></TimeAgo>)</Table.Cell
                 >
             {:else}
-                <Table.Head class="w-40 whitespace-nowrap"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell class="flex items-center"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Cell>{/if}
         </Table.Row>
         <Table.Row class="group">
             {#if projectResponse.isSuccess}
-                <Table.Head class="w-40 whitespace-nowrap">Project</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Project</Table.Head>
                 <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                     ><EventsFacetedFilter.ProjectTrigger {changed} class="mr-0" value={[projectResponse.data.id!]} /></Table.Cell
                 >
                 <Table.Cell>{projectResponse.data.name}</Table.Cell>
             {:else}
-                <Table.Head class="w-40 whitespace-nowrap"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell class="flex items-center"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Cell>
             {/if}
@@ -145,7 +145,7 @@
 
 {#if eventResponse.isSuccess}
     <Tabs.Root class="mt-4 mb-4" value={activeTab}>
-        <Tabs.List class="mb-4 w-full justify-normal">
+        <Tabs.List class="w-full justify-normal">
             {#each tabs as tab (tab)}
                 <Tabs.Trigger value={tab}>{tab}</Tabs.Trigger>
             {/each}
@@ -177,7 +177,7 @@
         <Table.Body>
             {#each { length: 5 } as name, index (`${name}-${index}`)}
                 <Table.Row class="group">
-                    <Table.Head class="w-40 whitespace-nowrap"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Head>
+                    <Table.Head class="w-40 font-semibold whitespace-nowrap"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Head>
                     <Table.Cell class="w-4 pr-0"></Table.Cell>
                     <Table.Cell class="flex items-center"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Cell>
                 </Table.Row>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte
@@ -81,7 +81,7 @@
         </div>
     </div>
 
-    <div class="mt-2 grow overflow-auto text-xs">
+    <div class="grow overflow-auto text-xs">
         {#if showRaw}
             <pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"><div class="bg-inherit">{json}</div></Code></pre>
         {:else}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.svelte
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new BooleanFilter(term, value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.svelte
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new DateFilter(term, value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.svelte
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new LevelFilter(value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.svelte
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new NumberFilter(term, value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.svelte
@@ -15,6 +15,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new ProjectFilter(value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.svelte
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new ReferenceFilter(value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.svelte
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new SessionFilter(value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.svelte
@@ -18,6 +18,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new StatusFilter(value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.svelte
@@ -19,6 +19,6 @@
     {#if children}
         {@render children()}
     {:else}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/if}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.svelte
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new TagFilter(value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.svelte
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new TypeFilter(value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.svelte
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new VersionFilter(term, value))} {title} {...props}>
     {#snippet children()}
-        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary size-5" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/environment.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/environment.svelte
@@ -23,7 +23,7 @@
     <Table.Body>
         {#if environment.machine_name}
             <Table.Row class="group">
-                <Table.Head class="w-40 whitespace-nowrap">Machine Name</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Machine Name</Table.Head>
                 <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                     ><EventsFacetedFilter.StringTrigger {changed} term="machine" value={environment.machine_name} /></Table.Cell
                 >
@@ -32,7 +32,7 @@
         {/if}
         {#if environment.ip_address}
             <Table.Row class="group">
-                <Table.Head class="w-40 whitespace-nowrap">IP Address</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">IP Address</Table.Head>
                 <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                     ><EventsFacetedFilter.StringTrigger {changed} term="ip" value={environment.ip_address} /></Table.Cell
                 >
@@ -41,35 +41,35 @@
         {/if}
         {#if environment.processor_count}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Processor Count</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Processor Count</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell><Number value={environment.processor_count}></Number></Table.Cell>
             </Table.Row>
         {/if}
         {#if environment.total_physical_memory}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Total Memory</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Total Memory</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell><Bytes value={environment.total_physical_memory}></Bytes></Table.Cell>
             </Table.Row>
         {/if}
         {#if environment.available_physical_memory}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Available Memory</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Available Memory</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell><Bytes value={environment.available_physical_memory}></Bytes></Table.Cell>
             </Table.Row>
         {/if}
         {#if environment.process_memory_size}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Process Memory</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Process Memory</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell><Bytes value={environment.process_memory_size}></Bytes></Table.Cell>
             </Table.Row>
         {/if}
         {#if environment.o_s_name}
             <Table.Row class="group">
-                <Table.Head class="w-40 whitespace-nowrap">OS Name</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">OS Name</Table.Head>
                 <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                     ><EventsFacetedFilter.StringTrigger {changed} term="os" value={environment.o_s_name} /></Table.Cell
                 >
@@ -78,7 +78,7 @@
         {/if}
         {#if environment.o_s_version}
             <Table.Row class="group">
-                <Table.Head class="w-40 whitespace-nowrap">OS Version</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">OS Version</Table.Head>
                 <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                     ><EventsFacetedFilter.StringTrigger {changed} term="os.version" value={environment.o_s_version} /></Table.Cell
                 >
@@ -87,7 +87,7 @@
         {/if}
         {#if environment.architecture}
             <Table.Row class="group">
-                <Table.Head class="w-40 whitespace-nowrap">Architecture</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Architecture</Table.Head>
                 <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                     ><EventsFacetedFilter.StringTrigger {changed} term="architecture" value={environment.architecture} /></Table.Cell
                 >
@@ -96,28 +96,28 @@
         {/if}
         {#if environment.runtime_version}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Runtime Version</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Runtime Version</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell>{environment.runtime_version}</Table.Cell>
             </Table.Row>
         {/if}
         {#if environment.process_id}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Process ID</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Process ID</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell>{environment.process_id}</Table.Cell>
             </Table.Row>
         {/if}
         {#if environment.process_name}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Process Name</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Process Name</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell>{environment.process_name}</Table.Cell>
             </Table.Row>
         {/if}
         {#if environment.command_line}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Command Line</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Command Line</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell><span class="line-clamp-2 inline">{environment.command_line}</span></Table.Cell>
             </Table.Row>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/error.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/error.svelte
@@ -2,7 +2,7 @@
     import type { IFilter } from '$comp/faceted-filter';
 
     import CopyToClipboardButton from '$comp/copy-to-clipboard-button.svelte';
-    import { H4 } from '$comp/typography';
+    import { H3 } from '$comp/typography';
     import * as Table from '$comp/ui/table';
     import * as EventsFacetedFilter from '$features/events/components/filters';
     import { getErrorData, getErrorType, getMessage, getStackTrace } from '$features/events/persistent-event';
@@ -33,15 +33,15 @@
 <Table.Root>
     <Table.Body>
         <Table.Row class="group">
-            <Table.Head class="w-40 whitespace-nowrap">Error Type</Table.Head>
+            <Table.Head class="w-40 font-semibold whitespace-nowrap">Error Type</Table.Head>
             <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                 ><EventsFacetedFilter.StringTrigger {changed} term="error.type" value={errorType} /></Table.Cell
             >
             <Table.Cell>{errorType}</Table.Cell>
         </Table.Row>
         {#if message}
             <Table.Row class="group">
-                <Table.Head class="w-40 whitespace-nowrap">Message</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Message</Table.Head>
                 <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                     ><EventsFacetedFilter.StringTrigger {changed} term="error.message" value={message} /></Table.Cell
                 >
@@ -50,7 +50,7 @@
         {/if}
         {#if code}
             <Table.Row class="group">
-                <Table.Head class="w-40 whitespace-nowrap">Code</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Code</Table.Head>
                 <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                     ><EventsFacetedFilter.VersionTrigger {changed} term="error.code" value={code} /></Table.Cell
                 >
@@ -59,7 +59,7 @@
         {/if}
         {#if submissionMethod}
             <Table.Row>
-                <Table.Head class="w-40 whitespace-nowrap">Submission Method</Table.Head>
+                <Table.Head class="w-40 font-semibold whitespace-nowrap">Submission Method</Table.Head>
                 <Table.Cell class="w-4 pr-0"></Table.Cell>
                 <Table.Cell>{submissionMethod}</Table.Cell>
             </Table.Row>
@@ -68,7 +68,7 @@
 </Table.Root>
 
 <div class="mt-4 mb-2 flex justify-between">
-    <H4>Stack Trace</H4>
+    <H3>Stack Trace</H3>
     <div class="flex justify-end">
         <CopyToClipboardButton title="Copy Stack Trace to Clipboard" value={stackTrace}></CopyToClipboardButton>
     </div>
@@ -81,15 +81,18 @@
     {/if}
 </div>
 
-{#each errorData as ed}
-    <div class="mt-2">
-        <ExtendedDataItem canPromote={false} data={ed.data} title={ed.title}></ExtendedDataItem>
-    </div>
-{/each}
+{#if errorData.length}
+    <H3 class="mt-2 mb-2">Additional Data</H3>
+    {#each errorData as ed}
+        <div class="mt-2">
+            <ExtendedDataItem canPromote={false} data={ed.data} title={ed.type}></ExtendedDataItem>
+        </div>
+    {/each}
+{/if}
 
 {#if modules.length}
     <div class="mt-4 mb-2 flex items-center justify-between">
-        <H4>Modules</H4>
+        <H3>Modules</H3>
     </div>
     <Table.Root>
         <Table.Header>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/request.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/request.svelte
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/persistent-event.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/persistent-event.ts
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/object-dump.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/object-dump.svelte
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/notifications/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/notifications/+page.svelte
