@ansiversa/components 0.0.143 → 0.0.145

package/package.json

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

package/src/components/Admin/FaqManager.astro

@@ -2,6 +2,8 @@
 import AvButton from "../../AvButton.astro";
 import AvCard from "../../AvCard.astro";
 import AvDrawer from "../../AvDrawer.astro";
+import AvEmptyState from "../../AvEmptyState.astro";
+import AvIcon from "../../AvIcon.astro";
 import AvInput from "../../AvInput.astro";
 import AvLoading from "../../AvLoading.astro";
 import AvSelect from "../../AvSelect.astro";
@@ -50,29 +52,43 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
             <p class="av-table-toolbar__subtitle av-m-0">Manage frequently asked questions.</p>
             <div class="av-admin-toolbar-actions">
               <AvButton
-                size="sm"
+                size="md"
                 variant="ghost"
                 type="button"
+                title="Refresh FAQs"
+                aria-label="Refresh FAQs"
                 @click.prevent="fetchFaqs()"
                 :disabled="loading || saving"
               >
-                Refresh
+                <AvIcon name="refresh" size="md" />
               </AvButton>
               <AvButton
-                size="sm"
+                size="md"
                 variant="primary"
                 type="button"
+                title="Add FAQ"
+                aria-label="Add FAQ"
                 @click.prevent="openCreate()"
                 :disabled="loading || saving"
               >
-                Add FAQ
+                <AvIcon name="plus" size="md" />
               </AvButton>
             </div>
           </div>
 
-          <div class="av-admin-filters" x-show="showAudienceToggle" x-cloak>
-            <div class="av-admin-filter av-admin-filter--sort">
-              <AvSelect label="Audience" name="faq-audience" x-model="audience" @change="setAudience($event.target.value)">
+          <div class="av-admin-filters">
+            <div class="av-admin-filter av-admin-filter--search">
+              <AvInput
+                name="faq-search"
+                type="search"
+                placeholder="Search by question, category, or audience..."
+                x-model="q"
+                @input="setQuery($event.target.value)"
+              />
+            </div>
+
+            <div class="av-admin-filter av-admin-filter--dropdown" x-show="showAudienceToggle" x-cloak>
+              <AvSelect name="faq-audience" aria-label="Filter by audience" x-model="audience" @change="setAudience($event.target.value)">
                 <option value="user">User</option>
                 <option value="admin">Admin</option>
               </AvSelect>
@@ -92,9 +108,13 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
   </AvCard>
 
   <template x-if="!loading && !faqs.length">
-    <AvCard variant="soft" className="av-auth-stack-sm">
-      <p class="av-text-soft av-m-0">No FAQs found for this audience.</p>
-    </AvCard>
+    <AvEmptyState
+      headline="No FAQs match your search"
+      description="Try another search term or adjust filters."
+      ctaLabel="Add FAQ"
+      x-bind:ctaDisabled="loading || saving"
+      @cta="openCreate()"
+    />
   </template>
 
   <template x-if="faqs.length">
@@ -102,11 +122,10 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
       <AvTable stickyHeader>
         <thead>
           <tr>
-            <th class="av-table__th-order">Order</th>
+            <th>Reorder</th>
             <th x-show="showAudienceColumn" x-cloak>Audience</th>
             <th x-show="showCategoryColumn" x-cloak>Category</th>
             <th>Question</th>
-            <th>Answer</th>
             <th>Published</th>
             <th x-show="showUpdatedColumn" x-cloak>Updated</th>
             <th class="av-table__th-actions">Actions</th>
@@ -118,7 +137,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
             <tr>
               <td>
                 <div class="av-faq-manager__order-cell">
-                  <span class="av-faq-manager__order-pill" x-text="faq.sort_order"></span>
                   <AvButton
                     size="sm"
                     variant="ghost"
@@ -126,6 +144,7 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
                     @click.prevent="moveFaq(index, -1)"
                     :disabled="loading || saving || index === 0 || !faq.id || !faqs[index - 1]?.id"
                     aria-label="Move up"
+                    title="Move up"
                   >
                     ↑
                   </AvButton>
@@ -136,6 +155,7 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
                     @click.prevent="moveFaq(index, 1)"
                     :disabled="loading || saving || index === faqs.length - 1 || !faq.id || !faqs[index + 1]?.id"
                     aria-label="Move down"
+                    title="Move down"
                   >
                     ↓
                   </AvButton>
@@ -150,9 +170,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
               <td>
                 <div class="av-table__cell-strong" x-text="faq.question || '-'" ></div>
               </td>
-              <td class="av-table__cell-muted">
-                <span x-text="previewAnswer(faq.answer_md)"></span>
-              </td>
               <td>
                 <AvButton
                   size="sm"
@@ -246,17 +263,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
             <p class="av-faq-manager__field-error" role="status" x-text="validationErrors.category"></p>
           </template>
 
-          <AvInput
-            label="Sort order"
-            type="number"
-            min="1"
-            name="sort_order"
-            x-model.number="draftSortOrder"
-          />
-          <template x-if="validationErrors.sort_order">
-            <p class="av-faq-manager__field-error" role="status" x-text="validationErrors.sort_order"></p>
-          </template>
-
           <div class="av-faq-manager__publish-toggle">
             <label class="av-label" for="faq-draft-published">Published</label>
             <input
@@ -303,11 +309,12 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
       drawerError: "",
       draftId: null,
       draftAudience: "user",
+      q: "",
       draftCategory: "",
       draftQuestion: "",
       draftAnswerMd: "",
-      draftSortOrder: 0,
       draftIsPublished: true,
+      _queryTimer: null,
       limits: {
         questionMin: 3,
         questionMax: 160,
@@ -354,7 +361,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         const questionLen = this.draftQuestionCount;
         const answerLen = this.draftAnswerCount;
         const categoryLen = this.draftCategoryCount;
-        const sortOrder = Number(this.draftSortOrder);
 
         if (questionLen < this.limits.questionMin || questionLen > this.limits.questionMax) {
           errors.question = `Question must be ${this.limits.questionMin}-${this.limits.questionMax} characters`;
@@ -368,10 +374,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
           errors.category = `Category must be ≤ ${this.limits.categoryMax} characters`;
         }
 
-        if (!Number.isInteger(sortOrder) || sortOrder < 1) {
-          errors.sort_order = "Sort order must be 1 or greater";
-        }
-
         if (this.draftAudience !== "user" && this.draftAudience !== "admin") {
           errors.audience = "Audience must be user or admin";
         }
@@ -439,12 +441,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         };
       },
 
-      previewAnswer(value) {
-        const text = typeof value === "string" ? value.trim() : "";
-        if (!text) return "-";
-        return text.length > 120 ? `${text.slice(0, 120)}...` : text;
-      },
-
       formatUpdatedAt(value) {
         if (!value) return "-";
         const date = new Date(value);
@@ -457,6 +453,19 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         this.fetchFaqs();
       },
 
+      setQuery(value) {
+        this.q = typeof value === "string" ? value : "";
+        if (this._queryTimer) {
+          window.clearTimeout(this._queryTimer);
+          this._queryTimer = null;
+        }
+
+        this._queryTimer = window.setTimeout(() => {
+          this.fetchFaqs();
+          this._queryTimer = null;
+        }, 250);
+      },
+
       clearMessages() {
         this.error = "";
         this.notice = "";
@@ -467,8 +476,13 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         this.clearMessages();
 
         try {
+          const searchParams = new URLSearchParams();
+          searchParams.set("audience", this.audience);
+          const trimmedQuery = this.trimValue(this.q);
+          if (trimmedQuery) searchParams.set("q", trimmedQuery);
+
           const response = await fetch(
-            this.endpoint(`/api/admin/faqs.json?audience=${encodeURIComponent(this.audience)}`),
+            this.endpoint(`/api/admin/faqs.json?${searchParams.toString()}`),
             {
               method: "GET",
               credentials: "include",
@@ -503,7 +517,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         this.draftCategory = "";
         this.draftQuestion = "";
         this.draftAnswerMd = "";
-        this.draftSortOrder = this.faqs.length + 1;
         this.draftIsPublished = true;
         this.drawerError = "";
       },
@@ -523,7 +536,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         this.draftCategory = faq?.category ?? "";
         this.draftQuestion = faq?.question ?? "";
         this.draftAnswerMd = faq?.answer_md ?? "";
-        this.draftSortOrder = Number.isFinite(Number(faq?.sort_order)) ? Number(faq.sort_order) : 0;
         this.draftIsPublished = faq?.is_published !== false;
         this.drawerError = "";
         this.drawerOpen = true;
@@ -536,13 +548,11 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
       },
 
       buildPayload() {
-        const parsedSortOrder = Number.parseInt(String(this.draftSortOrder ?? ""), 10);
         return {
           audience: this.draftAudience === "admin" ? "admin" : "user",
           category: String(this.draftCategory || "").trim(),
           question: String(this.draftQuestion || "").trim(),
           answer_md: String(this.draftAnswerMd || "").trim(),
-          sort_order: Number.isInteger(parsedSortOrder) ? parsedSortOrder : 0,
           is_published: Boolean(this.draftIsPublished),
         };
       },
@@ -742,20 +752,6 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
     align-items: center;
   }
 
-  .av-faq-manager__order-pill {
-    min-width: 2rem;
-    height: 2rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    border: 1px solid rgba(148, 163, 184, 0.35);
-    color: rgba(226, 232, 240, 0.95);
-    font-size: 0.78rem;
-    line-height: 1;
-    padding: 0 0.5rem;
-  }
-
   .av-faq-manager__publish-toggle {
     display: flex;
     align-items: center;

package/src/layouts/AvMiniAppBar.astro

@@ -15,6 +15,7 @@ const normalizedAppKey = typeof appKey === "string" ? appKey.trim() : "";
 const meta = normalizedAppKey ? MINI_APP_REGISTRY[normalizedAppKey] : undefined;
 const appName = meta?.name ?? (normalizedAppKey || "App");
 const showLogo = normalizedAppKey.length > 0;
+const homeHref = meta?.links?.[0]?.href ?? "/";
 
 let menuLinks = links ?? meta?.links ?? [];
 if (!menuLinks.length) {
@@ -34,11 +35,18 @@ if (normalizedBookmarksHref.length > 0) {
 
 <div class="av-mini-app-bar">
   <div class="av-mini-app-bar__inner">
-    <div class="av-mini-app-bar__title" title={appName}>
-      <span class="av-mini-app-bar__name flex items-center gap-2">
-        {showLogo && <AppLogo appId={normalizedAppKey} size="sm" />}
-        <span class="truncate">{appName}</span>
-      </span>
+    <div class="av-mini-app-bar__title">
+      <a
+        href={homeHref}
+        class="av-mini-app-bar__title-link"
+        title={appName}
+        aria-label={`Go to ${appName} home`}
+      >
+        <span class="av-mini-app-bar__name flex items-center gap-2">
+          {showLogo && <AppLogo appId={normalizedAppKey} size="sm" />}
+          <span class="truncate">{appName}</span>
+        </span>
+      </a>
     </div>
 
     <div class="av-mini-app-bar__menu" x-data="{ open: false }">

package/src/styles/global.css

@@ -1432,6 +1432,11 @@
     min-width: 0;
   }
 
+  .av-mini-app-bar__title-link {
+    @apply inline-flex items-center rounded-md text-slate-100 transition-colors hover:text-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950;
+    min-width: 0;
+  }
+
   .av-mini-app-bar__name {
     @apply block truncate;
   }