feat: badge design qa by gaspergrom · Pull Request #1677 · linuxfoundation/insights

gaspergrom · 2026-02-15T22:10:11Z

No description provided.

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>

Copilot

Pull request overview

Updates the badges UI to match the “badge design QA” direction by refining badge presentation (grid/layout), share affordances, and adding small visual effects/animations, along with a popover click-outside behavior tweak.

Changes:

Adjust popover click-outside handling to use capture-phase document listeners.
Improve badges share UI with tooltips and refine rank label presentation.
Add badge shine utility styles and apply shine/animation effects to badge imagery and popovers.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
frontend/app/components/uikit/popover/popover.vue	Changes document click listener registration to capture phase for click-outside behavior.
frontend/app/components/modules/badges/components/share/badges-share-socials.vue	Wraps share icon buttons in tooltips and adds tooltip import.
frontend/app/components/modules/badges/components/share/badges-share-preview.vue	Conditionally adds “Rank:” prefix based on computed layout heuristic.
frontend/app/components/modules/badges/components/download/card-download-preview.vue	Always displays “Rank: #…” label in download preview.
frontend/app/components/modules/badges/components/badges.vue	Switches badges list layout from flex to grid with explicit column sizing.
frontend/app/components/modules/badges/components/badges-popover.vue	Adds popover entrance animation and applies badge shine wrapper to the image.
frontend/app/components/modules/badges/components/badges-item.vue	Applies badge shine wrapper to badge thumbnails.
frontend/app/assets/styles/utils/index.scss	Registers the new badge shine utility stylesheet.
frontend/app/assets/styles/utils/_badge-shine.scss	Introduces the `.badge-shine` animated overlay utility.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-15T22:13:54Z

frontend/app/components/modules/badges/components/share/badges-share-preview.vue

 const badgeImage = computed(() => props.badge.config.badgeImages[props.badge.tier]);
+const showRankLabel = computed(
+  () => props.badge.config.title.length + String(props.badge.rank).length <= 22 || props.badge.rank < 1000,
+);


showRankLabel relies on a hard-coded character-count threshold (22) and string lengths, which is brittle (font differences/localization) and hard to reason about later. Consider extracting the threshold into a named constant with a short comment, or using a layout/CSS-based approach (e.g., nowrap/ellipsis) to decide when to show the "Rank:" prefix.

I think it is better to use ellipsis here rather than the fix character length check.

Copilot · 2026-02-15T22:13:54Z

frontend/app/components/modules/badges/components/badges.vue

@@ -43,7 +44,8 @@ SPDX-License-Identifier: MIT
    <!-- Badges Grid -->
    <div
      v-else
-      class="flex flex-wrap items-start gap-x-4 gap-y-2"
+      class="grid gap-x-4 gap-y-2 items-start"
+      style="grid-template-columns: repeat(auto-fill, minmax(52px, 1fr))"
    >


The grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)) inline style is duplicated for loading vs. loaded states. Consider extracting this into a shared class/style binding (or a Tailwind arbitrary value if supported) to avoid divergence and keep the template easier to maintain.

Copilot · 2026-02-15T22:13:55Z

frontend/app/components/modules/badges/components/badges-popover.vue

+        <div class="badge-shine relative overflow-hidden size-20">
+          <img
+            :src="badgeImage"
+            :alt="badge.config.title"
+            class="size-20"
+          />
+        </div>


.badge-shine already sets position: relative and overflow: hidden, so adding relative overflow-hidden here is redundant. Consider removing the extra utility classes so the source of these behaviors stays in one place.

Copilot · 2026-02-15T22:13:55Z

frontend/app/assets/styles/utils/_badge-shine.scss

+  &::after {
+    content: '';
+    top: 0;
+    transform: translateX(100%);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    animation: badge-shine 5s infinite;
+    background: linear-gradient(


The ::after overlay is position: absolute with top: 0 but no left/right (or inset). That can leave its horizontal position dependent on the static position and can misalign the shine overlay. Set left: 0 (or inset: 0) to ensure it consistently covers the badge.

Copilot · 2026-02-15T22:13:55Z

frontend/app/components/uikit/popover/popover.vue

 const openPopover = async () => {
  isVisible.value = true;
  if (props.triggerEvent === 'click') {
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener('click', handleClickOutside, true);
  }
 };

 const closePopover = () => {
  isVisible.value = false;
  if (props.triggerEvent === 'click') {
-    document.removeEventListener('click', handleClickOutside);
+    document.removeEventListener('click', handleClickOutside, true);
  }


The document click listener is only added/removed via openPopover()/closePopover(). If visibility is controlled externally (v-model / prop updates) or the component unmounts while open, the listener can be left attached and click-outside handling can be out of sync. Consider managing the listener in a watcher/onBeforeUnmount based on isVisible (and always removing it on unmount) so it stays consistent regardless of how visibility changes.

Copilot · 2026-02-15T22:13:55Z

frontend/app/components/modules/badges/components/share/badges-share-socials.vue

+    <lfx-tooltip content="X/Twitter">
+      <button
+        type="button"
+        class="size-9 rounded-full bg-black flex items-center justify-center hover:opacity-80 transition-opacity"
+        @click="shareToX"
+      >


These are icon-only buttons. Wrapping them in a tooltip doesn’t provide an accessible name for screen readers; please add an aria-label (or visually hidden text) to each button so the share targets are announced correctly.

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>

emlimlf

There is one minor feedback from copilot, but it would be better for future maintainability.

emlimlf · 2026-02-18T08:03:11Z

frontend/app/components/modules/badges/components/share/badges-share-preview.vue

 const badgeImage = computed(() => props.badge.config.badgeImages[props.badge.tier]);
+const showRankLabel = computed(
+  () => props.badge.config.title.length + String(props.badge.rank).length <= 22 || props.badge.rank < 1000,
+);


I think it is better to use ellipsis here rather than the fix character length check.

feat: badge design qa

699a4a4

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>

gaspergrom requested a review from emlimlf February 15, 2026 22:10

gaspergrom self-assigned this Feb 15, 2026

Copilot AI review requested due to automatic review settings February 15, 2026 22:10

Copilot started reviewing on behalf of gaspergrom February 15, 2026 22:10 View session

Copilot AI reviewed Feb 15, 2026

View reviewed changes

gaspergrom added 2 commits February 16, 2026 10:42

feat: update badge share modal

2d27013

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>

fix: pr fixes

ad1ea06

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>

emlimlf requested changes Feb 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: badge design qa#1677

feat: badge design qa#1677
gaspergrom wants to merge 3 commits intomainfrom
fix/badge-design-qa

gaspergrom commented Feb 15, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

emlimlf Feb 18, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

emlimlf left a comment

Uh oh!

emlimlf Feb 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

gaspergrom commented Feb 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

emlimlf Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

emlimlf left a comment

Choose a reason for hiding this comment

Uh oh!

emlimlf Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants