@ansiversa/components 0.0.140 → 0.0.141

package/package.json

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

package/src/components/Admin/FaqManager.astro

@@ -118,22 +118,26 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
             <tr>
               <td>
                 <div class="av-faq-manager__order-cell">
-                  <input
-                    class="av-input av-faq-manager__order-input"
-                    type="number"
-                    min="1"
-                    x-model.number="faq.sort_order"
-                    :disabled="loading || saving"
-                    aria-label="Sort order"
-                  />
+                  <span class="av-faq-manager__order-pill" x-text="faq.sort_order"></span>
                   <AvButton
                     size="sm"
                     variant="ghost"
                     type="button"
-                    @click.prevent="saveSort(faq)"
-                    :disabled="loading || saving || !faq.id"
+                    @click.prevent="moveFaq(index, -1)"
+                    :disabled="loading || saving || index === 0 || !faq.id || !faqs[index - 1]?.id"
+                    aria-label="Move up"
                   >
-                    Save
+                    ↑
+                  </AvButton>
+                  <AvButton
+                    size="sm"
+                    variant="ghost"
+                    type="button"
+                    @click.prevent="moveFaq(index, 1)"
+                    :disabled="loading || saving || index === faqs.length - 1 || !faq.id || !faqs[index + 1]?.id"
+                    aria-label="Move down"
+                  >
+                    ↓
                   </AvButton>
                 </div>
               </td>
@@ -658,41 +662,70 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         }
       },
 
-      async saveSort(faq) {
-        if (!faq?.id) return;
+      normalizeSortOrder(value, fallbackOrder) {
+        const parsed = Number.parseInt(String(value ?? ""), 10);
+        if (Number.isInteger(parsed) && parsed >= 1) return parsed;
+        return Math.max(1, Number.parseInt(String(fallbackOrder ?? 1), 10) || 1);
+      },
+
+      async patchSortOrder(id, sortOrder) {
+        const response = await fetch(
+          this.endpoint(`/api/admin/faqs/${encodeURIComponent(String(id))}.json`),
+          {
+            method: "PATCH",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ sort_order: sortOrder }),
+          },
+        );
+
+        const responsePayload = await this.parseJson(response);
+
+        if (!response.ok) {
+          throw new Error(this.mapError(response.status, responsePayload, "Failed to update sort order."));
+        }
+      },
+
+      async moveFaq(index, direction) {
+        const currentIndex = Number(index);
+        const nextIndex = currentIndex + Number(direction);
+        if (!Number.isInteger(currentIndex) || !Number.isInteger(nextIndex)) return;
+        if (nextIndex < 0 || nextIndex >= this.faqs.length) return;
+
+        const currentFaq = this.faqs[currentIndex];
+        const nextFaq = this.faqs[nextIndex];
+        if (!currentFaq?.id || !nextFaq?.id) return;
 
-        const nextSortOrder = Number(faq.sort_order);
-        if (!Number.isInteger(nextSortOrder) || nextSortOrder < 1) {
+        const currentOrder = this.normalizeSortOrder(currentFaq.sort_order, currentIndex + 1);
+        const nextOrder = this.normalizeSortOrder(nextFaq.sort_order, nextIndex + 1);
+        if (currentOrder < 1 || nextOrder < 1) {
           this.error = "Sort order must be 1 or greater.";
           return;
         }
 
+        const snapshot = this.faqs.map((item) => ({ ...item }));
+        const reordered = this.faqs.map((item) => ({ ...item }));
+        [reordered[currentIndex], reordered[nextIndex]] = [reordered[nextIndex], reordered[currentIndex]];
+        reordered[nextIndex].sort_order = currentOrder;
+        reordered[currentIndex].sort_order = nextOrder;
+
+        this.faqs = reordered;
+
         this.saving = true;
         this.error = "";
         this.notice = "";
 
         try {
-          const response = await fetch(
-            this.endpoint(`/api/admin/faqs/${encodeURIComponent(String(faq.id))}.json`),
-            {
-              method: "PATCH",
-              credentials: "include",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({ sort_order: nextSortOrder }),
-            },
-          );
-
-          const responsePayload = await this.parseJson(response);
-
-          if (!response.ok) {
-            throw new Error(this.mapError(response.status, responsePayload, "Failed to update sort order."));
-          }
+          await Promise.all([
+            this.patchSortOrder(reordered[currentIndex].id, reordered[currentIndex].sort_order),
+            this.patchSortOrder(reordered[nextIndex].id, reordered[nextIndex].sort_order),
+          ]);
 
-          this.notice = "Sort order updated.";
-          await this.fetchFaqs();
+          this.notice = "Order updated.";
         } catch (sortError) {
+          this.faqs = snapshot;
           this.error = sortError?.message || "Failed to update sort order.";
         } finally {
           this.saving = false;
@@ -709,9 +742,18 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
     align-items: center;
   }
 
-  .av-faq-manager__order-input {
-    width: 88px;
-    min-height: 2.25rem;
+  .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 {