From b33ce7a3710451f1fa2679664dafbb9849e53d4f Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Mon, 20 Apr 2026 22:37:50 +0100
Subject: [PATCH] refactor: share skills dialog opener

---
 ui/src/ui/views/skills.ts | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/ui/src/ui/views/skills.ts b/ui/src/ui/views/skills.ts
index 24c7fadd939..5145ead7e5a 100644
--- a/ui/src/ui/views/skills.ts
+++ b/ui/src/ui/views/skills.ts
@@ -24,6 +24,13 @@ function safeExternalHref(raw?: string): string | null {
   return resolveSafeExternalUrl(raw, window.location.href);
 }
 
+function showDialogWhenClosed(el?: Element) {
+  if (!(el instanceof HTMLDialogElement) || el.open) {
+    return;
+  }
+  el.showModal();
+}
+
 export type SkillsStatusFilter = "all" | "ready" | "needs-setup" | "disabled";
 
 export type SkillsProps = {
@@ -290,17 +297,11 @@ function renderClawHubResults(props: SkillsProps) {
 
 function renderClawHubDetailDialog(props: SkillsProps) {
   const detail = props.clawhubDetail;
-  const ensureModalOpen = (el?: Element) => {
-    if (!(el instanceof HTMLDialogElement) || el.open) {
-      return;
-    }
-    el.showModal();
-  };
 
   return html`
     <dialog
       class="md-preview-dialog"
-      ${ref(ensureModalOpen)}
+      ${ref(showDialogWhenClosed)}
       @click=${(e: Event) => {
         const dialog = e.currentTarget as HTMLDialogElement;
         if (e.target === dialog) {
@@ -422,17 +423,11 @@ function renderSkillDetail(skill: SkillStatusEntry, props: SkillsProps) {
   const showBundledBadge = Boolean(skill.bundled && skill.source !== "openclaw-bundled");
   const missing = computeSkillMissing(skill);
   const reasons = computeSkillReasons(skill);
-  const ensureModalOpen = (el?: Element) => {
-    if (!(el instanceof HTMLDialogElement) || el.open) {
-      return;
-    }
-    el.showModal();
-  };
 
   return html`
     <dialog
       class="md-preview-dialog"
-      ${ref(ensureModalOpen)}
+      ${ref(showDialogWhenClosed)}
       @click=${(e: Event) => {
         const dialog = e.currentTarget as HTMLDialogElement;
         if (e.target === dialog) {