@ansiversa/components 0.0.139 → 0.0.141

package/package.json

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

package/src/Logo/AppLogo.astro

@@ -4,6 +4,7 @@ import AppLogoFlashNote from "./logos/AppLogoFlashNote.astro";
 import AppLogoPortfolioCreator from "./logos/AppLogoPortfolioCreator.astro";
 import AppLogoQuiz from "./logos/AppLogoQuiz.astro";
 import AppLogoResumeBuilder from "./logos/AppLogoResumeBuilder.astro";
+import AppLogoStudyPlanner from "./logos/AppLogoStudyPlanner.astro";
 
 export type AppLogoProps = {
   appId: string;
@@ -25,6 +26,7 @@ const logoRegistry = {
   "resume-builder": AppLogoResumeBuilder,
   "portfolio-creator": AppLogoPortfolioCreator,
   flashnote: AppLogoFlashNote,
+  "study-planner": AppLogoStudyPlanner,
 } as const;
 
 const Logo = logoRegistry[appId as keyof typeof logoRegistry] ?? AppLogoDefault;

package/src/Logo/index.ts

@@ -4,4 +4,5 @@ export { default as AppLogoFlashNote } from "./logos/AppLogoFlashNote.astro";
 export { default as AppLogoPortfolioCreator } from "./logos/AppLogoPortfolioCreator.astro";
 export { default as AppLogoQuiz } from "./logos/AppLogoQuiz.astro";
 export { default as AppLogoResumeBuilder } from "./logos/AppLogoResumeBuilder.astro";
+export { default as AppLogoStudyPlanner } from "./logos/AppLogoStudyPlanner.astro";
 export type { AppLogoProps } from "./AppLogo.astro";

package/src/Logo/logos/AppLogoStudyPlanner.astro

@@ -0,0 +1,27 @@
+---
+import type { AppLogoGlyphProps } from "./AppLogoQuiz.astro";
+
+const { size = 18, class: className, title } = Astro.props as AppLogoGlyphProps;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width={size}
+  height={size}
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden={title ? undefined : "true"}
+  role={title ? "img" : "presentation"}
+>
+  {title ? <title>{title}</title> : null}
+  <rect x="3.5" y="4.5" width="17" height="16" rx="2.5" />
+  <path d="M8 2.8v3.4" />
+  <path d="M16 2.8v3.4" />
+  <path d="M3.5 9h17" />
+  <path d="m9.4 14 1.9 1.9 3.4-3.5" />
+</svg>

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="0"
-                    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>
@@ -202,6 +206,12 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
       <AvDrawer title="Manage FAQ" description="Create or update a frequently asked question.">
         <form class="av-auth-stack-md" @submit.prevent="submitDrawer()">
           <AvInput label="Question" name="question" required placeholder="Enter question" x-model="draftQuestion" />
+          <div class="av-faq-manager__field-meta">
+            <span class="av-faq-manager__field-counter" x-text="`Question: ${draftQuestionCount}/160`"></span>
+          </div>
+          <template x-if="validationErrors.question">
+            <p class="av-faq-manager__field-error" role="status" x-text="validationErrors.question"></p>
+          </template>
 
           <AvTextarea
             label="Answer (Markdown)"
@@ -211,6 +221,12 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
             placeholder="Write answer in markdown"
             x-model="draftAnswerMd"
           />
+          <div class="av-faq-manager__field-meta">
+            <span class="av-faq-manager__field-counter" x-text="`Answer: ${draftAnswerCount}/2000`"></span>
+          </div>
+          <template x-if="validationErrors.answer_md">
+            <p class="av-faq-manager__field-error" role="status" x-text="validationErrors.answer_md"></p>
+          </template>
 
           <div x-show="showAudienceToggle" x-cloak>
             <AvSelect label="Audience" name="draft-audience" x-model="draftAudience">
@@ -218,16 +234,28 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
               <option value="admin">Admin</option>
             </AvSelect>
           </div>
+          <template x-if="validationErrors.audience">
+            <p class="av-faq-manager__field-error" role="status" x-text="validationErrors.audience"></p>
+          </template>
 
           <AvInput label="Category (optional)" name="category" placeholder="General" x-model="draftCategory" />
+          <div class="av-faq-manager__field-meta">
+            <span class="av-faq-manager__field-counter" x-text="`Category: ${draftCategoryCount}/40`"></span>
+          </div>
+          <template x-if="validationErrors.category">
+            <p class="av-faq-manager__field-error" role="status" x-text="validationErrors.category"></p>
+          </template>
 
           <AvInput
             label="Sort order"
             type="number"
-            min="0"
+            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>
@@ -246,7 +274,7 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
 
         <div slot="footer">
           <AvButton variant="ghost" type="button" @click.prevent="closeDrawer()" :disabled="saving">Cancel</AvButton>
-          <AvButton type="button" @click.prevent="submitDrawer()" :disabled="saving">
+          <AvButton type="button" @click.prevent="submitDrawer()" :disabled="saving || !isDraftValid">
             <span x-show="!saving" x-text="drawerMode === 'edit' ? 'Update' : 'Create'"></span>
             <span x-show="saving">Saving...</span>
           </AvButton>
@@ -280,6 +308,13 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
       draftAnswerMd: "",
       draftSortOrder: 0,
       draftIsPublished: true,
+      limits: {
+        questionMin: 3,
+        questionMax: 160,
+        answerMin: 3,
+        answerMax: 2000,
+        categoryMax: 40,
+      },
 
       get showAudienceColumn() {
         if (this.showAudienceToggle) return true;
@@ -294,6 +329,66 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         return this.faqs.some((faq) => Boolean(faq.updated_at));
       },
 
+      trimValue(value) {
+        return typeof value === "string" ? value.trim() : "";
+      },
+
+      trimLength(value) {
+        return this.trimValue(value).length;
+      },
+
+      get draftQuestionCount() {
+        return this.trimLength(this.draftQuestion);
+      },
+
+      get draftAnswerCount() {
+        return this.trimLength(this.draftAnswerMd);
+      },
+
+      get draftCategoryCount() {
+        return this.trimLength(this.draftCategory);
+      },
+
+      get validationErrors() {
+        const errors = {};
+        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`;
+        }
+
+        if (answerLen < this.limits.answerMin || answerLen > this.limits.answerMax) {
+          errors.answer_md = `Answer must be ${this.limits.answerMin}-${this.limits.answerMax} characters`;
+        }
+
+        if (categoryLen > this.limits.categoryMax) {
+          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";
+        }
+
+        return errors;
+      },
+
+      get isDraftValid() {
+        return Object.keys(this.validationErrors).length === 0;
+      },
+
+      firstValidationError() {
+        const errors = this.validationErrors;
+        const firstKey = Object.keys(errors)[0];
+        return firstKey ? errors[firstKey] : "";
+      },
+
       init() {
         this.draftAudience = this.audience;
         this.fetchFaqs();
@@ -441,17 +536,23 @@ 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(this.draftSortOrder || 0),
+          sort_order: Number.isInteger(parsedSortOrder) ? parsedSortOrder : 0,
           is_published: Boolean(this.draftIsPublished),
         };
       },
 
       async submitDrawer() {
+        if (!this.isDraftValid) {
+          this.drawerError = this.firstValidationError() || "Please correct the highlighted fields.";
+          return;
+        }
+
         const payload = this.buildPayload();
 
         if (!payload.question || !payload.answer_md) {
@@ -561,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);
 
-        const nextSortOrder = Number(faq.sort_order);
-        if (!Number.isFinite(nextSortOrder)) {
-          this.error = "Sort order must be a valid number.";
+        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 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;
@@ -612,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 {
@@ -628,4 +767,23 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
     width: 1rem;
     height: 1rem;
   }
+
+  .av-faq-manager__field-meta {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: -0.35rem;
+  }
+
+  .av-faq-manager__field-counter {
+    font-size: 0.78rem;
+    line-height: 1.2;
+    color: rgba(148, 163, 184, 0.9);
+  }
+
+  .av-faq-manager__field-error {
+    margin: -0.2rem 0 0;
+    font-size: 0.78rem;
+    line-height: 1.3;
+    color: rgba(244, 63, 94, 0.95);
+  }
 </style>