@backmatter/studio 0.0.1

package/src/pages/SettingsUsersPage.tsx

@@ -0,0 +1,363 @@
+// packages/studio/src/pages/SettingsUsersPage.tsx
+import { useCallback, useEffect, useState } from "react";
+import { useOutletContext } from "react-router";
+import { Dialog } from "@base-ui/react/dialog";
+import * as stylex from "@stylexjs/stylex";
+import {
+  changeWorkspaceMemberRole,
+  fetchWorkspacePeople,
+  inviteWorkspaceMember,
+  removeWorkspaceMember,
+  revokeWorkspaceInvitation,
+  type WorkspaceInvitation,
+  type WorkspaceMember,
+} from "../api";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { Button } from "../ui/Button";
+import { ConfirmDialog } from "../ui/ConfirmDialog";
+import { Field } from "../ui/Field";
+import { Input, Select } from "../ui/Input";
+import { PageHeader, Panel, Stack } from "../ui/Page";
+import { cx, isTransitioning } from "../ui/popup";
+import { Text } from "../ui/Text";
+import type { WorkspaceOutletContext } from "../workspace/types";
+
+const ROLES = [
+  { value: "admin", label: "Admin" },
+  { value: "developer", label: "Developer" },
+  { value: "editor", label: "Editor" },
+  { value: "writer", label: "Writer" },
+] as const;
+
+type Role = (typeof ROLES)[number]["value"];
+
+function isRole(value: string | null): value is Role {
+  return ROLES.some((role) => role.value === value);
+}
+
+function roleLabel(role: string) {
+  return ROLES.find((item) => item.value === role)?.label ?? role;
+}
+
+export function SettingsUsersPage() {
+  const { workspace } = useOutletContext<WorkspaceOutletContext>();
+  const [members, setMembers] = useState<WorkspaceMember[]>([]);
+  const [invitations, setInvitations] = useState<WorkspaceInvitation[]>([]);
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<Role>("writer");
+  const [error, setError] = useState<string | null>(null);
+  const [inviteError, setInviteError] = useState<string | null>(null);
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [pendingRemove, setPendingRemove] = useState<WorkspaceMember | null>(null);
+  const [pendingRevoke, setPendingRevoke] = useState<WorkspaceInvitation | null>(null);
+
+  const load = useCallback(async () => {
+    const people = await fetchWorkspacePeople(workspace.id);
+    setMembers(people.members);
+    setInvitations(people.invitations);
+  }, [workspace.id]);
+
+  useEffect(() => {
+    void load().catch((err) => {
+      setError(err instanceof Error ? err.message : "Could not load people");
+    });
+  }, [load]);
+
+  function setInviteDialogOpen(next: boolean) {
+    if (busy) return;
+    setInviteOpen(next);
+    if (!next) setInviteError(null);
+  }
+
+  async function onInvite(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setInviteError(null);
+    try {
+      await inviteWorkspaceMember(workspace.id, { email, role });
+      setEmail("");
+      setInviteOpen(false);
+      await load();
+    } catch (err) {
+      setInviteError(err instanceof Error ? err.message : "Could not send invite");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function onRole(member: WorkspaceMember, next: string | null) {
+    if (!isRole(next) || next === member.role) return;
+    setError(null);
+    try {
+      await changeWorkspaceMemberRole(workspace.id, member.userId, next);
+      await load();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not change role");
+    }
+  }
+
+  async function onRemove() {
+    if (!pendingRemove) return;
+    setError(null);
+    try {
+      await removeWorkspaceMember(workspace.id, pendingRemove.userId);
+      setPendingRemove(null);
+      await load();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not remove member");
+    }
+  }
+
+  async function onRevoke() {
+    if (!pendingRevoke) return;
+    setError(null);
+    try {
+      await revokeWorkspaceInvitation(workspace.id, pendingRevoke.id);
+      setPendingRevoke(null);
+      await load();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not revoke invite");
+    }
+  }
+
+  return (
+    <section>
+      <PageHeader
+        title="Users"
+        description="Invite people to this workspace and set what they can do."
+        action={
+          <Button type="button" onClick={() => setInviteDialogOpen(true)}>
+            Invite
+          </Button>
+        }
+      />
+      <Stack gap="lg">
+        {error ? <Text tone="danger">{error}</Text> : null}
+        <Panel>
+          <Stack>
+            <Text as="h2" size="lg" weight="medium">
+              Members
+            </Text>
+            {members.map((member) => (
+              <div key={member.userId} {...stylex.props(styles.row)}>
+                <div {...stylex.props(styles.identity)}>
+                  <Text weight="medium">{member.name || member.email}</Text>
+                  {member.name ? (
+                    <Text size="sm" tone="muted">
+                      {member.email}
+                    </Text>
+                  ) : null}
+                </div>
+                <div {...stylex.props(styles.role)}>
+                  <Select
+                    aria-label={`Role for ${member.email}`}
+                    value={isRole(member.role) ? member.role : "writer"}
+                    onValueChange={(next) => void onRole(member, next)}
+                    options={[...ROLES]}
+                  />
+                </div>
+                <Button type="button" variant="danger" onClick={() => setPendingRemove(member)}>
+                  Remove
+                </Button>
+              </div>
+            ))}
+          </Stack>
+        </Panel>
+        {invitations.length > 0 ? (
+          <Panel>
+            <Stack>
+              <Text as="h2" size="lg" weight="medium">
+                Pending invites
+              </Text>
+              {invitations.map((invite) => (
+                <div key={invite.id} {...stylex.props(styles.row)}>
+                  <div {...stylex.props(styles.identity)}>
+                    <Text weight="medium">{invite.email}</Text>
+                    <Text size="sm" tone="muted">
+                      {roleLabel(invite.role)}
+                    </Text>
+                  </div>
+                  <Button type="button" variant="danger" onClick={() => setPendingRevoke(invite)}>
+                    Revoke
+                  </Button>
+                </div>
+              ))}
+            </Stack>
+          </Panel>
+        ) : null}
+      </Stack>
+      <Dialog.Root open={inviteOpen} onOpenChange={setInviteDialogOpen}>
+        <Dialog.Portal>
+          <Dialog.Backdrop
+            className={(state) =>
+              cx(styles.backdrop, isTransitioning(state.transitionStatus) && styles.backdropHidden)
+            }
+          />
+          <Dialog.Popup
+            className={(state) =>
+              cx(styles.popup, isTransitioning(state.transitionStatus) && styles.popupHidden)
+            }
+          >
+            <Dialog.Title className={cx(styles.title)}>Invite</Dialog.Title>
+            <Dialog.Description className={cx(styles.srOnly)}>
+              Send an email invitation to join this workspace.
+            </Dialog.Description>
+            <form onSubmit={(e) => void onInvite(e)}>
+              <Stack>
+                {inviteError ? <Text tone="danger">{inviteError}</Text> : null}
+                <Field
+                  label="Email"
+                  hint="They get an email with a link to join this workspace."
+                >
+                  <Input
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    autoComplete="off"
+                    spellCheck={false}
+                  />
+                </Field>
+                <Field label="Role">
+                  <Select
+                    aria-label="Role"
+                    value={role}
+                    onValueChange={(next) => {
+                      if (isRole(next)) setRole(next);
+                    }}
+                    options={[...ROLES]}
+                  />
+                </Field>
+                <div {...stylex.props(styles.actions)}>
+                  <Dialog.Close
+                    render={
+                      <Button variant="secondary" disabled={busy}>
+                        Cancel
+                      </Button>
+                    }
+                  />
+                  <Button type="submit" disabled={busy}>
+                    {busy ? "Sending…" : "Send invite"}
+                  </Button>
+                </div>
+              </Stack>
+            </form>
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>
+      <ConfirmDialog
+        open={pendingRemove !== null}
+        onOpenChange={(open) => {
+          if (!open) setPendingRemove(null);
+        }}
+        title="Remove member?"
+        description={
+          pendingRemove
+            ? `${pendingRemove.name || pendingRemove.email} will lose access to this workspace.`
+            : undefined
+        }
+        confirmLabel="Remove"
+        destructive
+        onConfirm={onRemove}
+      />
+      <ConfirmDialog
+        open={pendingRevoke !== null}
+        onOpenChange={(open) => {
+          if (!open) setPendingRevoke(null);
+        }}
+        title="Revoke invite?"
+        description={
+          pendingRevoke ? `${pendingRevoke.email} will not be able to use this invite.` : undefined
+        }
+        confirmLabel="Revoke"
+        destructive
+        onConfirm={onRevoke}
+      />
+    </section>
+  );
+}
+
+const styles = stylex.create({
+  backdrop: {
+    position: "fixed",
+    inset: 0,
+    zIndex: z.overlay,
+    backgroundColor: colors.overlay,
+    transitionProperty: "opacity",
+    transitionDuration: "120ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  backdropHidden: {
+    opacity: 0,
+  },
+  popup: {
+    position: "fixed",
+    left: "50%",
+    top: "50%",
+    zIndex: z.palette,
+    boxSizing: "border-box",
+    width: "min(420px, calc(100vw - 32px))",
+    transform: "translate(-50%, -50%)",
+    padding: space.xl,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    boxShadow: "0 16px 48px rgba(24, 24, 27, 0.2)",
+    outline: "none",
+    transitionProperty: "opacity, transform",
+    transitionDuration: "120ms",
+    transitionTimingFunction: "ease-out",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  popupHidden: {
+    opacity: 0,
+    transform: "translate(-50%, -50%) scale(0.97)",
+  },
+  title: {
+    margin: 0,
+    marginBottom: space.lg,
+    fontSize: type.lg,
+    fontWeight: 600,
+    lineHeight: 1.3,
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: 0,
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: space.sm,
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.lg,
+  },
+  identity: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    minWidth: 0,
+    flex: 1,
+  },
+  role: {
+    width: "9.5rem",
+    flexShrink: 0,
+  },
+});

package/src/pages/TypeDocsPage.tsx

@@ -0,0 +1,225 @@
+// packages/studio/src/pages/TypeDocsPage.tsx
+import { useMemo } from "react";
+import { Link, useOutletContext, useParams } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import type { DocListItem } from "../api";
+import { useReplicaState } from "../replica/useReplica";
+import { colors, space, type } from "../styles/tokens.stylex";
+import { PageHeader } from "../ui/Page";
+import { Text } from "../ui/Text";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { modelHasLocale } from "../chrome/content-type-groups";
+import { compareTypeDocs } from "./type-docs";
+import { contentDocPath, defaultLocaleOf } from "../workspace-path";
+
+const hover = "@media (hover: hover)";
+
+type DocRow = DocListItem;
+
+/** List badge: only uncommitted state is worth a word. */
+export function statusLabel(doc: Pick<DocRow, "status">) {
+  if (doc.status === "modified") return "modified";
+  if (doc.status === "added") return "new";
+  if (doc.status === "conflict") return "conflict";
+  return "";
+}
+
+export function TypeDocsPage() {
+  const { type = "" } = useParams();
+  const { workspace, models } = useOutletContext<WorkspaceOutletContext>();
+  const docs = useReplicaState()
+    .docs(workspace.id)
+    .filter((doc) => doc.type === type);
+
+  const model = models.find((m) => m.type === type);
+  const showLocale = !model || modelHasLocale(model.path);
+  const rows = useMemo(
+    () =>
+      [...docs].sort(compareTypeDocs),
+    [docs],
+  );
+
+  return (
+    <section {...stylex.props(styles.page)}>
+      <div {...stylex.props(styles.toolbar)}>
+        <PageHeader
+          compact
+          title={type}
+          description={
+            model
+              ? model.path
+              : "This type is not in the current schema snapshot."
+          }
+        />
+        {rows.length === 0 ? (
+          <Text tone="muted">
+            No documents for this type yet. Add files to the repo or pull from
+            GitHub via the branch menu.
+          </Text>
+        ) : null}
+      </div>
+      {rows.length > 0 ? (
+        <table {...stylex.props(styles.table)}>
+          <thead>
+            <tr>
+              <th scope="col" {...stylex.props(styles.th, styles.padStart)}>
+                Slug
+              </th>
+              {showLocale ? (
+                <th scope="col" {...stylex.props(styles.th, styles.colMeta)}>
+                  Locale
+                </th>
+              ) : null}
+              <th
+                scope="col"
+                {...stylex.props(styles.th, styles.colMeta, styles.padEnd)}
+              >
+                Status
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((doc) => {
+              const to = contentDocPath(
+                workspace.slug,
+                doc.type,
+                doc.slug,
+                doc.locale,
+                defaultLocaleOf(workspace.locales),
+              );
+              return (
+                <tr
+                  key={`${doc.locale}/${doc.type}/${doc.slug}`}
+                  {...stylex.props(styles.row)}
+                >
+                  <td {...stylex.props(styles.td, styles.padStart)}>
+                    <Link to={to} title={doc.slug} {...stylex.props(styles.slugLink)}>
+                      {doc.slug}
+                    </Link>
+                  </td>
+                  {showLocale ? (
+                    <td {...stylex.props(styles.td, styles.colMeta, styles.locale)}>
+                      {doc.locale}
+                    </td>
+                  ) : null}
+                  <td
+                    {...stylex.props(
+                      styles.td,
+                      styles.colMeta,
+                      styles.padEnd,
+                      doc.status === "conflict" && styles.conflict,
+                    )}
+                  >
+                    {statusLabel(doc)}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      ) : null}
+    </section>
+  );
+}
+
+const styles = stylex.create({
+  page: {
+    display: "flex",
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    overflowY: "auto",
+  },
+  toolbar: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+    paddingInline: space.xxl,
+    paddingTop: space.xxl,
+    paddingBottom: space.lg,
+  },
+  table: {
+    width: "100%",
+    borderCollapse: "collapse",
+    tableLayout: "fixed",
+    borderTopWidth: 1,
+    borderTopStyle: "solid",
+    borderTopColor: colors.border,
+  },
+  th: {
+    position: "sticky",
+    top: 0,
+    zIndex: 2,
+    paddingBlock: space.sm,
+    paddingInline: space.lg,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    backgroundColor: colors.bgApp,
+    color: colors.textMuted,
+    fontSize: type.xs,
+    fontWeight: 500,
+    letterSpacing: "0.02em",
+    textAlign: "left",
+  },
+  td: {
+    minWidth: 0,
+    height: 40,
+    paddingBlock: space.md,
+    paddingInline: space.lg,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    color: colors.textMuted,
+    fontSize: type.md,
+    verticalAlign: "middle",
+  },
+  padStart: {
+    paddingLeft: space.xxl,
+  },
+  padEnd: {
+    paddingRight: space.xxl,
+  },
+  colMeta: {
+    width: "7.5rem",
+  },
+  locale: {
+    fontSize: type.xs,
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+  conflict: {
+    color: colors.danger,
+    fontWeight: 500,
+  },
+  row: {
+    position: "relative",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover },
+    },
+    ":focus-within": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: -2,
+    },
+  },
+  slugLink: {
+    display: "block",
+    minWidth: 0,
+    fontWeight: 500,
+    color: colors.text,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    "::after": {
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      zIndex: 1,
+    },
+    ":focus-visible": {
+      outlineWidth: 0,
+    },
+  },
+});