Blame for frontend/src/components/slideDeckEdit.ts

/** The slide deck editor's rules: what a slide can gain or lose, how it changes to another layout, and what must not be
 * left empty. They mirror the server (backend/app/slides/content.py: LIMITS and clamp_slide), which coerces whatever
 * comes back anyway; these only keep the editor from offering what the server would undo. */
import type { EditSlide } from "../api/endpoints";

export type DeckFmt = "detailed" | "presenter";

/** The layouts a slide can have, in the order the editor lists them. */
export const LAYOUTS: { id: string; name: string }[] = [
  { id: "title", name: "Title" },
  { id: "section", name: "Section" },
  { id: "points", name: "Points" },
  { id: "two_column", name: "Two columns" },
  { id: "stat", name: "Big number" },
  { id: "quote", name: "Quote" },
  { id: "agenda", name: "Agenda" },
  { id: "closing", name: "Closing" },
];

export const MAX_SLIDES = 30;

const max = (fmt: DeckFmt) => ({ points: fmt === "presenter" ? 4 : 5, agenda: 14, takeaways: 3, items: 4 });

const clone = (s: EditSlide): EditSlide => JSON.parse(JSON.stringify(s)) as EditSlide;

/** A new slide of `layout`, with placeholder text to type over. */
export function newSlide(layout: string, fmt: DeckFmt): EditSlide {
  const blank: EditSlide = {
    layout: "section", variant: "", kicker: "", heading: "New slide", lead: "", points: [],
    left: { label: "", items: [] }, right: { label: "", items: [] }, stat: { value: "", label: "" },
    quote: { text: "", by: "" }, takeaways: [], closing: "", notes: "", sources: [],
  };
  return convert(blank, layout, fmt);
}

/** The slide changed to another layout. Its words carry over (points become a column's items, a closing's
 * takeaways...); what the new layout needs and the slide lacks is filled with placeholder text. The old layout's
 * content stays in the slide, so changing back brings it back. */
export function convert(s: EditSlide, layout: string, fmt: DeckFmt): EditSlide {
  const out = { ...clone(s), layout, variant: "" };
  const m = max(fmt);
  const words = [...s.points.map((p) => p.text), ...s.takeaways, ...s.left.items, ...s.right.items].filter(Boolean);
  const some = (n: number, fallback: string[]) => (words.length >= 2 ? words : fallback).slice(0, n);
  if (layout === "points" && out.points.length < 2) {
    out.points = some(m.points, ["First point", "Second point", "Third point"]).map((text) => ({ term: "", text }));
  } else if (layout === "agenda" && out.points.length < 2) {
    out.points = some(m.agenda, ["First topic", "Second topic", "Third topic"]).map((text) => ({ term: "", text }));
  } else if (layout === "two_column" && !(out.left.items.length && out.right.items.length)) {
    const items = some(2 * m.items, ["A point on this side", "Another point", "A point on that side", "Another point"]);
    const half = Math.ceil(items.length / 2);
    out.left = { label: out.left.label || "One side", items: items.slice(0, half).slice(0, m.items) };
    out.right = { label: out.right.label || "The other side", items: items.slice(half).slice(0, m.items) };
  } else if (layout === "stat" && !(out.stat.value && out.stat.label)) {
    out.stat = { value: out.stat.value || "42%", label: out.stat.label || words[0] || "What this number means" };
  } else if (layout === "quote" && !out.quote.text) {
    out.quote = { text: words[0] || out.lead || "A line worth quoting.", by: out.quote.by };
  } else if (layout === "closing" && !out.takeaways.length && !out.closing) {
    out.takeaways = some(m.takeaways, ["First takeaway", "Second takeaway", "Third takeaway"]);
  }
  return out;
}

export type AddAction = { id: string; label: string; apply: (s: EditSlide) => EditSlide };

/** The text boxes a slide can gain: only those its design has a place for (`slots`, from the server) and that it
 * does not have yet, within the format's limits. */
export function addActions(s: EditSlide, slots: string[], fmt: DeckFmt): AddAction[] {
  const m = max(fmt);
  const has = (slot: string) => slots.includes(slot);
  const act = (id: string, label: string, change: (c: EditSlide) => void): AddAction => ({
    id, label, apply: (from) => {
      const c = clone(from);
      change(c);
      return c;
    },
  });
  const out: AddAction[] = [];
  if (has("kicker") && !s.kicker) out.push(act("kicker", "Kicker", (c) => (c.kicker = "Kicker")));
  if (has("lead") && !s.lead) out.push(act("lead", "Subtitle", (c) => (c.lead = "A sentence that adds context.")));
  if (s.layout === "points" && has("body") && s.points.length < m.points) {
    out.push(act("point", "Bullet", (c) => c.points.push({ term: "", text: "New point" })));
  }
  if (s.layout === "agenda" && has("body") && s.points.length < m.agenda) {
    out.push(act("point", "Topic", (c) => c.points.push({ term: "", text: "New topic" })));
  }
  if (s.layout === "two_column") {
    for (const side of ["left", "right"] as const) {
      const name = side === "left" ? "Left" : "Right";
      if (!s[side].label) out.push(act(`${side}-label`, `${name} heading`, (c) => (c[side].label = "Heading")));
      if (s[side].items.length < m.items) out.push(act(`${side}-item`, `${name} item`, (c) => c[side].items.push("New item")));
    }
  }
  if (s.layout === "quote" && has("by") && !s.quote.by) out.push(act("by", "Author", (c) => (c.quote.by = "Name")));
  if (s.layout === "closing") {
    if (has("body") && s.takeaways.length < m.takeaways) out.push(act("takeaway", "Takeaway", (c) => c.takeaways.push("New takeaway")));
    if (has("closing") && !s.closing) out.push(act("closing", "Closing line", (c) => (c.closing = "One line to end on.")));
  }
  return out;
}

/** The text boxes on a slide that can be removed (a point only while the slide keeps enough of them; the heading, a
 * stat or a quote never: the layout needs them). Each is the `data-f` of the text drawn in that box. */
export function removable(s: EditSlide): string[] {
  const out: string[] = [];
  if (s.kicker) out.push("kicker");
  if (s.lead) out.push("lead");
  if (s.quote.by) out.push("quote.by");
  if (s.closing && s.takeaways.length) out.push("closing");
  const minPoints = 2;
  s.points.forEach((p, i) => {
    if (p.term) out.push(`points.${i}.term`);
    if (s.points.length > minPoints) out.push(`points.${i}.text`);
  });
  if (s.takeaways.length > 1 || s.closing) s.takeaways.forEach((_, i) => out.push(`takeaways.${i}`));
  for (const side of ["left", "right"] as const) {
    if (s[side].label) out.push(`${side}.label`);
    if (s[side].items.length > 1) s[side].items.forEach((_, i) => out.push(`${side}.items.${i}`));
  }
  return out;
}

/** The slide without the text box at `field`: a point, takeaway or column item goes; other text is emptied. */
export function removeField(s: EditSlide, field: string): EditSlide {
  const c = clone(s);
  const [a, b, d] = field.split(".");
  if (a === "points" && d === "text") c.points.splice(Number(b), 1);
  else if (a === "points" && d === "term") c.points[Number(b)].term = "";
  else if (a === "takeaways") c.takeaways.splice(Number(b), 1);
  else if ((a === "left" || a === "right") && b === "items") c[a].items.splice(Number(d), 1);
  else if ((a === "left" || a === "right") && b === "label") c[a].label = "";
  else if (a === "quote" && b === "by") c.quote.by = "";
  else if (a === "kicker" || a === "lead" || a === "closing") c[a] = "";
  return c;
}

/** The slide with the text at `field` ("points.2.text", "left.items.0", "heading") set to `text`. */
export function setText(s: EditSlide, field: string, text: string): EditSlide {
  const c = clone(s);
  const path = field.split(".");
  let at: Record<string, unknown> | unknown[] = c as unknown as Record<string, unknown>;
  for (const k of path.slice(0, -1)) at = (at as Record<string, unknown>)[k] as Record<string, unknown>;
  const last = path[path.length - 1];
  if (Array.isArray(at)) at[Number(last)] = text;
  else if (at && typeof at === "object") at[last] = text;
  return c;
}

const blank = (t: string) => !t.replace(/\s+/g, "");

/** What stops the deck from being saved as it is ("Slide 3: the heading can't be empty."), or null. */
export function problem(slides: EditSlide[]): string | null {
  for (const [i, s] of slides.entries()) {
    const at = (what: string) => `Slide ${i + 1}: ${what} can't be empty.`;
    if (blank(s.heading) && s.layout !== "quote" && s.layout !== "closing") return at("the heading");
    if (s.layout === "points" || s.layout === "agenda") {
      const n = s.points.findIndex((p) => blank(p.text));
      if (n >= 0) return at(`${s.layout === "agenda" ? "topic" : "point"} ${n + 1}`);
    }
    if (s.layout === "two_column") {
      for (const side of ["left", "right"] as const) {
        const n = s[side].items.findIndex(blank);
        if (n >= 0) return at(`the ${side} column's item ${n + 1}`);
      }
    }
    if (s.layout === "stat" && (blank(s.stat.value) || blank(s.stat.label))) return at(blank(s.stat.value) ? "the number" : "the number's label");
    if (s.layout === "quote" && blank(s.quote.text)) return at("the quote");
    if (s.layout === "closing") {
      const n = s.takeaways.findIndex(blank);
      if (n >= 0) return at(`takeaway ${n + 1}`);
    }
  }
  return null;
}