@acms-subir/core 0.2.0 → 0.3.0

package/src/middleware.ts

@@ -1,7 +1,11 @@
 import { defineMiddleware } from 'astro:middleware';
-import { verifySessionToken, SESSION_COOKIE } from './lib/auth';
+import { validateSession, SESSION_COOKIE } from './lib/auth';
 import { getRepo } from './lib/repo';
 import { CONTENT } from './lib/content';
+import { processDueDeliveries, waitUntilFrom } from './lib/webhooks';
+import { dispatchEmail } from './lib/email/service';
+import { sendDueReminders } from './lib/booking/service';
+import { previewParamRedirect, hasPreviewCookie } from './lib/designPreview';
 
 // Legacy content-URL redirects, checked only on would-be 404s (below) so they
 // can never shadow real content. Tags moved from `${base}/tag/` to a
@@ -56,19 +60,38 @@ export const onRequest = defineMiddleware(async (context, next) => {
     return context.redirect(pathname.replace(/\/+$/, '') + context.url.search, 301);
   }
 
+  // design preview links (?designPreview=1, ?designVersion=, ?preview=<token>,
+  // ?preview=off) become a cookie, then the clean URL — so every link clicked
+  // afterwards stays in preview mode
+  const previewTo = await previewParamRedirect(context.url, context.request.method, context.cookies, async () =>
+    Boolean(await validateSession(context.cookies.get(SESSION_COOKIE)?.value, context.locals)));
+  if (previewTo) return context.redirect(previewTo, 302);
+
   if (pathname.startsWith('/admin') && pathname !== '/admin/login') {
     const token = context.cookies.get(SESSION_COOKIE)?.value;
-    if (!verifySessionToken(token)) {
+    if (!(await validateSession(token, context.locals))) {
       return context.redirect('/admin/login');
     }
   }
 
   const now = Date.now();
-  if (now - lastPublishCheck > 60_000 && !pathname.startsWith('/media/')) {
+  if (now - lastPublishCheck > 60_000 && !pathname.startsWith('/media/') && !pathname.startsWith('/account/') && !pathname.startsWith('/api/email/')) {
     lastPublishCheck = now;
     try {
       const repo = await getRepo(context.locals);
       await repo.publishDuePosts(now);
+      // webhook retries ride the same once-a-minute sweep (Node has no
+      // cron) — in the background, never holding up this request
+      const emails = dispatchEmail(repo, context.locals, 2).catch(() => 0);
+      const wait = waitUntilFrom(context.locals);
+      if (wait) wait(emails); else await emails;
+      const retries = processDueDeliveries(repo, { now }).catch(() => {});
+      if (wait) wait(retries); else await retries;
+      // booking reminders (Node has no cron): site URL, else this request's origin
+      const reminders = repo.getSettings()
+        .then((s) => sendDueReminders(repo, { origin: s.siteUrl.replace(/\/+$/, '') || context.url.origin, locals: context.locals, now }))
+        .catch(() => {});
+      if (wait) wait(reminders); else await reminders;
     } catch {
       // never let the publish sweep break a request
     }
@@ -76,6 +99,16 @@ export const onRequest = defineMiddleware(async (context, next) => {
 
   const response = await next();
 
+  // a preview render must never be cached where a visitor could get it
+  if (hasPreviewCookie(context.cookies)) {
+    try {
+      response.headers.set('Cache-Control', 'private, no-store');
+      response.headers.append('Vary', 'Cookie');
+    } catch {
+      // immutable headers (e.g. a proxied response): nothing to cache-bust
+    }
+  }
+
   // Redirects fire only when the request would otherwise 404, so a rule can
   // never shadow real content. The table is cached per isolate for a minute.
   if (response.status === 404 && !pathname.startsWith('/admin') && !pathname.startsWith('/api')) {

package/src/pages/404.astro

@@ -0,0 +1,23 @@
+---
+import Site from '../layouts/Site.astro';
+import { SEARCH } from '../lib/search-config';
+// Rendered for every unmatched URL and for routes that return an empty 404.
+Astro.response.status = 404;
+---
+
+<Site title="Page not found" noindex>
+  <div class="not-found">
+    <div class="empty-state">
+      <span class="empty-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.6-3.6M8.5 11h5" /></svg></span>
+      <h1>Page not found</h1>
+      <span>It moved, or it never existed.</span>
+      {SEARCH.enabled && (
+        <form action="/search" method="get" role="search">
+          <input type="search" name="q" placeholder="Search the site" aria-label="Search the site" />
+          <button class="btn primary sm" type="submit">Search</button>
+        </form>
+      )}
+      <a class="btn secondary sm" href="/">Go home</a>
+    </div>
+  </div>
+</Site>

package/src/pages/[...slug].astro

@@ -1,8 +1,9 @@
 ---
+import ThemeSections from '../components/ThemeSections.astro';
 import Site from '../layouts/Site.astro';
 import WidgetRenderer from '../components/WidgetRenderer.astro';
 import { getRepo } from '../lib/repo';
-import { verifySessionToken, SESSION_COOKIE } from '../lib/auth';
+import { validateSession, SESSION_COOKIE } from '../lib/auth';
 import { expandDynamicBlocks } from '../lib/dynamicBlocks';
 import { highlightCodeHtml } from '../lib/highlightCode';
 import { resolveDesign } from '../lib/theme';
@@ -13,15 +14,15 @@ const repo = await getRepo(Astro.locals);
 const page = slug ? await repo.getPageBySlug(slug) : null;
 
 // Drafts are visible only to a logged-in admin (doubles as draft preview).
-const isAdmin = verifySessionToken(Astro.cookies.get(SESSION_COOKIE)?.value);
+const isAdmin = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
 if (!page || (page.status !== 'published' && !isAdmin)) {
   return new Response(null, { status: 404, statusText: 'Not found' });
 }
 const bodyHtml = page.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo)) : '';
 // ?designPreview=1 (admin-only) renders the staged Design-screen changes
-const settings = effectiveSettings(await repo.getSettings(), Astro.url, Astro.cookies);
+const settings = await effectiveSettings(await repo.getSettings(), Astro.url, Astro.cookies, Astro.locals);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const PageTemplate = (page.template ? resolveDesign(settings).theme.pageTemplates[page.template] : null) as any;
+const PageTemplate = (page.template && settings.sectionPages?.[page.id]?.mode !== 'content' ? resolveDesign(settings).theme.pageTemplates[page.template] : null) as any;
 ---
 
 <Site
@@ -35,7 +36,9 @@ const PageTemplate = (page.template ? resolveDesign(settings).theme.pageTemplate
       Draft preview — only you can see this page.
     </p>
   )}
-  {PageTemplate ? (
+  {settings.sectionPages?.[page.id]?.mode === 'sections' ? (
+    <ThemeSections page={page} settings={settings} />
+  ) : PageTemplate ? (
     <PageTemplate page={page} html={bodyHtml} settings={settings} />
   ) : page.bodyHtml ? (
     <article class="page-body" set:html={bodyHtml} />

package/src/pages/account/[action].astro

@@ -0,0 +1,53 @@
+---
+import { getRepo } from '../../lib/repo';
+import { accountForm, issueAccountToken, redeemAccountToken } from '../../lib/email/accounts';
+import { sha256 } from '../../lib/email/config';
+import { dispatchEmail, kickEmail } from '../../lib/email/service';
+import { waitUntilFrom } from '../../lib/webhooks';
+import { SESSION_COOKIE } from '../../lib/auth';
+import '../../styles/admin.css';
+const action=Astro.params.action||'';
+if(!['invite','reset','forgot'].includes(action))return new Response('Not found',{status:404});
+Astro.response.headers.set('Cache-Control','no-store');
+Astro.response.headers.set('Referrer-Policy','no-referrer');
+Astro.response.headers.set('X-Robots-Tag','noindex');
+const repo=await getRepo(Astro.locals);
+const token=Astro.url.searchParams.get('token')||'';
+let error='',success='';
+if(Astro.request.method==='POST'){
+  try{
+    if(Astro.request.headers.get('origin')!==Astro.url.origin)throw new Error('Please submit this form from this site.');
+    if(Number(Astro.request.headers.get('content-length'))>10000)throw new Error('Form too large.');
+    const form=await accountForm(Astro.request);
+    const address=String(form.get('email')||'').trim().toLowerCase();
+    const ip=Astro.clientAddress||'unknown';
+    const allowed=await repo.email.rateLimit(`account-ip:${sha256(ip)}`,20,15*60000);
+    if(action==='forgot'){
+      const accountAllowed=await repo.email.rateLimit(`reset:${sha256(address)}`,3,15*60000);
+      if(allowed&&accountAllowed){
+        try { await issueAccountToken(repo,{purpose:'reset',email:address},Astro.locals); const wait=waitUntilFrom(Astro.locals); if(wait)wait(dispatchEmail(repo,Astro.locals,1).catch(()=>0)); }
+        catch { /* Generic response also covers unavailable email configuration. */ }
+      }
+      success='If an account exists for that address, a password reset email will be sent. Check your inbox.';
+    }else{
+      if(!allowed)throw new Error('Too many attempts. Please try again later.');
+      const password=String(form.get('password')||'');
+      if(password!==String(form.get('confirm')||''))throw new Error('The passwords do not match.');
+      if(!await redeemAccountToken(repo,token,password,action as 'invite'|'reset'))throw new Error('This link has expired, was used, or was revoked. Request a new link.');
+      Astro.cookies.delete(SESSION_COOKIE,{path:'/'});
+      success=action==='invite'?'Your account is ready. Sign in with your email and new password.':'Your password has changed. Sign in again with your new password.';
+      await kickEmail(repo,Astro.locals,waitUntilFrom(Astro.locals));
+    }
+  }catch(e){error=e instanceof Error?e.message:'Unable to process this request.';}
+}
+const liveToken=action==='forgot'?true:/^[a-zA-Z0-9_-]{43}$/.test(token)&&await repo.email.tokenByHash(sha256(token));
+const heading=action==='forgot'?'Forgot your password?':action==='invite'?'Accept your invitation':'Choose a new password';
+---
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="robots" content="noindex"/><meta name="referrer" content="no-referrer"/><title>{heading}</title></head>
+<body><main class="login-wrap"><div class="card card-pad login-card"><h1>{heading}</h1>
+{error&&<p class="flash error" role="alert">{error}</p>}
+{success?<p class="flash" role="status">{success}</p>:!liveToken?<p>This link has expired or is no longer available. Ask the owner for a new invitation or request a password reset.</p>:<form method="post">
+{action==='forgot'?<label class="field"><span>Email address</span><input name="email" type="email" autocomplete="email" required maxlength="254"/></label>:<><label class="field"><span>New password</span><input name="password" type="password" autocomplete="new-password" minlength="12" maxlength="128" required/></label><label class="field"><span>Confirm password</span><input name="confirm" type="password" autocomplete="new-password" minlength="12" maxlength="128" required/></label><p class="hint">Use at least 12 characters. This link can only be used once.</p></>}
+<button class="btn primary block" type="submit">{action==='forgot'?'Request password reset':action==='invite'?'Accept invitation':'Change password'}</button>
+</form>}
+<p><a href="/admin/login">Back to sign in</a></p></div></main></body></html>

package/src/pages/admin/ai.astro

@@ -0,0 +1,12 @@
+---
+import Admin from '../../layouts/Admin.astro';
+import AiCleaner from '../../components/AiCleaner';
+import { CONTENT } from '../../lib/content';
+const initialKind = Astro.url.searchParams.get('kind') === 'pages' ? 'pages' : 'posts';
+const requestedCollection = Astro.url.searchParams.get('collection') ?? 'posts';
+const initialCollection = CONTENT.collections[requestedCollection] ? requestedCollection : 'posts';
+const collections = Object.entries(CONTENT.collections).map(([key, value]) => ({ key, label: value.plural }));
+---
+<Admin title="Create from document" section="ai" wide>
+  <AiCleaner client:load initialKind={initialKind} initialCollection={initialCollection} collections={collections} />
+</Admin>

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

@@ -7,6 +7,7 @@ import { env } from '../../../../lib/env';
 import { BRAND } from '../../../../lib/brand';
 import { CONTENT, collectionUrl } from '../../../../lib/content';
 import { mergePostDraft } from '../../../../lib/drafts';
+import ThemeScript from '../../../../components/ThemeScript.astro';
 import PostEditor from '../../../../components/editor/PostEditor';
 import '../../../../styles/admin.css';
 import '../../../../styles/editor.css';
@@ -42,7 +43,8 @@ const templates = Object.keys(resolveDesign(settings).theme.postTemplates);
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-visual" />
+    <ThemeScript />
     <meta name="robots" content="noindex" />
     <title>{post.title || 'Untitled'} · {BRAND.name} editor</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -58,6 +60,7 @@ const templates = Object.keys(resolveDesign(settings).theme.postTemplates);
       sharePath={sharePath}
       livePath={livePath}
       templates={templates}
+      site={{ title: settings.siteTitle, url: settings.siteUrl }}
     />
   </body>
 </html>

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>