diff --git a/packages/lab/catalog/src/App.tsx b/packages/lab/catalog/src/App.tsx index 7e65612daa..b40e876f68 100644 --- a/packages/lab/catalog/src/App.tsx +++ b/packages/lab/catalog/src/App.tsx @@ -361,11 +361,7 @@ export function App({ catalog }: AppProps) { }), ) if (window.location.hash.startsWith("#annotations=")) url.hash = window.location.hash - window.history.replaceState( - null, - "", - url, - ) + window.history.replaceState(null, "", url) }, [activeVariant.id, activeFlow?.id, selectedScreen, ui.mode, ui.viewerOpen]) useEffect(() => { diff --git a/packages/lab/catalog/src/components/AnnotationEditor.tsx b/packages/lab/catalog/src/components/AnnotationEditor.tsx index ace8705eb7..a787335333 100644 --- a/packages/lab/catalog/src/components/AnnotationEditor.tsx +++ b/packages/lab/catalog/src/components/AnnotationEditor.tsx @@ -51,8 +51,14 @@ export function AnnotationEditor(props: AnnotationEditorProps) { onPointerDown={(event) => { if (event.target !== event.currentTarget) return const bounds = event.currentTarget.getBoundingClientRect() - const column = Math.min(props.cols - 1, Math.max(0, Math.floor(((event.clientX - bounds.left) / bounds.width) * props.cols))) - const row = Math.min(props.rows - 1, Math.max(0, Math.floor(((event.clientY - bounds.top) / bounds.height) * props.rows))) + const column = Math.min( + props.cols - 1, + Math.max(0, Math.floor(((event.clientX - bounds.left) / bounds.width) * props.cols)), + ) + const row = Math.min( + props.rows - 1, + Math.max(0, Math.floor(((event.clientY - bounds.top) / bounds.height) * props.rows)), + ) setDraft({ row, column, note: "" }) }} > @@ -83,7 +89,9 @@ export function AnnotationEditor(props: AnnotationEditorProps) { > {draft.id ? "Edit annotation" : "New annotation"} - R{draft.row + 1} · C{draft.column + 1} + + R{draft.row + 1} · C{draft.column + 1} + Delete - ) : } - setDraft(undefined)}>Cancel + ) : ( + + )} + setDraft(undefined)}> + Cancel + {draft.id ? "Save" : "Add"} @@ -130,16 +142,22 @@ export function AnnotationEditor(props: AnnotationEditorProps) { Annotations - {props.annotations.length === 0 ? "Click anywhere on the terminal" : `${props.annotations.length} placed`} + + {props.annotations.length === 0 ? "Click anywhere on the terminal" : `${props.annotations.length} placed`} + - Done + + Done + {props.annotations.map((annotation, index) => ( edit(annotation)}> {index + 1} - Row {annotation.row + 1} · Column {annotation.column + 1} + + Row {annotation.row + 1} · Column {annotation.column + 1} + {annotation.note} @@ -155,7 +173,11 @@ export function AnnotationEditor(props: AnnotationEditorProps) { > Open GitHub issue - {complete.length === 0 ? "Add a note to continue" : `${complete.length} note${complete.length === 1 ? "" : "s"} will be included`} + + {complete.length === 0 + ? "Add a note to continue" + : `${complete.length} note${complete.length === 1 ? "" : "s"} will be included`} + > diff --git a/packages/lab/catalog/src/components/Viewer.tsx b/packages/lab/catalog/src/components/Viewer.tsx index 8eae487bfc..1bda07af43 100644 --- a/packages/lab/catalog/src/components/Viewer.tsx +++ b/packages/lab/catalog/src/components/Viewer.tsx @@ -6,7 +6,13 @@ import { CaptureSetSwitcher } from "./CaptureSetSwitcher" import { CaptureContextMenu } from "./CaptureContextMenu" import { feedbackIssueUrl } from "../feedback" import { CaptureActionsMenu } from "./CaptureActionsMenu" -import { annotationUrl, readAnnotationDraft, readAnnotations, type Annotation, type AnnotationDocument } from "../annotations" +import { + annotationUrl, + readAnnotationDraft, + readAnnotations, + type Annotation, + type AnnotationDocument, +} from "../annotations" import { AnnotationEditor } from "./AnnotationEditor" interface ViewerProps { @@ -56,7 +62,8 @@ export function Viewer({ const [annotating, setAnnotating] = useState(() => window.location.hash.startsWith("#annotations=")) const [annotations, setAnnotations] = useState>(() => { const linked = readAnnotations(new URL(window.location.href), identifier, variant.id) - if (linked.length > 0) return linked.filter((annotation) => annotation.row < frame.rows && annotation.column < frame.cols) + if (linked.length > 0) + return linked.filter((annotation) => annotation.row < frame.rows && annotation.column < frame.cols) try { const stored = localStorage.getItem(storageKey) if (!stored) return [] @@ -186,7 +193,9 @@ export function Viewer({ setAnnotations([...annotations, annotation]) }} onChange={(id, note) => - setAnnotations(annotations.map((annotation) => annotation.id === id ? { ...annotation, note } : annotation)) + setAnnotations( + annotations.map((annotation) => (annotation.id === id ? { ...annotation, note } : annotation)), + ) } onDelete={(id) => setAnnotations(annotations.filter((annotation) => annotation.id !== id))} onDone={() => { diff --git a/packages/lab/catalog/src/styles.css b/packages/lab/catalog/src/styles.css index b008e71f35..44cae5df0e 100644 --- a/packages/lab/catalog/src/styles.css +++ b/packages/lab/catalog/src/styles.css @@ -1334,7 +1334,9 @@ kbd { transform: translate(-50%, 1.2rem); border-radius: 0.85rem; background: #1a1a1a; - box-shadow: 0 12px 40px rgb(0 0 0 / 55%), 0 0 0 1px rgb(255 255 255 / 9%); + box-shadow: + 0 12px 40px rgb(0 0 0 / 55%), + 0 0 0 1px rgb(255 255 255 / 9%); cursor: default; animation: annotation-composer-in 150ms cubic-bezier(0.34, 1.56, 0.64, 1); }