@ansiversa/components 0.0.141 → 0.0.143

package/index.ts

@@ -35,11 +35,13 @@ export { default as AvTableToolbar } from './src/AvTableToolbar.astro';
 export { default as AvTablePagination } from './src/AvTablePagination.astro';
 export { default as QuizSummary } from './src/Summary/QuizSummary.astro';
 export { default as FlashNoteSummary } from './src/Summary/FlashNoteSummary.astro';
+export { default as StudyPlannerSummary } from './src/Summary/StudyPlannerSummary.astro';
 export { default as ResumeBuilderSummary } from './src/Summary/ResumeBuilderSummary.astro';
 export { default as PortfolioCreatorSummary } from './src/Summary/PortfolioCreatorSummary.astro';
 export { default as AvImageUploader } from "./src/components/media/AvImageUploader.astro";
 export { default as AvAiAssist } from "./src/components/Ai/AvAiAssist.astro";
 export { default as FaqManager } from "./src/components/Admin/FaqManager.astro";
+export { AvBookmarkButton, AvBookmarksEmpty, AvBookmarksList } from "./src/components/Bookmarks";
 export { AppLogo } from "./src/Logo";
 export type { AppLogoProps } from "./src/Logo";
 export { default as ResumeBuilderShell } from './src/resume-templates/ResumeBuilderShell.astro';

package/package.json

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

package/src/Summary/StudyPlannerSummary.astro

@@ -0,0 +1,95 @@
+---
+import { AvButton, AvCard } from "@ansiversa/components";
+import type { StudyPlannerDashboardSummaryV1 } from "./types";
+import { buildAppUrl } from "../utils/appUrls";
+
+interface Props {
+  summary: StudyPlannerDashboardSummaryV1;
+}
+
+const { summary } = Astro.props as Props;
+
+const formatDateTime = (value: string | null, fallback = "Not yet") => {
+  if (!value) return fallback;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? fallback : parsed.toLocaleString();
+};
+
+const appBaseUrl = buildAppUrl(summary.appId);
+const plansUrl = buildAppUrl(summary.appId, "/plans");
+const trackOpenPayload = JSON.stringify({
+  id: summary.appId,
+  key: summary.appId,
+  name: "Study Planner",
+  description: "Study Planner",
+  url: appBaseUrl,
+});
+
+const lastPlan = summary.recent.recentPlans[0];
+const lastTask = summary.recent.recentTasks[0];
+const lastLog = summary.recent.recentLogs[0];
+---
+
+<section class="av-auth-stack-lg">
+  <div class="av-form-row">
+    <div class="av-auth-stack-xxs">
+      <p class="av-text-soft">Last plan: {formatDateTime(lastPlan?.updatedAt ?? null)}</p>
+    </div>
+    <div class="av-row-wrap">
+      <AvButton
+        href={appBaseUrl}
+        size="sm"
+        onclick={`window.dispatchEvent(new CustomEvent('ansiversa:app-opened', { detail: ${trackOpenPayload} }))`}
+      >
+        Open App ->
+      </AvButton>
+      <AvButton href={plansUrl} size="sm" variant="ghost">View plans</AvButton>
+    </div>
+  </div>
+
+  <div class="av-grid-auto av-grid-auto--260">
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Plans</p>
+        <h3 class="av-app-card-title">{summary.totals.plansTotal}</h3>
+        <p class="av-text-soft">{summary.totals.plansActive} active</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Tasks</p>
+        <h3 class="av-app-card-title">{summary.totals.tasksTotal}</h3>
+        <p class="av-text-soft">{summary.totals.tasksCompleted} completed</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Due today</p>
+        <h3 class="av-app-card-title">{summary.totals.tasksDueToday}</h3>
+        <p class="av-text-soft">{summary.totals.logsThisWeek} logs this week</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Bookmarks</p>
+        <h3 class="av-app-card-title">{summary.totals.bookmarksTotal}</h3>
+        <p class="av-text-soft">Last log: {formatDateTime(lastLog?.createdAt ?? null)}</p>
+      </div>
+    </AvCard>
+  </div>
+
+  <div class="av-grid-auto av-grid-auto--260">
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Recent plan</p>
+        <p class="av-text-strong">{lastPlan?.title ?? "No recent plans"}</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Recent task</p>
+        <p class="av-text-strong">{lastTask?.title ?? "No recent tasks"}</p>
+      </div>
+    </AvCard>
+  </div>
+</section>

package/src/Summary/types.ts

@@ -64,3 +64,35 @@ export type PortfolioDashboardSummaryV1 = {
   };
   completionHint?: number;
 };
+
+export type StudyPlannerDashboardSummaryV1 = {
+  appId: "study-planner";
+  version: 1;
+  updatedAt: string;
+  totals: {
+    plansTotal: number;
+    plansActive: number;
+    tasksTotal: number;
+    tasksCompleted: number;
+    tasksDueToday: number;
+    logsThisWeek: number;
+    bookmarksTotal: number;
+  };
+  recent: {
+    recentPlans: Array<{
+      id: number;
+      title: string;
+      updatedAt: string | null;
+    }>;
+    recentTasks: Array<{
+      id: number;
+      title: string;
+      updatedAt: string | null;
+    }>;
+    recentLogs: Array<{
+      id: number;
+      title: string;
+      createdAt: string | null;
+    }>;
+  };
+};

package/src/components/Bookmarks/AvBookmarkButton.astro

@@ -0,0 +1,93 @@
+---
+type Size = "sm" | "md";
+
+interface Props {
+  active: boolean;
+  activeExpr?: string;
+  title?: string;
+  activeTitle?: string;
+  size?: Size;
+  onClick?: string;
+}
+
+const {
+  active,
+  activeExpr,
+  title = "Save bookmark",
+  activeTitle = "Remove bookmark",
+  size = "md",
+  onClick,
+} = Astro.props as Props;
+
+const iconPx = size === "sm" ? 16 : 20;
+const checkPx = size === "sm" ? 10 : 12;
+const resolvedActiveExpr = activeExpr ?? (active ? "true" : "false");
+const escapeSingleQuotes = (value: string) => value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+const tooltipExpr = `(${resolvedActiveExpr}) ? '${escapeSingleQuotes(activeTitle)}' : '${escapeSingleQuotes(title)}'`;
+---
+
+<button
+  type="button"
+  class="av-bookmark-btn"
+  :class={`(${resolvedActiveExpr}) ? 'is-active' : ''`}
+  x-on:click.stop.prevent={onClick}
+  title={active ? activeTitle : title}
+  :title={tooltipExpr}
+  aria-label={title}
+  :aria-label={`(${resolvedActiveExpr}) ? ${JSON.stringify(activeTitle)} : ${JSON.stringify(title)}`}
+  :aria-pressed={resolvedActiveExpr}
+>
+  <span class="av-bookmark-btn__icon" :class={`(${resolvedActiveExpr}) ? 'is-hidden' : ''`} aria-hidden="true">
+    <svg width={iconPx} height={iconPx} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+    </svg>
+  </span>
+  <span class="av-bookmark-btn__icon" :class={`(${resolvedActiveExpr}) ? '' : 'is-hidden'`} aria-hidden="true">
+    <svg width={iconPx} height={iconPx} viewBox="0 0 24 24" fill="currentColor" stroke="none">
+      <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+    </svg>
+    <svg class="av-bookmark-btn__check" width={checkPx} height={checkPx} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="m5 13 4 4L19 7" />
+    </svg>
+  </span>
+</button>
+
+<style>
+  .av-bookmark-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.65);
+    color: #94a3b8;
+    transition: all 0.2s ease;
+  }
+  .av-bookmark-btn:hover {
+    border-color: rgba(14, 165, 233, 0.6);
+    color: #7dd3fc;
+  }
+  .av-bookmark-btn.is-active {
+    border-color: rgba(14, 165, 233, 0.8);
+    color: #38bdf8;
+    background: rgba(14, 116, 144, 0.25);
+  }
+  .av-bookmark-btn__icon {
+    position: absolute;
+    inset: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.15s ease;
+  }
+  .av-bookmark-btn__icon.is-hidden {
+    opacity: 0;
+  }
+  .av-bookmark-btn__check {
+    position: absolute;
+    color: #0f172a;
+  }
+</style>

package/src/components/Bookmarks/AvBookmarksEmpty.astro

@@ -0,0 +1,5 @@
+---
+import AvEmptyState from "../../AvEmptyState.astro";
+---
+
+<AvEmptyState headline="No bookmarks yet" description="Save items to find them quickly here." />

package/src/components/Bookmarks/AvBookmarksList.astro

@@ -0,0 +1,83 @@
+---
+import AvCard from "../../AvCard.astro";
+import AvBookmarkButton from "./AvBookmarkButton.astro";
+
+type RightSlot = {
+  active: boolean;
+  activeExpr?: string;
+  title?: string;
+  activeTitle?: string;
+  size?: "sm" | "md";
+  onClick?: string;
+};
+
+type Item = {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  href?: string;
+  rightSlot?: RightSlot;
+};
+
+interface Props {
+  items: Item[];
+}
+
+const { items } = Astro.props as Props;
+---
+
+<div class="av-bookmarks-list">
+  {items.map((item) => (
+    <AvCard className="av-bookmarks-list__card">
+      <div class="av-bookmarks-list__row">
+        <div>
+          {item.href ? (
+            <a class="av-bookmarks-list__title" href={item.href}>{item.title}</a>
+          ) : (
+            <p class="av-bookmarks-list__title">{item.title}</p>
+          )}
+          {item.subtitle ? <p class="av-bookmarks-list__meta">{item.subtitle}</p> : null}
+          {item.description ? <p class="av-bookmarks-list__desc">{item.description}</p> : null}
+        </div>
+        {item.rightSlot ? (
+          <AvBookmarkButton
+            active={item.rightSlot.active}
+            activeExpr={item.rightSlot.activeExpr}
+            title={item.rightSlot.title}
+            activeTitle={item.rightSlot.activeTitle}
+            size={item.rightSlot.size ?? "sm"}
+            onClick={item.rightSlot.onClick}
+          />
+        ) : null}
+      </div>
+    </AvCard>
+  ))}
+</div>
+
+<style>
+  .av-bookmarks-list {
+    display: grid;
+    gap: 0.85rem;
+  }
+  .av-bookmarks-list__row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  .av-bookmarks-list__title {
+    color: #e2e8f0;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .av-bookmarks-list__meta {
+    font-size: 0.75rem;
+    color: #7dd3fc;
+    margin-top: 0.35rem;
+  }
+  .av-bookmarks-list__desc {
+    margin-top: 0.4rem;
+    color: #94a3b8;
+    font-size: 0.82rem;
+  }
+</style>

package/src/components/Bookmarks/index.ts

@@ -0,0 +1,3 @@
+export { default as AvBookmarkButton } from "./AvBookmarkButton.astro";
+export { default as AvBookmarksEmpty } from "./AvBookmarksEmpty.astro";
+export { default as AvBookmarksList } from "./AvBookmarksList.astro";

package/src/layouts/AvMiniAppBar.astro

@@ -6,9 +6,10 @@ import { MINI_APP_REGISTRY } from "./miniAppRegistry";
 interface Props {
   appKey: string;
   links?: MiniAppLink[];
+  bookmarksHref?: string;
 }
 
-const { appKey, links } = Astro.props as Props;
+const { appKey, links, bookmarksHref } = Astro.props as Props;
 
 const normalizedAppKey = typeof appKey === "string" ? appKey.trim() : "";
 const meta = normalizedAppKey ? MINI_APP_REGISTRY[normalizedAppKey] : undefined;
@@ -19,6 +20,16 @@ let menuLinks = links ?? meta?.links ?? [];
 if (!menuLinks.length) {
   menuLinks = [{ label: "Home", href: "/" }];
 }
+
+const normalizedBookmarksHref = typeof bookmarksHref === "string" ? bookmarksHref.trim() : "";
+if (normalizedBookmarksHref.length > 0) {
+  const hasBookmarksItem = menuLinks.some(
+    (item) => item.href === normalizedBookmarksHref || item.label.toLowerCase() === "bookmarks",
+  );
+  if (!hasBookmarksItem) {
+    menuLinks = [...menuLinks, { label: "Bookmarks", href: normalizedBookmarksHref }];
+  }
+}
 ---
 
 <div class="av-mini-app-bar">

package/src/layouts/WebLayout.astro

@@ -11,6 +11,7 @@ interface Props {
   notificationUnreadCount?: number;
   miniAppKey?: string;
   links?: { label: string; href: string }[];
+  bookmarksHref?: string;
 }
 
 const {
@@ -19,6 +20,7 @@ const {
   notificationUnreadCount = 0,
   miniAppKey,
   links,
+  bookmarksHref,
 } = Astro.props;
 
 const user = (Astro.locals as { user?: {
@@ -87,7 +89,7 @@ const ROOT_URL = rawDomain.match(/^https?:\/\//i)
       <AvNavbarActions user={user} notificationUnreadCount={notificationUnreadCount} />
     </AvNavbar>
 
-    {miniAppKey && <AvMiniAppBar appKey={miniAppKey} links={links} />}
+    {miniAppKey && <AvMiniAppBar appKey={miniAppKey} links={links} bookmarksHref={bookmarksHref} />}
 
     <!-- Main content -->
     <main class="av-main">

package/src/utils/appUrls.ts

@@ -3,6 +3,7 @@ const ROOT_DOMAIN = "ansiversa.com";
 const MINI_APP_SLUGS = new Set([
   "quiz",
   "flashnote",
+  "study-planner",
   "resume-builder",
   "portfolio-creator",
 ]);