From 0efcac9babfff330032226d643203cc058436d24 Mon Sep 17 00:00:00 2001 From: scheinriese Date: Thu, 14 May 2026 16:57:25 +0200 Subject: [PATCH] enhance(icon-picker): hide CMD-K chip background for photo icons Avatars (both photo-image and colored-circle initials fallback) and images carry their own shape and color. The slot's gray chip became a frame around a frame and muddied the avatar's circle visually. Suppress the chip background when the slot contains a photo icon while preserving the 20x20 slot dimensions for row alignment. Tabler, text, emoji, and default page/block icons keep the chip since they need it to define their hit area against the row text. Implementation: add a stable `.cp__cmdk-list-item-icon` hook class to the slot div and target it from cmdk.css via :has(). The .icon-cp-container.photo-icon signal already exists in DOM (set by get-node-icon-cp for :type :avatar and :image) so no CLJS plumbing of icon-type knowledge into the CMD-K caller is needed. Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/cmdk/cmdk.css | 12 ++++++++++++ src/main/frontend/components/cmdk/list_item.cljs | 7 ++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/main/frontend/components/cmdk/cmdk.css b/src/main/frontend/components/cmdk/cmdk.css index abfa1411f2..1b43a82a5f 100644 --- a/src/main/frontend/components/cmdk/cmdk.css +++ b/src/main/frontend/components/cmdk/cmdk.css @@ -88,3 +88,15 @@ .dark [data-cmdk-item][data-hoverable][data-highlighted]:hover { box-shadow: none; } + +/* Photo icons (avatar with image, or colored-circle initials fallback) + carry their own shape and color, so the slot's gray chip becomes a + frame around a frame and visually muddies the avatar's circle. Hide + the chip background while preserving the 20×20 slot for row alignment. + `.icon-cp-container.photo-icon` is set by `get-node-icon-cp` for any + icon of `:type :avatar` or `:image` (icon.cljs:953). Broken-asset + fallbacks (`.image-error`) keep their own bordered tile so they + still read as "settled but broken" without needing the chip. */ +.cp__cmdk-list-item-icon:has(> .icon-cp-container.photo-icon) { + background: transparent !important; +} diff --git a/src/main/frontend/components/cmdk/list_item.cljs b/src/main/frontend/components/cmdk/list_item.cljs index 0edaaa8e72..b0fc854002 100644 --- a/src/main/frontend/components/cmdk/list_item.cljs +++ b/src/main/frontend/components/cmdk/list_item.cljs @@ -98,7 +98,12 @@ [:div.w-5.h-5.rounded.flex.items-center.justify-center {:style {:background (when (#{:gradient} icon-theme) "linear-gradient(-65deg, #8AE8FF, #5373E7, #369EFF, #00B1CC)") :box-shadow (when (#{:gradient} icon-theme) "inset 0 0 0 1px rgba(255,255,255,0.3) ")} - :class (cond-> "w-5 h-5 rounded flex items-center justify-center" + ;; `cp__cmdk-list-item-icon` is a hook for the chip-suppression + ;; rule in cmdk.css — when this slot contains a photo-icon + ;; (avatar with image OR colored-circle initials fallback), the + ;; gray chip becomes transparent so the icon's own shape and + ;; color read cleanly. Tabler / text / emoji rows keep the chip. + :class (cond-> "w-5 h-5 rounded flex items-center justify-center cp__cmdk-list-item-icon" (= icon-theme :color) (str " " (if highlighted "bg-accent-07-alpha" "bg-gray-05")