@geekity/cms 0.35.0 → 0.37.0

package/admin/components/blocks.njk

@@ -0,0 +1,250 @@
+{% from "components/table.njk" import table %}
+
+{% set SERIES = [
+  { dash: 'none', marker: 'circle' },
+  { dash: '6 4', marker: 'square' },
+  { dash: '2 3', marker: 'triangle' },
+  { dash: '10 3 2 3', marker: 'diamond' }
+] %}
+
+{% set TINTS = {
+  '0': 'fill-primary stroke-primary',
+  '1': 'fill-secondary stroke-secondary',
+  '2': 'fill-accent stroke-accent',
+  '3': 'fill-info stroke-info'
+} %}
+
+{% set TONES = { better: 'text-success', worse: 'text-error', 'none': '' } %}
+
+{% macro text(parts) -%}
+  {%- for part in parts -%}
+    {%- if part.code is defined -%}<code>{{ part.code }}</code>{%- else -%}{{ part }}{%- endif -%}
+  {%- endfor -%}
+{%- endmacro %}
+
+{% macro marker(shape, x, y) -%}
+  {%- if shape == 'circle' -%}
+    <circle class="stroke-base-100" stroke-width="2" cx="{{ x }}" cy="{{ y }}" r="4" />
+  {%- elif shape == 'square' -%}
+    <rect class="stroke-base-100" stroke-width="2" x="{{ x - 4 }}" y="{{ y - 4 }}" width="8" height="8" />
+  {%- elif shape == 'triangle' -%}
+    <polygon class="stroke-base-100" stroke-width="2" points="{{ x }},{{ y - 5 }} {{ x + 5 }},{{ y + 4 }} {{ x - 5 }},{{ y + 4 }}" />
+  {%- else -%}
+    <polygon class="stroke-base-100" stroke-width="2" points="{{ x }},{{ y - 5 }} {{ x + 5 }},{{ y }} {{ x }},{{ y + 5 }} {{ x - 5 }},{{ y }}" />
+  {%- endif -%}
+{%- endmacro %}
+
+{% macro textures(id, count) -%}
+  <defs>
+    {% if count > 1 %}
+      <pattern id="{{ id }}-texture-1" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+        <line class="stroke-base-100" x1="0" y1="0" x2="0" y2="6" stroke-width="2" />
+      </pattern>
+    {% endif %}
+    {% if count > 2 %}
+      <pattern id="{{ id }}-texture-2" width="5" height="5" patternUnits="userSpaceOnUse">
+        <circle class="fill-base-100" cx="2.5" cy="2.5" r="1.25" />
+      </pattern>
+    {% endif %}
+    {% if count > 3 %}
+      <pattern id="{{ id }}-texture-3" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)">
+        <line class="stroke-base-100" x1="0" y1="0" x2="0" y2="6" stroke-width="2" />
+      </pattern>
+    {% endif %}
+  </defs>
+{%- endmacro %}
+
+{% macro numbers(view) -%}
+  {% if view.rows.length %}
+    <details class="text-sm">
+      <summary class="cursor-pointer text-base-content/70">Show the numbers</summary>
+      {% call table(view.description, inCard=true) %}
+        <thead>
+          <tr>{% for column in view.columns %}<th scope="col">{{ column }}</th>{% endfor %}</tr>
+        </thead>
+        <tbody>
+          {% for row in view.rows %}
+            <tr><th scope="row">{{ row.heading }}</th>{% for cell in row.cells %}<td>{{ cell }}</td>{% endfor %}</tr>
+          {% endfor %}
+        </tbody>
+      {% endcall %}
+    </details>
+  {% endif %}
+{%- endmacro %}
+
+{% macro timeSeries(view) -%}
+  <div class="grid gap-3">
+    <p id="{{ view.id }}" class="sr-only">{{ view.description }}</p>
+    {% if view.series.length > 1 %}
+      <ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm" aria-hidden="true">
+        {% for entry in view.series %}
+          {% set look = SERIES[loop.index0] %}
+          <li class="flex items-center gap-2">
+            <svg class="h-3 w-7" viewBox="0 0 28 12">
+              <g class="{{ TINTS | modifier(loop.index0 | string) | trim }}">
+                <line x1="0" y1="6" x2="28" y2="6" stroke-width="2" stroke-dasharray="{{ look.dash }}" />
+                {{ marker(look.marker, 14, 6) }}
+              </g>
+            </svg>
+            <span>{{ entry.name }}</span></li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    <svg role="img" aria-labelledby="{{ view.id }}" viewBox="0 0 {{ view.width }} {{ view.height }}" class="h-auto w-full max-w-xl">
+      {% for tick in view.yTicks %}
+        <line class="{{ 'stroke-base-content/30' if loop.first else 'stroke-base-content/10' }}" x1="{{ view.plot.left }}" x2="{{ view.plot.right }}" y1="{{ tick.y }}" y2="{{ tick.y }}" stroke-width="1" />
+        <text class="fill-base-content/70" x="{{ view.plot.left - 6 }}" y="{{ tick.y + 4 }}" text-anchor="end" font-size="12">{{ tick.label }}</text>
+      {% endfor %}
+      {% for tick in view.xTicks %}
+        <text class="fill-base-content/70" x="{{ tick.x }}" y="{{ view.height - 8 }}" text-anchor="middle" font-size="12">{{ tick.label }}</text>
+      {% endfor %}
+      {% for entry in view.series %}
+        {% set look = SERIES[loop.index0] %}
+        <g class="{{ TINTS | modifier(loop.index0 | string) | trim }}">
+          <path class="fill-none" stroke-dasharray="{{ look.dash }}" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" d="{{ entry.path }}" />
+        </g>
+      {% endfor %}
+      {% for entry in view.series %}
+        {% set look = SERIES[loop.index0] %}
+        <g class="{{ TINTS | modifier(loop.index0 | string) | trim }}">{{ marker(look.marker, entry.end.x, entry.end.y) }}</g>
+      {% endfor %}
+      {% for band in view.bands %}
+        <rect class="fill-transparent" x="{{ band.x }}" y="{{ view.plot.top }}" width="{{ band.width }}" height="{{ view.plot.bottom - view.plot.top }}" pointer-events="all"><title>{{ band.title }}</title></rect>
+      {% endfor %}
+    </svg>
+    {{ numbers(view) }}
+  </div>
+{%- endmacro %}
+
+{% macro bars(view) -%}
+  <div class="grid gap-3">
+    <p id="{{ view.id }}" class="sr-only">{{ view.description }}</p>
+    {% if view.series.length > 1 %}
+      <ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm" aria-hidden="true">
+        {% for name in view.series %}
+          <li class="flex items-center gap-2">
+            <svg class="size-3" viewBox="0 0 12 12">
+              <g class="{{ TINTS | modifier(loop.index0 | string) | trim }}"><rect width="12" height="12" rx="2" /></g>
+              {% if not loop.first %}<rect width="12" height="12" rx="2" fill="url(#{{ view.id }}-texture-{{ loop.index0 }})" />{% endif %}
+            </svg>
+            <span>{{ name }}</span></li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    <svg role="img" aria-labelledby="{{ view.id }}" viewBox="0 0 {{ view.width }} {{ view.height }}" class="h-auto w-full max-w-xl">
+      {{ textures(view.id, view.series.length) }}
+      {% for tick in view.yTicks %}
+        <line class="{{ 'stroke-base-content/30' if loop.first else 'stroke-base-content/10' }}" x1="{{ view.plot.left }}" x2="{{ view.plot.right }}" y1="{{ tick.y }}" y2="{{ tick.y }}" stroke-width="1" />
+        <text class="fill-base-content/70" x="{{ view.plot.left - 6 }}" y="{{ tick.y + 4 }}" text-anchor="end" font-size="12">{{ tick.label }}</text>
+      {% endfor %}
+      {% for bar in view.bars %}
+        {% for segment in bar.segments %}
+          <g class="{{ TINTS | modifier(segment.series | string) | trim }}"><rect x="{{ segment.x }}" y="{{ segment.y }}" width="{{ segment.width }}" height="{{ segment.height }}"><title>{{ segment.title }}</title></rect></g>
+          {% if segment.series > 0 %}<rect x="{{ segment.x }}" y="{{ segment.y }}" width="{{ segment.width }}" height="{{ segment.height }}" fill="url(#{{ view.id }}-texture-{{ segment.series }})" pointer-events="none" />{% endif %}
+        {% endfor %}
+        {% if bar.total %}
+          <text class="fill-base-content font-semibold" x="{{ bar.centerX }}" y="{{ bar.total.y }}" text-anchor="middle" font-size="11">{{ bar.total.text }}</text>
+        {% endif %}
+        {% if bar.tick %}
+          <text class="fill-base-content/70" x="{{ bar.centerX }}" y="{{ view.height - 8 }}" text-anchor="middle" font-size="12">{{ bar.tick }}</text>
+        {% endif %}
+      {% endfor %}
+    </svg>
+    {{ numbers(view) }}
+  </div>
+{%- endmacro %}
+
+{% macro calendar(view) -%}
+  <div class="grid gap-3">
+    <p id="{{ view.id }}" class="sr-only">{{ view.description }}</p>
+    <div class="flex flex-row-reverse overflow-x-auto">
+      <svg role="img" aria-labelledby="{{ view.id }}" viewBox="0 0 {{ view.width }} {{ view.height }}" width="{{ view.width * 1.25 }}" height="{{ view.height * 1.25 }}" class="mr-auto h-auto{% if view.width * 1.25 > 640 %} max-w-full min-w-160{% endif %} shrink-0">
+        {% for month in view.months %}
+          <text class="fill-base-content/70" x="{{ month.x }}" y="11" text-anchor="start" font-size="10">{{ month.label }}</text>
+        {% endfor %}
+        {% for day in view.weekdays %}
+          <text class="fill-base-content/70" x="24" y="{{ day.y }}" text-anchor="end" font-size="9">{{ day.label }}</text>
+        {% endfor %}
+        {% for cell in view.cells %}
+          <rect class="{% if cell.level == 0 %}fill-base-content/10{% elif cell.level == 1 %}fill-primary/25{% elif cell.level == 2 %}fill-primary/50{% elif cell.level == 3 %}fill-primary/75{% else %}fill-primary{% endif %}" x="{{ cell.x }}" y="{{ cell.y }}" width="{{ view.cell }}" height="{{ view.cell }}" rx="2"><title>{{ cell.title }}</title></rect>
+        {% endfor %}
+      </svg>
+    </div>
+    <div class="flex items-center gap-1 text-xs text-base-content/70" aria-hidden="true">
+      <span>Less</span>
+      <svg class="h-3 w-[4.25rem]" viewBox="0 0 68 12">
+        <rect class="fill-base-content/10" x="0" y="0" width="12" height="12" rx="2" />
+        <rect class="fill-primary/25" x="14" y="0" width="12" height="12" rx="2" />
+        <rect class="fill-primary/50" x="28" y="0" width="12" height="12" rx="2" />
+        <rect class="fill-primary/75" x="42" y="0" width="12" height="12" rx="2" />
+        <rect class="fill-primary" x="56" y="0" width="12" height="12" rx="2" />
+      </svg>
+      <span>More</span>
+    </div>
+    {{ numbers(view) }}
+  </div>
+{%- endmacro %}
+
+{% macro block(data) -%}
+  {% set view = data | drawn %}
+  {% if view.kind == 'paragraph' %}
+    <p class="text-sm">{{ text(view.parts) }}</p>
+  {% elif view.kind == 'table' %}
+    {% call table(view.table.caption, inCard=true) %}
+      <thead>
+        <tr>
+          {% for column in view.table.columns %}<th scope="col">{{ column }}</th>{% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in view.table.rows %}
+          <tr>
+            {% for cell in row %}
+              {% if cell.time is defined %}
+                <td class="whitespace-nowrap">{% if cell.time %}{{ cell.time | date('readable') }}{% else %}Never{% endif %}</td>
+              {% elif cell.text is defined %}
+                <td class="wrap-anywhere">{% if cell.href %}<a class="link" href="{{ cell.href }}">{{ cell.text }}</a>{% else %}{{ cell.text }}{% endif %}</td>
+              {% else %}
+                <td class="wrap-anywhere">{{ text([cell]) }}</td>
+              {% endif %}
+            {% endfor %}
+          </tr>
+        {% endfor %}
+      </tbody>
+    {% endcall %}
+  {% elif view.kind == 'stats' %}
+    <div class="stats flex flex-wrap gap-px bg-base-content/10 shadow">
+      {% for stat in view.stats %}
+        <div class="stat w-auto flex-auto border-0 bg-base-100">
+          <div class="stat-title">{{ stat.label }}</div>
+          <div class="stat-value">{{ stat.value }}</div>
+          {% if stat.change %}
+            <div class="stat-desc{{ TONES | modifier(stat.change.tone) }}">{% if stat.change.arrow %}<span aria-hidden="true">{{ stat.change.arrow }}</span> {% endif %}{{ stat.change.text }}</div>
+          {% endif %}
+        </div>
+      {% endfor %}
+    </div>
+  {% elif view.kind == 'timeSeries' %}
+    {{ timeSeries(view) }}
+  {% elif view.kind == 'ranked' %}
+    <ol aria-label="{{ view.caption }}" class="grid gap-3 text-sm">
+      {% for item in view.items %}
+        <li class="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1">
+          <span class="truncate">{% if item.href %}<a class="link" href="{{ item.href }}">{{ item.label }}</a>{% else %}{{ item.label }}{% endif %}</span>
+          <span class="tabular-nums">{{ item.value }}</span>
+          <svg class="col-span-2 h-1.5 w-full" viewBox="0 0 100 6" preserveAspectRatio="none" aria-hidden="true">
+            <rect class="fill-base-content/10" width="100" height="6" />
+            <rect class="fill-primary" width="{{ item.widthPercent }}" height="6" />
+          </svg>
+        </li>
+      {% endfor %}
+    </ol>
+  {% elif view.kind == 'bars' %}
+    {{ bars(view) }}
+  {% elif view.kind == 'calendar' %}
+    {{ calendar(view) }}
+  {% else %}
+    {% if view.caption %}<p class="text-sm font-semibold">{{ view.caption }}</p>{% endif %}
+    <p class="text-sm text-base-content/70">No data to show.</p>
+  {% endif %}
+{%- endmacro %}

package/admin/components/card.njk

@@ -15,6 +15,7 @@
 
      size   xs, sm, md, lg, xl
      style  border, dash
+     tone   warning, a warning-coloured border for a card that flags a problem
 
    A value outside its set is a render error.
 
@@ -23,9 +24,10 @@
 
 {% set SIZES = { xs: 'card-xs', sm: 'card-sm', md: 'card-md', lg: 'card-lg', xl: 'card-xl' } %}
 {% set STYLES = { border: 'card-border', dash: 'card-dash' } %}
+{% set TONES = { warning: 'border-2 border-warning' } %}
 
-{% macro card(title='', size=none, style=none) -%}
-<div class="card bg-base-100 shadow-sm{{ SIZES | modifier(size) }}{{ STYLES | modifier(style) }}">
+{% macro card(title='', size=none, style=none, tone=none) -%}
+<div class="card bg-base-100 shadow-sm{{ SIZES | modifier(size) }}{{ STYLES | modifier(style) }}{{ TONES | modifier(tone) }}">
   <div class="card-body">
     {% if title %}
     <h2 class="card-title">{{ title }}</h2>

package/admin/components/job-status.njk

@@ -8,38 +8,43 @@
      failed       the error, in an alert
      interrupted  that restarts or crashes cut it off and it will not run again
 
-   While it is queued or running, `refreshUrl` is offered as a link to look
-   again: the page does not reload itself. `verb` and `unit` word the
-   progress. The error and every word passed in are escaped. #}
+   While it is queued or running, the box names `refreshUrl` in
+   `data-job-refresh`. A page that loads static/job-status.js has it fetch
+   that page every few seconds and swap in its box with the same
+   `data-job-status` until the job ends. It swaps the closest
+   `data-job-region` around the box instead when there is one, so a page can
+   redraw the controls it hides while the job runs. Without JavaScript,
+   `refreshUrl` is a Check again link. `verb` and `unit` word the progress.
+   The error and every word passed in are escaped. #}
 {% from "components/alert.njk" import alert %}
 {% from "components/badge.njk" import status %}
 {% from "components/button.njk" import buttonLink %}
 
 {% macro jobStatus(job, refreshUrl, verb='Done', unit='items') -%}
-<div class="flex flex-col gap-3">
+<div class="flex flex-col gap-3" data-job-status="{{ job.name }}" data-job-state="{{ job.state }}" data-job-label="{{ job.label }}"{% if job.active %} data-job-refresh="{{ refreshUrl }}"{% endif %}>
   <p class="flex flex-wrap items-center gap-2">
     {{ status(job.state, job.label) }}
     <span class="text-sm"><time datetime="{{ job.at }}">{{ job.at | date('readable') }}</time></span>
   </p>
   {% if job.state == 'queued' %}
-    <p>Waiting for the worker to start it.{% if job.requeued %} A restart cut off the last try, so it is queued again as try {{ job.attempt }}.{% endif %}</p>
+    <p data-job-message>Waiting for the worker to start it.{% if job.requeued %} A restart cut off the last try, so it is queued again as try {{ job.attempt }}.{% endif %}</p>
   {% elif job.state == 'running' %}
     {% if job.progress and job.progress.total %}
       <progress class="progress progress-primary w-full max-w-md" value="{{ job.progress.done }}" max="{{ job.progress.total }}" aria-label="{{ verb }} {{ job.progress.done }} of {{ job.progress.total }} {{ unit }}"></progress>
-      <p>{{ verb }} {{ job.progress.done }} of {{ job.progress.total }} {{ unit }}.{% if job.progress.note %} {{ job.progress.note }}{% endif %}</p>
+      <p data-job-message>{{ verb }} {{ job.progress.done }} of {{ job.progress.total }} {{ unit }}.{% if job.progress.note %} {{ job.progress.note }}{% endif %}</p>
     {% else %}
       <progress class="progress progress-primary w-full max-w-md" aria-label="Starting"></progress>
-      <p>Starting.</p>
+      <p data-job-message>Starting.</p>
     {% endif %}
   {% elif job.state == 'finished' %}
     {% if caller %}{{ caller() }}{% endif %}
   {% elif job.state == 'failed' %}
-    {% call alert(color='error', style='soft') %}<span>{{ job.error }}</span>{% endcall %}
+    {% call alert(color='error', style='soft') %}<span data-job-message>{{ job.error }}</span>{% endcall %}
   {% elif job.state == 'interrupted' %}
-    <p>Restarts or crashes cut it off {{ job.attempt }} times, so it is not run again on its own.</p>
+    <p data-job-message>Restarts or crashes cut it off {{ job.attempt }} times, so it is not run again on its own.</p>
   {% endif %}
   {% if job.active %}
-    <div>{{ buttonLink('Check again', refreshUrl, style='outline') }}</div>
+    <div data-job-check-again>{{ buttonLink('Check again', refreshUrl, style='outline') }}</div>
   {% endif %}
 </div>
 {%- endmacro %}

package/admin/components/upload.njk

@@ -0,0 +1,26 @@
+{# An upload in place: a file picker beside a box, grid or menu that wants a
+   file, so nobody has to leave a post for the media library and come back
+   with an address (TASK-439).
+
+   `uploadControl(kind, target, url)` emits a `hidden` block that
+   `static/upload-drop.js` reveals, so a page with no script shows nothing that
+   does nothing. The script posts each file to `url` and hands the answer to
+   the `kind`'s handler, which fills the element whose id is `target`:
+
+     photos   adds a ticked tile to the photo grid; `name` is the prefix of
+              the grid's checkbox names
+     field    sets the text box's value; `preview` names an <img> to show it
+     select   adds the file to the menu and chooses it
+     library  reloads the page once the files have landed
+
+   Dropping files on the target, or on the field around it, does the same.
+   `images` asks the server to refuse anything that is not an image. #}
+
+{% macro uploadControl(kind, target, url, images=false, accept='', name='', preview='') -%}
+<div class="mt-1 flex flex-wrap items-center gap-2" data-upload-drop="{{ kind }}" data-upload-url="{{ url }}" data-upload-target="{{ target }}"{% if images %} data-upload-images{% endif %}{% if name %} data-upload-name="{{ name }}"{% endif %}{% if preview %} data-upload-preview="{{ preview }}"{% endif %} hidden>
+  <label class="text-xs" for="{{ target }}-upload">Upload</label>
+  <input id="{{ target }}-upload" type="file" class="file-input file-input-xs w-auto max-w-full"{% if images %} accept="image/*"{% elif accept %} accept="{{ accept }}"{% endif %}{% if kind == 'photos' or kind == 'library' %} multiple{% endif %} data-upload-input />
+  <span class="text-xs text-base-content/70">or drop {% if kind == 'photos' or kind == 'library' %}files{% else %}a file{% endif %} here</span>
+  <p class="w-full text-xs empty:hidden" role="status" aria-live="polite" data-upload-status></p>
+</div>
+{%- endmacro %}

package/admin/pages/comments/all.njk

@@ -31,7 +31,7 @@
   {% else %}
     <ul class="mb-6 flex max-w-3xl flex-col gap-4">
       {% for row in rows %}
-        <li>
+        <li id="comment-{{ row.id }}">
           {% call card() %}
             <p class="flex flex-wrap items-center gap-x-3 gap-y-1">
               <span class="font-semibold">{{ row.author }}</span>

package/admin/pages/dashboard/home.njk

@@ -1,11 +1,23 @@
 {% extends "layouts/shell.njk" %}
 {% from "components/stat.njk" import stats, stat %}
 {% from "components/card.njk" import card %}
-{% from "components/table.njk" import table %}
-{% from "components/badge.njk" import status %}
+{% from "components/badge.njk" import badge %}
+{% from "components/blocks.njk" import block %}
+{% from "components/tabs.njk" import tabs %}
 
 {% block title %}Dashboard{% endblock %}
 
+{% macro widgetCard(widget, tone=none) -%}
+  {% call card(title=widget.title, tone=tone) %}
+    {% if widget.status == 'stale' %}
+      <p class="text-sm">{{ badge('Stale', color='warning') }} The latest load failed. These figures are from {{ widget.loadedAt }}.</p>
+    {% elif widget.status == 'unavailable' %}
+      <p>These stats are unavailable right now.</p>
+    {% endif %}
+    {% for data in widget.blocks %}{{ block(data) }}{% endfor %}
+  {% endcall %}
+{%- endmacro %}
+
 {% block content %}
   <h1 class="mb-6 text-2xl font-bold">Dashboard</h1>
 
@@ -27,34 +39,23 @@
     </div>
   </section>
 
-  {% call card(title='Recent posts') %}
-    {% if recent.length %}
-      {% call table('Recent posts', inCard=true) %}
-        <thead>
-          <tr>
-            <th scope="col">Title</th>
-            <th scope="col">Date</th>
-            <th scope="col">Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for post in recent %}
-            <tr>
-              <td><a class="link link-hover" href="{{ post.editUrl }}">{{ post.title }}</a></td>
-              <td class="whitespace-nowrap">{{ post.date | date('html') }}</td>
-              <td>
-                {% if post.draft %}
-                  {{ status('draft', 'Draft') }}
-                {% else %}
-                  {{ status('published', 'Published') }}
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      {% endcall %}
-    {% else %}
-      <p>Nothing written yet.</p>
-    {% endif %}
-  {% endcall %}
+  {% for widget in alerts %}
+    <section class="mb-8">{{ widgetCard(widget, tone='warning') }}</section>
+  {% endfor %}
+
+  {% if widgets.length %}
+    <div class="@container">
+      <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+        <h2 class="text-lg font-semibold">Activity</h2>
+        {{ tabs(periods, 'Period', size='sm') }}
+      </div>
+      <div class="grid grid-cols-1 gap-6 @3xl:grid-cols-2">
+        {% for widget in widgets %}
+          <div class="min-w-0{% if widget.width == 'full' %} @3xl:col-span-2{% endif %}">
+            {{ widgetCard(widget) }}
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
 {% endblock %}

package/admin/pages/documents/editor.njk

@@ -13,6 +13,7 @@
 {% from "components/card.njk" import card, cardActions %}
 {% from "components/collapse.njk" import collapse %}
 {% from "components/dropdown.njk" import dropdown %}
+{% from "components/upload.njk" import uploadControl %}
 
 {% set ACTION_COLORS = { 'publish': 'primary', 'update': 'primary', 'trash': 'error' } %}
 {% set ACTION_STYLES = { 'trash': 'ghost' } %}
@@ -20,6 +21,14 @@
 
 {% set ICON_SIZES = { md: 'size-6', sm: 'size-4' } %}
 
+{% macro photoTile(name, url, thumbnail, alt) -%}
+<label class="relative cursor-pointer">
+  <input class="peer sr-only" type="checkbox" name="{{ name }}" value="{{ url }}" />
+  <img class="aspect-square w-full rounded-box object-cover ring-primary ring-offset-2 ring-offset-base-100 peer-checked:ring-2 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-base-content" src="{{ thumbnail }}" alt="{{ alt }}" loading="lazy" />
+  <span class="badge badge-primary badge-xs absolute end-1 top-1 hidden peer-checked:inline-flex" aria-hidden="true">✓</span>
+</label>
+{%- endmacro %}
+
 {% macro icon(path, size='md') -%}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="shrink-0{{ ICON_SIZES | modifier(size) }}" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="{{ path }}"/></svg>
 {%- endmacro %}
@@ -152,22 +161,21 @@
         </div>
       </div>
     {% endfor %}
-    {% if photos.picks | length %}
-      <fieldset class="fieldset">
-        <legend class="fieldset-legend">Add from the media library</legend>
-        <div class="grid grid-cols-3 gap-2 sm:grid-cols-6">
-          {% for pick in photos.picks %}
-            <label class="relative cursor-pointer">
-              <input class="peer sr-only" type="checkbox" name="{{ photoFields.url }}{{ pick.index }}" value="{{ pick.url }}" />
-              <img class="aspect-square w-full rounded-box object-cover ring-primary ring-offset-2 ring-offset-base-100 peer-checked:ring-2 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-base-content" src="{{ pick.thumbnail }}" alt="{{ pick.alt or pick.url }}" loading="lazy" />
-              <span class="badge badge-primary badge-xs absolute end-1 top-1 hidden peer-checked:inline-flex" aria-hidden="true">✓</span>
-            </label>
-          {% endfor %}
-        </div>
-        <p class="label block whitespace-normal">A ticked photo is added when you save, with the media library’s alt text. Add them now to write alt text of your own first.</p>
-        <div>{{ button('Add the ticked photos', type='submit', name='switch-kind', value=postKind, style='soft', formnovalidate=true) }}</div>
-      </fieldset>
-    {% endif %}
+    <fieldset class="fieldset rounded-box">
+      <legend class="fieldset-legend">Add from the media library</legend>
+      <div class="grid grid-cols-3 gap-2 sm:grid-cols-6" id="editor-photo-picks">
+        {% for pick in photos.picks %}
+          {{ photoTile(photoFields.url + pick.index, pick.url, pick.thumbnail, pick.alt or pick.url) }}
+        {% endfor %}
+      </div>
+      <template data-upload-tile="editor-photo-picks">{{ photoTile('', '', '', '') }}</template>
+      {% if not photos.picks | length %}
+        <p class="text-sm" data-upload-empty>The media library has no images yet.</p>
+      {% endif %}
+      {{ uploadControl('photos', 'editor-photo-picks', uploadsUrl, images=true, name=photoFields.url) }}
+      <p class="label block whitespace-normal">A ticked photo is added when you save, with the media library’s alt text. Add them now to write alt text of your own first.</p>
+      <div{% if not photos.picks | length %} hidden data-upload-reveal{% endif %}>{{ button('Add the ticked photos', type='submit', name='switch-kind', value=postKind, style='soft', formnovalidate=true) }}</div>
+    </fieldset>
     <div class="grid gap-x-4 sm:grid-cols-2">
       {{ field.text('editor-photo-url-' + photos.blank, photoFields.url + photos.blank, 'Or a web address', value='', list='editor-photo-uploads', autocomplete='off', error=(error if errorField == ('editor-photo-url-' + photos.blank) else '')) }}
       {{ field.text('editor-photo-alt-' + photos.blank, photoFields.alt + photos.blank, 'Its alt text', value='') }}
@@ -224,15 +232,19 @@
   {{ placeFields(true) }}
 
 {% elif name == 'episode' %}
-  {% call field.select('editor-enclosure-url', enclosureFields.url, 'Audio or video file', error=(error if errorField == 'editor-enclosure-url' else ''), hint='Upload the file to the media library first. Feeds carry it as the post’s enclosure and the post page plays it. None removes the recording, its transcript and its other versions.', hintId='editor-enclosure-url-hint') %}
+  {% call field.select('editor-enclosure-url', enclosureFields.url, 'Audio or video file', error=(error if errorField == 'editor-enclosure-url' else ''), hint='Feeds carry it as the post’s enclosure and the post page plays it. None removes the recording, its transcript and its other versions.', hintId='editor-enclosure-url-hint') %}
     <option value=""{% if form.enclosure.url == "" %} selected{% endif %}>None</option>
     {% for choice in enclosureChoices.media %}
       <option value="{{ choice.url }}"{% if choice.url == form.enclosure.url %} selected{% endif %}>{{ choice.label }}</option>
     {% endfor %}
   {% endcall %}
+  {{ uploadControl('select', 'editor-enclosure-url', uploadsUrl, accept='audio/*,video/*') }}
   <div class="grid gap-x-4 sm:grid-cols-2">
     {{ field.text('editor-enclosure-duration', enclosureFields.duration, 'Duration', value=form.enclosure.duration, inputmode='numeric', autocomplete='off', error=(error if errorField == 'editor-enclosure-duration' else ''), hint='Seconds, or 30:34, or 1:02:03. Leave it empty if you do not know.', hintId='editor-enclosure-duration-hint') }}
-    {{ field.text('editor-enclosure-transcript', enclosureFields.transcriptUrl, 'Transcript or captions', value=form.enclosure.transcriptUrl, list='editor-transcript-uploads', autocomplete='off', error=(error if errorField == 'editor-enclosure-transcript' else ''), hintId='editor-enclosure-transcript-hint') }}
+    <div>
+      {{ field.text('editor-enclosure-transcript', enclosureFields.transcriptUrl, 'Transcript or captions', value=form.enclosure.transcriptUrl, list='editor-transcript-uploads', autocomplete='off', error=(error if errorField == 'editor-enclosure-transcript' else ''), hintId='editor-enclosure-transcript-hint') }}
+      {{ uploadControl('field', 'editor-enclosure-transcript', uploadsUrl, accept='.vtt,.srt,.txt') }}
+    </div>
   </div>
   <datalist id="editor-transcript-uploads">
     {% for url in enclosureChoices.transcripts %}
@@ -256,6 +268,7 @@
       {% set n = loop.index0 %}
       {% call collapse(('Version ' + loop.index) if row.url else 'Add a version', row.url, fields=true) %}
         {{ field.text('editor-alternate-url-' + n, enclosureFields.alternate.url + n, 'Address', value=row.url, list='editor-media-uploads', autocomplete='off', error=(error if errorField == ('editor-alternate-url-' + n) else '')) }}
+        {{ uploadControl('field', 'editor-alternate-url-' + n, uploadsUrl, accept='audio/*,video/*') }}
         {{ field.text('editor-alternate-type-' + n, enclosureFields.alternate.type + n, 'Type', value=row.type, placeholder='video/mp4', autocomplete='off', spellcheck='false', error=(error if errorField == ('editor-alternate-type-' + n) else '')) }}
         {{ field.text('editor-alternate-title-' + n, enclosureFields.alternate.title + n, 'Title', value=row.title, maxlength='32', error=(error if errorField == ('editor-alternate-title-' + n) else '')) }}
         {{ field.text('editor-alternate-height-' + n, enclosureFields.alternate.height + n, 'Height', value=row.height, inputmode='numeric', autocomplete='off', error=(error if errorField == ('editor-alternate-height-' + n) else '')) }}
@@ -364,6 +377,7 @@
       <img class="h-24 w-16 shrink-0 rounded-box object-cover" id="editor-item-photo-preview"{% if reviewPhotoThumbnail %} src="{{ reviewPhotoThumbnail }}"{% else %} hidden{% endif %} alt="" loading="lazy" />
       <div class="flex min-w-0 flex-1 flex-col">
         {{ field.text('editor-item-photo', reviewFields.photo, '', labelHtml=itemWord('picture'), value=form.review.photo, list='editor-photo-uploads', autocomplete='off', error=(error if errorField == 'editor-item-photo' else ''), hint='An image in the media library or a web address. It is the item’s picture, not a photo for the post: it shows beside the item’s details.', hintId='editor-item-photo-hint') }}
+        {{ uploadControl('field', 'editor-item-photo', uploadsUrl, images=true, preview='editor-item-photo-preview') }}
         {{ field.text('editor-item-photo-alt', reviewFields.photoAlt, '', labelHtml=itemWord('picture', ' alt text'), value=form.review.photoAlt) }}
       </div>
     </div>
@@ -478,7 +492,7 @@
           class="flex flex-wrap items-center gap-2"
           id="editor-enhance"
           data-preview-url="{{ previewUrl }}"
-          data-upload-url="{{ uploadUrl }}"
+          data-upload-url="{{ uploadsUrl }}"
           data-kind="{{ kind.type }}"
         >
           {{ button('Preview', type='submit', id='editor-preview-fallback', style='soft', formaction=previewUrl, formtarget='_blank', formnovalidate=true) }}
@@ -667,6 +681,7 @@
   {# The slug and permalink auto-fill, in a file of its own so the policy never
      has to allow an inline script. #}
   <script defer src="{{ assetPrefix }}slug.js"></script>
+  <script defer src="{{ assetPrefix }}upload-drop.js"></script>
   {% if kind.type == 'post' %}
     <script defer src="{{ assetPrefix }}location.js"></script>
   {% endif %}

package/admin/pages/federation/followers.njk

@@ -175,7 +175,7 @@
     {% endif %}
   </section>
 
-  <section id="resend" class="mb-10 max-w-2xl" aria-labelledby="resend-heading">
+  <section id="resend" class="mb-10 max-w-2xl" aria-labelledby="resend-heading" data-job-region>
     {% call card() %}
       <h2 id="resend-heading" class="card-title">Resend</h2>
       <p class="max-w-prose">
@@ -226,7 +226,7 @@
     {% endcall %}
   </section>
 
-  <section>
+  <section id="delivery">
     <h2 class="mb-3 text-lg font-semibold">Delivery</h2>
     {% if posts.length %}
       {% call table('Delivery') %}
@@ -295,4 +295,5 @@
       <p>No post has been announced to the fediverse yet.</p>
     {% endif %}
   </section>
+  <script defer src="{{ assetPrefix }}job-status.js"></script>
 {% endblock %}

package/admin/pages/media/file.njk

@@ -44,15 +44,15 @@
         {% call card(title='Delete ' + confirm.url + '?', style='border') %}
           <p>
             {{ confirm.references.length }}
-            {% if confirm.references.length == 1 %}document still points{% else %}documents still point{% endif %}
-            at it. Deleting the file does not change them, so they will point at nothing.
+            {% if confirm.references.length == 1 %}thing still uses{% else %}things still use{% endif %}
+            it. Deleting the file does not change them, so they will point at nothing.
           </p>
           <ul class="list-disc pl-6">
             {% for reference in confirm.references %}
               <li>
                 <a class="link" href="{{ reference.editUrl }}">{{ reference.title }}</a>
                 {% if reference.trashed %}{{ status('trashed', 'Trash') }}{% endif %}
-                <code>{{ reference.path }}</code>
+                <code>{{ reference.where }}</code>
               </li>
             {% endfor %}
           </ul>
@@ -120,11 +120,12 @@
                 <li>
                   <a class="link link-hover" href="{{ reference.editUrl }}">{{ reference.title }}</a>
                   {% if reference.trashed %}{{ status('trashed', 'Trash') }}{% endif %}
+                  <span class="text-base-content/70">{{ reference.where }}</span>
                 </li>
               {% endfor %}
             </ul>
           {% else %}
-            <p class="text-sm">Nothing links to it.</p>
+            <p class="text-sm">Nothing uses it.</p>
           {% endif %}
         </div>