From 17098f80d5b7b67e99d0ef0602d9f5672ed6f5ad Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 27 May 2026 13:59:15 -0700
Subject: [PATCH] add icon

---
 .../item-dependency-list.ts                   | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/archived-items/item-dependency-list/item-dependency-list.ts b/frontend/src/features/archived-items/item-dependency-list/item-dependency-list.ts
index c883b0a693..00be407002 100644
--- a/frontend/src/features/archived-items/item-dependency-list/item-dependency-list.ts
+++ b/frontend/src/features/archived-items/item-dependency-list/item-dependency-list.ts
@@ -1,7 +1,9 @@
-import { localized, msg } from "@lit/localize";
+import { localized, msg, str } from "@lit/localize";
 import { html, nothing, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
+import { when } from "lit/directives/when.js";
 
 import { collectionStatusIcon } from "../templates/collection-status-icon";
 
@@ -104,6 +106,25 @@ export class ItemDependencyList extends BtrixElement {
         minute: "2-digit",
       });
 
+    const missingDeps = (ids: string[]) => {
+      const dependencies_count = this.localize.number(ids.length);
+      const plural_of_dependencies = pluralOf("dependencies", ids.length);
+
+      return html`<btrix-popover
+        content=${msg(
+          str`Includes ${dependencies_count} ${msg("missing")} ${plural_of_dependencies}`,
+        )}
+        placement="bottom-start"
+        hoist
+      >
+        <sl-icon
+          name="exclamation-diamond"
+          label=${msg("Warning")}
+          class="text-warning-700"
+        ></sl-icon>
+      </btrix-popover>`;
+    };
+
     return html`
 
       <btrix-table-cell>
@@ -122,12 +143,12 @@ export class ItemDependencyList extends BtrixElement {
         </a>
       </btrix-table-cell>
       <btrix-table-cell class="flex items-center gap-1.5 truncate tabular-nums">
-        <sl-tooltip
-          content=${dedupeStatusText(
-            item.requiredByCrawls.length,
-            numDependencies,
+        ${when(item.missingRequiresCrawls, missingDeps)}
+        <btrix-popover
+          content=${ifDefined(
+            dedupeStatusText(item.requiredByCrawls.length, numDependencies),
           )}
-          placement="left"
+          placement="bottom-start"
           hoist
         >
         ${
@@ -142,7 +163,7 @@ export class ItemDependencyList extends BtrixElement {
               `
             : nothing
         }
-        </sl-tooltip>
+        </btrix-popover>
       </btrix-table-cell>
 
       <btrix-table-cell class="flex items-center gap-1.5 truncate tabular-nums">