@vespercms/admin 0.0.0-stage → 0.1.0-next.0

package/src/screens/EntryList.tsx

@@ -0,0 +1,274 @@
+import { decodeValue, humanize, type CollectionManifest, type EntrySummary } from '@vespercms/core';
+import { ButtonLink, Link, Select, Table, TextField, type TableColumn } from '@vespercms/ui';
+import { useEffect, useMemo, useState } from 'react';
+import type { SortDescriptor } from 'react-aria-components';
+import { useStudio } from '../app/context.tsx';
+import { entryShownTo, mayCreateIn } from '../cloud/access.ts';
+import { formatRelative } from '../app/format.ts';
+import { useLoad } from '../app/load.ts';
+import { hrefFor, navigate } from '../app/router.ts';
+import { collectionIcon } from '../app/collection-icon.ts';
+import { Screen } from '../app/Screen.tsx';
+import { hasUpcoming, rowData, scheduleWords, siteZone } from '../schedule/times.ts';
+
+type Filter = 'all' | 'drafts' | 'attention' | 'scheduled';
+
+/**
+ * A collection's entries (spec §10.3): one row per entry with its title,
+ * the collection's list fields, when it was edited, and its status in
+ * words. One search box and one status filter; sort by column header.
+ */
+export function EntryList({ collection }: { collection: CollectionManifest }) {
+  const { api, cloud, manifest } = useStudio();
+  const { zone } = siteZone(manifest);
+  const [load] = useLoad(() => api.listEntries(collection.name), collection.name);
+  const [query, setQuery] = useState('');
+  const [filter, setFilter] = useState<Filter>('all');
+  const [sort, setSort] = useState<SortDescriptor>(() => defaultSort(collection));
+  // In the cloud, only the entries the member can edit (spec §7.5); viewers see all.
+  const entries = useMemo(
+    () => (load.state === 'ready' ? load.value.filter((e) => entryShownTo(cloud, e.path)) : []),
+    [load, cloud],
+  );
+
+  // A singleton has no list: open its one entry, or start it.
+  const singleton = collection.presentation.singleton === true;
+  useEffect(() => {
+    if (!singleton || load.state !== 'ready') return;
+    const [only] = load.value;
+    if (only)
+      navigate({ screen: 'edit', collection: collection.name, id: only.id }, { replace: true });
+    else if (collection.editable)
+      navigate({ screen: 'new', collection: collection.name }, { replace: true });
+  }, [singleton, load, collection]);
+
+  const listKeys = (collection.presentation.listFields ?? []).filter((key) => !TITLE_KEYS.has(key));
+  const columns: TableColumn[] = [
+    { id: 'title', label: 'Title', isRowHeader: true, allowsSorting: true },
+    ...listKeys.map((key) => ({
+      id: `field:${key}`,
+      label: labelFor(collection, key),
+      allowsSorting: true,
+    })),
+    { id: 'updatedAt', label: 'Edited', allowsSorting: true },
+    { id: 'status', label: 'Status' },
+  ];
+
+  const needsAttention = entries.some((e) => e.status !== 'editable');
+  const hasDrafts = entries.some((e) => e.draft);
+  const hasScheduled = entries.some((e) => hasUpcoming(e.schedule));
+  const rows = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    const shown = entries.filter(
+      (entry) =>
+        (needle === '' ||
+          entry.title.toLowerCase().includes(needle) ||
+          entry.id.toLowerCase().includes(needle)) &&
+        (filter === 'all' ||
+          (filter === 'drafts' && entry.draft === true) ||
+          (filter === 'attention' && entry.status !== 'editable') ||
+          (filter === 'scheduled' && hasUpcoming(entry.schedule))),
+    );
+    return [...shown].sort(compareBy(sort));
+  }, [entries, query, filter, sort]);
+  const words = (entry: EntrySummary) =>
+    scheduleWords(
+      collection.presentation.schedule,
+      rowData(collection.presentation.schedule, entry.schedule),
+      zone,
+    );
+
+  return (
+    <Screen
+      title={collection.label}
+      icon={collectionIcon(collection)}
+      afterglow={load.state === 'ready' && entries.length === 0}
+    >
+      {!collection.editable && (
+        <p className="mb-6 max-w-2xl text-content-muted">
+          {collection.label} can be read here but not edited.
+        </p>
+      )}
+      {load.state === 'failed' && (
+        <p role="alert" className="mb-6 text-danger">
+          Couldn’t load entries: {load.message}
+        </p>
+      )}
+      <div className="mb-6 flex flex-wrap items-end gap-4">
+        <TextField
+          label="Search"
+          type="search"
+          icon="search"
+          value={query}
+          onChange={setQuery}
+          className="w-full max-w-xs"
+        />
+        {(hasDrafts || needsAttention || hasScheduled) && (
+          <Select
+            label="Show"
+            value={filter}
+            onChange={(value) => {
+              setFilter((value ?? 'all') as Filter);
+            }}
+            options={[
+              { value: 'all', label: 'All entries' },
+              ...(hasDrafts ? [{ value: 'drafts', label: 'Drafts' }] : []),
+              ...(needsAttention ? [{ value: 'attention', label: 'Needs a developer' }] : []),
+              ...(hasScheduled ? [{ value: 'scheduled', label: 'Scheduled' }] : []),
+            ]}
+            className="w-48"
+          />
+        )}
+        {filter === 'scheduled' && (
+          <Link href={hrefFor({ screen: 'scheduled' })} className="mb-2">
+            Everything scheduled on the site
+          </Link>
+        )}
+        {collection.editable && !singleton && mayCreateIn(cloud, collection) && (
+          // The screen's one primary action.
+          <ButtonLink
+            variant="primary"
+            icon="add"
+            href={hrefFor({ screen: 'new', collection: collection.name })}
+            className="ml-auto"
+          >
+            New entry
+          </ButtonLink>
+        )}
+      </div>
+      {load.state === 'loading' ? (
+        <p className="text-small text-content-muted">Loading entries…</p>
+      ) : (
+        <Table
+          label={collection.label}
+          columns={columns}
+          rows={rows}
+          sort={sort}
+          onSortChange={setSort}
+          rowHref={(entry) =>
+            hrefFor({ screen: 'edit', collection: collection.name, id: entry.id })
+          }
+          emptyState={entries.length === 0 ? 'No entries yet.' : 'No entries match.'}
+          renderCell={(entry, column) => (
+            <Cell entry={entry} column={column} schedule={words(entry)} />
+          )}
+        />
+      )}
+      <p className="sr-only" role="status">
+        {load.state === 'ready'
+          ? `${String(rows.length)} of ${String(entries.length)} entries shown.`
+          : ''}
+      </p>
+    </Screen>
+  );
+}
+
+export const TITLE_KEYS = new Set(['title', 'name', 'heading', 'label']);
+
+function Cell({
+  entry,
+  column,
+  schedule,
+}: {
+  entry: EntrySummary;
+  column: string;
+  schedule: string | null;
+}) {
+  if (column === 'title') {
+    return (
+      <span className="font-semibold text-content">
+        {entry.title}
+        {entry.title !== entry.id && (
+          <span className="block font-mono text-caption font-normal text-content-muted">
+            {entry.id}
+          </span>
+        )}
+      </span>
+    );
+  }
+  if (column === 'updatedAt') {
+    return (
+      <span className="text-content-muted">
+        {entry.updatedAt ? formatRelative(entry.updatedAt) : ''}
+      </span>
+    );
+  }
+  if (column === 'status') {
+    return <span className="text-content-muted">{statusText(entry, schedule)}</span>;
+  }
+  return <span>{formatListValue(entry.fields[column.slice('field:'.length)])}</span>;
+}
+
+/** An entry's status in words: what it is, then its schedule ("Draft · Scheduled · Sat, Oct 31, 8:00 AM"). */
+export function statusText(
+  entry: Pick<EntrySummary, 'status' | 'draft'>,
+  schedule: string | null = null,
+): string {
+  const kind =
+    entry.status === 'read-only'
+      ? 'Read only'
+      : entry.status === 'source-only'
+        ? 'Edit as YAML'
+        : entry.draft
+          ? 'Draft'
+          : '';
+  return [kind, schedule ?? ''].filter(Boolean).join(' · ');
+}
+
+/** A list field's value as short text. Dates at midnight UTC are calendar dates. */
+export function formatListValue(encoded: unknown): string {
+  const value = decodeValue(encoded);
+  if (value instanceof Date) {
+    const dateOnly = value.getUTCHours() === 0 && value.getUTCMinutes() === 0;
+    return value.toLocaleDateString(undefined, {
+      dateStyle: 'medium',
+      ...(dateOnly ? { timeZone: 'UTC' } : {}),
+    } as Intl.DateTimeFormatOptions);
+  }
+  if (Array.isArray(value)) return value.map((v) => formatListValue(v)).join(', ');
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'object') return '…';
+  return String(value);
+}
+
+export function labelFor(collection: CollectionManifest, key: string): string {
+  return (
+    collection.fields?.find((f) => f.path.length === 1 && f.path[0] === key)?.label ?? humanize(key)
+  );
+}
+
+export function defaultSort(collection: CollectionManifest): SortDescriptor {
+  // A collection in a set order is listed in that order.
+  const { orderBy } = collection.presentation;
+  if (orderBy) return { column: `field:${orderBy}`, direction: 'ascending' };
+  const dateKey = (collection.presentation.listFields ?? []).find((key) =>
+    collection.fields?.some((f) => f.path[0] === key && f.path.length === 1 && f.kind === 'date'),
+  );
+  return dateKey
+    ? { column: `field:${dateKey}`, direction: 'descending' }
+    : { column: 'title', direction: 'ascending' };
+}
+
+function sortValue(entry: EntrySummary, column: string): string | number {
+  if (column === 'title') return entry.title.toLowerCase();
+  if (column === 'updatedAt') return entry.updatedAt ?? '';
+  const value = decodeValue(entry.fields[column.slice('field:'.length)]);
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === 'number') return value;
+  return formatListValue(entry.fields[column.slice('field:'.length)]).toLowerCase();
+}
+
+export function compareBy(sort: SortDescriptor) {
+  const column = String(sort.column);
+  const direction = sort.direction === 'descending' ? -1 : 1;
+  return (a: EntrySummary, b: EntrySummary) => {
+    const x = sortValue(a, column);
+    const y = sortValue(b, column);
+    if (x === y) return a.title.localeCompare(b.title);
+    // Entries without the value come last either way, as an ordered collection's do.
+    if (x === '') return 1;
+    if (y === '') return -1;
+    return (x < y ? -1 : 1) * direction;
+  };
+}

package/src/screens/Home.tsx

@@ -0,0 +1,131 @@
+import type { CollectionManifest, CollectionSummary } from '@vespercms/core';
+import { Icon, InlineStatus, Link } from '@vespercms/ui';
+import { useStudio } from '../app/context.tsx';
+import { formatCount, formatRelative } from '../app/format.ts';
+import { useLoad } from '../app/load.ts';
+import { hrefFor } from '../app/router.ts';
+import { collectionIcon } from '../app/collection-icon.ts';
+import { Screen } from '../app/Screen.tsx';
+import { shownTo } from '../cloud/access.ts';
+import { DraftsWaiting } from '../cloud/changes.tsx';
+import { ScheduledLine } from '../schedule/ScheduledView.tsx';
+
+/**
+ * The home screen (spec §10.3): a plain list of collections and singletons,
+ * with entry counts and when each was last edited. Nothing else. One screen
+ * at a time only: among panes, the structure pane lists them (app/panes.tsx).
+ */
+export function Home() {
+  const { manifest, api, cloud } = useStudio();
+  const [summary] = useLoad(() => api.summary());
+  const byName = new Map<string, CollectionSummary>(
+    summary.state === 'ready' ? summary.value.map((s) => [s.collection, s]) : [],
+  );
+
+  // In the cloud, only what the member can edit (spec §7.5).
+  const shown = manifest.collections.filter((c) => shownTo(cloud, c.name));
+  const collections = shown.filter((c) => !c.presentation.singleton);
+  const singletons = shown.filter((c) => c.presentation.singleton);
+
+  return (
+    <Screen title="Content" afterglow>
+      {cloud && (
+        <div className="mb-8 max-w-2xl">
+          <DraftsWaiting />
+        </div>
+      )}
+      <ScheduledLine className="mb-8 max-w-2xl" />
+      {summary.state === 'failed' && (
+        <p className="mb-6 text-danger" role="alert">
+          Couldn’t load entry counts: {summary.message}
+        </p>
+      )}
+      {manifest.collections.length === 0 ? (
+        <p className="max-w-2xl text-content-muted">
+          This site has no content collections yet. Add one in{' '}
+          <code className="font-mono text-small">src/content.config.ts</code> and it appears here.
+        </p>
+      ) : (
+        <div className="grid max-w-2xl gap-12">
+          {collections.length > 0 && (
+            <CollectionList
+              heading="Collections"
+              collections={collections}
+              summaries={byName}
+              loading={summary.state === 'loading'}
+            />
+          )}
+          {singletons.length > 0 && (
+            <CollectionList
+              heading="Settings"
+              collections={singletons}
+              summaries={byName}
+              loading={summary.state === 'loading'}
+            />
+          )}
+        </div>
+      )}
+    </Screen>
+  );
+}
+
+function CollectionList({
+  heading,
+  collections,
+  summaries,
+  loading,
+}: {
+  heading: string;
+  collections: CollectionManifest[];
+  summaries: Map<string, CollectionSummary>;
+  loading: boolean;
+}) {
+  return (
+    <section aria-labelledby={`home-${heading}`}>
+      <h2 id={`home-${heading}`} className="mb-3 text-heading-2 text-content">
+        {heading}
+      </h2>
+      <ul className="divide-y divide-border border-y border-border">
+        {collections.map((collection) => (
+          <li
+            key={collection.name}
+            className="flex min-h-12 flex-wrap items-center justify-between gap-x-6 gap-y-1 py-3"
+          >
+            <span className="flex min-w-0 items-center gap-3">
+              <Icon {...collectionIcon(collection)} className="text-content-muted" />
+              <Link variant="title" href={hrefFor({ screen: 'list', collection: collection.name })}>
+                {collection.label}
+              </Link>
+            </span>
+            <CollectionFacts
+              collection={collection}
+              summary={summaries.get(collection.name)}
+              loading={loading}
+            />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function CollectionFacts({
+  collection,
+  summary,
+  loading,
+}: {
+  collection: CollectionManifest;
+  summary: CollectionSummary | undefined;
+  loading: boolean;
+}) {
+  const facts: string[] = [];
+  if (!collection.editable) facts.push('Read only');
+  if (summary) {
+    if (!collection.presentation.singleton)
+      facts.push(formatCount(summary.count, 'entry', 'entries'));
+    if (summary.updatedAt) facts.push(`edited ${formatRelative(summary.updatedAt)}`);
+  } else if (loading) {
+    facts.push('Loading…');
+  }
+  return <InlineStatus live={false}>{facts.join(' · ')}</InlineStatus>;
+}