From 9c56fd751b9d81165a67e90d593b9e1fe29bf74f Mon Sep 17 00:00:00 2001
From: "Eric J. Smith" <eric@codesmithtools.com>
Date: Sun, 15 Jun 2025 23:26:39 -0500
Subject: [PATCH] Remove page cards and change page title

---
 .../src/lib/features/shared/api/api.svelte.ts |  2 +-
 .../automatic-refresh-indicator-button.svelte |  4 +-
 .../data-table/data-table-body.svelte         |  2 +-
 .../data-table/data-table-toolbar.svelte      |  2 +
 .../ClientApp/src/routes/(app)/+page.svelte   | 51 +++++++----------
 .../src/routes/(app)/issues/+page.svelte      | 45 +++++++--------
 .../src/routes/(app)/stream/+page.svelte      | 56 +++++++++----------
 7 files changed, 71 insertions(+), 91 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/api/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/api/api.svelte.ts
index ca5e874299..5a7676e6b2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/api/api.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/api/api.svelte.ts
@@ -1,6 +1,6 @@
 import { FetchClient, FetchClientProvider, getCurrentProvider } from '@exceptionless/fetchclient';
 
-export const DEFAULT_LIMIT = 10;
+export const DEFAULT_LIMIT = 20;
 
 /**
  * Represents the default timezone offset based on the user's local time.
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/automatic-refresh-indicator-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/automatic-refresh-indicator-button.svelte
index 0400350edf..2a0783618b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/automatic-refresh-indicator-button.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/automatic-refresh-indicator-button.svelte
@@ -14,10 +14,10 @@
 
 {#if canRefresh}
     <div class="inline-flex h-6">
-        <Live liveTitle={refreshButtonTitle} class="ml-3 size-3 motion-safe:animate-none" />
+        <Live liveTitle={refreshButtonTitle} class="ml-2 size-2 motion-safe:animate-none" />
     </div>
 {:else}
     <Button variant="ghost" size="icon" onclick={refresh} title={refreshButtonTitle}>
-        <Live live={false} notLiveTitle={refreshButtonTitle} class="size-3 motion-safe:animate-none" />
+        <Live live={false} notLiveTitle={refreshButtonTitle} class="size-2 motion-safe:animate-none" />
     </Button>
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-body.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-body.svelte
index f697d738eb..6670712665 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-body.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-body.svelte
@@ -44,7 +44,7 @@
 
 <div class="rounded-md border">
     <Table.Root>
-        <Table.Header>
+        <Table.Header class="bg-card">
             {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
                 <Table.Row>
                     {#each headerGroup.headers as header (header.id)}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-toolbar.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-toolbar.svelte
index 4d5f2b813b..b0095c5b94 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-toolbar.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-toolbar.svelte
@@ -7,6 +7,7 @@
     import type { Snippet } from 'svelte';
 
     import DataTableViewOptions from './data-table-view-options.svelte';
+    import AutomaticRefreshIndicatorButton from '$comp/automatic-refresh-indicator-button.svelte';
 
     interface Props {
         children: Snippet;
@@ -20,6 +21,7 @@
     <div class="flex flex-1 flex-wrap items-center gap-x-2 gap-y-2">
         {@render children()}
         <div class="ml-auto flex">
+            <AutomaticRefreshIndicatorButton canRefresh={true} refresh={() => Promise.resolve()} />
             <DataTableViewOptions {table} />
         </div>
     </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
index 8026338600..fb947ba402 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -197,36 +197,27 @@
 </script>
 
 <div class="flex flex-col space-y-4">
-    <Card.Root>
-        <Card.Header>
-            <Card.Title class="text-2xl"
-                >Events
-                <AutomaticRefreshIndicatorButton {canRefresh} refresh={loadData} /></Card.Title
-            ></Card.Header
-        >
-        <Card.Content>
-            <EventsDataTable bind:limit={queryParams.limit!} isLoading={clientStatus.isLoading} rowClick={rowclick} {table}>
-                {#snippet toolbarChildren()}
-                    <FacetedFilter.Root changed={onFilterChanged} {filters} remove={onFilterRemoved}>
-                        <OrganizationDefaultsFacetedFilterBuilder />
-                    </FacetedFilter.Root>
-                {/snippet}
-                {#snippet footerChildren()}
-                    <div class="h-9 min-w-[140px]">
-                        {#if table.getSelectedRowModel().flatRows.length}
-                            <EventsBulkActionsDropdownMenu {table} />
-                        {/if}
-                    </div>
-
-                    <DataTable.PageSize bind:value={queryParams.limit!} {table}></DataTable.PageSize>
-                    <div class="flex items-center space-x-6 lg:space-x-8">
-                        <DataTable.PageCount {table} />
-                        <DataTable.Pagination {table} />
-                    </div>
-                {/snippet}
-            </EventsDataTable>
-        </Card.Content>
-    </Card.Root>
+    <EventsDataTable bind:limit={queryParams.limit!} isLoading={clientStatus.isLoading} rowClick={rowclick} {table}>
+        {#snippet toolbarChildren()}
+            <div class="text-lg font-medium pr-2">Events</div>
+            <FacetedFilter.Root changed={onFilterChanged} {filters} remove={onFilterRemoved}>
+                <OrganizationDefaultsFacetedFilterBuilder />
+            </FacetedFilter.Root>
+        {/snippet}
+        {#snippet footerChildren()}
+            <div class="h-9 min-w-[140px]">
+                {#if table.getSelectedRowModel().flatRows.length}
+                    <EventsBulkActionsDropdownMenu {table} />
+                {/if}
+            </div>
+
+            <DataTable.PageSize bind:value={queryParams.limit!} {table}></DataTable.PageSize>
+            <div class="flex items-center space-x-6 lg:space-x-8">
+                <DataTable.PageCount {table} />
+                <DataTable.Pagination {table} />
+            </div>
+        {/snippet}
+    </EventsDataTable>
 </div>
 
 <Sheet.Root onOpenChange={() => (selectedEventId = null)} open={!!selectedEventId}>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
index b7038926dc..69a9468fcc 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
@@ -208,32 +208,25 @@
 </script>
 
 <div class="flex flex-col space-y-4">
-    <Card.Root
-        ><Card.Header>
-            <Card.Title class="text-2xl">Issues <AutomaticRefreshIndicatorButton {canRefresh} refresh={loadData} /></Card.Title>
-        </Card.Header><Card.Content>
-            <EventsDataTable bind:limit={queryParams.limit!} isLoading={clientStatus.isLoading} rowClick={rowclick} {table}>
-                {#snippet toolbarChildren()}
-                    <FacetedFilter.Root changed={onFilterChanged} {filters} remove={onFilterRemoved}>
-                        <OrganizationDefaultsFacetedFilterBuilder />
-                    </FacetedFilter.Root>
-                {/snippet}
-                {#snippet footerChildren()}
-                    <div class="h-9 min-w-[140px]">
-                        {#if table.getSelectedRowModel().flatRows.length}
-                            <TableStacksBulkActionsDropdownMenu {table} />
-                        {/if}
-                    </div>
-
-                    <DataTable.PageSize bind:value={queryParams.limit!} {table}></DataTable.PageSize>
-                    <div class="flex items-center space-x-6 lg:space-x-8">
-                        <DataTable.PageCount {table} />
-                        <DataTable.Pagination {table} />
-                    </div>
-                {/snippet}
-            </EventsDataTable>
-        </Card.Content>
-    </Card.Root>
+    <EventsDataTable bind:limit={queryParams.limit!} isLoading={clientStatus.isLoading} rowClick={rowclick} {table}>
+        {#snippet toolbarChildren()}
+            <div class="text-lg font-medium pr-2">Issues</div>
+            <FacetedFilter.Root changed={onFilterChanged} {filters} remove={onFilterRemoved}>
+                <OrganizationDefaultsFacetedFilterBuilder />
+            </FacetedFilter.Root>
+        {/snippet}
+        {#snippet footerChildren()}
+            <div class="h-9 min-w-[140px]">
+                <TableStacksBulkActionsDropdownMenu {table} />
+            </div>
+
+            <DataTable.PageSize bind:value={queryParams.limit!} {table}></DataTable.PageSize>
+            <div class="flex items-center space-x-6 lg:space-x-8">
+                <DataTable.PageCount {table} />
+                <DataTable.Pagination {table} />
+            </div>
+        {/snippet}
+    </EventsDataTable>
 </div>
 
 <Sheet.Root onOpenChange={() => (selectedStackId = undefined)} open={eventsQuery.isSuccess}>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
index 8319a69f3b..913bb88e9d 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
@@ -213,37 +213,31 @@
     });
 </script>
 
-<Card.Root
-    ><Card.Header>
-        <Card.Title class="text-2xl">Event Stream</Card.Title>
-    </Card.Header>
-    <Card.Content>
-        <DataTable.Root>
-            <DataTable.Toolbar {table}>
-                <FacetedFilter.Root changed={onFilterChanged} {filters} remove={onFilterRemoved}>
-                    <OrganizationDefaultsFacetedFilterBuilder includeDateFacets={false} />
-                </FacetedFilter.Root>
-            </DataTable.Toolbar>
-            <DataTable.Body rowClick={rowclick} {table}>
-                {#if clientStatus.isLoading}
-                    <DelayedRender>
-                        <DataTable.Loading {table} />
-                    </DelayedRender>
-                {:else}
-                    <DataTable.Empty {table} />
-                {/if}
-            </DataTable.Body>
-            <DataTable.Footer {table}>
-                <div class="flex w-full items-center justify-center space-x-4">
-                    <DataTable.PageSize bind:value={queryParams.limit!} {table} />
-                    <div class="text-center">
-                        <ErrorMessage message={clientResponse?.problem?.errors.general} />
-                    </div>
-                </div>
-            </DataTable.Footer>
-        </DataTable.Root>
-    </Card.Content></Card.Root
->
+<DataTable.Root>
+    <DataTable.Toolbar {table}>
+        <div class="text-lg font-medium pr-2">Event Stream</div>
+        <FacetedFilter.Root changed={onFilterChanged} {filters} remove={onFilterRemoved}>
+            <OrganizationDefaultsFacetedFilterBuilder includeDateFacets={false} />
+        </FacetedFilter.Root>
+    </DataTable.Toolbar>
+    <DataTable.Body rowClick={rowclick} {table}>
+        {#if clientStatus.isLoading}
+            <DelayedRender>
+                <DataTable.Loading {table} />
+            </DelayedRender>
+        {:else}
+            <DataTable.Empty {table} />
+        {/if}
+    </DataTable.Body>
+    <DataTable.Footer {table}>
+        <div class="flex w-full items-center justify-center space-x-4">
+            <DataTable.PageSize bind:value={queryParams.limit!} {table} />
+            <div class="text-center">
+                <ErrorMessage message={clientResponse?.problem?.errors.general} />
+            </div>
+        </div>
+    </DataTable.Footer>
+</DataTable.Root>
 
 <Sheet.Root onOpenChange={() => (selectedEventId = null)} open={!!selectedEventId}>
     <Sheet.Content class="w-full overflow-y-auto sm:max-w-full md:w-5/6">