tutortool/docs/design_handoff/student.jsx

// student.jsx — student-facing check-in screens (in iOS frames)

const StudentNamePicker = () => {
  const [query, setQuery] = React.useState("");
  const filtered = STUDENTS.filter((s) => s.name.toLowerCase().includes(query.toLowerCase()));

  return (
    <div className="paper-bg" style={{ width: "100%", height: "100%", padding: "16px 18px", display: "flex", flexDirection: "column", gap: 14, overflow: "hidden" }}>
      <div>
        <div className="eyebrow" style={{ fontSize: 9 }}>Check-in · K7QJ-MX2P</div>
        <div className="serif" style={{ fontSize: 24, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 2 }}>
          Wer bist du?
        </div>
        <div className="small" style={{ marginTop: 4 }}>
          {COURSE.name} · Do 30. April · 14 Uhr
        </div>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 11px", border: "1px solid var(--rule)", borderRadius: 6, background: "#fbf7ee" }}>
        <Icon.search style={{ color: "var(--ink-3)" }} />
        <input value={query} onChange={(e) => setQuery(e.target.value)}
          placeholder="Name eingeben…"
          style={{ border: "none", background: "transparent", outline: "none", fontSize: 14, flex: 1 }} />
      </div>

      <div className="scroll" style={{ flex: 1, overflowY: "auto", margin: "0 -4px" }}>
        {filtered.map((s) => (
          <button key={s.id} style={{
            width: "100%", display: "flex", alignItems: "center", gap: 11,
            padding: "10px 4px", border: "none", background: "transparent",
            borderBottom: "1px solid var(--rule-soft)", textAlign: "left", cursor: "pointer",
          }}>
            <span style={{ width: 30, height: 30, borderRadius: "50%", background: "var(--paper-2)", color: "var(--ink-2)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600 }}>{s.initials}</span>
            <span style={{ fontSize: 14 }}>{s.name}</span>
          </button>
        ))}
      </div>

      <div className="tiny" style={{ textAlign: "center", color: "var(--ink-4)" }}>
        Nicht in der Liste? Sprich die Tutor:in an.
      </div>
    </div>
  );
};

const StudentSeatPicker = () => {
  return (
    <div className="paper-bg" style={{ width: "100%", height: "100%", padding: "14px 14px", display: "flex", flexDirection: "column", gap: 10, overflow: "hidden" }}>
      <div>
        <div className="eyebrow" style={{ fontSize: 9 }}>Hallo, Carla 👋</div>
        <div className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 2, letterSpacing: "-0.01em" }}>
          Wähle deinen Sitz
        </div>
        <div className="small" style={{ marginTop: 2 }}>
          Tippe auf einen freien Platz · {ROOM.name}
        </div>
      </div>

      {/* Mini seat map scaled to fit phone width */}
      <div style={{ display: "flex", justifyContent: "center" }}>
        <SeatMap variant="student" assignments={SEAT_ASSIGN} ownSeat={null} scale={0.46} />
      </div>

      <div style={{ display: "flex", gap: 12, justifyContent: "center", padding: "6px 0" }} className="tiny">
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#fbf7ee", border: "1.5px solid var(--ink-2)" }} />
          frei
        </span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#d6cdb5" }} />
          belegt
        </span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--accent)" }} />
          dein Sitz
        </span>
      </div>

      <div className="card" style={{ padding: "10px 12px", display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ fontSize: 18 }}>ℹ️</span>
        <div className="tiny" style={{ flex: 1 }}>
          Du kannst deinen Sitz wechseln, solange der Slot offen ist.
        </div>
      </div>
    </div>
  );
};

const StudentConfirmed = () => {
  return (
    <div className="paper-bg" style={{ width: "100%", height: "100%", padding: "14px 14px", display: "flex", flexDirection: "column", gap: 10, overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 10 }}>
        <div>
          <div className="eyebrow" style={{ fontSize: 9 }}>Eingecheckt um 14:03</div>
          <div className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 2, letterSpacing: "-0.01em" }}>
            Du sitzt auf <span className="marker">T1-3</span>
          </div>
          <div className="small" style={{ marginTop: 2 }}>
            +3 Bonuspunkte für diese Woche
          </div>
        </div>
        <span className="stamp" style={{ marginTop: 6 }}>Präsent</span>
      </div>

      <div style={{ display: "flex", justifyContent: "center" }}>
        <SeatMap variant="student-self" assignments={SEAT_ASSIGN} ownSeat="T1-3" scale={0.46} />
      </div>

      <div className="card" style={{ padding: "10px 12px" }}>
        <div className="eyebrow">Slot-Status</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4 }}>
          <StatusPill status="open" />
          <span className="tiny">Sperrt voraussichtlich um 14:15</span>
        </div>
      </div>

      <button className="btn ghost sm" style={{ justifyContent: "center" }}>Sitz wechseln</button>
    </div>
  );
};

const StudentLocked = () => {
  return (
    <div className="paper-bg" style={{ width: "100%", height: "100%", padding: "14px 14px", display: "flex", flexDirection: "column", gap: 10, overflow: "hidden" }}>
      <div>
        <div className="eyebrow" style={{ fontSize: 9 }}>Slot gesperrt · 14:18</div>
        <div className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 2, letterSpacing: "-0.01em" }}>
          Anwesenheit erfasst
        </div>
        <div className="small" style={{ marginTop: 2 }}>
          Dein Sitz für diese Woche bleibt sichtbar.
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "center" }}>
        <SeatMap variant="student-self" assignments={SEAT_ASSIGN} ownSeat="T1-3" scale={0.46} />
      </div>

      <div className="card" style={{ padding: "10px 12px", display: "flex", alignItems: "center", gap: 10 }}>
        <Icon.lock style={{ color: "var(--accent)" }} />
        <div className="tiny" style={{ flex: 1 }}>
          Check-in für diesen Slot ist geschlossen. Bonus wurde gutgeschrieben.
        </div>
      </div>

      <div className="tiny" style={{ textAlign: "center", color: "var(--ink-4)", marginTop: 4 }}>
        Nächstes Tutorium: Do, 7. Mai · 14:00
      </div>
    </div>
  );
};

Object.assign(window, { StudentNamePicker, StudentSeatPicker, StudentConfirmed, StudentLocked });