From 75c1cbbf2abb4bac66d47a39754980d66e13fe3e Mon Sep 17 00:00:00 2001 From: scheinriese Date: Fri, 24 Apr 2026 15:27:31 +0200 Subject: [PATCH] refactor: polish asset-picker section alignment and details MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Align section headers across asset-picker and icon-picker at 12px from the edge by dropping .pane-section's px-2. Grid padding becomes px-3 pt-1 pb-3 so headers sit closer to their grids. - Hide "Available assets · 0" when no assets exist; the zero-state rows speak for themselves. Header reappears during search so "· 0" still conveys "no matches". - Drop row-title to text-sm, bump row-chevron to gray-10 (no opacity), and move the empty-row separator from gray-04 to gray-06 for dark- mode legibility. - Pin the web-images info icon to the right edge (margin-left: auto + margin-right: 12px) and remove its opacity layer. - Let the web-image external-badge float past the circular avatar clip by dropping overflow-hidden on .web-image-item (img clips itself). Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/icon.cljs | 14 ++++--- src/main/frontend/components/icon.css | 53 +++++++++++--------------- 2 files changed, 32 insertions(+), 35 deletions(-) diff --git a/src/main/frontend/components/icon.cljs b/src/main/frontend/components/icon.cljs index 4e45771f55..8fd4b8bae3 100644 --- a/src/main/frontend/components/icon.cljs +++ b/src/main/frontend/components/icon.cljs @@ -3027,12 +3027,16 @@ :on-select handle-web-image-select :on-popover-change #(reset! *popover-open? %)})) - ;; "Available assets" section + ;; "Available assets" section — header is hidden when there are no + ;; assets at all (the action rows below communicate the zero state on + ;; their own). The header reappears as soon as the user has assets, + ;; including during search, where "· 0" conveys "no matches". [:div.pane-section - (section-header {:title "Available assets" - :count asset-count - :expanded? available-expanded? - :on-toggle #(swap! *section-states update "Available assets" (fn [v] (if (nil? v) false (not v))))}) + (when (seq assets) + (section-header {:title "Available assets" + :count asset-count + :expanded? available-expanded? + :on-toggle #(swap! *section-states update "Available assets" (fn [v] (if (nil? v) false (not v))))})) ;; Asset grid (when available-expanded? diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css index b76c754267..ebc13c43a1 100644 --- a/src/main/frontend/components/icon.css +++ b/src/main/frontend/components/icon.css @@ -599,10 +599,6 @@ min-height: 0; } - /* Sections - 8px padding on both sides (symmetric) */ - .pane-section { - @apply px-2; - } } /* Topbar wrapper for easier inspection */ @@ -682,7 +678,7 @@ /* Grid layout - 5 columns for larger, scannable images */ .asset-picker-grid { - @apply grid gap-2 p-3; + @apply grid gap-2 px-3 pt-1 pb-3; @apply flex-1 overflow-y-auto; grid-template-columns: repeat(5, 1fr); min-height: 120px; @@ -817,10 +813,8 @@ } /* Zero-state action rows - shown when no assets exist, in place of grid. - Rows span full picker width so hover highlights reach the edges. The - ancestor padding (.pane-section px-2 and .asset-picker-grid p-3 + 56px - bottom) is cancelled via :has() selectors below — we drop the padding on - those ancestors specifically when they contain this empty-actions block. */ + Rows span full picker width; the grid's own p-3 is cancelled via :has() + below so rows reach the picker edges for full-width hover. */ .asset-picker-empty-actions { grid-column: 1 / -1; display: flex; @@ -833,12 +827,6 @@ padding: 0; } -/* Cancel the pane-section's horizontal padding when it holds an empty-actions grid. */ -.pane-section:has(.asset-picker-empty-actions) { - padding-left: 0; - padding-right: 0; -} - .asset-picker-empty-row { @apply flex items-center gap-4 cursor-pointer; padding: 14px 18px; @@ -856,7 +844,7 @@ right: 18px; bottom: 0; height: 1px; - background-color: var(--rx-gray-04); + background-color: var(--rx-gray-06); } &:hover { @@ -883,7 +871,7 @@ } .row-title { - @apply text-base font-medium; + @apply text-sm font-medium; color: var(--rx-gray-12); line-height: 1.25; } @@ -896,8 +884,7 @@ .row-chevron { flex-shrink: 0; - color: var(--rx-gray-09); - opacity: 0.6; + color: var(--rx-gray-10); } .row-shortcut { @@ -1080,15 +1067,23 @@ @apply flex items-center gap-1; .info-icon { - @apply p-0.5 rounded opacity-50 border-none bg-transparent cursor-help; - @apply hover:opacity-70; + @apply p-0.5 rounded border-none bg-transparent cursor-help transition-colors; color: var(--rx-gray-10); + margin-left: auto; + margin-right: 12px; + + &:hover { + color: var(--rx-gray-12); + } } } -/* Web image item - similar to image-asset-item */ +/* Web image item - similar to image-asset-item. + Deliberately NOT overflow-hidden: the img clips itself via its own + border-radius, and dropping clipping lets the .external-badge sit on + the avatar circle's edge without being cropped. */ .web-image-item { - @apply overflow-hidden rounded cursor-pointer; + @apply rounded cursor-pointer; @apply transition-all duration-150; position: relative; width: 100%; @@ -1122,7 +1117,10 @@ border-radius: 4px; } - /* Avatar mode - circular previews */ + /* Avatar mode - circular previews. The badge keeps its default + bottom: 2px; right: 2px; position — with overflow no longer + clipping, it floats at the square corner, diagonally outside the + circle. */ &.avatar-mode { @apply rounded-full; @@ -1130,12 +1128,6 @@ @apply rounded-full; object-fit: cover; } - - .external-badge { - /* Position at bottom-right for circular items */ - bottom: 0; - right: 0; - } } /* External indicator badge */ @@ -1149,6 +1141,7 @@ border-radius: 4px; background-color: rgba(0, 0, 0, 0.6); color: white; + z-index: 1; } }