@lincyaw/addon-classroom 0.0.0-stage → 1.0.0-rc.2

package/src/client/ClassroomPanel.tsx

@@ -0,0 +1,213 @@
+import { Fragment, useState, useRef, useEffect, useMemo, useId } from 'react'
+import type { ReactNode } from 'react'
+import { useMessages, useSectionConfig } from '@lincyaw/host'
+import {
+  CLASSROOM_ID,
+  classroomRows,
+  COLLECTIONS,
+  exerciseTallyText,
+  MESSAGES,
+  placeText,
+  questionsByPlace,
+  toAnswer,
+  toPrediction,
+  toPulseVote,
+  toQuestion,
+  toQuizState,
+  toSectionNumbers,
+  toSubmission,
+  unansweredCount,
+} from '../domain/index.ts'
+import type { Question } from '../domain/index.ts'
+import { useAiAnswers } from './ai-answers.ts'
+import { useClassroomStore, useCollection, useGuardedWrite, useParticipation } from './composables.ts'
+import QuestionItem from './QuestionItem.tsx'
+import './style.css'
+import './ClassroomPanel.css'
+export default function ClassroomPanel(props: {
+  children?: ReactNode
+  className?: string
+  onDone?(): void
+  onCited?(): void
+}) {
+  const { status, presenter } = useParticipation()
+  const store = useClassroomStore()
+  const from = () => store
+  const questions = useCollection(from, COLLECTIONS.questions, toQuestion)
+  const votes = useCollection(from, COLLECTIONS.pulse, toPulseVote)
+  const quizzes = useCollection(from, COLLECTIONS.quizzes, toQuizState)
+  const answers = useCollection(from, COLLECTIONS.answers, toAnswer)
+  const submissions = useCollection(from, COLLECTIONS.submissions, toSubmission)
+  const predictions = useCollection(from, COLLECTIONS.predictions, toPrediction)
+  const { failure, write } = useGuardedWrite()
+  const t = useMessages(MESSAGES)
+  const ai = useAiAnswers()
+
+  const config = useSectionConfig(CLASSROOM_ID)
+  const numbers = toSectionNumbers(config)
+
+  const questionGroups = questionsByPlace(
+    questions.map(({ id, value }) => ({ ...value, id })),
+    t,
+    numbers,
+  )
+  const unanswered = unansweredCount(questions.map((item) => item.value))
+
+  const rows = classroomRows({
+    quizzes: quizzes.map(({ id, value }) => ({ ...value, id })),
+    answers: answers.map((item) => item.value),
+    predictions: predictions.map((item) => item.value),
+    votes: votes.map((item) => item.value),
+    submissions: submissions.map((item) => item.value),
+    numbers: numbers,
+  })
+
+  const pulses = rows.pulse.map((row) => ({
+    id: row.id,
+    place: placeText(row, t),
+    levels: row.levels.map((level, i) => `${level} ${t.people(row.counts[i]!)}`).join(t.panel.levels),
+  }))
+
+  const quizRows = rows.quizzes.map((row) => ({
+    id: row.id,
+    text: t.panel.quiz(placeText(row, t), row.open, row.tally.respondents, row.tally.correct),
+  }))
+
+  const predicted = rows.predictions.map((row) => ({
+    id: row.id,
+    place: t.panel.predicted(placeText(row, t), row.tally.respondents),
+    question: row.question,
+    choices: (row.choices ?? []).map((choice, i) => ({ choice, count: row.tally.counts[i]! })),
+    texts: row.tally.texts,
+  }))
+
+  const exercises = rows.exercises.map((row) => ({
+    id: row.id,
+    text: t.panel.exercise(placeText(row, t), exerciseTallyText(row.tally, t)),
+  }))
+
+  function toggleAnswered(question: Question & { id: string }): void {
+    const { id, ...value } = question
+    write(() => store?.put<Question>(COLLECTIONS.questions, id, { ...value, answered: !value.answered }))
+  }
+
+  function sendReply(question: Question & { id: string }): void {
+    const draft = ai.drafts.get(question.id)
+    if (draft?.state !== 'ready') return
+    const { id, ...value } = question
+    const sent = write(() =>
+      store?.put<Question>(COLLECTIONS.questions, id, {
+        ...value,
+        answered: true,
+        reply: { text: draft.text, ...(draft.provider ? { provider: draft.provider } : {}), at: Date.now() },
+      }),
+    )
+    if (sent) ai.discard(id)
+  }
+
+  return (
+    <>
+      <div className="pm-classroom-panel">
+        {!presenter ? (
+          <p className="pm-classroom-status">{t.panel.waiting}</p>
+        ) : (
+          <>
+            <section aria-label={t.panel.questions}>
+              <h4 className="pm-ui-heading">{t.panel.unanswered(unanswered)}</h4>
+              {!questionGroups.length ? (
+                <p className="pm-classroom-status">{t.panel.none}</p>
+              ) : status === 'active' && ai.offered && !ai.provider ? (
+                <p className="pm-classroom-status pm-classroom-panel__ai-setup">{t.questions.aiSetup}</p>
+              ) : null}
+              {questionGroups.map((group) => (
+                <div
+                  key={group.label}
+                  className="pm-classroom-panel__place"
+                  data-section={group.section}
+                  data-block={group.block}
+                >
+                  <p className="pm-classroom-panel__where">{group.label}</p>
+                  <ul>
+                    {group.questions.map((q) => (
+                      <QuestionItem
+                        key={q.id}
+                        question={q}
+                        active={status === 'active'}
+                        ai={ai}
+                        onToggleAnswered={() => {
+                          toggleAnswered(q)
+                        }}
+                        onSend={() => {
+                          sendReply(q)
+                        }}
+                      ></QuestionItem>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </section>
+            {pulses.length ? (
+              <section aria-label={t.panel.pulse}>
+                <h4 className="pm-ui-heading">{t.panel.pulse}</h4>
+                {pulses.map((pulse) => (
+                  <div key={pulse.id} className="pm-classroom-panel__place" data-pulse={pulse.id}>
+                    <p className="pm-classroom-panel__where">{pulse.place}</p>
+                    <p className="pm-classroom-panel__levels">{pulse.levels}</p>
+                  </div>
+                ))}
+              </section>
+            ) : null}
+            {quizRows.length ? (
+              <section aria-label={t.panel.quizzes}>
+                <h4 className="pm-ui-heading">{t.panel.quizzes}</h4>
+                {quizRows.map((quiz) => (
+                  <p key={quiz.id} className="pm-classroom-panel__place" data-quiz={quiz.id}>
+                    {quiz.text}
+                  </p>
+                ))}
+              </section>
+            ) : null}
+            {predicted.length ? (
+              <section aria-label={t.panel.predictions}>
+                <h4 className="pm-ui-heading">{t.panel.predictions}</h4>
+                {predicted.map((item) => (
+                  <div key={item.id} className="pm-classroom-panel__place" data-predict={item.id}>
+                    <p className="pm-classroom-panel__where">{item.place}</p>
+                    <p>{item.question}</p>
+                    <ul>
+                      {item.choices.map(({ choice, count }, i) => (
+                        <li key={i} data-choice={choice} data-count={count}>
+                          {choice}
+                          {t.colon}
+                          {t.people(count)}
+                        </li>
+                      ))}
+                      {item.texts.map((text, i) => (
+                        <li key={i}>{text}</li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </section>
+            ) : null}
+            {exercises.length ? (
+              <section aria-label={t.panel.exercises}>
+                <h4 className="pm-ui-heading">{t.panel.exercises}</h4>
+                {exercises.map((exercise) => (
+                  <p key={exercise.id} className="pm-classroom-panel__place" data-exercise={exercise.id}>
+                    {exercise.text}
+                  </p>
+                ))}
+              </section>
+            ) : null}
+          </>
+        )}
+        {failure ? (
+          <p className="pm-classroom-error" role="alert">
+            {failure}
+          </p>
+        ) : null}
+      </div>
+    </>
+  )
+}

package/src/client/ClassroomToolbar.css

@@ -0,0 +1,26 @@
+.pm-classroom-toolbar {
+  display: inline-flex;
+  align-items: center;
+}
+.pm-classroom-toolbar__badge {
+  margin-left: 0.125rem;
+}
+.pm-classroom-popover {
+  box-sizing: border-box;
+  width: min(26rem, calc(100vw - 2rem));
+  max-height: 75vh;
+  margin: 0;
+  overflow: auto;
+  padding: var(--pm-space-3) var(--pm-space-4);
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-radius: var(--pm-radius-card);
+  background: var(--pm-color-surface);
+  color: var(--pm-color-ink);
+  box-shadow: var(--pm-shadow-float);
+  font-family: var(--pm-font-sans);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.pm-classroom-popover__close {
+  margin-top: 0.75rem;
+}

package/src/client/ClassroomToolbar.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { PmButton, PmPopover, useMessages } from '@lincyaw/host'
+import { COLLECTIONS, MESSAGES, toQuestion, unansweredCount } from '../domain/index.ts'
+import { useClassroomStore, useCollection, useParticipation } from './composables.ts'
+import ClassroomOverlays from './ClassroomOverlays.tsx'
+import './style.css'
+import ClassroomPanel from './ClassroomPanel.tsx'
+import './ClassroomToolbar.css'
+export default function ClassroomToolbar() {
+  const t = useMessages(MESSAGES)
+  const [open, setOpen] = useState(false)
+  const { presenter } = useParticipation()
+  const store = useClassroomStore()
+  const questions = useCollection(() => store, COLLECTIONS.questions, toQuestion)
+  const unanswered = unansweredCount(questions.map((item) => item.value))
+  return (
+    <span className="pm-classroom-toolbar">
+      {presenter && (
+        <PmPopover
+          open={open}
+          onOpenChange={setOpen}
+          label={t.interaction}
+          name="pm-classroom-popover"
+          trigger={
+            <PmButton variant="ghost" small title={t.toolbar.title} aria-expanded={open}>
+              {t.toolbar.button}
+              {unanswered > 0 && (
+                <span
+                  className="pm-classroom-toolbar__badge pm-ui-badge pm-ui-badge--danger pm-ui-badge--pill"
+                  aria-label={t.toolbar.unanswered(unanswered)}
+                >
+                  {unanswered}
+                </span>
+              )}
+            </PmButton>
+          }
+        >
+          <ClassroomPanel />
+          <PmButton small className="pm-classroom-popover__close" onClick={() => setOpen(false)}>
+            {t.close}
+          </PmButton>
+        </PmPopover>
+      )}
+      <ClassroomOverlays />
+    </span>
+  )
+}

package/src/client/NoteSpot.css

@@ -0,0 +1,50 @@
+.pm-note-spot {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-sans);
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+.pm-note-spot__toggle {
+  color: var(--pm-color-muted);
+}
+.pm-note-spot__toggle[aria-expanded='true'],
+.pm-note-spot:not([data-notes='0']) .pm-note-spot__toggle {
+  color: var(--pm-color-ink);
+}
+.pm-note-spot__count {
+  margin-left: 0.25rem;
+}
+.pm-note-spot__panel {
+  box-sizing: border-box;
+  width: 100%;
+  margin-top: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-radius: var(--pm-radius-control);
+  background: var(--pm-color-warn-soft);
+}
+.pm-note-spot__list {
+  margin: 0 0 0.3rem;
+  padding-left: 1.2em;
+}
+.pm-note-spot__list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.pm-note-spot__text {
+  white-space: pre-wrap;
+}
+.pm-note-spot__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0.25rem 0 0;
+}
+.pm-note-spot__where {
+  color: var(--pm-color-muted);
+}

package/src/client/NoteSpot.tsx

@@ -0,0 +1,119 @@
+import { Fragment, useState, useRef, useEffect, useMemo, useId } from 'react'
+import type { ReactNode } from 'react'
+import { useMessages } from '@lincyaw/host'
+import type { ClassroomStore, StoredItem } from '@lincyaw/kernel'
+import { COLLECTIONS, MESSAGES } from '../domain/index.ts'
+import type { Note } from '../domain/index.ts'
+import { newId } from './ids.ts'
+import './style.css'
+import './NoteSpot.css'
+export default function NoteSpot(
+  props: {
+    section: string
+    block?: string
+    label: string
+    notes: StoredItem<Note>[]
+    store: ClassroomStore
+    inClassroom: boolean
+  } & {
+    children?: ReactNode
+    className?: string
+    onDone?(): void
+    onCited?(): void
+    onToggleAnswered?(): void
+    onSend?(): void
+  },
+) {
+  const { section, block, label, notes, store, inClassroom } = props
+
+  const t = useMessages(MESSAGES)
+  const [open, setOpen] = useState(false)
+  const [text, setText] = useState('')
+
+  function add(): void {
+    const note = text.trim()
+    if (!note) return
+    props.store.put<Note>(COLLECTIONS.notes, newId(), {
+      section: props.section,
+      ...(props.block ? { block: props.block } : {}),
+      text: note,
+      at: Date.now(),
+    })
+    setText('')
+  }
+
+  return (
+    <>
+      <div className="pm-note-spot" data-section={section} data-block={block} data-notes={notes.length}>
+        <button
+          type="button"
+          className="pm-note-spot__toggle pm-ui-button pm-ui-button--ghost pm-ui-button--small"
+          aria-expanded={open}
+          aria-label={t.notes.label(label)}
+          title={t.notes.label(label)}
+          onClick={(event) => {
+            setOpen(!open)
+          }}
+        >
+          {t.notes.button}
+          {notes.length ? (
+            <span className="pm-note-spot__count pm-ui-badge pm-ui-badge--accent">{notes.length}</span>
+          ) : null}
+        </button>
+        {open ? (
+          <div className="pm-note-spot__panel">
+            {notes.length ? (
+              <ul className="pm-note-spot__list" aria-label={t.notes.mine}>
+                {notes.map((note) => (
+                  <li key={note.id}>
+                    <span className="pm-note-spot__text">{note.value.text}</span>
+                    <button
+                      type="button"
+                      className="pm-ui-button pm-ui-button--ghost pm-ui-button--small"
+                      aria-label={t.notes.removeLabel(note.value.text)}
+                      onClick={(event) => {
+                        store.remove(COLLECTIONS.notes, note.id)
+                      }}
+                    >
+                      {t.notes.remove}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+            <form
+              onSubmit={(event) => {
+                event.preventDefault()
+                add()
+              }}
+            >
+              <textarea
+                value={text}
+                onChange={(event) => setText(event.target.value)}
+                className="pm-ui-textarea"
+                aria-label={t.notes.new}
+                rows={2}
+                maxLength={2000}
+                onKeyDown={(event) => {
+                  event.stopPropagation()
+                }}
+              ></textarea>
+              <p className="pm-note-spot__actions">
+                <button
+                  type="submit"
+                  className="pm-ui-button pm-ui-button--primary pm-ui-button--small"
+                  disabled={!text.trim()}
+                >
+                  {t.notes.save}
+                </button>
+                <span className="pm-note-spot__where">
+                  {inClassroom ? t.notes.inClassroom : t.notes.inBrowser}
+                </span>
+              </p>
+            </form>
+          </div>
+        ) : null}
+      </div>
+    </>
+  )
+}

package/src/client/NotesLayer.css

@@ -0,0 +1,9 @@
+.pm-note-slot--section {
+  margin: -0.5rem 0 0.5rem;
+}
+.pm-note-slot--block {
+  margin: 0.15rem 0 0.4rem;
+}
+.pm-block:not(:hover, :focus-within, :has(> .pm-note-slot :is([aria-expanded='true'], [data-notes]:not([data-notes='0'])))) > .pm-note-slot--block {
+  opacity: 0;
+}

package/src/client/NotesLayer.tsx

@@ -0,0 +1,113 @@
+import { useMessages } from '@lincyaw/host'
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { COLLECTIONS, isAuthorLabel, MESSAGES, notesAt, toNote } from '../domain/index.ts'
+import { useCollection, useNoteStore } from './composables.ts'
+import NoteSpot from './NoteSpot.tsx'
+import './NotesLayer.css'
+interface Spot {
+  key: string
+  slot: HTMLElement
+  section: string
+  block?: string
+  label: string
+}
+export default function NotesLayer() {
+  const t = useMessages(MESSAGES)
+  const { store, inClassroom } = useNoteStore()
+  const notes = useCollection(() => store, COLLECTIONS.notes, toNote)
+  const [spots, setSpots] = useState<Spot[]>([])
+  const current = useRef(spots)
+  current.current = spots
+  const notesBySpot = new Map<string, typeof notes>()
+  for (const note of notes) {
+    const key = note.value.block ? `${note.value.section}/${note.value.block}` : note.value.section
+    notesBySpot.set(key, [...(notesBySpot.get(key) ?? []), note])
+  }
+  useEffect(() => {
+    let frame = 0
+    const slots = new Set<HTMLElement>()
+    const slotIn = (parent: HTMLElement, kind: string, after?: Element | null) => {
+      const existing = [...parent.children].find((c) => c.classList.contains('pm-note-slot'))
+      if (existing) return existing as HTMLElement
+      const slot = document.createElement('div')
+      slot.className = `pm-note-slot pm-note-slot--${kind}`
+      slots.add(slot)
+      if (after) after.after(slot)
+      else parent.append(slot)
+      return slot
+    }
+    const scan = () => {
+      frame = 0
+      const found: Spot[] = []
+      for (const section of document.querySelectorAll<HTMLElement>('.pm-view .pm-section[data-section]')) {
+        const id = section.dataset.section!
+        const title = section.querySelector(':scope > .pm-section__title')
+        const label = title?.textContent?.replace(/​/g, '').trim() || id
+        found.push({ key: id, slot: slotIn(section, 'section', title), section: id, label })
+        for (const block of section.querySelectorAll<HTMLElement>('.pm-block[data-block]')) {
+          const blockId = block.dataset.block!
+          if (!isAuthorLabel(blockId) || block.parentElement?.closest('.pm-block')) continue
+          const copy = block.cloneNode(true) as HTMLElement
+          copy.querySelectorAll('table, pre, .pm-note-slot, .pm-content-marks').forEach((e) => e.remove())
+          const text = (copy.textContent ?? '').replace(/\s+/g, ' ').trim()
+          const kind = block.querySelector('table')
+            ? 'table'
+            : block.querySelector('pre')
+              ? 'code'
+              : undefined
+          const description = text
+            ? [...text].slice(0, 20).join('') + (text.length > 20 ? '…' : '')
+            : kind
+              ? t.notes.blockOf(label, t.notes.kinds[kind])
+              : label
+          found.push({
+            key: `${id}/${blockId}`,
+            slot: slotIn(block, 'block'),
+            section: id,
+            block: blockId,
+            label: description,
+          })
+        }
+      }
+      const before = current.current
+      if (
+        found.length !== before.length ||
+        found.some(
+          (s, i) => s.key !== before[i]!.key || s.slot !== before[i]!.slot || s.label !== before[i]!.label,
+        )
+      ) {
+        current.current = found
+        setSpots(found)
+      }
+    }
+    const observer = new MutationObserver(() => {
+      frame ||= requestAnimationFrame(scan)
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+    scan()
+    return () => {
+      observer.disconnect()
+      cancelAnimationFrame(frame)
+      slots.forEach((slot) => slot.remove())
+    }
+  }, [t])
+  return (
+    <>
+      {spots.map((spot) =>
+        createPortal(
+          <NoteSpot
+            section={spot.section}
+            block={spot.block}
+            label={spot.label}
+            notes={notesAt(notesBySpot.get(spot.key) ?? [], spot.section, spot.block)}
+            store={store}
+            inClassroom={inClassroom}
+          />,
+          spot.slot,
+          spot.key,
+        ),
+      )}
+    </>
+  )
+}

package/src/client/QuestionItem.css

@@ -0,0 +1,17 @@
+.pm-classroom-question p {
+  margin: 0;
+}
+.pm-classroom-question > .pm-ui-button {
+  margin-left: 0.35rem;
+}
+.pm-classroom-question[data-answered] {
+  color: var(--pm-color-muted);
+}
+.pm-classroom-panel__draft {
+  margin: 0.35rem 0;
+  padding: 0.35rem 0.75rem;
+  border-left: var(--pm-size-rule) solid var(--pm-color-line-strong);
+}
+.pm-classroom-panel__answer {
+  white-space: pre-wrap;
+}