This annotation will be removed from the case and can't be recovered.
}
{onDelete &&
}
{onEdit &&
}
,
document.body);
}
// ─── Right panel ───
// One visibility-controlled item: a label + full-width slider, with an eye
// toggle. A full eye means the item is shown (click to hide); an eye with a
// line through it means hidden (click to show). While hidden, the label and
// slider are disabled. Defined at module scope (not inside RightPanel) so the
// persists across re-renders — otherwise dragging the slider breaks
// because the node is recreated on every value change.
function VisItem({ jaw, setJaw, itemKey, label, tooltip, children }) {
const item = jaw[itemKey];
const setShown = (shown) => setJaw({ ...jaw, [itemKey]: { ...item, shown } });
const setOpacity = (opacity) => setJaw({ ...jaw, [itemKey]: { ...item, opacity } });
const slider = (
setOpacity(+e.target.value)} />);
return (
{label}
{tooltip ?
{slider}
{tooltip}
:
slider}
{children &&
{children}
}
);
}
// The 3 visibility sliders, shared between the desktop panel and the mobile
// floating tool panel so there's one source of truth for the jaw/setJaw wiring.
function VisibilitySliders({ jaw, setJaw }) {
return (
#8 Crown (BruxZir Esthetic, A1)}
tooltip="This may not work as intended at this time" />
);
}
// ─── Mobile: top-level menu (4 rows, or 3 without any annotations yet) ───
function MobileMenuList({ onOpenVisibility, onOpenColor, onOpenPhotos, onOpenAnnotations, hasAnnotations }) {
const rows = [
{ key: "visibility", label: "Visibility Controls", onClick: onOpenVisibility },
{ key: "color", label: "Color Options", onClick: onOpenColor },
{ key: "photos", label: "Design Photos", onClick: onOpenPhotos }];
if (hasAnnotations) rows.push({ key: "annotations", label: "Annotations", onClick: onOpenAnnotations });
return (
);
}
// ─── Mobile: floating canvas-overlay panel for Visibility Controls / Color
// Options. Rendered by App (not RightPanel) since it must sit over the
// canvas while the header and bottom toolbar are hidden. ───
function MobileToolPanel({ variant, jaw, setJaw, colorOptions, modelColor, setModelColor, onDone, dark }) {
return (
{variant === "visibility" ?
:
{colorOptions.map((opt) =>
)}
}
);
}
function RightPanel({
view, onView, onReset,
colorOptions, modelColor, setModelColor,
jaw, setJaw,
annotations = [],
onEditAnnotation, onCreateAnnotation, onDeleteAnnotation,
reviewStatus, onReviewComplete,
onResetPrototype, menuOpen,
isMobile, onOpenTool,
onUndo, onRedo, canUndo, canRedo, onHelp
}) {
const [mobileSettingsOpen, setMobileSettingsOpen] = useState(false);
// Mobile drill-down: null = top-level menu list, otherwise which sub-page
// is showing. Reset whenever the menu closes so reopening it always lands
// back on the top-level list rather than wherever it was left.
const [mobileSection, setMobileSection] = useState(null);
useEffect(() => {
if (!menuOpen) setMobileSection(null);
}, [menuOpen]);
// Captured patient photos for the smile-design workflow.
const smilePhotos = [
{ src: (window.__resources && window.__resources.smile1) || "assets/smile-1.jpg", alt: "Patient portrait", name: "hamilton_smile_retracted.jpg" },
{ src: (window.__resources && window.__resources.smile2) || "assets/smile-2.jpg", alt: "Retracted smile", name: "hamilton_smile.jpg" }];
const [lbIndex, setLbIndex] = useState(null);
const [annIndex, setAnnIndex] = useState(null);
// The Design Review card floats over the scroll area, so reserve exactly its
// height (plus the 8px inset and a 20px gap) at the end of the scroll. It
// only renders on the top-level list (not the mobile sub-pages), so this
// re-runs whenever that visibility changes to (re)attach to the right node.
const innerRef = useRef(null);
const reviewRef = useRef(null);
const showReview = !isMobile || (menuOpen && !mobileSection);
useEffect(() => {
const el = reviewRef.current, inner = innerRef.current;
if (!inner) return;
if (!el || typeof ResizeObserver === "undefined") { inner.style.paddingBottom = ""; return; }
const ro = new ResizeObserver(() => {
inner.style.paddingBottom = (el.offsetHeight + 28) + "px";
});
ro.observe(el);
return () => ro.disconnect();
}, [showReview]);
// Reopening the mobile menu should always land on top, not wherever the
// user last scrolled to.
useEffect(() => {
if (menuOpen && innerRef.current) innerRef.current.scrollTop = 0;
}, [menuOpen]);
const annPhotos = annotations.map((src, i) => ({ src, alt: "Annotation " + (i + 1), name: "1234567890_annotation_" + (i + 1) + ".png" }));
return (
);
}
// ─── Review status card ─── shown fixed to the bottom of the right panel
// once the doctor has submitted a decision, in place of the review actions.
function ReviewStatusCard({ mode, date }) {
const isReject = mode === "reject";
const dateStr = date ? date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) : "";
return (
{isReject ? I.cornerUpLeft : I.checkSolid}
{isReject ? "Feedback sent on " + dateStr + "." : "Design approved on " + dateStr + "."}
);
}
// ─── Review modal (reject / approve confirmation) ───
function ReviewModal({ mode, patientName, designs, annotations = [], onCreateAnnotation, onClose, onSubmit }) {
const [feedback, setFeedback] = useState("");
const isReject = mode === "reject";
// Saved annotations ride along with a change request; either a note or at
// least one attachment is enough to send.
const allAnnotations = annotations.map((src, i) => ({ src, name: "1234567890_annotation_" + (i + 1) + ".png" }));
// Change requests carry the annotations by default; an approval only does if
// the doctor attaches them deliberately.
const [attached, setAttached] = useState(isReject ? allAnnotations : []);
const hasAttachments = attached.length > 0;
const remaining = allAnnotations.filter((a) => !attached.some((x) => x.name === a.name));
const canSend = isReject ? feedback.trim().length > 0 || hasAttachments : true;
useEffect(() => {
const onKey = (e) => {if (e.key === "Escape") onClose();};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
const desc = isReject ?
"Our design team will review your feedback and apply changes." :
"Approve to start fabrication. We'll send an update when your case ships.";
return ReactDOM.createPortal(