From 4aebf65b894b995a3cd16d0ec53a5554b4b3fb83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Mon, 11 May 2026 14:56:34 +0400
Subject: [PATCH] ui: stop importing phosphor icons with bare-name aliases
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a rule to contrib/claude/ui.md requiring the Icon-suffixed exports
(e.g. EyeIcon) instead of aliased bare names (Eye as IconEye), and fix
TrackerResourceRow to follow it.

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 .../resources/_components/TrackerResourceRow.tsx     |  5 ++---
 contrib/claude/ui.md                                 | 12 ++++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx
index b6b4dad5c..c1dfba6be 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx
@@ -12,7 +12,7 @@
 // OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 // PERFORMANCE OF THIS SOFTWARE.
 
-import { Eye as IconEye, EyeSlash as IconEyeSlash } from "@phosphor-icons/react";
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import { formatError, type GraphQLError } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
 import {
@@ -54,7 +54,6 @@ const trackerResourceFragment = graphql`
     description
     excluded
     lastDetectedAt
-    updatedAt
   }
 `;
 
@@ -352,7 +351,7 @@ export function TrackerResourceRow({ resourceKey, connectionId }: TrackerResourc
             className="p-1 rounded cursor-pointer"
             title={resource.excluded ? __("Include") : __("Exclude")}
           >
-            {resource.excluded ? <IconEye size={14} /> : <IconEyeSlash size={14} />}
+            {resource.excluded ? <EyeIcon size={14} /> : <EyeSlashIcon size={14} />}
           </button>
           <button
             type="button"
diff --git a/contrib/claude/ui.md b/contrib/claude/ui.md
index 54bd8cbbe..303fb36eb 100644
--- a/contrib/claude/ui.md
+++ b/contrib/claude/ui.md
@@ -98,6 +98,18 @@ Icons come from two sources, in this order of preference:
 
 **Never use emoji characters (🍪, ✅, ⚠️, …) as icons in UI.** Emojis render inconsistently across platforms, don't inherit `currentColor`, and can't be sized or styled like an SVG. If neither `@phosphor-icons/react` nor `@probo/ui` has what you need, add the missing icon to `@probo/ui` rather than falling back to emoji.
 
+### Phosphor import style
+
+Always import phosphor icons by their **`Icon`-suffixed name** (e.g. `EyeIcon`, `EyeSlashIcon`, `CookieIcon`). **Never** import the bare name and alias it with an `Icon` prefix — the library already exports the suffixed variant.
+
+```tsx
+// Bad — bare name aliased to add an Icon prefix
+import { Eye as IconEye, EyeSlash as IconEyeSlash } from "@phosphor-icons/react";
+
+// Good — use the Icon-suffixed export directly
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
+```
+
 ### Do / don't: icon source
 
 ```tsx