@ansiversa/components 0.0.138 → 0.0.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.138",
+  "version": "0.0.140",
   "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

@@ -121,7 +121,7 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
                   <input
                     class="av-input av-faq-manager__order-input"
                     type="number"
-                    min="0"
+                    min="1"
                     x-model.number="faq.sort_order"
                     :disabled="loading || saving"
                     aria-label="Sort order"
@@ -202,6 +202,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 +217,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 +230,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 +270,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 +304,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 +325,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 +532,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) {
@@ -565,8 +662,8 @@ const initialAudience = defaultAudience === "admin" ? "admin" : "user";
         if (!faq?.id) return;
 
         const nextSortOrder = Number(faq.sort_order);
-        if (!Number.isFinite(nextSortOrder)) {
-          this.error = "Sort order must be a valid number.";
+        if (!Number.isInteger(nextSortOrder) || nextSortOrder < 1) {
+          this.error = "Sort order must be 1 or greater.";
           return;
         }
 
@@ -628,4 +725,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>

package/src/layouts/AvMiniAppBar.astro

@@ -1,4 +1,5 @@
 ---
+import { AppLogo } from "@ansiversa/components";
 import type { MiniAppLink } from "./miniAppRegistry";
 import { MINI_APP_REGISTRY } from "./miniAppRegistry";
 
@@ -9,8 +10,10 @@ interface Props {
 
 const { appKey, links } = Astro.props as Props;
 
-const meta = MINI_APP_REGISTRY[appKey];
-const appName = meta?.name ?? appKey;
+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;
 
 let menuLinks = links ?? meta?.links ?? [];
 if (!menuLinks.length) {
@@ -21,7 +24,10 @@ if (!menuLinks.length) {
 <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">{appName}</span>
+      <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>
 
     <div class="av-mini-app-bar__menu" x-data="{ open: false }">