@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/comments/InboxButton.tsx

@@ -0,0 +1,131 @@
+// THE INBOX (Paper page 20, "Inbox"): a tray in the header with the unread
+// count, and a dropdown of what happened to the caller's threads in every
+// Project. HOSTED ONLY, like the avatar beside it: the local CLI has no
+// accounts and so no one to notify.
+//
+// An item on THIS Project opens its thread in place (`store.openThread`); one
+// on another Project leaves for it with `?thread=`, through `leaveFor` so the
+// last edit lands first.
+import { useEffect, useRef, useState } from "react";
+import { Popover, sceneHref } from "@dailies-studio/ui";
+import type { InboxItem } from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { isCloudWorkspace } from "../../state/posterCapture.js";
+import { leaveFor } from "../header/leave.js";
+import { INBOX_ICON, PersonAvatar, shortAgo, sparkle, useComments } from "./parts.js";
+
+const VERB: Record<InboxItem["kind"], string> = {
+  mention: "mentioned you",
+  reply: "replied",
+  assigned: "assigned you",
+  resolved: "resolved a thread",
+  reopened: "reopened a thread",
+};
+
+export function InboxButton() {
+  return isCloudWorkspace() ? <Inbox /> : null;
+}
+
+function Inbox() {
+  const store = useStore();
+  const { comments } = store;
+  const { inbox } = useComments();
+  const projectId = useShotEditor((s) => s.doc?.id ?? null);
+  const anchor = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+  const [unreadOnly, setUnreadOnly] = useState(true);
+
+  // The first read; `inbox-changed` and focus read it again (renderEvents.ts).
+  useEffect(() => {
+    void comments.loadInbox();
+  }, [comments]);
+
+  const items = unreadOnly ? inbox.items.filter((item) => item.readAt === null) : inbox.items;
+  const go = (item: InboxItem): void => {
+    setOpen(false);
+    void comments.markInboxRead([item.id]);
+    if (item.projectId === projectId) void store.openThread(item.threadId);
+    else if (item.projectName !== null) {
+      leaveFor(store, `${sceneHref(item.projectName)}&thread=${encodeURIComponent(item.threadId)}`);
+    }
+  };
+
+  return (
+    <>
+      <button
+        ref={anchor}
+        type="button"
+        className="inbox-button"
+        data-testid="inbox-button"
+        aria-label={inbox.unread > 0 ? `Inbox, ${inbox.unread} unread` : "Inbox"}
+        aria-expanded={open}
+        title="Inbox"
+        onClick={() => setOpen((v) => !v)}
+      >
+        {INBOX_ICON}
+        {inbox.unread > 0 ? <span className="inbox-badge">{inbox.unread > 99 ? "99+" : inbox.unread}</span> : null}
+      </button>
+      <Popover open={open} anchor={anchor} onClose={() => setOpen(false)} align="right" className="inbox-pop">
+        <div className="inbox" data-testid="inbox">
+          <div className="inbox-head">
+            <span className="inbox-title">Inbox</span>
+            <div className="inbox-toggle" role="radiogroup" aria-label="Show">
+              <button type="button" role="radio" aria-checked={unreadOnly} onClick={() => setUnreadOnly(true)}>
+                Unread{inbox.unread > 0 ? ` ${inbox.unread}` : ""}
+              </button>
+              <button type="button" role="radio" aria-checked={!unreadOnly} onClick={() => setUnreadOnly(false)}>
+                All
+              </button>
+            </div>
+            <span className="comment-thread-spacer" />
+            <button
+              type="button"
+              className="inbox-mark-all"
+              disabled={inbox.unread === 0}
+              onClick={() => void comments.markInboxRead()}
+            >
+              Mark all read
+            </button>
+          </div>
+          <div className="inbox-list">
+            {items.length === 0 ? (
+              <p className="inbox-empty">{unreadOnly ? "You are all caught up." : "Nothing here yet."}</p>
+            ) : (
+              items.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={`inbox-item${item.readAt === null ? " is-unread" : ""}`}
+                  data-testid="inbox-item"
+                  onClick={() => go(item)}
+                >
+                  {item.viaAgent ? (
+                    <span className="inbox-agent" aria-hidden="true">
+                      {sparkle(12)}
+                    </span>
+                  ) : (
+                    <PersonAvatar userId={item.actorId} label={item.actorLabel} size={26} className="is-tailed" />
+                  )}
+                  <span className="inbox-item-main">
+                    <span className="inbox-item-title">
+                      {item.actorLabel} {VERB[item.kind]}
+                    </span>
+                    {item.excerpt === "" ? null : <span className="inbox-item-quote">"{item.excerpt}"</span>}
+                    <span className="inbox-item-where">
+                      {[item.projectTitle ?? item.projectName, item.frameLabel].filter((s) => s !== null).join(" · ")}
+                    </span>
+                  </span>
+                  <span className="inbox-item-side">
+                    <span className="inbox-item-time">{shortAgo(item.createdAt)}</span>
+                    {item.readAt === null ? <span className="comments-unread-dot" aria-label="Unread" /> : null}
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+          <div className="inbox-foot">Email digest: every 5 minutes</div>
+        </div>
+      </Popover>
+    </>
+  );
+}

package/src/panels/comments/MentionMenu.tsx

@@ -0,0 +1,98 @@
+// THE @ MENU (Paper page 20, "Mention menu"): the listbox half of the
+// composer's ARIA combobox. The textarea owns focus and the keys
+// (CommentComposer); this draws the options and takes pointer picks.
+//
+// Two sections: the people on the Project, then workspace members with no
+// access. Those can be mentioned only through a share, which only someone who
+// can share the Project may start (the server lists them to no one else);
+// anyone else is told why a name is missing.
+import type { Mentionable, MentionablePerson } from "../../api.js";
+import { personLabel } from "../../state/comments.js";
+import { PersonAvatar } from "./parts.js";
+
+/** One pickable row: a Project person, or a share-and-mention. */
+export interface MentionOption {
+  person: MentionablePerson;
+  share: boolean;
+}
+
+/** The rows the keys walk, in drawn order. Workspace members count only when
+ *  the caller can share. */
+export function mentionOptions(result: Mentionable): MentionOption[] {
+  return [
+    ...result.people.map((person) => ({ person, share: false })),
+    ...(result.canShare ? result.others.map((person) => ({ person, share: true })) : []),
+  ];
+}
+
+export const optionId = (menuId: string, i: number): string => `${menuId}-opt-${i}`;
+
+export function MentionMenu(props: {
+  id: string;
+  result: Mentionable;
+  active: number;
+  onPick: (option: MentionOption) => void;
+  onActive: (i: number) => void;
+}) {
+  const { result } = props;
+  const options = mentionOptions(result);
+  const roleOf = new Map(result.people.map((p) => [p.id, p.role]));
+  const row = (option: MentionOption, i: number) => {
+    const label = personLabel(option.person);
+    return (
+      <div
+        key={option.person.id}
+        id={optionId(props.id, i)}
+        role="option"
+        aria-selected={i === props.active}
+        className={`mention-row${i === props.active ? " is-active" : ""}${option.share ? " is-outside" : ""}`}
+        data-testid="mention-option"
+        // A press must not take focus off the textarea: the caret is where
+        // the chip goes.
+        onPointerDown={(e) => e.preventDefault()}
+        onPointerEnter={() => props.onActive(i)}
+        onClick={() => props.onPick(option)}
+      >
+        <PersonAvatar userId={option.person.id} label={label} size={24} />
+        <span className="mention-name">{label}</span>
+        {option.person.guest ? <span className="comment-guest">GUEST</span> : null}
+        {option.share ? (
+          <span className="mention-share">Share and mention</span>
+        ) : (
+          <span className="mention-role">{roleWord(roleOf.get(option.person.id))}</span>
+        )}
+      </div>
+    );
+  };
+  return (
+    <div id={props.id} role="listbox" aria-label="People to mention" className="mention-menu" data-testid="mention-menu">
+      <div className="mention-section" role="presentation">
+        People on this project
+      </div>
+      {result.people.length === 0 ? (
+        result.canShare ? (
+          <div className="mention-empty">No one on this Project matches.</div>
+        ) : (
+          // The server lists members without access only to someone who can
+          // share, so anyone else hears why the person they want is missing.
+          <p className="mention-note" data-testid="mention-no-share">
+            No one on this Project matches. To mention someone else, ask a Project admin to share it with them.
+          </p>
+        )
+      ) : null}
+      {options.filter((o) => !o.share).map((o, i) => row(o, i))}
+      {result.canShare && result.others.length > 0 ? (
+        <div className="mention-outside" role="presentation">
+          <div className="mention-section">In the workspace, no access</div>
+          {options.map((o, i) => (o.share ? row(o, i) : null))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function roleWord(role: string | undefined): string {
+  if (role === undefined) return "";
+  if (role === "project_admin") return "Admin";
+  return role.charAt(0).toUpperCase() + role.slice(1);
+}

package/src/panels/comments/parts.tsx

@@ -0,0 +1,171 @@
+// Small shared pieces of the comment chrome (Paper page 20): the store hook,
+// a person's avatar, a body with its mention chips, short times, and the
+// 16px glyphs the page draws.
+import { useSyncExternalStore } from "react";
+import type { ReactElement, ReactNode } from "react";
+import { initialsOf } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+import {
+  boardThreads,
+  bodySegments,
+  cardCommentCounts,
+  cardCountWords,
+  personColor,
+  studioThreads,
+} from "../../state/comments.js";
+import type { CommentsState } from "../../state/comments.js";
+
+/** The comments store's state. One snapshot per change, so a component reads
+ *  it whole and derives what it needs. */
+export function useComments(): CommentsState {
+  const { comments } = useStore();
+  return useSyncExternalStore(comments.subscribe, comments.getState);
+}
+
+/** The open threads of the place on screen (S5): the board's on the board,
+ *  the Studio's off it. The Comments tab's count, which matches its list. */
+export function useOpenHere(): number {
+  const { threads } = useComments();
+  const onBoard = useShotEditor((s) => s.storyboardOpen);
+  return (onBoard ? boardThreads(threads) : studioThreads(threads)).filter((t) => t.status === "open").length;
+}
+
+/** A person's initials on their colour. `size` is the diameter in px. */
+export function PersonAvatar(props: { userId: string; label: string; size: number; className?: string }): ReactElement {
+  return (
+    <span
+      className={`comment-avatar${props.className === undefined ? "" : ` ${props.className}`}`}
+      aria-hidden="true"
+      style={{
+        width: props.size,
+        height: props.size,
+        fontSize: Math.round(props.size * 0.4),
+        background: personColor(props.userId),
+      }}
+    >
+      {initialsOf(props.label)}
+    </span>
+  );
+}
+
+/** A board card's open comment counts (S5): "2 board" for its own threads,
+ *  "1 Studio" for the open Studio threads about it. Nothing with none. The
+ *  card mounts it; the Comments panel's card headers do too. */
+export function CardCommentCounts(props: { target: { partId: string } | { referenceId: string } }) {
+  const { threads } = useComments();
+  const doc = useShotEditor((s) => s.doc);
+  if (doc === null) return null;
+  const count = cardCommentCounts(doc, threads, props.target);
+  if (count.board === 0 && count.studio === 0) return null;
+  return (
+    <span className="card-comment-counts" data-testid="card-comment-counts" aria-label={`Comments: ${cardCountWords(count)}`}>
+      {count.board > 0 ? <span className="card-comment-chip is-board">{count.board} board</span> : null}
+      {count.studio > 0 ? <span className="card-comment-chip is-studio">{count.studio} Studio</span> : null}
+    </span>
+  );
+}
+
+/** A stored body: its text, with each `<@id>` as a chip. */
+export function CommentBody(props: { body: string; names: Readonly<Record<string, string>>; className: string }) {
+  return (
+    <p className={props.className}>
+      {bodySegments(props.body, props.names).map((segment, i) =>
+        segment.kind === "text" ? (
+          segment.text
+        ) : (
+          <span key={i} className="comment-mention">
+            @{segment.label}
+          </span>
+        ),
+      )}
+    </p>
+  );
+}
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+/** "now", "5m", "3h", "2d", then the date. */
+export function shortAgo(ms: number, now = Date.now()): string {
+  const gap = Math.max(0, now - ms);
+  if (gap < MINUTE) return "now";
+  if (gap < HOUR) return `${Math.floor(gap / MINUTE)}m`;
+  if (gap < DAY) return `${Math.floor(gap / HOUR)}h`;
+  if (gap < 7 * DAY) return `${Math.floor(gap / DAY)}d`;
+  return new Date(ms).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+function glyph(size: number, children: ReactNode, viewBox = 16): ReactElement {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${viewBox} ${viewBox}`}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+
+/** The rail's Comment tool. */
+export const COMMENT_ICON = glyph(
+  16,
+  <path strokeWidth={1.5} d="M3 3.5h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H8.5L5.5 14v-2.5H3a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1z" />,
+);
+
+export const RESOLVE_ICON = glyph(
+  14,
+  <>
+    <circle cx="7" cy="7" r="5.6" strokeWidth={1.2} />
+    <path strokeWidth={1.3} d="M4.6 7.1 L6.3 8.7 L9.4 5.4" />
+  </>,
+  14,
+);
+
+/** The filled green check of a resolved thread. */
+export const RESOLVED_ICON = (
+  <svg width={14} height={14} viewBox="0 0 14 14" aria-hidden="true">
+    <circle cx="7" cy="7" r="5.6" fill="var(--success)" />
+    <path d="M4.6 7.1 L6.3 8.7 L9.4 5.4" fill="none" stroke="#0A0A0A" strokeWidth={1.4} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export function sparkle(size: number): ReactElement {
+  return (
+    <svg width={size} height={size} viewBox="0 0 14 14" aria-hidden="true">
+      <path d="M7 1.5 L8.2 5.8 L12.5 7 L8.2 8.2 L7 12.5 L5.8 8.2 L1.5 7 L5.8 5.8 Z" fill="var(--accent-ink)" />
+    </svg>
+  );
+}
+
+export const CHEVRON_ICON = glyph(10, <path strokeWidth={1.3} d="M2.5 4 L5 6.5 L7.5 4" />, 10);
+
+export const INBOX_ICON = glyph(
+  16,
+  <>
+    <path strokeWidth={1.4} d="M2 9 L4 3 H12 L14 9 V12.5 Q14 13.5 13 13.5 H3 Q2 13.5 2 12.5 Z" />
+    <path strokeWidth={1.4} d="M2 9 H5.5 L6.5 10.5 H9.5 L10.5 9 H14" />
+  </>,
+);
+
+export const EYE_ICON = (
+  <svg width={14} height={14} viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M1.5 8 Q8 1.5 14.5 8 Q8 14.5 1.5 8 Z" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinejoin="round" />
+    <circle cx="8" cy="8" r="2.2" fill="currentColor" />
+  </svg>
+);
+
+/** The strip badges' speech bubble. */
+export function bubble(size: number): ReactElement {
+  return (
+    <svg width={size} height={size} viewBox="0 0 14 14" aria-hidden="true">
+      <path d="M2 3 Q2 1.5 3.5 1.5 H10.5 Q12 1.5 12 3 V8.5 Q12 10 10.5 10 H6 L3 12.5 V10 Q2 10 2 8.5 Z" fill="currentColor" />
+    </svg>
+  );
+}