From e685ce436ec07b5eec0a1b9733cbc812a4dd271f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Thu, 11 Jun 2026 11:40:21 +0200
Subject: [PATCH] Restyle tracker row and category select
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../trackers/CookieBannerTrackersPage.tsx     |  1 -
 .../_components/MoveToCategorySelect.tsx      |  5 ++-
 .../_components/TrackerPatternRow.tsx         | 32 ++++++++++++-------
 .../_components/TrackerPatternRowEdit.tsx     |  2 +-
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/CookieBannerTrackersPage.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/CookieBannerTrackersPage.tsx
index 5fbdf81b1..5c6fc4e58 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/CookieBannerTrackersPage.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/CookieBannerTrackersPage.tsx
@@ -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>
diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/MoveToCategorySelect.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/MoveToCategorySelect.tsx
index f808c373b..a803ad7e4 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/MoveToCategorySelect.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/MoveToCategorySelect.tsx
@@ -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}
diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx
index cb1ac2b4b..98c871fb8 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx
@@ -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
diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRowEdit.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRowEdit.tsx
index c8ede52b2..8ae3d364d 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRowEdit.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRowEdit.tsx
@@ -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">