From 953324162491b46dcf6fe6db45a421645c31b9fe Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 31 Mar 2026 19:07:04 +0700
Subject: [PATCH] Refactor data table components for improved layout and
 functionality

- Made the `title` prop optional in `DataTableCard`, allowing for more flexible usage without a title.
- Updated the rendering logic in `DataTableCard` to conditionally display the title and description.
- Enhanced the styling of table headers across various pages for a more consistent appearance, removing unnecessary backdrop blur effects.
- Replaced button elements with native button tags in `SortableTh` for better accessibility and semantic HTML.
---
 .../data-table/data-table-card.svelte         | 17 +++++++-----
 .../components/data-table/sortable-th.svelte  | 27 ++++++++++++-------
 web/src/routes/+page.svelte                   | 12 ++++-----
 web/src/routes/incidents/+page.svelte         |  4 +--
 web/src/routes/ips/+page.svelte               |  4 +--
 web/src/routes/live/+page.svelte              |  4 +--
 web/src/routes/users/+page.svelte             | 15 +++++------
 7 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/web/src/lib/components/data-table/data-table-card.svelte b/web/src/lib/components/data-table/data-table-card.svelte
index 5808074..419df3c 100644
--- a/web/src/lib/components/data-table/data-table-card.svelte
+++ b/web/src/lib/components/data-table/data-table-card.svelte
@@ -10,7 +10,8 @@
 		toolbar,
 		children
 	}: {
-		title: string;
+		/** Без title — как в shadcn dashboard-01: сразу toolbar и таблица */
+		title?: string;
 		description?: string;
 		toolbar?: Snippet;
 		children: Snippet;
@@ -19,12 +20,14 @@
 </script>
 
 <Card.Root class={cn('overflow-hidden rounded-lg border border-border shadow-sm', className)}>
-	<div class="border-b border-border bg-muted/40 px-4 py-3">
-		<Card.Title class="text-base font-semibold">{title}</Card.Title>
-		{#if description}
-			<Card.Description class="text-xs sm:text-sm">{description}</Card.Description>
-		{/if}
-	</div>
+	{#if title}
+		<div class="border-b border-border bg-muted/40 px-4 py-3">
+			<Card.Title class="text-base font-semibold">{title}</Card.Title>
+			{#if description}
+				<Card.Description class="text-xs sm:text-sm">{description}</Card.Description>
+			{/if}
+		</div>
+	{/if}
 	{#if toolbar}
 		{@render toolbar()}
 	{/if}
diff --git a/web/src/lib/components/data-table/sortable-th.svelte b/web/src/lib/components/data-table/sortable-th.svelte
index 621993b..e75724b 100644
--- a/web/src/lib/components/data-table/sortable-th.svelte
+++ b/web/src/lib/components/data-table/sortable-th.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import * as Table from '$lib/components/ui/table/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
 	import { cn } from '$lib/utils.js';
 	import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down';
 	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
@@ -25,23 +24,31 @@
 	} = $props();
 </script>
 
-<Table.Head class={cn(numeric && 'text-right', className)}>
-	<Button
-		variant="ghost"
-		size="sm"
+<Table.Head
+	class={cn(
+		'px-3 py-2 text-left align-middle text-sm font-medium text-foreground',
+		numeric && 'text-right',
+		className
+	)}
+>
+	<button
+		type="button"
 		class={cn(
-			'-ml-2 h-8 gap-1 px-2 font-medium text-muted-foreground hover:text-foreground',
+			'inline-flex max-w-full items-center gap-1.5 rounded-md',
+			'text-foreground/90 transition-colors',
+			'hover:bg-accent/60 hover:text-foreground',
+			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/45',
 			numeric && 'ms-auto'
 		)}
 		onclick={onToggle}
 	>
 		{@render children()}
 		{#if active && dir === 'asc'}
-			<ArrowUpIcon class="size-3.5 opacity-70" aria-hidden="true" />
+			<ArrowUpIcon class="size-3 shrink-0 opacity-70" aria-hidden="true" />
 		{:else if active && dir === 'desc'}
-			<ArrowDownIcon class="size-3.5 opacity-70" aria-hidden="true" />
+			<ArrowDownIcon class="size-3 shrink-0 opacity-70" aria-hidden="true" />
 		{:else}
-			<ArrowUpDownIcon class="size-3.5 opacity-50" aria-hidden="true" />
+			<ArrowUpDownIcon class="size-3 shrink-0 opacity-40" aria-hidden="true" />
 		{/if}
-	</Button>
+	</button>
 </Table.Head>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 8adcb96..ec05a59 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -666,8 +666,8 @@
 			{/snippet}
 			<ScrollArea class="max-h-[min(70vh,520px)] w-full" orientation="both">
 					<Table.Root>
-						<Table.Header class="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm">
-							<Table.Row>
+						<Table.Header class="sticky top-0 z-10 bg-muted">
+							<Table.Row class="border-b border-border/80 hover:bg-transparent">
 								<SortableTh
 									active={ipSortKey === 'ip'}
 									dir={ipSortDir}
@@ -819,8 +819,8 @@
 			{/snippet}
 			<ScrollArea class="max-h-[min(70vh,480px)] w-full" orientation="both">
 					<Table.Root>
-						<Table.Header class="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm">
-							<Table.Row>
+						<Table.Header class="sticky top-0 z-10 bg-muted">
+							<Table.Row class="border-b border-border/80 hover:bg-transparent">
 								<SortableTh
 									active={nodeSortKey === 'alias'}
 									dir={nodeSortDir}
@@ -953,8 +953,8 @@
 			{/snippet}
 			<ScrollArea class="max-h-[min(60vh,400px)] w-full" orientation="vertical">
 					<Table.Root>
-						<Table.Header class="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm">
-							<Table.Row>
+						<Table.Header class="sticky top-0 z-10 bg-muted">
+							<Table.Row class="border-b border-border/80 hover:bg-transparent">
 								<SortableTh
 									active={topSortKey === 'user'}
 									dir={topSortDir}
diff --git a/web/src/routes/incidents/+page.svelte b/web/src/routes/incidents/+page.svelte
index 5e69564..2e5e23e 100644
--- a/web/src/routes/incidents/+page.svelte
+++ b/web/src/routes/incidents/+page.svelte
@@ -378,8 +378,8 @@
 		{/snippet}
 		<ScrollArea class="max-h-[min(75vh,640px)] w-full" orientation="both">
 			<Table.Root>
-				<Table.Header class="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm">
-					<Table.Row>
+				<Table.Header class="sticky top-0 z-10 bg-muted">
+					<Table.Row class="border-b border-border/80 hover:bg-transparent">
 						<SortableTh
 							active={incSortKey === 'sev'}
 							dir={incSortDir}
diff --git a/web/src/routes/ips/+page.svelte b/web/src/routes/ips/+page.svelte
index 63d5f60..205d7dc 100644
--- a/web/src/routes/ips/+page.svelte
+++ b/web/src/routes/ips/+page.svelte
@@ -610,8 +610,8 @@
 		{/snippet}
 		<ScrollArea class="max-h-[min(75vh,560px)] w-full" orientation="both">
 			<Table.Root>
-				<Table.Header class="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm">
-					<Table.Row>
+				<Table.Header class="sticky top-0 z-10 bg-muted">
+					<Table.Row class="border-b border-border/80 hover:bg-transparent">
 						<SortableTh
 							active={ipSortKey === 'user'}
 							dir={ipSortDir}
diff --git a/web/src/routes/live/+page.svelte b/web/src/routes/live/+page.svelte
index 4b76c71..19a0855 100644
--- a/web/src/routes/live/+page.svelte
+++ b/web/src/routes/live/+page.svelte
@@ -404,8 +404,8 @@
 	{/snippet}
 	<ScrollArea class="max-h-[min(70vh,520px)] w-full" orientation="both">
 		<Table.Root>
-			<Table.Header class="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm">
-				<Table.Row>
+			<Table.Header class="sticky top-0 z-10 bg-muted">
+				<Table.Row class="border-b border-border/80 hover:bg-transparent">
 					<SortableTh
 						active={liveSortKey === 'sev'}
 						dir={liveSortDir}
diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte
index 96d844c..a641abd 100644
--- a/web/src/routes/users/+page.svelte
+++ b/web/src/routes/users/+page.svelte
@@ -389,10 +389,7 @@
 		</Card.Root>
 	{/snippet}
 	{#snippet children()}
-	<DataTableCard
-		title="Список пользователей"
-		description="Слияние по имени между серверами; клик по строке — карточка пользователя"
-	>
+	<DataTableCard>
 		{#snippet toolbar()}
 			<div class="border-b border-border">
 				<div
@@ -467,8 +464,8 @@
 		{/snippet}
 		<ScrollArea class="max-h-[min(70vh,560px)] w-full" orientation="both">
 			<Table.Root>
-				<Table.Header class="sticky top-0 z-10 border-b border-border bg-muted/95 backdrop-blur-sm">
-					<Table.Row class="border-0 hover:bg-transparent">
+				<Table.Header class="sticky top-0 z-10 bg-muted">
+					<Table.Row class="border-b border-border/80 hover:bg-transparent">
 						<Table.Head class="w-10 px-2">
 							{#if pageUsernames.length > 0}
 								<Checkbox
@@ -487,7 +484,7 @@
 						>Имя</SortableTh>
 						<Table.Head
 							class={cn(
-								'text-muted-foreground text-xs font-medium uppercase tracking-wide',
+								'px-3 py-2 text-left align-middle text-sm font-medium text-foreground',
 								!showColLinks && 'hidden',
 								showColLinks && 'hidden sm:table-cell'
 							)}
@@ -515,7 +512,9 @@
 								showColExpires && 'hidden sm:table-cell'
 							)}
 						>Истекает</SortableTh>
-						<Table.Head class="w-12 px-2 text-right" aria-hidden="true"></Table.Head>
+						<Table.Head class="w-12 px-2 text-right">
+							<span class="sr-only">Действия</span>
+						</Table.Head>
 					</Table.Row>
 				</Table.Header>
 				<Table.Body>