st-pierre/public/app.js

import m from "https://esm.sh/mithril@2.3.8";

const API = "/api/v1/flashcards";

const Card = {
  view: function (v) {
    const c = v.attrs.card;
    const maxNote = (c.note || "").length > 120
      ? c.note.slice(0, 120) + "…"
      : c.note;
    return m(
      ".cyber-card.cyber-card--interactive.cyber-neon-border.cyber-mb-md",
      {
        onclick: () => m.route.set("/flashcard/" + c.id),
        style: "cursor:pointer",
      },
      [
        c.tags?.length
          ? m(
              ".cyber-card__header",
              c.tags.map((t) => m("span.cyber-badge.cyber-badge--pulse.cyber-mr-xs", t)),
            )
          : null,
        m(".cyber-card__body", [
          m(".cyber-text-muted.cyber-font-mono", `#${c.id} v${c.version}`),
          m("p.cyber-text-primary.cyber-mt-sm", maxNote || m("em.cyber-text-muted", "no content")),
        ]),
      ],
    );
  },
};

const PAGE_SIZE = 20;

const Pager = {
  view: function (v) {
    const { page, total } = v.attrs;
    if (total <= 1) return null;
    return m(".cyber-flex.cyber-justify-center.cyber-items-center.cyber-gap-sm.cyber-my-md", [
      m(
        "button.cyber-btn.cyber-btn--sm" + (page <= 1 ? ".cyber-btn--ghost" : ""),
        { disabled: page <= 1, onclick: () => v.attrs.onpage(page - 1) },
        "\u2190",
      ),
      m("span.cyber-font-mono.cyber-text-muted", `${page} / ${total}`),
      m(
        "button.cyber-btn.cyber-btn--sm" + (page >= total ? ".cyber-btn--ghost" : ""),
        { disabled: page >= total, onclick: () => v.attrs.onpage(page + 1) },
        "\u2192",
      ),
    ]);
  },
};

const List = {
  oninit: async function (v) {
    v.state.cards = [];
    v.state.loading = true;
    const res = await fetch(API);
    const data = await res.json();
    v.state.cards = data.flashcards || [];
    v.state.loading = false;
    v.state.page = 1;
    m.redraw();
  },
  view: function (v) {
    if (v.state.loading) {
      return m(".cyber-center-xy", [
        m(".cyber-spinner.cyber-spinner--lg"),
        m("p.cyber-text-muted.cyber-mt-md", "loading…"),
      ]);
    }
    const totalPages = Math.max(1, Math.ceil(v.state.cards.length / PAGE_SIZE));
    const page = Math.min(v.state.page, totalPages);
    const slice = v.state.cards.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
    return m(".cyber-p-lg", { style: "max-width:720px;margin:0 auto" }, [
      m(Pager, {
        page,
        total: totalPages,
        onpage: (n) => { v.state.page = n; },
      }),
      m(".cyber-scanlines", slice.map((c) => m(Card, { card: c }))),
      m(Pager, {
        page,
        total: totalPages,
        onpage: (n) => { v.state.page = n; },
      }),
    ]);
  },
};

const Detail = {
  oninit: async function (v) {
    v.state.entry = null;
    v.state.loading = true;
    try {
      const res = await fetch(`${API}/${v.attrs.id}`);
      if (res.ok) v.state.entry = await res.json();
    } catch {}
    v.state.loading = false;
    m.redraw();
  },
  view: function (v) {
    if (v.state.loading) {
      return m(".cyber-center-xy", m(".cyber-spinner.cyber-spinner--lg"));
    }
    const e = v.state.entry;
    if (!e) {
      return m(".cyber-p-lg", { style: "max-width:720px;margin:0 auto" }, [
        m("button.cyber-btn.cyber-btn--ghost", { onclick: () => m.route.set("/") }, "\u2B05 Back"),
        m("p.cyber-text-magenta", "Flashcard not found."),
      ]);
    }
    return m(".cyber-p-lg", { style: "max-width:720px;margin:0 auto" }, [
      m("button.cyber-btn.cyber-btn--ghost.cyber-mb-md", { onclick: () => m.route.set("/") }, "\u2B05 Back"),
      m(".cyber-card.cyber-card--holo", [
        m(".cyber-card__header", [
          m("span.cyber-font-mono.cyber-text-cyan", `#${e.id} v${e.version}`),
        ]),
        m(".cyber-card__body", [
          m(".cyber-field", [m(".cyber-field__label", "Note"), m("p", e.note)]),
          e.host
            ? m(".cyber-field.cyber-mt-sm", [m(".cyber-field__label", "Host"), m("p", e.host)])
            : null,
          e.user
            ? m(".cyber-field.cyber-mt-sm", [m(".cyber-field__label", "User"), m("p", e.user)])
            : null,
          e.context
            ? m(".cyber-field.cyber-mt-sm", [m(".cyber-field__label", "Context"), m("p", e.context)])
            : null,
          e.repos?.length
            ? m(".cyber-field.cyber-mt-sm", [
                m(".cyber-field__label", "Repos"),
                m("div", e.repos.map((r) => m("span.cyber-badge.cyber-mr-xs", r))),
              ])
            : null,
          e.tags?.length
            ? m(".cyber-field.cyber-mt-sm", [
                m(".cyber-field__label", "Tags"),
                m("div", e.tags.map((t) => m("span.cyber-badge.cyber-mr-xs", t))),
              ])
            : null,
          m(".cyber-field.cyber-mt-sm", [m(".cyber-field__label", "Created"), m("p", e.created)]),
          e.delete_timestamp
            ? m(".cyber-field.cyber-mt-sm", [m(".cyber-field__label", "Deleted"), m("p", e.delete_timestamp)])
            : null,
        ]),
      ]),
    ]);
  },
};

m.route(document.getElementById("app"), "/", {
  "/": List,
  "/flashcard/:id": Detail,
});