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> <Thead>
<Tr> <Tr>
<Th>{__("Type")}</Th>
<SortableTh field="NAME">{__("Name")}</SortableTh> <SortableTh field="NAME">{__("Name")}</SortableTh>
<Th>{__("Third party")}</Th> <Th>{__("Third party")}</Th>
<SortableTh field="SOURCE">{__("Source")}</SortableTh> <SortableTh field="SOURCE">{__("Source")}</SortableTh>

View File

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

View File

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

View File

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