merge new_starr_app@qas history into apps/web

git-subtree-dir: apps/web
git-subtree-mainline: eaa6d2276a
git-subtree-split: 459af9d46a

apps/web/lib/ocaml/AnnotationPanel.res

@@ -0,0 +1,43 @@
+@react.component
+let make = (
+  ~lesson: AnnotationTypes.lesson,
+  ~note: option<string>,
+  ~onNoteChange: (string, string) => unit,
+  ~onClose: unit => unit,
+) => {
+  let noteValue = switch note {
+  | Some(n) => n
+  | None => ""
+  }
+
+  <div className="flex flex-col h-full">
+    <div className="flex items-center justify-between mb-4">
+      <div>
+        <p className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
+          {React.string("Annotation")}
+        </p>
+        <h2 className="text-lg font-bold mt-0.5">
+          {React.string(lesson.title)}
+        </h2>
+      </div>
+      <button
+        onClick={_ => onClose()}
+        className="text-muted-foreground hover:text-foreground transition-colors text-sm"
+      >
+        {React.string("✕ Close")}
+      </button>
+    </div>
+    <textarea
+      className="flex-1 w-full resize-none rounded-lg border bg-background p-4 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+      placeholder="Write your notes for this lesson..."
+      value={noteValue}
+      onChange={e => {
+        let value = ReactEvent.Form.target(e)["value"]
+        onNoteChange(lesson.id, value)
+      }}
+    />
+    <p className="text-xs text-muted-foreground mt-2">
+      {React.string("Auto-saved to your browser")}
+    </p>
+  </div>
+}