feat: live class sessions, CE workflow, and docs (#683)

Adds live-class session scheduling on lessons (join link, date/time, timezone) with automatic 24h and 1h reminder emails plus a calendar invite (.ics), a time-change notification with an updated invite, a teacher-authored welcome email and session invite on enrollment, and a "Notify students" quiz nudge. LMS gets an upcoming live-sessions card and Join buttons, plus a reusable live-session card component (3 states) in @cio/ui with a Storybook story. The sidebar content tree now reflects sequential progression locking like the content list, and the course-completion confetti regression is fixed. Org-based emails no longer reference ClassroomIO by name. Docs add live-class, welcome-email, and course-progression guides, expand the certificates guide (design, signatures, corrected labels), move plan-required callouts to the top, flatten how-to-guides to the docs root with redirects, and add screenshots. Includes an add-docs-image skill.
2026-06-22 05:43:48 +01:00
parent 3547901de6
commit 81294a47f9
193 changed files with 5477 additions and 805 deletions
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { Button } from '@cio/ui/base/button';
+  import { RadioIcon } from '@cio/ui/custom/moving-icons';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import VideoIcon from '@lucide/svelte/icons/video';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface SessionItem {
+    lessonId: string;
+    courseTitle: string;
+    lessonTitle: string;
+    callUrl: string;
+    lessonAt: string;
+    timezone?: string | null;
+  }
+
+  let { sessions }: { sessions: SessionItem[] } = $props();
+
+  function dateLabel(iso: string, tz?: string | null): string {
+    try {
+      return new Intl.DateTimeFormat('en-US', {
+        timeZone: tz || Intl.DateTimeFormat().resolvedOptions().timeZone,
+        dateStyle: 'medium',
+        timeStyle: 'short'
+      }).format(new Date(iso));
+    } catch {
+      return new Date(iso).toUTCString();
+    }
+  }
+</script>
+
+{#if sessions.length}
+  <section class="ui:bg-card ui:text-card-foreground ui:border-primary/30 rounded border p-4">
+    <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold">
+      <RadioIcon size={16} color="#ef4444" />
+      {$t('dashboard.upcoming_sessions_heading')}
+    </h3>
+
+    <ul class="space-y-3">
+      {#each sessions as session (session.lessonId)}
+        <li class="flex items-center justify-between gap-3">
+          <div class="min-w-0">
+            <p class="truncate text-sm font-medium">{session.lessonTitle}</p>
+            <p class="ui:text-muted-foreground flex items-center gap-1.5 truncate text-xs">
+              <ClockIcon size={12} class="shrink-0" />
+              {dateLabel(session.lessonAt, session.timezone)} · {session.courseTitle}
+            </p>
+          </div>
+          <a href={session.callUrl} target="_blank" rel="noreferrer" class="shrink-0">
+            <Button size="sm"><VideoIcon size={14} />{$t('course.navItem.lessons.session.join')}</Button>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </section>
+{/if}