@burdenoff/microfe-technospam 2026.1102.2 → 2026.1102.3

package/dist/technospam/pages/CoursesCourseDetailsPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesCourseDetailsPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCourseDetailsPagePage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useSearchParams } from 'react-router';\nimport {\n  ArrowRight,\n  Award,\n  BookOpen,\n  CheckCircle2,\n  ChevronDown,\n  Clock,\n  Eye,\n  FileText,\n  Lock,\n  PlayCircle,\n  Layers,\n  ShieldCheck,\n  Sparkles,\n  Trophy,\n  TrendingUp,\n  Users,\n  type LucideIcon,\n} from 'lucide-react';\nimport { Button, GlassCard, Skeleton } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  MediaCover,\n  PageLayout,\n  CertificateVerifyLink,\n  PremiumBadge,\n  StatCard,\n  TagStrip,\n  UpgradeGate,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport { SaveCourseOffline } from '../components/lesson/SaveCourseOffline';\nimport { SavedCourseOutline } from '../components/lesson/SavedCourseOutline';\nimport { useOnlineStatus, usePurgeOtherUsersLessons } from '../hooks/useOfflineLessons';\nimport { offlineScope, readSavedCourseOutline } from '../lib/offlineLessons';\nimport {\n  useCourseQuery,\n  useEnroll,\n  useIssueCertificate,\n  useMyCertificatesQuery,\n  type TecCertificate,\n  type TecLesson,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDate, formatDuration, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { cn } from '../utils/cn';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { useFocusedRecordParam } from '../hooks/useFocusedRecordParam';\nimport { FOCUS_PARAMS } from '../utils/pageContext';\nimport { lessonPlayerPath } from '../utils/lessonPath';\n\n/** Per-lesson-kind icon + on-theme tint (chip) and pill (badge) classes. */\nconst KIND_META: Record<string, { icon: LucideIcon; chip: string; badge: string }> = {\n  VIDEO: {\n    icon: PlayCircle,\n    chip: 'bg-accent-primary/15 text-accent-primary',\n    badge: 'border-accent-primary/25 bg-accent-primary/6 text-accent-primary',\n  },\n  ARTICLE: {\n    icon: FileText,\n    chip: 'bg-accent-indigo/15 text-accent-indigo',\n    badge: 'border-accent-indigo/25 bg-accent-indigo/10 text-accent-indigo',\n  },\n  INTERACTIVE: {\n    icon: Sparkles,\n    chip: 'bg-accent-teal/15 text-accent-teal',\n    badge: 'border-accent-teal/25 bg-accent-teal/10 text-accent-teal',\n  },\n  QUIZ: {\n    icon: CheckCircle2,\n    chip: 'bg-accent-purple/15 text-accent-purple',\n    badge: 'border-accent-purple/25 bg-accent-purple/10 text-accent-purple',\n  },\n  PROJECT: {\n    icon: Layers,\n    chip: 'bg-status-warning-bg-subtle text-status-warning-text',\n    badge: 'border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text',\n  },\n};\n\nfunction HeroBadge({ icon: Icon, children }: { icon?: LucideIcon; children: ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 rounded-full bg-white/15 px-2.5 py-1 text-xs font-medium text-white ring-1 ring-white/25 backdrop-blur-sm\">\n      {Icon ? <Icon size={12} /> : null}\n      {children}\n    </span>\n  );\n}\n\n/**\n * One curriculum row. Expands in place to reveal the lesson body.\n *\n * `TecLesson.content` is the only lesson body this service exposes to a\n * learner, and the API nulls it server-side whenever `isLocked` is true\n * (BOFF-4416), so the three states below are exhaustive and never guessed:\n * locked → upgrade note, content present → the body, content null on an\n * unlocked lesson → the author simply hasn't written it yet.\n */\nfunction LessonRow({\n  lesson,\n  index,\n  done,\n  open,\n  onToggle,\n  onStart,\n}: {\n  lesson: TecLesson;\n  index: number;\n  done: boolean;\n  /** The open lesson is the focused one (`?lessonId=`), so the assistant can name it. */\n  open: boolean;\n  onToggle: () => void;\n  /** Opens the lesson in the lesson player (BOFF-4107). */\n  onStart: () => void;\n}) {\n  const meta = KIND_META[lesson.kind] ?? KIND_META.ARTICLE!;\n  const Icon = meta.icon;\n  const bodyId = `tec-lesson-body-${lesson.id}`;\n\n  return (\n    <div className=\"border-b border-border-seam last:border-b-0\">\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={bodyId}\n        className=\"group flex w-full items-center gap-3 rounded-xl px-2 py-3 text-left transition-colors hover:bg-bg-sunken/60\"\n      >\n        <span className=\"hidden w-6 shrink-0 text-center text-sm font-medium tabular-nums text-text-muted sm:block\">\n          {index + 1}\n        </span>\n        <span\n          className={cn(\n            'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',\n            done ? 'bg-status-success-bg-subtle text-status-success-text' : meta.chip\n          )}\n        >\n          {done ? <CheckCircle2 size={17} /> : <Icon size={17} />}\n        </span>\n        <div className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-sm font-medium text-text-primary\">\n            {lesson.title}\n          </span>\n          <div className=\"mt-1 flex flex-wrap items-center gap-2\">\n            <span\n              className={cn(\n                'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium',\n                meta.badge\n              )}\n            >\n              {humanizeEnum(lesson.kind)}\n            </span>\n            <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n              <Clock size={12} /> {formatDuration(lesson.estimatedMinutes)}\n            </span>\n          </div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-2\">\n          {done ? (\n            <CheckCircle2 size={18} className=\"text-status-success-text\" />\n          ) : lesson.isPreview ? (\n            <span className=\"inline-flex items-center gap-1 rounded-full border border-accent-primary/30 bg-accent-primary/6 px-2 py-0.5 text-[11px] font-medium text-accent-primary\">\n              <Eye size={12} /> Preview\n            </span>\n          ) : lesson.isLocked ? (\n            // BOFF-4416: distinct from the plain \"not completed yet\" Lock icon\n            // below — this lesson's content is gated behind a paid plan, not\n            // just not-yet-watched. The API already nulled `content`/`file`.\n            <span className=\"inline-flex items-center gap-1 rounded-full border border-status-warning-border/60 bg-status-warning-bg-subtle px-2 py-0.5 text-[11px] font-medium text-status-warning-text\">\n              <Lock size={12} /> Upgrade to unlock\n            </span>\n          ) : (\n            <Lock size={15} className=\"text-text-muted\" />\n          )}\n          <ChevronDown\n            size={16}\n            aria-hidden\n            className={cn(\n              'text-text-muted transition-transform duration-200',\n              open ? 'rotate-180' : ''\n            )}\n          />\n        </div>\n      </button>\n\n      {open ? (\n        <div id={bodyId} className=\"px-2 pb-4 sm:pl-11\">\n          {lesson.isLocked ? (\n            <UpgradeGate\n              compact\n              description=\"This lesson is part of a paid TechnoSpam plan — its content unlocks once your workspace upgrades.\"\n            />\n          ) : (\n            <div className=\"space-y-3\">\n              {lesson.content ? (\n                <div className=\"rounded-xl border border-border-seam bg-bg-sunken p-4\">\n                  <p className=\"line-clamp-6 whitespace-pre-wrap text-sm leading-relaxed text-text-secondary\">\n                    {lesson.content}\n                  </p>\n                </div>\n              ) : null}\n              <Button size=\"sm\" onClick={onStart} data-testid={`open-lesson-${lesson.id}`}>\n                <PlayCircle size={15} /> {done ? 'Review lesson' : 'Start lesson'}\n              </Button>\n            </div>\n          )}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Verifiable certificate face for an already-issued certificate. Every value\n * shown is a real field on the TecCertificate row (`serial`, `score`,\n * `issuedAt`, `status`) plus the course title it was issued against — the\n * learner name comes from the signed-in actor the shell handed us, and is\n * simply omitted when the shell did not supply one.\n */\nfunction CertificatePreview({\n  certificate,\n  learnerName,\n  courseTitle,\n}: {\n  certificate: TecCertificate;\n  learnerName?: string;\n  courseTitle: string;\n}) {\n  const revoked = certificate.status === 'REVOKED';\n  return (\n    <GlassCard className=\"overflow-hidden p-0\">\n      <div className=\"border-b border-border-seam px-5 py-3\">\n        <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">\n          Certificate preview\n        </span>\n      </div>\n      <div className=\"space-y-4 bg-bg-sunken/50 px-5 py-6 text-center\">\n        <div className=\"flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-text-muted\">\n          <Award size={14} className=\"text-status-warning-text\" /> Certificate of completion\n        </div>\n        <h3 className=\"text-lg font-bold text-text-primary\">{courseTitle}</h3>\n        {learnerName ? (\n          <p className=\"text-sm text-text-secondary\">\n            Awarded to <span className=\"font-semibold text-text-primary\">{learnerName}</span>\n          </p>\n        ) : null}\n        <div className=\"grid grid-cols-1 gap-3 border-t border-border-seam pt-4 text-left sm:grid-cols-3\">\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Serial number\n            </div>\n            <div className=\"truncate font-mono text-sm text-text-primary\">{certificate.serial}</div>\n          </div>\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Score\n            </div>\n            <div className=\"text-sm font-semibold text-text-primary\">{certificate.score}</div>\n          </div>\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Issued on\n            </div>\n            <div className=\"text-sm text-text-primary\">{formatDate(certificate.issuedAt)}</div>\n          </div>\n        </div>\n        {revoked ? (\n          <div className=\"rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-left text-xs text-status-error-text\">\n            This certificate was revoked\n            {certificate.revokedAt ? ` on ${formatDate(certificate.revokedAt)}` : ''}\n            {certificate.revokeReason ? ` — ${certificate.revokeReason}` : '.'}\n          </div>\n        ) : (\n          <span className=\"inline-flex items-center gap-1 rounded-full border border-status-success-border bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n            <ShieldCheck size={13} /> Verified\n          </span>\n        )}\n        <CertificateVerifyLink\n          serial={certificate.serial}\n          className=\"border-t border-border-seam pt-4 text-left\"\n        />\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCourseDetailsPagePage() {\n  const [params] = useSearchParams();\n  const id = params.get('id') ?? '';\n  // The expanded lesson lives in `?lessonId=` so the assistant's page context\n  // names it (\"explain this lesson\") and a reload reopens it.\n  const [openLessonId, setOpenLessonId] = useFocusedRecordParam(FOCUS_PARAMS.lesson);\n  const { currentUser, workspaceId } = useTechnoSpam();\n  const navigate = useTechnoSpamNavigate();\n  usePurgeOtherUsersLessons(currentUser?.id);\n  const { emit } = useTechnoSpamAnalytics();\n  const { data, loading, error, refetch } = useCourseQuery(id);\n  const online = useOnlineStatus();\n  const scope = offlineScope(workspaceId, currentUser?.id);\n\n  useEffect(() => {\n    if (id) {\n      emit('technospam.course.viewed', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_COURSE',\n      });\n    }\n  }, [id, workspaceId, emit]);\n\n  const [enroll, { loading: enrolling }] = useEnroll();\n  const course = data?.tecCourse ?? null;\n  // Self-scoped read (BOFF-10481): the learner's own certificates come from the\n  // canonical Buildmyiq field, which filters by the authenticated actor\n  // server-side. It is narrowed to this course by its canonical id once known\n  // and by its Technospam id on the client. A cross-learner list-all read is\n  // not granted to a plain learner, so an already-claimed certificate would\n  // come back empty and the page would keep offering \"Claim certificate\".\n  const { certificates: myCertificates, refetch: refetchCerts } = useMyCertificatesQuery({\n    buiCourseId: course?.buiCourseId,\n    technospamCourseId: id,\n    skip: !id,\n  });\n  const [issueCertificate, { loading: claiming }] = useIssueCertificate();\n\n  const lessons = [...(course?.lessons ?? [])].sort((a, b) => a.position - b.position);\n  const myEnrollment: TecEnrollment | undefined = (course?.enrollments ?? []).find(\n    (e) => e.learnerId === currentUser?.id\n  );\n  const myCertificate = myCertificates.find((c) => c.status === 'ISSUED') ?? myCertificates[0];\n  const isComplete = !!myEnrollment && myEnrollment.progressPct >= 100;\n\n  const handleClaimCertificate = async () => {\n    if (!id || !currentUser?.id) return;\n    emit('technospam.course.certificate_claimed', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_COURSE',\n    });\n    const res = await issueCertificate({\n      variables: { courseId: id, learnerId: currentUser.id, score: 100 },\n    });\n    if (res.data?.tecIssueCertificate) {\n      notify.success('Certificate issued', 'Your verifiable certificate is ready in My Learning.');\n      await refetchCerts();\n    }\n  };\n\n  const handleEnroll = async () => {\n    if (!id) return;\n    emit('technospam.course.enroll_clicked', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_COURSE',\n    });\n    const res = await enroll({ variables: { input: { courseId: id } } });\n    if (res.data?.tecEnroll) {\n      emit('technospam.course.enrolled', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_COURSE',\n      });\n      notify.success('Enrolled', `You're enrolled in \"${course?.title}\".`);\n      await refetch();\n    }\n  };\n\n  // BOFF-4418: without the live course (offline cold start, or the request\n  // failed) list the lessons saved on this device instead of an error, so a\n  // saved course stays reachable from its own page.\n  const savedOutline = useMemo(\n    () => (course || loading ? null : readSavedCourseOutline(scope, id)),\n    [course, loading, scope, id]\n  );\n\n  // The device reconnected: load the live course again. Only the offline to\n  // online transition triggers it, so a server that keeps failing is not\n  // retried in a loop while the saved outline is shown.\n  const wasOnline = useRef(online);\n  useEffect(() => {\n    const reconnected = online && !wasOnline.current;\n    wasOnline.current = online;\n    if (reconnected && !course) void refetch();\n  }, [online, course, refetch]);\n\n  if (loading && !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        <Skeleton className=\"mb-4 h-40 w-full rounded-2xl\" />\n        <Skeleton className=\"h-64 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (!course && savedOutline) {\n    return (\n      <PageLayout title={savedOutline.course.title} backPath=\"/courses/courses-page\">\n        <SavedCourseOutline\n          outline={savedOutline}\n          online={online}\n          onOpenLesson={(lessonId) => navigate(lessonPlayerPath(id, lessonId))}\n        />\n      </PageLayout>\n    );\n  }\n\n  if (error || !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        {error ? (\n          <ErrorView title=\"Couldn't load course\" error={error} />\n        ) : (\n          <EmptyView\n            title=\"Course not found\"\n            description=\"This course may have been unpublished.\"\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  const completedLessons = myEnrollment?.lessonsCompleted ?? 0;\n  // BOFF-4107: \"Continue\" lands on the first lesson the learner has not\n  // finished (per-lesson completions from the API), or the first lesson to\n  // review once everything is done.\n  const nextLesson = lessons.find((l) => !l.completedByMe) ?? lessons[0];\n  const allDone = lessons.length > 0 && lessons.every((l) => l.completedByMe);\n  const openLesson = (lessonId: string) => navigate(lessonPlayerPath(id, lessonId));\n  const remaining = Math.max(0, lessons.length - completedLessons);\n  const milestone =\n    myEnrollment && myEnrollment.progressPct >= 100\n      ? 'Course complete — claim your certificate below.'\n      : remaining === 1\n        ? '1 lesson to go — almost there!'\n        : `${remaining} lessons to go — keep it up!`;\n  const heroSeed = `${course.topic ?? ''} ${course.title}`;\n\n  return (\n    <PageLayout\n      backPath=\"/courses/courses-page\"\n      title={course.title}\n      description={course.summary ?? undefined}\n      actions={\n        myEnrollment ? (\n          nextLesson ? (\n            <Button onClick={() => openLesson(nextLesson.id)} data-testid=\"continue-learning\">\n              {allDone ? <CheckCircle2 size={16} /> : <ArrowRight size={16} />}\n              {allDone\n                ? 'Review course'\n                : completedLessons > 0\n                  ? 'Continue learning'\n                  : 'Start course'}\n            </Button>\n          ) : null\n        ) : (\n          <Button onClick={handleEnroll} disabled={enrolling}>\n            <BookOpen size={16} /> {enrolling ? 'Enrolling…' : 'Enroll'}\n          </Button>\n        )\n      }\n    >\n      {/* Bold hero banner */}\n      <MediaCover\n        height=\"h-40\"\n        seed={heroSeed}\n        icon={topicIcon(course.topic ?? course.title)}\n        className=\"mb-5 rounded-2xl\"\n      >\n        <div className=\"flex w-full flex-col gap-2\">\n          <span className=\"text-xs font-medium uppercase tracking-wide text-white/80\">\n            {course.topic ?? 'Course'}\n          </span>\n          <h2 className=\"text-2xl font-bold leading-tight text-white drop-shadow-sm sm:text-3xl\">\n            {course.title}\n          </h2>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <HeroBadge icon={TrendingUp}>{humanizeEnum(course.level)}</HeroBadge>\n            <HeroBadge icon={CheckCircle2}>{humanizeEnum(course.status)}</HeroBadge>\n            {course.topic ? <HeroBadge icon={Layers}>{course.topic}</HeroBadge> : null}\n            {course.isPremiumOnly ? <HeroBadge icon={Lock}>Premium</HeroBadge> : null}\n          </div>\n        </div>\n      </MediaCover>\n\n      <TagStrip tags={course.tags} className=\"mb-5\" />\n\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Lessons\" value={lessons.length} icon={FileText} tone=\"blue\" />\n        <StatCard\n          label=\"Duration\"\n          value={formatDuration(course.estimatedMinutes)}\n          icon={Clock}\n          tone=\"teal\"\n        />\n        <StatCard\n          label=\"Enrolled\"\n          value={course.enrollments?.length ?? 0}\n          icon={Users}\n          tone=\"indigo\"\n        />\n        <StatCard\n          label=\"Your progress\"\n          value={myEnrollment ? `${myEnrollment.progressPct}%` : 'Not started'}\n          icon={TrendingUp}\n          tone=\"purple\"\n        />\n      </div>\n\n      {myEnrollment ? (\n        <GlassCard className=\"mb-6 p-5\">\n          <div className=\"mb-3 flex items-center gap-2\">\n            <span className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-accent-primary/15 text-accent-primary\">\n              <TrendingUp size={16} />\n            </span>\n            <span className=\"text-sm font-semibold text-text-primary\">Your progress</span>\n            <span className=\"ml-auto text-sm text-text-secondary\">\n              {completedLessons}/{lessons.length} lessons · {myEnrollment.progressPct}%\n            </span>\n          </div>\n          <div className=\"h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n            <div\n              className=\"h-full rounded-full bg-gradient-to-r from-accent-primary via-accent-indigo to-accent-purple transition-all duration-500\"\n              style={{ width: `${myEnrollment.progressPct}%` }}\n            />\n          </div>\n          <p className=\"mt-2 text-xs text-text-muted\">{milestone}</p>\n        </GlassCard>\n      ) : null}\n\n      {myCertificate ? (\n        <div className=\"mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2\">\n          <GlassCard\n            className={cn(\n              'flex items-center gap-4 border p-5',\n              myCertificate.status === 'REVOKED'\n                ? 'border-status-error-border/60 bg-status-error-bg-subtle/20'\n                : 'border-status-success-border/60 bg-status-success-bg-subtle/30'\n            )}\n          >\n            <span className=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40\">\n              <Trophy size={26} />\n            </span>\n            <div className=\"min-w-0\">\n              <div className=\"text-base font-semibold text-text-primary\">\n                {myCertificate.status === 'REVOKED'\n                  ? 'Your certificate was revoked'\n                  : 'You finished this course'}\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                {myCertificate.status === 'REVOKED'\n                  ? 'Contact a workspace admin if you believe this was a mistake.'\n                  : 'Your verifiable certificate of completion is issued — it also appears in My Learning.'}\n              </div>\n            </div>\n          </GlassCard>\n          <CertificatePreview\n            certificate={myCertificate}\n            learnerName={currentUser?.name ?? undefined}\n            courseTitle={myCertificate.course?.title ?? course.title}\n          />\n        </div>\n      ) : isComplete ? (\n        <GlassCard className=\"mb-6 flex flex-col items-start gap-4 border border-status-success-border/60 bg-status-success-bg-subtle/40 p-5 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-4\">\n            <span className=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40\">\n              <Trophy size={26} />\n            </span>\n            <div>\n              <div className=\"text-base font-semibold text-text-primary\">\n                You finished this course\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                Claim your verifiable certificate of completion.\n              </div>\n            </div>\n          </div>\n          <Button onClick={handleClaimCertificate} disabled={claiming}>\n            <Award size={16} /> {claiming ? 'Issuing…' : 'Claim certificate'}\n          </Button>\n        </GlassCard>\n      ) : null}\n\n      <GlassCard className=\"p-5\">\n        <div className=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 className=\"flex items-center gap-2 text-base font-semibold text-text-primary\">\n            <BookOpen size={18} className=\"text-accent-primary\" /> Curriculum\n            {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n          </h2>\n          <div className=\"flex flex-wrap items-center justify-end gap-2\">\n            {myEnrollment ? (\n              <SaveCourseOffline\n                scope={scope}\n                courseId={course.id}\n                lessons={lessons}\n                enrollment={{ id: myEnrollment.id, progressPct: myEnrollment.progressPct }}\n              />\n            ) : null}\n            {lessons.length ? (\n              <span className=\"rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n                {completedLessons}/{lessons.length} completed\n              </span>\n            ) : null}\n          </div>\n        </div>\n        {course.isLocked ? (\n          <div className=\"mb-4\">\n            <UpgradeGate\n              compact\n              description=\"This course is on a paid TechnoSpam plan. Preview lessons below stay free — the rest unlock once your workspace upgrades.\"\n            />\n          </div>\n        ) : null}\n        {lessons.length === 0 ? (\n          <p className=\"py-6 text-center text-sm text-text-muted\">\n            Lessons for this course are being prepared.\n          </p>\n        ) : (\n          <div className=\"flex flex-col\">\n            {lessons.map((lesson, i) => (\n              <LessonRow\n                key={lesson.id}\n                lesson={lesson}\n                index={i}\n                done={!!lesson.completedByMe}\n                open={openLessonId === lesson.id}\n                onToggle={() => setOpenLessonId(openLessonId === lesson.id ? null : lesson.id)}\n                onStart={() => openLesson(lesson.id)}\n              />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesCourseDetailsPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCourseDetailsPagePage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useSearchParams } from 'react-router';\nimport {\n  ArrowRight,\n  Award,\n  BookOpen,\n  CheckCircle2,\n  ChevronDown,\n  Clock,\n  Eye,\n  FileText,\n  Lock,\n  PlayCircle,\n  Layers,\n  ShieldCheck,\n  Sparkles,\n  Trophy,\n  TrendingUp,\n  Users,\n  type LucideIcon,\n} from 'lucide-react';\nimport { Button, GlassCard, Skeleton } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  MediaCover,\n  PageLayout,\n  CertificateVerifyLink,\n  PremiumBadge,\n  StatCard,\n  TagStrip,\n  UpgradeGate,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport { SaveCourseOffline } from '../components/lesson/SaveCourseOffline';\nimport { SavedCourseOutline } from '../components/lesson/SavedCourseOutline';\nimport { useOnlineStatus, usePurgeOtherUsersLessons } from '../hooks/useOfflineLessons';\nimport { offlineScope, readSavedCourseOutline } from '../lib/offlineLessons';\nimport {\n  useCourseQuery,\n  useEnroll,\n  useIssueCertificate,\n  useMyCertificatesQuery,\n  type TecCertificate,\n  type TecLesson,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDate, formatDuration, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { cn } from '../utils/cn';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { useFocusedRecordParam } from '../hooks/useFocusedRecordParam';\nimport { FOCUS_PARAMS } from '../utils/pageContext';\nimport { lessonPlayerPath } from '../utils/lessonPath';\n\n/** Per-lesson-kind icon + on-theme tint (chip) and pill (badge) classes. */\nconst KIND_META: Record<string, { icon: LucideIcon; chip: string; badge: string }> = {\n  VIDEO: {\n    icon: PlayCircle,\n    chip: 'bg-accent-primary/15 text-accent-primary',\n    badge: 'border-accent-primary/25 bg-accent-primary/6 text-accent-primary',\n  },\n  ARTICLE: {\n    icon: FileText,\n    chip: 'bg-accent-indigo/15 text-accent-indigo',\n    badge: 'border-accent-indigo/25 bg-accent-indigo/10 text-accent-indigo',\n  },\n  INTERACTIVE: {\n    icon: Sparkles,\n    chip: 'bg-accent-teal/15 text-accent-teal',\n    badge: 'border-accent-teal/25 bg-accent-teal/10 text-accent-teal',\n  },\n  QUIZ: {\n    icon: CheckCircle2,\n    chip: 'bg-accent-purple/15 text-accent-purple',\n    badge: 'border-accent-purple/25 bg-accent-purple/10 text-accent-purple',\n  },\n  PROJECT: {\n    icon: Layers,\n    chip: 'bg-status-warning-bg-subtle text-status-warning-text',\n    badge: 'border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text',\n  },\n};\n\nfunction HeroBadge({ icon: Icon, children }: { icon?: LucideIcon; children: ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 rounded-full bg-action-primary-text/15 px-2.5 py-1 text-xs font-medium text-action-primary-text ring-1 ring-action-primary-text/25 backdrop-blur-sm\">\n      {Icon ? <Icon size={12} /> : null}\n      {children}\n    </span>\n  );\n}\n\n/**\n * One curriculum row. Expands in place to reveal the lesson body.\n *\n * `TecLesson.content` is the only lesson body this service exposes to a\n * learner, and the API nulls it server-side whenever `isLocked` is true\n * (BOFF-4416), so the three states below are exhaustive and never guessed:\n * locked → upgrade note, content present → the body, content null on an\n * unlocked lesson → the author simply hasn't written it yet.\n */\nfunction LessonRow({\n  lesson,\n  index,\n  done,\n  open,\n  onToggle,\n  onStart,\n}: {\n  lesson: TecLesson;\n  index: number;\n  done: boolean;\n  /** The open lesson is the focused one (`?lessonId=`), so the assistant can name it. */\n  open: boolean;\n  onToggle: () => void;\n  /** Opens the lesson in the lesson player (BOFF-4107). */\n  onStart: () => void;\n}) {\n  const meta = KIND_META[lesson.kind] ?? KIND_META.ARTICLE!;\n  const Icon = meta.icon;\n  const bodyId = `tec-lesson-body-${lesson.id}`;\n\n  return (\n    <div className=\"border-b border-border-seam last:border-b-0\">\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={bodyId}\n        className=\"group flex w-full items-center gap-3 rounded-xl px-2 py-3 text-left transition-colors hover:bg-bg-sunken/60\"\n      >\n        <span className=\"hidden w-6 shrink-0 text-center text-sm font-medium tabular-nums text-text-muted sm:block\">\n          {index + 1}\n        </span>\n        <span\n          className={cn(\n            'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',\n            done ? 'bg-status-success-bg-subtle text-status-success-text' : meta.chip\n          )}\n        >\n          {done ? <CheckCircle2 size={17} /> : <Icon size={17} />}\n        </span>\n        <div className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-sm font-medium text-text-primary\">\n            {lesson.title}\n          </span>\n          <div className=\"mt-1 flex flex-wrap items-center gap-2\">\n            <span\n              className={cn(\n                'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium',\n                meta.badge\n              )}\n            >\n              {humanizeEnum(lesson.kind)}\n            </span>\n            <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n              <Clock size={12} /> {formatDuration(lesson.estimatedMinutes)}\n            </span>\n          </div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-2\">\n          {done ? (\n            <CheckCircle2 size={18} className=\"text-status-success-text\" />\n          ) : lesson.isPreview ? (\n            <span className=\"inline-flex items-center gap-1 rounded-full border border-accent-primary/30 bg-accent-primary/6 px-2 py-0.5 text-[11px] font-medium text-accent-primary\">\n              <Eye size={12} /> Preview\n            </span>\n          ) : lesson.isLocked ? (\n            // BOFF-4416: distinct from the plain \"not completed yet\" Lock icon\n            // below — this lesson's content is gated behind a paid plan, not\n            // just not-yet-watched. The API already nulled `content`/`file`.\n            <span className=\"inline-flex items-center gap-1 rounded-full border border-status-warning-border/60 bg-status-warning-bg-subtle px-2 py-0.5 text-[11px] font-medium text-status-warning-text\">\n              <Lock size={12} /> Upgrade to unlock\n            </span>\n          ) : (\n            <Lock size={15} className=\"text-text-muted\" />\n          )}\n          <ChevronDown\n            size={16}\n            aria-hidden\n            className={cn(\n              'text-text-muted transition-transform duration-200',\n              open ? 'rotate-180' : ''\n            )}\n          />\n        </div>\n      </button>\n\n      {open ? (\n        <div id={bodyId} className=\"px-2 pb-4 sm:pl-11\">\n          {lesson.isLocked ? (\n            <UpgradeGate\n              compact\n              description=\"This lesson is part of a paid TechnoSpam plan — its content unlocks once your workspace upgrades.\"\n            />\n          ) : (\n            <div className=\"space-y-3\">\n              {lesson.content ? (\n                <div className=\"rounded-xl border border-border-seam bg-bg-sunken p-4\">\n                  <p className=\"line-clamp-6 whitespace-pre-wrap text-sm leading-relaxed text-text-secondary\">\n                    {lesson.content}\n                  </p>\n                </div>\n              ) : null}\n              <Button size=\"sm\" onClick={onStart} data-testid={`open-lesson-${lesson.id}`}>\n                <PlayCircle size={15} /> {done ? 'Review lesson' : 'Start lesson'}\n              </Button>\n            </div>\n          )}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Verifiable certificate face for an already-issued certificate. Every value\n * shown is a real field on the TecCertificate row (`serial`, `score`,\n * `issuedAt`, `status`) plus the course title it was issued against — the\n * learner name comes from the signed-in actor the shell handed us, and is\n * simply omitted when the shell did not supply one.\n */\nfunction CertificatePreview({\n  certificate,\n  learnerName,\n  courseTitle,\n}: {\n  certificate: TecCertificate;\n  learnerName?: string;\n  courseTitle: string;\n}) {\n  const revoked = certificate.status === 'REVOKED';\n  return (\n    <GlassCard className=\"overflow-hidden p-0\">\n      <div className=\"border-b border-border-seam px-5 py-3\">\n        <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">\n          Certificate preview\n        </span>\n      </div>\n      <div className=\"space-y-4 bg-bg-sunken/50 px-5 py-6 text-center\">\n        <div className=\"flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-text-muted\">\n          <Award size={14} className=\"text-status-warning-text\" /> Certificate of completion\n        </div>\n        <h3 className=\"text-lg font-bold text-text-primary\">{courseTitle}</h3>\n        {learnerName ? (\n          <p className=\"text-sm text-text-secondary\">\n            Awarded to <span className=\"font-semibold text-text-primary\">{learnerName}</span>\n          </p>\n        ) : null}\n        <div className=\"grid grid-cols-1 gap-3 border-t border-border-seam pt-4 text-left sm:grid-cols-3\">\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Serial number\n            </div>\n            <div className=\"truncate font-mono text-sm text-text-primary\">{certificate.serial}</div>\n          </div>\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Score\n            </div>\n            <div className=\"text-sm font-semibold text-text-primary\">{certificate.score}</div>\n          </div>\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Issued on\n            </div>\n            <div className=\"text-sm text-text-primary\">{formatDate(certificate.issuedAt)}</div>\n          </div>\n        </div>\n        {revoked ? (\n          <div className=\"rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-left text-xs text-status-error-text\">\n            This certificate was revoked\n            {certificate.revokedAt ? ` on ${formatDate(certificate.revokedAt)}` : ''}\n            {certificate.revokeReason ? ` — ${certificate.revokeReason}` : '.'}\n          </div>\n        ) : (\n          <span className=\"inline-flex items-center gap-1 rounded-full border border-status-success-border bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n            <ShieldCheck size={13} /> Verified\n          </span>\n        )}\n        <CertificateVerifyLink\n          serial={certificate.serial}\n          className=\"border-t border-border-seam pt-4 text-left\"\n        />\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCourseDetailsPagePage() {\n  const [params] = useSearchParams();\n  const id = params.get('id') ?? '';\n  // The expanded lesson lives in `?lessonId=` so the assistant's page context\n  // names it (\"explain this lesson\") and a reload reopens it.\n  const [openLessonId, setOpenLessonId] = useFocusedRecordParam(FOCUS_PARAMS.lesson);\n  const { currentUser, workspaceId } = useTechnoSpam();\n  const navigate = useTechnoSpamNavigate();\n  usePurgeOtherUsersLessons(currentUser?.id);\n  const { emit } = useTechnoSpamAnalytics();\n  const { data, loading, error, refetch } = useCourseQuery(id);\n  const online = useOnlineStatus();\n  const scope = offlineScope(workspaceId, currentUser?.id);\n\n  useEffect(() => {\n    if (id) {\n      emit('technospam.course.viewed', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_COURSE',\n      });\n    }\n  }, [id, workspaceId, emit]);\n\n  const [enroll, { loading: enrolling }] = useEnroll();\n  const course = data?.tecCourse ?? null;\n  // Self-scoped read (BOFF-10481): the learner's own certificates come from the\n  // canonical Buildmyiq field, which filters by the authenticated actor\n  // server-side. It is narrowed to this course by its canonical id once known\n  // and by its Technospam id on the client. A cross-learner list-all read is\n  // not granted to a plain learner, so an already-claimed certificate would\n  // come back empty and the page would keep offering \"Claim certificate\".\n  const { certificates: myCertificates, refetch: refetchCerts } = useMyCertificatesQuery({\n    buiCourseId: course?.buiCourseId,\n    technospamCourseId: id,\n    skip: !id,\n  });\n  const [issueCertificate, { loading: claiming }] = useIssueCertificate();\n\n  const lessons = [...(course?.lessons ?? [])].sort((a, b) => a.position - b.position);\n  const myEnrollment: TecEnrollment | undefined = (course?.enrollments ?? []).find(\n    (e) => e.learnerId === currentUser?.id\n  );\n  const myCertificate = myCertificates.find((c) => c.status === 'ISSUED') ?? myCertificates[0];\n  const isComplete = !!myEnrollment && myEnrollment.progressPct >= 100;\n\n  const handleClaimCertificate = async () => {\n    if (!id || !currentUser?.id) return;\n    emit('technospam.course.certificate_claimed', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_COURSE',\n    });\n    const res = await issueCertificate({\n      variables: { courseId: id, learnerId: currentUser.id, score: 100 },\n    });\n    if (res.data?.tecIssueCertificate) {\n      notify.success('Certificate issued', 'Your verifiable certificate is ready in My Learning.');\n      await refetchCerts();\n    }\n  };\n\n  const handleEnroll = async () => {\n    if (!id) return;\n    emit('technospam.course.enroll_clicked', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_COURSE',\n    });\n    const res = await enroll({ variables: { input: { courseId: id } } });\n    if (res.data?.tecEnroll) {\n      emit('technospam.course.enrolled', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_COURSE',\n      });\n      notify.success('Enrolled', `You're enrolled in \"${course?.title}\".`);\n      await refetch();\n    }\n  };\n\n  // BOFF-4418: without the live course (offline cold start, or the request\n  // failed) list the lessons saved on this device instead of an error, so a\n  // saved course stays reachable from its own page.\n  const savedOutline = useMemo(\n    () => (course || loading ? null : readSavedCourseOutline(scope, id)),\n    [course, loading, scope, id]\n  );\n\n  // The device reconnected: load the live course again. Only the offline to\n  // online transition triggers it, so a server that keeps failing is not\n  // retried in a loop while the saved outline is shown.\n  const wasOnline = useRef(online);\n  useEffect(() => {\n    const reconnected = online && !wasOnline.current;\n    wasOnline.current = online;\n    if (reconnected && !course) void refetch();\n  }, [online, course, refetch]);\n\n  if (loading && !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        <Skeleton className=\"mb-4 h-40 w-full rounded-2xl\" />\n        <Skeleton className=\"h-64 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (!course && savedOutline) {\n    return (\n      <PageLayout title={savedOutline.course.title} backPath=\"/courses/courses-page\">\n        <SavedCourseOutline\n          outline={savedOutline}\n          online={online}\n          onOpenLesson={(lessonId) => navigate(lessonPlayerPath(id, lessonId))}\n        />\n      </PageLayout>\n    );\n  }\n\n  if (error || !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        {error ? (\n          <ErrorView title=\"Couldn't load course\" error={error} />\n        ) : (\n          <EmptyView\n            title=\"Course not found\"\n            description=\"This course may have been unpublished.\"\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  const completedLessons = myEnrollment?.lessonsCompleted ?? 0;\n  // BOFF-4107: \"Continue\" lands on the first lesson the learner has not\n  // finished (per-lesson completions from the API), or the first lesson to\n  // review once everything is done.\n  const nextLesson = lessons.find((l) => !l.completedByMe) ?? lessons[0];\n  const allDone = lessons.length > 0 && lessons.every((l) => l.completedByMe);\n  const openLesson = (lessonId: string) => navigate(lessonPlayerPath(id, lessonId));\n  const remaining = Math.max(0, lessons.length - completedLessons);\n  const milestone =\n    myEnrollment && myEnrollment.progressPct >= 100\n      ? 'Course complete — claim your certificate below.'\n      : remaining === 1\n        ? '1 lesson to go — almost there!'\n        : `${remaining} lessons to go — keep it up!`;\n  const heroSeed = `${course.topic ?? ''} ${course.title}`;\n\n  return (\n    <PageLayout\n      backPath=\"/courses/courses-page\"\n      title={course.title}\n      description={course.summary ?? undefined}\n      actions={\n        myEnrollment ? (\n          nextLesson ? (\n            <Button onClick={() => openLesson(nextLesson.id)} data-testid=\"continue-learning\">\n              {allDone ? <CheckCircle2 size={16} /> : <ArrowRight size={16} />}\n              {allDone\n                ? 'Review course'\n                : completedLessons > 0\n                  ? 'Continue learning'\n                  : 'Start course'}\n            </Button>\n          ) : null\n        ) : (\n          <Button onClick={handleEnroll} disabled={enrolling}>\n            <BookOpen size={16} /> {enrolling ? 'Enrolling…' : 'Enroll'}\n          </Button>\n        )\n      }\n    >\n      {/* Bold hero banner */}\n      <MediaCover\n        height=\"h-40\"\n        seed={heroSeed}\n        icon={topicIcon(course.topic ?? course.title)}\n        className=\"mb-5 rounded-2xl\"\n      >\n        <div className=\"flex w-full flex-col gap-2\">\n          <span className=\"text-xs font-medium uppercase tracking-wide text-action-primary-text/80\">\n            {course.topic ?? 'Course'}\n          </span>\n          <h2 className=\"text-2xl font-bold leading-tight text-action-primary-text drop-shadow-sm sm:text-3xl\">\n            {course.title}\n          </h2>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <HeroBadge icon={TrendingUp}>{humanizeEnum(course.level)}</HeroBadge>\n            <HeroBadge icon={CheckCircle2}>{humanizeEnum(course.status)}</HeroBadge>\n            {course.topic ? <HeroBadge icon={Layers}>{course.topic}</HeroBadge> : null}\n            {course.isPremiumOnly ? <HeroBadge icon={Lock}>Premium</HeroBadge> : null}\n          </div>\n        </div>\n      </MediaCover>\n\n      <TagStrip tags={course.tags} className=\"mb-5\" />\n\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Lessons\" value={lessons.length} icon={FileText} tone=\"blue\" />\n        <StatCard\n          label=\"Duration\"\n          value={formatDuration(course.estimatedMinutes)}\n          icon={Clock}\n          tone=\"teal\"\n        />\n        <StatCard\n          label=\"Enrolled\"\n          value={course.enrollments?.length ?? 0}\n          icon={Users}\n          tone=\"indigo\"\n        />\n        <StatCard\n          label=\"Your progress\"\n          value={myEnrollment ? `${myEnrollment.progressPct}%` : 'Not started'}\n          icon={TrendingUp}\n          tone=\"purple\"\n        />\n      </div>\n\n      {myEnrollment ? (\n        <GlassCard className=\"mb-6 p-5\">\n          <div className=\"mb-3 flex items-center gap-2\">\n            <span className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-accent-primary/15 text-accent-primary\">\n              <TrendingUp size={16} />\n            </span>\n            <span className=\"text-sm font-semibold text-text-primary\">Your progress</span>\n            <span className=\"ml-auto text-sm text-text-secondary\">\n              {completedLessons}/{lessons.length} lessons · {myEnrollment.progressPct}%\n            </span>\n          </div>\n          <div className=\"h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n            <div\n              className=\"h-full rounded-full bg-gradient-to-r from-accent-primary via-accent-indigo to-accent-purple transition-all duration-500\"\n              style={{ width: `${myEnrollment.progressPct}%` }}\n            />\n          </div>\n          <p className=\"mt-2 text-xs text-text-muted\">{milestone}</p>\n        </GlassCard>\n      ) : null}\n\n      {myCertificate ? (\n        <div className=\"mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2\">\n          <GlassCard\n            className={cn(\n              'flex items-center gap-4 border p-5',\n              myCertificate.status === 'REVOKED'\n                ? 'border-status-error-border/60 bg-status-error-bg-subtle/20'\n                : 'border-status-success-border/60 bg-status-success-bg-subtle/30'\n            )}\n          >\n            <span className=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40\">\n              <Trophy size={26} />\n            </span>\n            <div className=\"min-w-0\">\n              <div className=\"text-base font-semibold text-text-primary\">\n                {myCertificate.status === 'REVOKED'\n                  ? 'Your certificate was revoked'\n                  : 'You finished this course'}\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                {myCertificate.status === 'REVOKED'\n                  ? 'Contact a workspace admin if you believe this was a mistake.'\n                  : 'Your verifiable certificate of completion is issued — it also appears in My Learning.'}\n              </div>\n            </div>\n          </GlassCard>\n          <CertificatePreview\n            certificate={myCertificate}\n            learnerName={currentUser?.name ?? undefined}\n            courseTitle={myCertificate.course?.title ?? course.title}\n          />\n        </div>\n      ) : isComplete ? (\n        <GlassCard className=\"mb-6 flex flex-col items-start gap-4 border border-status-success-border/60 bg-status-success-bg-subtle/40 p-5 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-4\">\n            <span className=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40\">\n              <Trophy size={26} />\n            </span>\n            <div>\n              <div className=\"text-base font-semibold text-text-primary\">\n                You finished this course\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                Claim your verifiable certificate of completion.\n              </div>\n            </div>\n          </div>\n          <Button onClick={handleClaimCertificate} disabled={claiming}>\n            <Award size={16} /> {claiming ? 'Issuing…' : 'Claim certificate'}\n          </Button>\n        </GlassCard>\n      ) : null}\n\n      <GlassCard className=\"p-5\">\n        <div className=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 className=\"flex items-center gap-2 text-base font-semibold text-text-primary\">\n            <BookOpen size={18} className=\"text-accent-primary\" /> Curriculum\n            {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n          </h2>\n          <div className=\"flex flex-wrap items-center justify-end gap-2\">\n            {myEnrollment ? (\n              <SaveCourseOffline\n                scope={scope}\n                courseId={course.id}\n                lessons={lessons}\n                enrollment={{ id: myEnrollment.id, progressPct: myEnrollment.progressPct }}\n              />\n            ) : null}\n            {lessons.length ? (\n              <span className=\"rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n                {completedLessons}/{lessons.length} completed\n              </span>\n            ) : null}\n          </div>\n        </div>\n        {course.isLocked ? (\n          <div className=\"mb-4\">\n            <UpgradeGate\n              compact\n              description=\"This course is on a paid TechnoSpam plan. Preview lessons below stay free — the rest unlock once your workspace upgrades.\"\n            />\n          </div>\n        ) : null}\n        {lessons.length === 0 ? (\n          <p className=\"py-6 text-center text-sm text-text-muted\">\n            Lessons for this course are being prepared.\n          </p>\n        ) : (\n          <div className=\"flex flex-col\">\n            {lessons.map((lesson, i) => (\n              <LessonRow\n                key={lesson.id}\n                lesson={lesson}\n                index={i}\n                done={!!lesson.completedByMe}\n                open={openLessonId === lesson.id}\n                onToggle={() => setOpenLessonId(openLessonId === lesson.id ? null : lesson.id)}\n                onStart={() => openLesson(lesson.id)}\n              />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/pages/CoursesCoursesPagePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesCoursesPagePage.d.ts","sourceRoot":"","sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"names":[],"mappings":"AAmFA,wBAAgB,sBAAsB,gCAqLrC"}
+{"version":3,"file":"CoursesCoursesPagePage.d.ts","sourceRoot":"","sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"names":[],"mappings":"AAuHA,wBAAgB,sBAAsB,gCAqMrC"}

package/dist/technospam/pages/CoursesCoursesPagePage.js

@@ -14,60 +14,85 @@ import { CardOpenButton as v } from "../components/CardOpenButton.js";
 import "../components/index.js";
 import { TAB_PANEL_FOCUS_CLASS as y } from "../lib/a11y.js";
 import { useMemo as b, useState as x } from "react";
-import { BookOpen as S, Clock as C, GraduationCap as w, Layers as T, Search as E, Sparkles as D } from "lucide-react";
-import { jsx as O, jsxs as k } from "react/jsx-runtime";
-import { Badge as A, Button as j, GlassCard as M, Input as N, Tabs as P, TabsContent as F, TabsList as I, TabsTrigger as L } from "@burdenoff/fe-libs/ui";
+import { BookOpen as S, ChevronRight as C, Clock as w, GraduationCap as T, Layers as E, Search as D, Sparkles as O } from "lucide-react";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+import { Badge as j, Button as M, GlassCard as N, Input as P, Tabs as F, TabsContent as I, TabsList as L, TabsTrigger as R } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/CoursesCoursesPagePage.tsx
-function R({ course: e, onOpen: t }) {
-	return /* @__PURE__ */ k(M, {
-		className: "group flex cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg",
-		children: [/* @__PURE__ */ O(o, {
+var z = {
+	BEGINNER: "bg-status-success-text",
+	INTERMEDIATE: "bg-accent-primary",
+	ADVANCED: "bg-status-warning-text",
+	EXPERT: "bg-status-error-text"
+};
+function B({ course: e, onOpen: t }) {
+	return /* @__PURE__ */ A(N, {
+		"data-testid": "course-card",
+		className: "group flex cursor-pointer flex-row overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg sm:flex-col",
+		children: [/* @__PURE__ */ k(o, {
 			seed: `${e.topic ?? ""} ${e.title}`,
 			icon: s(e.topic ?? e.title),
-			children: /* @__PURE__ */ k("div", {
-				className: "flex flex-wrap items-center gap-1.5",
-				children: [/* @__PURE__ */ O(l, {
+			className: "h-auto min-h-28 w-24 shrink-0 p-2 sm:h-28 sm:min-h-0 sm:w-auto sm:p-4",
+			children: /* @__PURE__ */ A("div", {
+				className: "hidden flex-wrap items-center gap-1.5 sm:flex",
+				children: [/* @__PURE__ */ k(l, {
 					status: e.level,
 					kind: "level"
-				}), e.isPremiumOnly ? /* @__PURE__ */ O(u, { locked: e.isLocked }) : null]
+				}), e.isPremiumOnly ? /* @__PURE__ */ k(u, { locked: e.isLocked }) : null]
 			})
-		}), /* @__PURE__ */ k("div", {
-			className: "flex flex-1 flex-col gap-3 p-4",
+		}), /* @__PURE__ */ A("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-2 p-3 sm:gap-3 sm:p-4",
 			children: [
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ A("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ O("h3", {
-						className: "truncate text-base font-semibold text-text-primary group-hover:text-accent-primary",
-						children: /* @__PURE__ */ O(v, {
-							onOpen: t,
-							children: e.title
-						})
-					}), e.summary ? /* @__PURE__ */ O("p", {
-						className: "mt-1 line-clamp-2 text-sm text-text-secondary",
-						children: e.summary
-					}) : null]
+					children: [
+						/* @__PURE__ */ A("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ k("h3", {
+								className: "min-w-0 flex-1 truncate text-base font-semibold text-text-primary group-hover:text-accent-primary",
+								children: /* @__PURE__ */ k(v, {
+									onOpen: t,
+									children: e.title
+								})
+							}), /* @__PURE__ */ k(C, {
+								size: 18,
+								"aria-hidden": "true",
+								className: "mt-0.5 shrink-0 text-accent-primary sm:hidden"
+							})]
+						}),
+						/* @__PURE__ */ A("div", {
+							className: "mt-1 flex flex-wrap items-center gap-1.5 sm:hidden",
+							children: [/* @__PURE__ */ k(l, {
+								status: e.level,
+								kind: "level"
+							}), e.isPremiumOnly ? /* @__PURE__ */ k(u, { locked: e.isLocked }) : null]
+						}),
+						e.summary ? /* @__PURE__ */ k("p", {
+							className: "mt-1 line-clamp-2 text-sm text-text-secondary",
+							children: e.summary
+						}) : null
+					]
 				}),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ A("div", {
 					className: "mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted",
-					children: [e.topic ? /* @__PURE__ */ k("span", {
+					children: [e.topic ? /* @__PURE__ */ A("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ O(T, { size: 13 }),
+							/* @__PURE__ */ k(E, { size: 13 }),
 							" ",
 							e.topic
 						]
-					}) : null, /* @__PURE__ */ k("span", {
+					}) : null, /* @__PURE__ */ A("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ O(C, { size: 13 }),
+							/* @__PURE__ */ k(w, { size: 13 }),
 							" ",
 							c(e.estimatedMinutes)
 						]
 					})]
 				}),
-				e.tags.length ? /* @__PURE__ */ O("div", {
+				e.tags.length ? /* @__PURE__ */ k("div", {
 					className: "flex flex-wrap gap-1.5",
-					children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ O(A, {
+					children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ k(j, {
 						variant: "secondary",
 						className: "text-[11px]",
 						children: e
@@ -77,8 +102,8 @@ function R({ course: e, onOpen: t }) {
 		})]
 	});
 }
-function z() {
-	let o = t(), { workspaceId: s } = e(), { emit: l } = n(), u = r(), [v, T] = x("ALL"), [A, M] = x(""), z = b(() => [
+function V() {
+	let o = t(), { workspaceId: s } = e(), { emit: l } = n(), u = r(), [v, C] = x("ALL"), [E, j] = x(""), N = b(() => [
 		{
 			value: "ALL",
 			label: u("technospam.courses.filterAllLevels", "All levels")
@@ -99,77 +124,88 @@ function z() {
 			value: "EXPERT",
 			label: u("technospam.courses.filterExpert", "Expert")
 		}
-	], [u]), { limit: B, more: V } = _(), { data: H, loading: U, error: W } = g({
+	], [u]), { limit: V, more: H } = _(), { data: U, loading: W, error: G } = g({
 		status: "PUBLISHED",
-		pagination: h(B),
+		pagination: h(V),
 		...v === "ALL" ? {} : { level: v }
-	}), G = H?.tecListCourses?.items ?? [], K = H?.tecListCourses?.pageInfo?.hasMore ?? !1, q = b(() => {
-		let e = A.trim().toLowerCase();
-		return e ? G.filter((t) => t.title.toLowerCase().includes(e) || (t.topic ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : G;
-	}, [G, A]);
-	return /* @__PURE__ */ k(i, {
+	}), K = U?.tecListCourses?.items ?? [], q = U?.tecListCourses?.pageInfo?.hasMore ?? !1, J = b(() => {
+		let e = E.trim().toLowerCase();
+		return e ? K.filter((t) => t.title.toLowerCase().includes(e) || (t.topic ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : K;
+	}, [K, E]);
+	return /* @__PURE__ */ A(i, {
 		hero: !0,
+		mobileSection: !0,
 		title: u("technospam.courses.title", "Course Catalog"),
 		description: u("technospam.courses.description", "Learn technology by doing — practical, project-based courses across the stack."),
-		actions: /* @__PURE__ */ k(j, {
+		actions: /* @__PURE__ */ A(M, {
 			variant: "outline",
 			onClick: () => o("/courses/my-learning-page"),
 			children: [
-				/* @__PURE__ */ O(w, { size: 16 }),
+				/* @__PURE__ */ k(T, { size: 16 }),
 				" ",
 				u("technospam.common.myLearning", "My Learning")
 			]
 		}),
-		children: [/* @__PURE__ */ k("div", {
-			className: "mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4",
+		children: [/* @__PURE__ */ A("div", {
+			className: "mb-5 hidden grid-cols-2 gap-3 sm:grid sm:grid-cols-4",
 			children: [
-				/* @__PURE__ */ O(a, {
+				/* @__PURE__ */ k(a, {
 					label: u("technospam.courses.statCourses", "Courses"),
-					value: G.length,
+					value: K.length,
 					icon: S,
 					tone: "blue"
 				}),
-				/* @__PURE__ */ O(a, {
+				/* @__PURE__ */ k(a, {
 					label: u("technospam.courses.statBeginnerFriendly", "Beginner-friendly"),
-					value: G.filter((e) => e.level === "BEGINNER").length,
-					icon: D,
+					value: K.filter((e) => e.level === "BEGINNER").length,
+					icon: O,
 					tone: "green"
 				}),
-				/* @__PURE__ */ O(a, {
+				/* @__PURE__ */ k(a, {
 					label: u("technospam.courses.statAdvancedPlus", "Advanced+"),
-					value: G.filter((e) => e.level === "ADVANCED" || e.level === "EXPERT").length,
-					icon: w,
+					value: K.filter((e) => e.level === "ADVANCED" || e.level === "EXPERT").length,
+					icon: T,
 					tone: "purple"
 				}),
-				/* @__PURE__ */ O(a, {
+				/* @__PURE__ */ k(a, {
 					label: u("technospam.courses.statTotalContent", "Total content"),
-					value: c(G.reduce((e, t) => e + t.estimatedMinutes, 0)),
-					icon: C,
+					value: c(K.reduce((e, t) => e + t.estimatedMinutes, 0)),
+					icon: w,
 					tone: "teal"
 				})
 			]
-		}), /* @__PURE__ */ k(P, {
+		}), /* @__PURE__ */ A(F, {
 			className: "gap-0",
 			value: v,
-			onValueChange: (e) => T(e),
-			children: [/* @__PURE__ */ k("div", {
+			onValueChange: (e) => C(e),
+			children: [/* @__PURE__ */ A("div", {
 				className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ O(I, { children: z.map((e) => /* @__PURE__ */ O(L, {
-					value: e.value,
-					children: e.label
-				}, e.value)) }), /* @__PURE__ */ k("div", {
+				children: [/* @__PURE__ */ k("div", {
+					className: "-mx-4 overflow-x-auto px-4 sm:mx-0 sm:overflow-visible sm:px-0",
+					children: /* @__PURE__ */ k(L, {
+						className: "h-auto w-max gap-1.5 bg-transparent p-0 sm:h-9 sm:gap-0 sm:bg-bg-sunken sm:p-[3px]",
+						children: N.map((e) => /* @__PURE__ */ A(R, {
+							value: e.value,
+							className: "min-h-11 flex-none gap-1.5 rounded-full border-border-subtle px-4 data-[state=active]:border-accent-primary sm:min-h-0 sm:flex-1 sm:rounded-button sm:border-transparent sm:px-3 sm:data-[state=active]:border-transparent",
+							children: [z[e.value] ? /* @__PURE__ */ k("span", {
+								"aria-hidden": "true",
+								className: `h-2 w-2 rounded-full sm:hidden ${z[e.value]}`
+							}) : null, e.label]
+						}, e.value))
+					})
+				}), /* @__PURE__ */ A("div", {
 					className: "relative w-full sm:w-72",
-					children: [/* @__PURE__ */ O(E, {
+					children: [/* @__PURE__ */ k(D, {
 						className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted",
 						size: 16
-					}), /* @__PURE__ */ O(N, {
+					}), /* @__PURE__ */ k(P, {
 						className: "pl-9",
 						"aria-label": u("technospam.courses.searchLabel", "Search courses"),
 						placeholder: u("technospam.courses.searchPlaceholder", "Search courses…"),
-						value: A,
-						onChange: (e) => M(e.target.value),
+						value: E,
+						onChange: (e) => j(e.target.value),
 						onBlur: () => {
-							let e = A.trim();
+							let e = E.trim();
 							e && l("technospam.search.performed", {
 								workspaceId: s,
 								entityType: "course",
@@ -178,19 +214,19 @@ function z() {
 						}
 					})]
 				})]
-			}), /* @__PURE__ */ k(F, {
+			}), /* @__PURE__ */ A(I, {
 				value: v,
 				className: y,
-				children: [U && !G.length ? /* @__PURE__ */ O(m, {}) : W ? /* @__PURE__ */ O(p, {
+				children: [W && !K.length ? /* @__PURE__ */ k(m, {}) : G ? /* @__PURE__ */ k(p, {
 					title: u("technospam.common.errorLoadCourses", "Couldn't load courses"),
-					error: W
-				}) : q.length === 0 ? /* @__PURE__ */ O(f, {
-					icon: /* @__PURE__ */ O(S, { size: 26 }),
-					title: A || v !== "ALL" ? u("technospam.courses.emptySearchTitle", "No matching courses") : u("technospam.courses.emptyDefaultTitle", "No courses published yet"),
-					description: A || v !== "ALL" ? u("technospam.courses.emptySearchDesc", "Try a different search or level filter.") : u("technospam.courses.emptyDefaultDesc", "Published courses will appear here. Check back soon — TechnoSpam is pre-launch.")
-				}) : /* @__PURE__ */ O("div", {
+					error: G
+				}) : J.length === 0 ? /* @__PURE__ */ k(f, {
+					icon: /* @__PURE__ */ k(S, { size: 26 }),
+					title: E || v !== "ALL" ? u("technospam.courses.emptySearchTitle", "No matching courses") : u("technospam.courses.emptyDefaultTitle", "No courses published yet"),
+					description: E || v !== "ALL" ? u("technospam.courses.emptySearchDesc", "Try a different search or level filter.") : u("technospam.courses.emptyDefaultDesc", "Published courses will appear here. Check back soon — TechnoSpam is pre-launch.")
+				}) : /* @__PURE__ */ k("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-					children: q.map((e) => /* @__PURE__ */ O(R, {
+					children: J.map((e) => /* @__PURE__ */ k(B, {
 						course: e,
 						onOpen: () => {
 							l("technospam.course.viewed", {
@@ -200,16 +236,16 @@ function z() {
 							}), o(`/courses/course-details-page?id=${e.id}`);
 						}
 					}, e.id))
-				}), /* @__PURE__ */ O(d, {
-					hasMore: K,
-					loading: U,
-					onClick: V
+				}), /* @__PURE__ */ k(d, {
+					hasMore: q,
+					loading: W,
+					onClick: H
 				})]
 			})]
 		})]
 	});
 }
 //#endregion
-export { z as CoursesCoursesPagePage };
+export { V as CoursesCoursesPagePage };
 
 //# sourceMappingURL=CoursesCoursesPagePage.js.map

package/dist/technospam/pages/CoursesCoursesPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesCoursesPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { BookOpen, Clock, GraduationCap, Layers, Search, Sparkles } from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Input,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport { TAB_PANEL_FOCUS_CLASS } from '../lib/a11y';\nimport {\n  CardOpenButton,\n  EmptyView,\n  ErrorView,\n  LoadMore,\n  LoadingGrid,\n  MediaCover,\n  PageLayout,\n  PremiumBadge,\n  StatCard,\n  StatusBadge,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  pageArg,\n  useCoursesQuery,\n  usePageLimit,\n  type TecCourse,\n  type TecCourseLevel,\n} from '../api/technospamApi';\nimport { formatDuration } from '../utils/format';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { useTr } from '../hooks/useTr';\n\nfunction CourseCard({ course, onOpen }: { course: TecCourse; onOpen: () => void }) {\n  return (\n    <GlassCard className=\"group flex cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg\">\n      <MediaCover\n        seed={`${course.topic ?? ''} ${course.title}`}\n        icon={topicIcon(course.topic ?? course.title)}\n      >\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          <StatusBadge status={course.level} kind=\"level\" />\n          {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n        </div>\n      </MediaCover>\n      <div className=\"flex flex-1 flex-col gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n            <CardOpenButton onOpen={onOpen}>{course.title}</CardOpenButton>\n          </h3>\n          {course.summary ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{course.summary}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {course.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {course.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Clock size={13} /> {formatDuration(course.estimatedMinutes)}\n          </span>\n        </div>\n        {course.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {course.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCoursesPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { workspaceId } = useTechnoSpam();\n  const { emit } = useTechnoSpamAnalytics();\n  const tr = useTr();\n  const [level, setLevel] = useState<'ALL' | TecCourseLevel>('ALL');\n  const [search, setSearch] = useState('');\n\n  const levels = useMemo(\n    () => [\n      { value: 'ALL' as const, label: tr('technospam.courses.filterAllLevels', 'All levels') },\n      {\n        value: 'BEGINNER' as TecCourseLevel,\n        label: tr('technospam.courses.filterBeginner', 'Beginner'),\n      },\n      {\n        value: 'INTERMEDIATE' as TecCourseLevel,\n        label: tr('technospam.courses.filterIntermediate', 'Intermediate'),\n      },\n      {\n        value: 'ADVANCED' as TecCourseLevel,\n        label: tr('technospam.courses.filterAdvanced', 'Advanced'),\n      },\n      { value: 'EXPERT' as TecCourseLevel, label: tr('technospam.courses.filterExpert', 'Expert') },\n    ],\n    [tr]\n  );\n\n  const { limit, more } = usePageLimit();\n  const { data, loading, error } = useCoursesQuery({\n    status: 'PUBLISHED',\n    pagination: pageArg(limit),\n    ...(level !== 'ALL' ? { level } : {}),\n  });\n\n  const courses = data?.tecListCourses?.items ?? [];\n  const hasMore = data?.tecListCourses?.pageInfo?.hasMore ?? false;\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return courses;\n    return courses.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        (c.topic ?? '').toLowerCase().includes(q) ||\n        c.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [courses, search]);\n\n  return (\n    <PageLayout\n      hero\n      title={tr('technospam.courses.title', 'Course Catalog')}\n      description={tr(\n        'technospam.courses.description',\n        'Learn technology by doing — practical, project-based courses across the stack.'\n      )}\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> {tr('technospam.common.myLearning', 'My Learning')}\n        </Button>\n      }\n    >\n      <div className=\"mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard\n          label={tr('technospam.courses.statCourses', 'Courses')}\n          value={courses.length}\n          icon={BookOpen}\n          tone=\"blue\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statBeginnerFriendly', 'Beginner-friendly')}\n          value={courses.filter((c) => c.level === 'BEGINNER').length}\n          icon={Sparkles}\n          tone=\"green\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statAdvancedPlus', 'Advanced+')}\n          value={courses.filter((c) => c.level === 'ADVANCED' || c.level === 'EXPERT').length}\n          icon={GraduationCap}\n          tone=\"purple\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statTotalContent', 'Total content')}\n          value={formatDuration(courses.reduce((s, c) => s + c.estimatedMinutes, 0))}\n          icon={Clock}\n          tone=\"teal\"\n        />\n      </div>\n\n      {/* The tabs filter one list, so that list is their tab panel: Radix points every\n          trigger's aria-controls at a panel id, and without a TabsContent the id\n          resolved to nothing (axe aria-valid-attr-value, critical; BOFF-3157). */}\n      <Tabs\n        className=\"gap-0\"\n        value={level}\n        onValueChange={(v) => setLevel(v as 'ALL' | TecCourseLevel)}\n      >\n        <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <TabsList>\n            {levels.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          <div className=\"relative w-full sm:w-72\">\n            <Search\n              className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n              size={16}\n            />\n            <Input\n              className=\"pl-9\"\n              aria-label={tr('technospam.courses.searchLabel', 'Search courses')}\n              placeholder={tr('technospam.courses.searchPlaceholder', 'Search courses…')}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onBlur={() => {\n                const value = search.trim();\n                if (value) {\n                  emit('technospam.search.performed', {\n                    workspaceId,\n                    entityType: 'course',\n                    queryLength: value.length,\n                  });\n                }\n              }}\n            />\n          </div>\n        </div>\n\n        <TabsContent value={level} className={TAB_PANEL_FOCUS_CLASS}>\n          {loading && !courses.length ? (\n            <LoadingGrid />\n          ) : error ? (\n            <ErrorView\n              title={tr('technospam.common.errorLoadCourses', \"Couldn't load courses\")}\n              error={error}\n            />\n          ) : filtered.length === 0 ? (\n            <EmptyView\n              icon={<BookOpen size={26} />}\n              title={\n                search || level !== 'ALL'\n                  ? tr('technospam.courses.emptySearchTitle', 'No matching courses')\n                  : tr('technospam.courses.emptyDefaultTitle', 'No courses published yet')\n              }\n              description={\n                search || level !== 'ALL'\n                  ? tr(\n                      'technospam.courses.emptySearchDesc',\n                      'Try a different search or level filter.'\n                    )\n                  : tr(\n                      'technospam.courses.emptyDefaultDesc',\n                      'Published courses will appear here. Check back soon — TechnoSpam is pre-launch.'\n                    )\n              }\n            />\n          ) : (\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n              {filtered.map((course) => (\n                <CourseCard\n                  key={course.id}\n                  course={course}\n                  onOpen={() => {\n                    emit('technospam.course.viewed', {\n                      workspaceId,\n                      entityId: course.id,\n                      entityType: 'TEC_COURSE',\n                    });\n                    navigate(`/courses/course-details-page?id=${course.id}`);\n                  }}\n                />\n              ))}\n            </div>\n          )}\n          <LoadMore hasMore={hasMore} loading={loading} onClick={more} />\n        </TabsContent>\n      </Tabs>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesCoursesPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n  BookOpen,\n  ChevronRight,\n  Clock,\n  GraduationCap,\n  Layers,\n  Search,\n  Sparkles,\n} from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Input,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport { TAB_PANEL_FOCUS_CLASS } from '../lib/a11y';\nimport {\n  CardOpenButton,\n  EmptyView,\n  ErrorView,\n  LoadMore,\n  LoadingGrid,\n  MediaCover,\n  PageLayout,\n  PremiumBadge,\n  StatCard,\n  StatusBadge,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  pageArg,\n  useCoursesQuery,\n  usePageLimit,\n  type TecCourse,\n  type TecCourseLevel,\n} from '../api/technospamApi';\nimport { formatDuration } from '../utils/format';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { useTr } from '../hooks/useTr';\n\n/** Dot colour per level for the phone filter chips (mock technospam-19). */\nconst LEVEL_DOT: Partial<Record<'ALL' | TecCourseLevel, string>> = {\n  BEGINNER: 'bg-status-success-text',\n  INTERMEDIATE: 'bg-accent-primary',\n  ADVANCED: 'bg-status-warning-text',\n  EXPERT: 'bg-status-error-text',\n};\n\n/**\n * Catalog card. Phones get the mock's compact row (cover tile on the left,\n * level chip, summary, duration and tags on the right, a chevron affordance);\n * from `sm` up it is the vertical grid card.\n */\nfunction CourseCard({ course, onOpen }: { course: TecCourse; onOpen: () => void }) {\n  return (\n    <GlassCard\n      data-testid=\"course-card\"\n      className=\"group flex cursor-pointer flex-row overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg sm:flex-col\"\n    >\n      <MediaCover\n        seed={`${course.topic ?? ''} ${course.title}`}\n        icon={topicIcon(course.topic ?? course.title)}\n        className=\"h-auto min-h-28 w-24 shrink-0 p-2 sm:h-28 sm:min-h-0 sm:w-auto sm:p-4\"\n      >\n        <div className=\"hidden flex-wrap items-center gap-1.5 sm:flex\">\n          <StatusBadge status={course.level} kind=\"level\" />\n          {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n        </div>\n      </MediaCover>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2 p-3 sm:gap-3 sm:p-4\">\n        <div className=\"min-w-0\">\n          <div className=\"flex items-start gap-2\">\n            <h3 className=\"min-w-0 flex-1 truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n              <CardOpenButton onOpen={onOpen}>{course.title}</CardOpenButton>\n            </h3>\n            <ChevronRight\n              size={18}\n              aria-hidden=\"true\"\n              className=\"mt-0.5 shrink-0 text-accent-primary sm:hidden\"\n            />\n          </div>\n          <div className=\"mt-1 flex flex-wrap items-center gap-1.5 sm:hidden\">\n            <StatusBadge status={course.level} kind=\"level\" />\n            {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n          </div>\n          {course.summary ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{course.summary}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {course.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {course.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Clock size={13} /> {formatDuration(course.estimatedMinutes)}\n          </span>\n        </div>\n        {course.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {course.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCoursesPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { workspaceId } = useTechnoSpam();\n  const { emit } = useTechnoSpamAnalytics();\n  const tr = useTr();\n  const [level, setLevel] = useState<'ALL' | TecCourseLevel>('ALL');\n  const [search, setSearch] = useState('');\n\n  const levels = useMemo(\n    () => [\n      { value: 'ALL' as const, label: tr('technospam.courses.filterAllLevels', 'All levels') },\n      {\n        value: 'BEGINNER' as TecCourseLevel,\n        label: tr('technospam.courses.filterBeginner', 'Beginner'),\n      },\n      {\n        value: 'INTERMEDIATE' as TecCourseLevel,\n        label: tr('technospam.courses.filterIntermediate', 'Intermediate'),\n      },\n      {\n        value: 'ADVANCED' as TecCourseLevel,\n        label: tr('technospam.courses.filterAdvanced', 'Advanced'),\n      },\n      { value: 'EXPERT' as TecCourseLevel, label: tr('technospam.courses.filterExpert', 'Expert') },\n    ],\n    [tr]\n  );\n\n  const { limit, more } = usePageLimit();\n  const { data, loading, error } = useCoursesQuery({\n    status: 'PUBLISHED',\n    pagination: pageArg(limit),\n    ...(level !== 'ALL' ? { level } : {}),\n  });\n\n  const courses = data?.tecListCourses?.items ?? [];\n  const hasMore = data?.tecListCourses?.pageInfo?.hasMore ?? false;\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return courses;\n    return courses.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        (c.topic ?? '').toLowerCase().includes(q) ||\n        c.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [courses, search]);\n\n  return (\n    <PageLayout\n      hero\n      mobileSection\n      title={tr('technospam.courses.title', 'Course Catalog')}\n      description={tr(\n        'technospam.courses.description',\n        'Learn technology by doing — practical, project-based courses across the stack.'\n      )}\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> {tr('technospam.common.myLearning', 'My Learning')}\n        </Button>\n      }\n    >\n      {/* Catalog stats are a desktop summary; phones go straight to the list. */}\n      <div className=\"mb-5 hidden grid-cols-2 gap-3 sm:grid sm:grid-cols-4\">\n        <StatCard\n          label={tr('technospam.courses.statCourses', 'Courses')}\n          value={courses.length}\n          icon={BookOpen}\n          tone=\"blue\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statBeginnerFriendly', 'Beginner-friendly')}\n          value={courses.filter((c) => c.level === 'BEGINNER').length}\n          icon={Sparkles}\n          tone=\"green\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statAdvancedPlus', 'Advanced+')}\n          value={courses.filter((c) => c.level === 'ADVANCED' || c.level === 'EXPERT').length}\n          icon={GraduationCap}\n          tone=\"purple\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statTotalContent', 'Total content')}\n          value={formatDuration(courses.reduce((s, c) => s + c.estimatedMinutes, 0))}\n          icon={Clock}\n          tone=\"teal\"\n        />\n      </div>\n\n      {/* The tabs filter one list, so that list is their tab panel: Radix points every\n          trigger's aria-controls at a panel id, and without a TabsContent the id\n          resolved to nothing (axe aria-valid-attr-value, critical; BOFF-3157). */}\n      <Tabs\n        className=\"gap-0\"\n        value={level}\n        onValueChange={(v) => setLevel(v as 'ALL' | TecCourseLevel)}\n      >\n        <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          {/* Phones: a horizontally scrolling row of level chips with 44px\n              touch targets; from sm up the regular segmented tabs. */}\n          <div className=\"-mx-4 overflow-x-auto px-4 sm:mx-0 sm:overflow-visible sm:px-0\">\n            <TabsList className=\"h-auto w-max gap-1.5 bg-transparent p-0 sm:h-9 sm:gap-0 sm:bg-bg-sunken sm:p-[3px]\">\n              {levels.map((l) => (\n                <TabsTrigger\n                  key={l.value}\n                  value={l.value}\n                  className=\"min-h-11 flex-none gap-1.5 rounded-full border-border-subtle px-4 data-[state=active]:border-accent-primary sm:min-h-0 sm:flex-1 sm:rounded-button sm:border-transparent sm:px-3 sm:data-[state=active]:border-transparent\"\n                >\n                  {LEVEL_DOT[l.value] ? (\n                    <span\n                      aria-hidden=\"true\"\n                      className={`h-2 w-2 rounded-full sm:hidden ${LEVEL_DOT[l.value]}`}\n                    />\n                  ) : null}\n                  {l.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </div>\n          <div className=\"relative w-full sm:w-72\">\n            <Search\n              className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n              size={16}\n            />\n            <Input\n              className=\"pl-9\"\n              aria-label={tr('technospam.courses.searchLabel', 'Search courses')}\n              placeholder={tr('technospam.courses.searchPlaceholder', 'Search courses…')}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onBlur={() => {\n                const value = search.trim();\n                if (value) {\n                  emit('technospam.search.performed', {\n                    workspaceId,\n                    entityType: 'course',\n                    queryLength: value.length,\n                  });\n                }\n              }}\n            />\n          </div>\n        </div>\n\n        <TabsContent value={level} className={TAB_PANEL_FOCUS_CLASS}>\n          {loading && !courses.length ? (\n            <LoadingGrid />\n          ) : error ? (\n            <ErrorView\n              title={tr('technospam.common.errorLoadCourses', \"Couldn't load courses\")}\n              error={error}\n            />\n          ) : filtered.length === 0 ? (\n            <EmptyView\n              icon={<BookOpen size={26} />}\n              title={\n                search || level !== 'ALL'\n                  ? tr('technospam.courses.emptySearchTitle', 'No matching courses')\n                  : tr('technospam.courses.emptyDefaultTitle', 'No courses published yet')\n              }\n              description={\n                search || level !== 'ALL'\n                  ? tr(\n                      'technospam.courses.emptySearchDesc',\n                      'Try a different search or level filter.'\n                    )\n                  : tr(\n                      'technospam.courses.emptyDefaultDesc',\n                      'Published courses will appear here. Check back soon — TechnoSpam is pre-launch.'\n                    )\n              }\n            />\n          ) : (\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n              {filtered.map((course) => (\n                <CourseCard\n                  key={course.id}\n                  course={course}\n                  onOpen={() => {\n                    emit('technospam.course.viewed', {\n                      workspaceId,\n                      entityId: course.id,\n                      entityType: 'TEC_COURSE',\n                    });\n                    navigate(`/courses/course-details-page?id=${course.id}`);\n                  }}\n                />\n              ))}\n            </div>\n          )}\n          <LoadMore hasMore={hasMore} loading={loading} onClick={more} />\n        </TabsContent>\n      </Tabs>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/pages/CoursesMyLearningPagePage.js

@@ -24,7 +24,7 @@ function k({ e, onOpen: n, focused: r, onToggle: o }) {
 		..._(r, o),
 		children: [
 			/* @__PURE__ */ T("span", {
-				className: t("flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white shadow-sm transition-transform duration-200 group-hover:scale-105", i(l)),
+				className: t("flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-action-primary-text shadow-sm transition-transform duration-200 group-hover:scale-105", i(l)),
 				children: y(a(l), { size: 20 })
 			}),
 			/* @__PURE__ */ E("div", {