Restyle tracker row and category select

Stack the tracker type badge above the pattern name and drop the
separate Type column so the now-wider row reads more compactly; the
edit row spans the reduced column count. Tint script-sourced rows light
blue (excluded styling still wins when both apply).

Make the move-to-category select stand out when the tracker sits in a
real category by switching it to the highlighted pill variant, and align
its ghost-variant padding so the label does not shift horizontally
between categorised and uncategorised rows.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-11 11:40:21 +02:00
parent b5dbdee372
commit e685ce436e
4 changed files with 26 additions and 14 deletions

View File

@@ -267,7 +267,6 @@ export default function CookieBannerTrackersPage({
>
<Thead>
<Tr>
<Th>{__("Type")}</Th>
<SortableTh field="NAME">{__("Name")}</SortableTh>
<Th>{__("Third party")}</Th>
<SortableTh field="SOURCE">{__("Source")}</SortableTh>

View File

@@ -25,12 +25,14 @@ import { moveToCategoryDropdownQuery } from "./MoveToCategoryDropdown";
interface MoveToCategorySelectProps {
currentCategoryId?: string;
currentCategoryName?: string;
highlight?: boolean;
onSelect: (categoryId: string) => void;
}
export function MoveToCategorySelect({
currentCategoryId,
currentCategoryName,
highlight = false,
onSelect,
}: MoveToCategorySelectProps) {
const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
@@ -57,7 +59,8 @@ export function MoveToCategorySelect({
return (
<Select
variant="ghost"
variant={highlight ? "editor" : "ghost"}
className={highlight ? undefined : "px-0"}
placeholder={currentCategoryName ?? <span className="text-txt-tertiary">-</span>}
onValueChange={handleValueChange}
onOpenChange={handleOpenChange}

View File

@@ -340,12 +340,19 @@ export function TrackerPatternRow({ patternKey, connectionId }: TrackerPatternRo
const srcBadge = pattern.source ? getTrackerSourceBadge(pattern.source, __) : null;
return (
<Tr to={pattern.id} className={pattern.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}>
<Tr
to={pattern.id}
className={
pattern.excluded
? "bg-txt-quaternary/70 line-through"
: pattern.source === "SCRIPT"
? undefined
: "bg-txt-quaternary/25"
}
>
<Td>
<Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
</Td>
<Td>
<div className="flex flex-col min-w-0 max-w-xs gap-1">
<div className="flex flex-col items-start min-w-0 max-w-xs gap-1">
<Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
<span className={pattern.excluded ? undefined : "font-medium"}>{pattern.displayName}</span>
{pattern.description && (
<span className="text-xs text-txt-tertiary wrap-break-word line-clamp-1">
@@ -374,14 +381,17 @@ export function TrackerPatternRow({ patternKey, connectionId }: TrackerPatternRo
: <span className="text-txt-tertiary">-</span>}
</Td>
<Td noLink>
<MoveToCategorySelect
currentCategoryId={pattern.cookieCategory?.id}
currentCategoryName={pattern.cookieCategory?.name}
onSelect={handleMove}
/>
<div className="pr-2 flex justify-start">
<MoveToCategorySelect
currentCategoryId={pattern.cookieCategory?.id}
currentCategoryName={pattern.cookieCategory?.name}
highlight={!!pattern.cookieCategory && pattern.cookieCategory.kind !== "UNCATEGORISED"}
onSelect={handleMove}
/>
</div>
</Td>
<Td>
<span>{humanizeSeconds(pattern.maxAgeSeconds ?? null)}</span>
<span className="pl-2">{humanizeSeconds(pattern.maxAgeSeconds ?? null)}</span>
</Td>
<Td>
{pattern.lastMatchedAt

View File

@@ -58,7 +58,7 @@ export function TrackerPatternRowEdit({
return (
<Tr>
<Td colSpan={8}>
<Td colSpan={7}>
<div className="flex flex-col gap-3">
<span className="font-medium wrap-break-word">{pattern}</span>
<div className="flex items-end gap-2">