@acms-subir/core 0.2.0 → 0.3.1

package/src/pages/admin/c/[collection]/index.astro

@@ -1,9 +1,10 @@
 ---
 import Admin from '../../../../layouts/Admin.astro';
 import Modal from '../../../../components/Modal.astro';
+import ContentList, { type ContentItem } from '../../../../components/ContentList.astro';
 import { getRepo } from '../../../../lib/repo';
 import { slugify, type Status } from '../../../../lib/schema';
-import { CONTENT } from '../../../../lib/content';
+import { CONTENT, collectionUrl } from '../../../../lib/content';
 
 // One list page for every collection; [collection] is the config key from
 // acms({ content.collections }). Unknown keys 404 — content in removed
@@ -14,8 +15,6 @@ if (!col) return new Response(null, { status: 404, statusText: 'Not found' });
 
 const { singular, plural, base } = col;
 const lower = singular.toLowerCase();
-// lower goes inside an inline confirm('…') — a quote in the name must not break it
-const lowerJs = lower.replace(/['\\]/g, '\\$&');
 const repo = await getRepo(Astro.locals);
 
 if (Astro.request.method === 'POST') {
@@ -29,43 +28,88 @@ if (Astro.request.method === 'POST') {
     const post = await repo.createPost({ title, slug, collection: key });
     return Astro.redirect(`/admin/c/${key}/${post.id}`);
   }
-  if (op === 'delete') {
-    await repo.deletePost(String(form.get('id')));
-    return Astro.redirect(`/admin/c/${key}`);
+  // row menu, swipe actions and the bulk bar all post here
+  if (op === 'bulk') {
+    const to = String(form.get('to'));
+    const ids = form.getAll('ids').map(String).filter(Boolean);
+    for (const id of ids) {
+      const p = await repo.getPost(id);
+      if (!p || p.collection !== key) continue;
+      if (to === 'delete') await repo.deletePost(id);
+      else if (to === 'published' || to === 'draft' || to === 'archived') {
+        await repo.updatePost(id, { status: to as Status, ...(to === 'published' ? { scheduledAt: null } : {}) });
+      }
+    }
+    return Astro.redirect(`/admin/c/${key}${Astro.url.search}`);
   }
 }
 
-const all = await repo.listPosts(key);
+const [all, users, settings] = await Promise.all([repo.listPosts(key), repo.listUsers(), repo.getSettings()]);
+const userById = new Map(users.map((u) => [u.id, u]));
 const q = (Astro.url.searchParams.get('q') ?? '').toLowerCase();
 const statusFilter = Astro.url.searchParams.get('status') ?? 'all';
 const tagFilter = Astro.url.searchParams.get('tag') ?? '';
+const authorFilter = Astro.url.searchParams.get('author') ?? '';
+const sort = Astro.url.searchParams.get('sort') ?? 'updated';
 
-const posts = all.filter((p) => {
-  if (statusFilter !== 'all' && p.status !== statusFilter) return false;
-  if (tagFilter && !p.tags.includes(tagFilter)) return false;
-  if (q && !p.title.toLowerCase().includes(q) && !p.slug.toLowerCase().includes(q)) return false;
-  return true;
-});
+const authorsOf = (p: (typeof all)[number]) => (p.authorIds.length ? p.authorIds : p.authorId ? [p.authorId] : []);
+const posts = all
+  .filter((p) => {
+    if (statusFilter !== 'all' && p.status !== statusFilter) return false;
+    if (tagFilter && !p.tags.includes(tagFilter)) return false;
+    if (authorFilter && !authorsOf(p).includes(authorFilter)) return false;
+    if (q && !p.title.toLowerCase().includes(q) && !p.slug.toLowerCase().includes(q)) return false;
+    return true;
+  })
+  .sort((a, b) => (sort === 'oldest' ? a.updatedAt - b.updatedAt : sort === 'title' ? a.title.localeCompare(b.title) : b.updatedAt - a.updatedAt));
 
 const allTags = [...new Set(all.flatMap((p) => p.tags))].sort();
+const authorIds = [...new Set(all.flatMap(authorsOf))].filter((id) => userById.has(id));
 const statusCounts = { all: all.length } as Record<string, number>;
 for (const p of all) statusCounts[p.status] = (statusCounts[p.status] ?? 0) + 1;
 const STATUSES: ('all' | Status)[] = ['all', 'draft', 'scheduled', 'published', 'archived'];
+const statusLabel = (s: string) => (s === 'all' ? `All ${plural.toLowerCase()}` : s[0].toUpperCase() + s.slice(1));
+const SORTS = [['updated', 'Recently updated'], ['oldest', 'Oldest first'], ['title', 'Title A–Z']];
+
+const items: ContentItem[] = posts.map((p) => {
+  const names = authorsOf(p).map((id) => userById.get(id)?.name).filter(Boolean);
+  const meta = [names.length ? `By ${names.join(', ')}` : '', p.tags[0] ? `in ${p.tags[0]}` : ''].filter(Boolean).join(' ');
+  return {
+    id: p.id,
+    href: `/admin/c/${key}/${p.id}`,
+    title: p.title,
+    sub: collectionUrl(key, p.slug),
+    meta,
+    at: p.updatedAt,
+    status: p.status,
+    edited: Boolean(p.draft),
+    scheduledAt: p.scheduledAt,
+    image: p.cover,
+    viewHref: p.status === 'published' ? collectionUrl(key, p.slug) : undefined,
+    featured: p.featured,
+  };
+});
 
 const showNew = Astro.url.searchParams.has('new');
-const fmt = (ts: number) => new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
 const filterHref = (patch: Record<string, string>) => {
   const p = new URLSearchParams(Astro.url.search);
   for (const [k, v] of Object.entries(patch)) v ? p.set(k, v) : p.delete(k);
   const s = p.toString();
   return `/admin/c/${key}${s ? `?${s}` : ''}`;
 };
+const chev = 'M6 9l6 6 6-6';
 ---
 
 <Admin title={plural} section={`c:${key}`}>
   <div class="page-head">
-    <h1>{plural}</h1>
-    <button class="btn primary" type="button" data-modal="new-post">New {lower}</button>
+    <div>
+      <h1>{plural}</h1>
+      <p class="sub">{all.length} {all.length === 1 ? lower : plural.toLowerCase()} · published under {base}</p>
+    </div>
+    <div class="page-actions">
+      <a class="btn" href={`/admin/ai?kind=posts&collection=${encodeURIComponent(key)}`}>Create from document</a>
+      <button class="btn primary" type="button" data-modal="new-post">New {lower}</button>
+    </div>
   </div>
 
   <Modal id="new-post" title={`New ${lower}`} open={showNew}>
@@ -79,86 +123,77 @@ const filterHref = (patch: Record<string, string>) => {
         <button class="btn ghost" type="button" data-close>Cancel</button>
         <button class="btn primary" type="submit">Create {lower}</button>
       </div>
-      <p class="hint" style="margin:12px 0 0">Creates a draft at {base}/&lt;slug-from-title&gt; and opens the editor — the slug is editable there.</p>
+      <p class="hint modal-note">Creates a draft at {base}/&lt;slug-from-title&gt; and opens the editor — the slug is editable there.</p>
     </form>
   </Modal>
 
-  <div class="filter-bar">
-    <div class="filter-tabs">
-      {STATUSES.map((s) => (
-        <a class={`filter-tab ${statusFilter === s ? 'is-active' : ''}`} href={filterHref({ status: s === 'all' ? '' : s })}>
-          {s === 'all' ? 'All' : s[0].toUpperCase() + s.slice(1)}
-          <span class="filter-count">{statusCounts[s] ?? 0}</span>
-        </a>
-      ))}
+  {all.length === 0 ? (
+    <div class="empty-state">
+      <b>No {plural.toLowerCase()} yet</b>
+      <p>Write your first {lower} — it stays a draft until you publish it.</p>
+      <button class="btn primary" type="button" data-modal="new-post">New {lower}</button>
     </div>
-    <form method="get" style="display:flex;gap:8px;align-items:center">
-      {statusFilter !== 'all' && <input type="hidden" name="status" value={statusFilter} />}
-      {allTags.length > 0 && (
-        <select name="tag" onchange="this.form.submit()" style="width:auto">
-          <option value="">All tags</option>
-          {allTags.map((t) => <option value={t} selected={t === tagFilter}>{t}</option>)}
-        </select>
-      )}
-      <input type="search" name="q" placeholder={`Search ${plural.toLowerCase()}…`} value={q} style="min-width:180px" />
-    </form>
-  </div>
-
-  <div class="card">
-    <table class="list">
-      <thead><tr><th>Title</th><th>Status</th><th>Tags</th><th>Updated</th><th></th></tr></thead>
-      <tbody>
-        {posts.map((p) => (
-          <tr>
-            <td>
-              <a class="t-title" href={`/admin/c/${key}/${p.id}`}>{p.featured && <span title="Featured" style="color:#e8a13a">★ </span>}{p.title}</a>
-              <div class="t-sub">{base}/{p.slug}{p.excerpt ? ` — ${p.excerpt.slice(0, 60)}${p.excerpt.length > 60 ? '…' : ''}` : ''}</div>
-            </td>
-            <td>
-              <span class={`pill ${p.status}`}>{p.status}</span>
-              {p.draft && <span class="pill edited" title="Has pending edits — press Update in the editor to push them live">edited</span>}
-              {p.status === 'scheduled' && p.scheduledAt && (
-                <div class="t-sub" style="margin-top:2px">
-                  {new Date(p.scheduledAt).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}
-                </div>
-              )}
-            </td>
-            <td class="t-sub">{p.tags.join(', ')}</td>
-            <td class="t-sub">{fmt(p.updatedAt)}</td>
-            <td style="text-align:right">
-              <form class="inline-form" method="post" onsubmit={`return confirm('Delete this ${lowerJs} permanently? Consider archiving instead (from the editor).')`}>
-                <input type="hidden" name="op" value="delete" />
-                <input type="hidden" name="id" value={p.id} />
-                <button class="btn sm ghost danger" type="submit">Delete</button>
-              </form>
-            </td>
-          </tr>
+  ) : (
+    <>
+      <nav class="chips" aria-label="Status">
+        {STATUSES.map((s) => (
+          <a class={statusFilter === s ? 'on' : ''} href={filterHref({ status: s === 'all' ? '' : s })}>
+            {s === 'all' ? 'All' : s[0].toUpperCase() + s.slice(1)}<small>{statusCounts[s] ?? 0}</small>
+          </a>
         ))}
-        {posts.length === 0 && (
-          <tr>
-            <td colspan="5">
-              {all.length === 0 ? (
-                <div class="empty-state">
-                  <b>No {plural.toLowerCase()} yet</b>
-                  <p>Write your first {lower} — it stays a draft until you publish it.</p>
-                  <button class="btn primary" type="button" data-modal="new-post">New {lower}</button>
-                </div>
-              ) : (
-                <p class="hint" style="margin:0;padding:12px 0">No {plural.toLowerCase()} match the current filters.</p>
-              )}
-            </td>
-          </tr>
-        )}
-      </tbody>
-    </table>
-  </div>
+      </nav>
+      <div class="list-tools">
+        <form method="get" class="list-search" role="search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4" /></svg>
+          {statusFilter !== 'all' && <input type="hidden" name="status" value={statusFilter} />}
+          <input type="search" name="q" value={q} placeholder={`Filter ${plural.toLowerCase()}…`} data-live-filter aria-label={`Filter ${plural.toLowerCase()}`} />
+        </form>
+        <div class="fmenus">
+          <details class={`fmenu ${statusFilter !== 'all' ? 'is-set' : ''}`} data-kind="status">
+            <summary>{statusLabel(statusFilter)} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={chev} /></svg></summary>
+            <div class="fmenu-pop">
+              {STATUSES.map((s) => (
+                <a class={statusFilter === s ? 'on' : ''} href={filterHref({ status: s === 'all' ? '' : s })}>{statusLabel(s)}<small>{statusCounts[s] ?? 0}</small></a>
+              ))}
+            </div>
+          </details>
+          {authorIds.length > 1 && (
+            <details class={`fmenu ${authorFilter ? 'is-set' : ''}`}>
+              <summary>{authorFilter ? userById.get(authorFilter)?.name ?? 'Author' : 'All authors'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={chev} /></svg></summary>
+              <div class="fmenu-pop">
+                <a class={!authorFilter ? 'on' : ''} href={filterHref({ author: '' })}>All authors</a>
+                {authorIds.map((id) => <a class={authorFilter === id ? 'on' : ''} href={filterHref({ author: id })}>{userById.get(id)?.name}</a>)}
+              </div>
+            </details>
+          )}
+          {allTags.length > 0 && (
+            <details class={`fmenu ${tagFilter ? 'is-set' : ''}`}>
+              <summary>{tagFilter ? `#${tagFilter}` : 'All tags'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={chev} /></svg></summary>
+              <div class="fmenu-pop">
+                <a class={!tagFilter ? 'on' : ''} href={filterHref({ tag: '' })}>All tags</a>
+                {allTags.map((t) => <a class={tagFilter === t ? 'on' : ''} href={filterHref({ tag: t })}>#{t}</a>)}
+              </div>
+            </details>
+          )}
+          <details class="fmenu">
+            <summary>{SORTS.find(([k]) => k === sort)?.[1] ?? 'Recently updated'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={chev} /></svg></summary>
+            <div class="fmenu-pop">
+              {SORTS.map(([k, l]) => <a class={sort === k ? 'on' : ''} href={filterHref({ sort: k === 'updated' ? '' : k })}>{l}</a>)}
+            </div>
+          </details>
+        </div>
+      </div>
+      <ContentList items={items} noun={lower} timeZone={settings.timezone || undefined} groupByMonth={sort !== 'title'} empty={`No ${plural.toLowerCase()} match the current filters.`} />
+      {items.length === 0 && <p class="hint" style="padding:24px 8px">No {plural.toLowerCase()} match the current filters. <a href={`/admin/c/${key}`}>Clear filters</a></p>}
+    </>
+  )}
 </Admin>
 
-<style>
-  .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
-  .filter-tabs { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
-  .filter-tab { color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px; }
-  .filter-tab:hover { color: var(--text); }
-  .filter-tab.is-active { background: var(--accent-soft); color: var(--text); }
-  .filter-count { color: var(--faint); font-size: 11px; margin-left: 5px; }
-</style>
+<script>
+  // one filter menu open at a time; outside click closes
+  document.addEventListener('click', (e) => {
+    document.querySelectorAll<HTMLDetailsElement>('details.fmenu[open]').forEach((d) => {
+      if (!(e.target instanceof Node && d.contains(e.target))) d.open = false;
+    });
+  });
+</script>