caracms 0.0.0-stage → 0.2.0

package/src/editor/client/live/marks.tsx

@@ -0,0 +1,90 @@
+/**
+ * Who's where, and what's waiting, in navigation (M4 Decision 9; the mockup's metaFor
+ * and bubble): the Pages tree, a collection's level, "Find a document", the Recent
+ * strip and the ⌘K switcher. Live mode only; local mode has no marks (editor.marks is
+ * empty), so these render nothing and the rows look as in M3.
+ *
+ * - `DocMarksView`: a row's marks. The merge notice's warning mark; someone else's
+ *   lock as their avatar with "Aoife is editing" (the avatar alone when `compact`);
+ *   other people with it open (presence) as avatars; the waiting dot.
+ * - `Bubble`: a closed group's, a closed parent's or a collection's row carries the
+ *   marks of what's inside it: one avatar, one dot. No side rails anywhere: marks are
+ *   icons, avatars and dots.
+ */
+import { useEditor, useStore } from '../context.tsx';
+import type { DocMarks } from '../editor.ts';
+import { Icon } from '../shell/Icons.tsx';
+import type { Person } from '../../types.ts';
+import { colourOf, displayName, initialOf } from './format.ts';
+
+export function Avatar({ person, size, title }: { person: Person; size?: 'sm' | 'lg'; title?: string }) {
+	return (
+		<span className={`av${size ? ` ${size}` : ''}`} style={{ ['--c' as string]: colourOf(person) }} aria-hidden="true" title={title}>
+			{initialOf(person)}
+		</span>
+	);
+}
+
+export function DocMarksView({ file, compact = false, lock = true }: { file: string; compact?: boolean; /** M6c (G5): false leaves someone's lock out (a grid card says it on its picture: CollectionGrid.tsx). */ lock?: boolean }) {
+	const editor = useEditor();
+	const m: DocMarks | undefined = useStore(editor.marks, (all) => all.get(file));
+	if (!m) return null;
+	return (
+		<>
+			{m.kept ? (
+				<span className="wmark" title="Changed outside the editor" data-mark="kept">
+					<Icon name="warn" size="xs" />
+					<span className="sr">, changed outside the editor</span>
+				</span>
+			) : null}
+			{m.editing && lock ? (
+				<span className="mk" data-mark="editing">
+					<Avatar person={m.editing} size="sm" title={`${displayName(m.editing)} is editing`} />
+					{compact ? <span className="sr">, {displayName(m.editing)} is editing</span> : <span className="who">{displayName(m.editing)} is editing</span>}
+				</span>
+			) : null}
+			{m.present.map((p) => (
+				<span key={p.email} className="mk" data-mark="present">
+					<Avatar person={p} size="sm" title={`${displayName(p)} has it open`} />
+					<span className="sr">, {displayName(p)} has it open</span>
+				</span>
+			))}
+			{m.waiting ? (
+				<span className="dot" title="Changes waiting" data-mark="waiting">
+					<span className="sr">, changes waiting</span>
+				</span>
+			) : null}
+		</>
+	);
+}
+
+/** The marks of what's inside a closed group, a closed parent or a collection, bubbled up. */
+export function Bubble({ files }: { files: readonly string[] }) {
+	const editor = useEditor();
+	const all = useStore(editor.marks);
+	if (all.size === 0) return null;
+	let someone: Person | null = null;
+	let waiting = false;
+	for (const file of files) {
+		const m = all.get(file);
+		if (!m) continue;
+		someone ??= m.editing ?? m.present[0] ?? null;
+		waiting ||= m.waiting;
+	}
+	if (!someone && !waiting) return null;
+	return (
+		<>
+			{someone ? (
+				<span className="mk" data-mark="bubble-person">
+					<Avatar person={someone} size="sm" title={`${displayName(someone)} is in here`} />
+					<span className="sr">, {displayName(someone)} is in here</span>
+				</span>
+			) : null}
+			{waiting ? (
+				<span className="dot" title="Changes waiting inside" data-mark="bubble-waiting">
+					<span className="sr">, changes waiting inside</span>
+				</span>
+			) : null}
+		</>
+	);
+}

package/src/editor/client/live/notices.tsx

@@ -0,0 +1,213 @@
+/**
+ * The open document's notes in live mode (the mockup's docNotes; M4 Decisions 7, 9,
+ * 10 and 11), under the pane's global notes in the document and block levels:
+ *
+ * - **Someone else's lock** (`#locked`): "Aoife is editing", read-only until they're
+ *   done, opening up without a reload, with **Take over** (asks once, inline).
+ * - **Your own lock in another tab**: "You're editing this in another tab", with
+ *   **Edit here** (the lock note, M4's added state in the mockup's language).
+ * - **Edits that weren't kept** (Decision 11): "You had changes here that weren't
+ *   kept before Aoife edited it", with **Use mine** (off while someone else holds the
+ *   lock) and **Discard mine**.
+ * - **The merge notice** (`#merge`), until dismissed or published.
+ * - **"Aoife published Home as it stood at 14:20"** (`#published-over`).
+ * - **Someone deleted it** (M5a Decision 12: the poll's `open.deleted`): who and when,
+ *   read-only, with a way back to the documents.
+ *
+ * `ReadOnlyChip` is the head's "Read-only" chip under a lock. Local mode: nothing.
+ */
+import { useState } from 'react';
+import { useEditor, useStore } from '../context.tsx';
+import { Icon } from '../shell/Icons.tsx';
+import type { NoticeView, Person } from '../../types.ts';
+import { clock, displayName, when } from './format.ts';
+import { Avatar } from './marks.tsx';
+
+export function ReadOnlyChip() {
+	const editor = useEditor();
+	const veil = useStore(editor.access, (a) => a.veil);
+	if (!veil) return null;
+	return (
+		<span className="chip lock" data-chip="read-only">
+			<Icon name="lock" size="xs" />
+			Read-only
+		</span>
+	);
+}
+
+export function DocNotices() {
+	const editor = useEditor();
+	const access = useStore(editor.access);
+	const file = useStore(editor.doc.state, (s) => s.entry.file);
+	const title = useStore(editor.doc.state, (s) => s.document.title || s.entry.label);
+	const notices = useStore(editor.liveState, (s) => s.status?.notices);
+	const timeZone = useStore(editor.liveState, (s) => s.status?.timeZone ?? 'UTC');
+	if (editor.mode !== 'live') return null;
+	const mine = (notices ?? []).filter((n) => n.file === file);
+	const holder = access.holder;
+	const theirs = access.lock === 'theirs' && holder;
+	if (access.deleted) return <DeletedNote title={title} deleted={access.deleted} timeZone={timeZone} />;
+	return (
+		<>
+			{theirs ? <LockNote key={`${file}:${holder.person.email}`} title={title} /> : null}
+			{access.lock === 'yours-elsewhere' ? (
+				<div className="note lock" role="status" data-note="elsewhere">
+					{editor.you ? <Avatar person={editor.you} /> : <Icon name="lock" />}
+					<div>
+						<b>You're editing this in another tab</b>
+						<p>{title} is read-only here.</p>
+						<div className="acts">
+							<button type="button" className="btn sm" data-act="edit-here" onClick={() => void editor.editHere()}>
+								Edit here
+							</button>
+						</div>
+					</div>
+				</div>
+			) : null}
+			{access.held ? <HeldNote /> : null}
+			{mine.map((n) => (
+				<Notice key={n.id} notice={n} timeZone={timeZone} />
+			))}
+		</>
+	);
+}
+
+/** Someone else's lock, with Take over (asked once, inline, before it moves the lock). */
+function LockNote({ title }: { title: string }) {
+	const editor = useEditor();
+	const holder = useStore(editor.access, (a) => a.holder)!;
+	const status = useStore(editor.liveState, (s) => s.status);
+	const [asking, setAsking] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const name = displayName(holder.person);
+	const change = status?.open?.lastChange;
+	const theirChange = change?.at && change.by && change.by.email.toLowerCase() === holder.person.email.toLowerCase() ? change.at : null;
+	const takeOver = async () => {
+		setBusy(true);
+		try {
+			await editor.takeOver();
+		} finally {
+			setBusy(false);
+			setAsking(false);
+		}
+	};
+	return (
+		<div className="note lock" role="status" data-note="locked">
+			<Avatar person={holder.person} />
+			<div>
+				<b>{name} is editing</b>
+				{asking ? (
+					<>
+						<p>Take over {title} from {name}? Their changes are kept.</p>
+						<div className="acts">
+							<button type="button" className="btn sm" data-act="take-over-confirm" disabled={busy} onClick={() => void takeOver()}>
+								Take over
+							</button>
+							<button type="button" className="btn sm ghost" data-act="take-over-cancel" disabled={busy} onClick={() => setAsking(false)}>
+								Cancel
+							</button>
+						</div>
+					</>
+				) : (
+					<>
+						<p>
+							{title} is read-only while {name} has it open.
+							{theirChange && status ? ` Their last change: ${when(theirChange, status.timeZone, status.now)}.` : ''}
+						</p>
+						<div className="acts">
+							<button type="button" className="btn sm" data-act="take-over" onClick={() => setAsking(true)}>
+								Take over
+							</button>
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function HeldNote() {
+	const editor = useEditor();
+	const access = useStore(editor.access);
+	const held = access.held!;
+	const theirs = access.lock === 'theirs' ? access.holder : null;
+	const who = held.elsewhere ? null : held.by;
+	// No name, and not your other tab: the server couldn't tell who changed it (Decision 11, `known: false`).
+	const whom = who ? `before ${displayName(who)} edited it` : held.elsewhere || held.reason === 'locked' ? 'before you edited it in another tab' : 'before it was changed elsewhere';
+	return (
+		<div className="note warn" role="alert" data-note="not-kept">
+			<Icon name="warn" />
+			<div>
+				<b>You had changes here that weren't kept {whom}</b>
+				<p>Held in this browser.</p>
+				<div className="acts">
+					<button type="button" className="btn sm" data-act="use-mine" disabled={!!theirs} onClick={() => void editor.useMine()}>
+						Use mine
+					</button>
+					<button type="button" className="btn sm" data-act="discard-mine" onClick={() => void editor.discardMine()}>
+						Discard mine
+					</button>
+					{theirs ? <p className="why">Use mine is off while {displayName(theirs.person)} is editing.</p> : null}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function Notice({ notice, timeZone }: { notice: NoticeView; timeZone: string }) {
+	const editor = useEditor();
+	if (notice.kind === 'draft-kept') {
+		return (
+			<div className="note warn" role="status" data-note="draft-kept">
+				<Icon name="warn" />
+				<div>
+					<b>{notice.title} was also changed outside the editor.</b>
+					<p>Your draft was kept; check it before publishing.</p>
+					<div className="acts">
+						<button type="button" className="btn sm" data-act="dismiss" onClick={() => editor.dismissNotice(notice.id)}>
+							Dismiss
+						</button>
+					</div>
+				</div>
+			</div>
+		);
+	}
+	return (
+		<div className="note select" role="status" data-note="published-over">
+			<Icon name="check" />
+			<div>
+				<b>
+					{displayName(notice.by)} published {notice.title} as it stood at {clock(notice.at, timeZone)}
+				</b>
+				<div className="acts">
+					<button type="button" className="btn sm" data-act="dismiss" onClick={() => editor.dismissNotice(notice.id)}>
+						OK
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/** The open document was deleted by someone else (M5a Decision 12): read-only, saying who and when. */
+function DeletedNote({ title, deleted, timeZone }: { title: string; deleted: { by: Person | null; at: string | null }; timeZone: string }) {
+	const editor = useEditor();
+	const by = deleted.by ? displayName(deleted.by) : null;
+	const at = deleted.at ? clock(deleted.at, timeZone) : null;
+	return (
+		<div className="note danger" role="alert" data-note="deleted">
+			<Icon name="trash" />
+			<div>
+				<b>{by ? `${by} deleted ${title}` : `${title} was deleted`}</b>
+				<p>
+					{at ? `It was deleted at ${at}. ` : ''}It can't be edited.
+				</p>
+				<div className="acts">
+					<button type="button" className="btn sm" data-act="deleted-back" onClick={() => editor.goTo('documents')}>
+						Back to documents
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}