@ansiversa/components 0.0.146 → 0.0.147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.146",
+  "version": "0.0.147",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/components/Admin/FaqManager.astro

@@ -1,6 +1,7 @@
 ---
 import AvButton from "../../AvButton.astro";
 import AvCard from "../../AvCard.astro";
+import AvConfirmDialog from "../../AvConfirmDialog.astro";
 import AvDrawer from "../../AvDrawer.astro";
 import AvEmptyState from "../../AvEmptyState.astro";
 import AvIcon from "../../AvIcon.astro";
@@ -191,17 +192,21 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
                     type="button"
                     @click.prevent="openEdit(faq)"
                     :disabled="loading || saving"
+                    x-bind:title="`Edit FAQ: ${faq.question || 'Untitled'}`"
+                    x-bind:aria-label="`Edit FAQ: ${faq.question || 'Untitled'}`"
                   >
-                    Edit
+                    <AvIcon name="edit" size="sm" />
                   </AvButton>
                   <AvButton
                     size="sm"
                     variant="ghost"
                     type="button"
-                    @click.prevent="removeFaq(faq)"
+                    @click.prevent="openDeleteConfirm(faq)"
                     :disabled="loading || saving || !faq.id"
+                    x-bind:title="`Delete FAQ: ${faq.question || 'Untitled'}`"
+                    x-bind:aria-label="`Delete FAQ: ${faq.question || 'Untitled'}`"
                   >
-                    Delete
+                    <AvIcon name="trash" size="sm" />
                   </AvButton>
                 </div>
               </td>
@@ -289,6 +294,17 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
     </div>
   </template>
 
+  <AvConfirmDialog
+    id="faq-delete-dialog"
+    variant="danger"
+    headline="Delete this FAQ?"
+    description="This action cannot be undone."
+    confirmLabel="Delete"
+    cancelLabel="Cancel"
+    @av-confirm="confirmDeleteFaq()"
+    @av-cancel="pendingDeleteFaqId = null; pendingDeleteFaqQuestion = ''"
+  />
+
   <AvLoading x-show="loading" x-cloak label="Loading FAQs..." />
 </div>
 
@@ -314,6 +330,8 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
       draftQuestion: "",
       draftAnswerMd: "",
       draftIsPublished: true,
+      pendingDeleteFaqId: null,
+      pendingDeleteFaqQuestion: "",
       _queryTimer: null,
       limits: {
         questionMin: 3,
@@ -605,9 +623,22 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         }
       },
 
-      async removeFaq(faq) {
+      openDeleteConfirm(faq) {
         if (!faq?.id) return;
-        if (!window.confirm("Delete this FAQ? This action cannot be undone.")) return;
+        this.pendingDeleteFaqId = String(faq.id);
+        this.pendingDeleteFaqQuestion = String(faq.question || "").trim();
+        const dialogTitle = document.getElementById("faq-delete-dialog-title");
+        if (dialogTitle) {
+          dialogTitle.textContent = this.pendingDeleteFaqQuestion
+            ? `Delete FAQ '${this.pendingDeleteFaqQuestion}'?`
+            : "Delete this FAQ?";
+        }
+        window.AvDialog?.open("faq-delete-dialog");
+      },
+
+      async confirmDeleteFaq() {
+        if (!this.pendingDeleteFaqId) return;
+        const faqId = this.pendingDeleteFaqId;
 
         this.saving = true;
         this.error = "";
@@ -615,7 +646,7 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
 
         try {
           const response = await fetch(
-            this.endpoint(`/api/admin/faqs/${encodeURIComponent(String(faq.id))}.json`),
+            this.endpoint(`/api/admin/faqs/${encodeURIComponent(faqId)}.json`),
             {
               method: "DELETE",
               credentials: "include",
@@ -633,6 +664,8 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         } catch (deleteError) {
           this.error = deleteError?.message || "Failed to delete FAQ.";
         } finally {
+          this.pendingDeleteFaqId = null;
+          this.pendingDeleteFaqQuestion = "";
           this.saving = false;
         }
       },