@geekity/cms 0.34.0 → 0.35.0

package/admin/pages/media/file.njk

@@ -0,0 +1,142 @@
+{# /admin/media/file?path=…: one upload, everything that can be said about it
+   and done to it (TASK-429). The rest of the query is the library view it was
+   opened from, which previous, next and the way back keep.
+
+   Everything inside [data-media-details] is what media.js shows in its dialog
+   when a tile is opened from the library, so it is the whole screen apart
+   from the shell. #}
+{% extends "layouts/shell.njk" %}
+{% from "components/badge.njk" import status %}
+{% from "components/button.njk" import button, buttonLink %}
+{% from "components/card.njk" import card, cardActions %}
+{% from "components/copy.njk" import copyField %}
+
+{% block title %}{{ heading }} · Media{% endblock %}
+
+{% block content %}
+  <div data-media-details>
+    <div class="mb-4 flex flex-wrap items-center gap-2">
+      <a class="link link-hover text-sm" href="{{ libraryUrl }}" data-media-library>Media</a>
+      <span class="flex-1"></span>
+      <span class="text-sm">{{ position }} of {{ count }}</span>
+      <nav class="join" aria-label="Files">
+        {% if previousUrl %}
+          <a class="join-item btn btn-sm" rel="prev" href="{{ previousUrl }}" data-media-step>Previous</a>
+        {% else %}
+          <span class="join-item btn btn-sm btn-disabled" aria-disabled="true">Previous</span>
+        {% endif %}
+        {% if nextUrl %}
+          <a class="join-item btn btn-sm" rel="next" href="{{ nextUrl }}" data-media-step>Next</a>
+        {% else %}
+          <span class="join-item btn btn-sm btn-disabled" aria-disabled="true">Next</span>
+        {% endif %}
+      </nav>
+    </div>
+
+    <h1 class="mb-6 text-2xl font-bold break-all">{{ heading }}</h1>
+
+    {% if confirm %}
+      <form class="mb-6 max-w-2xl" method="post" action="{{ deleteUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
+        <input type="hidden" name="{{ fields.from }}" value="{{ from }}" />
+        <input type="hidden" name="{{ fields.confirm }}" value="1" />
+        {% 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.
+          </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>
+              </li>
+            {% endfor %}
+          </ul>
+          {% call cardActions() %}
+            {{ buttonLink('Cancel', selfUrl, style='ghost') }}
+            {{ button('Delete it anyway', type='submit', color='error') }}
+          {% endcall %}
+        {% endcall %}
+      </form>
+    {% endif %}
+
+    <div class="grid gap-6 overflow-hidden rounded-box border border-base-300 bg-base-100 lg:grid-cols-[3fr_2fr]">
+      <div class="flex min-h-64 items-center justify-center bg-base-200 p-4">
+        {% if file.kind == 'image' %}
+          <a href="{{ file.url }}"><img class="max-h-[70vh] rounded-box object-contain" src="{{ file.url }}" alt=""{% if file.width %} width="{{ file.width }}" height="{{ file.height }}"{% endif %} /></a>
+        {% elif file.kind == 'audio' %}
+          <audio class="w-full" controls preload="none" src="{{ file.url }}"></audio>
+        {% elif file.kind == 'video' %}
+          <video class="max-h-[70vh] w-full" controls preload="metadata" src="{{ file.url }}"></video>
+        {% else %}
+          <a class="flex size-40 items-center justify-center rounded-box bg-base-300 font-bold" href="{{ file.url }}">{{ file.extension | replace('.', '') | upper or 'FILE' }}</a>
+        {% endif %}
+      </div>
+
+      <div class="flex flex-col gap-5 p-4">
+        <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+          <dt>Uploaded</dt><dd>{{ file.modified | date('html') }}</dd>
+          <dt>Size</dt><dd>{{ file.bytes | fileSize }}{% if file.width %} · {{ file.width }} × {{ file.height }}{% endif %}</dd>
+          <dt>Path</dt><dd><code class="break-all">{{ file.path }}</code></dd>
+        </dl>
+
+        {% if file.kind == 'image' %}
+          <form method="post" action="{{ altUrl }}">
+            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+            <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
+            <input type="hidden" name="{{ fields.from }}" value="{{ from }}" />
+            <div class="fieldset">
+              <label class="fieldset-legend" for="media-alt">Alt text</label>
+              <textarea id="media-alt" name="{{ fields.alt }}" rows="3" placeholder="Describe what the picture shows" aria-describedby="media-alt-state" class="textarea w-full">{% if file.alt and file.alt.kind == 'described' %}{{ file.alt.text }}{% endif %}</textarea>
+              <label class="label text-sm text-base-content" for="media-decorative">
+                <input id="media-decorative" name="{{ fields.decorative }}" type="checkbox" value="1"{% if file.alt and file.alt.kind == 'decorative' %} checked{% endif %} class="checkbox checkbox-sm" />
+                Decorative
+              </label>
+              <p id="media-alt-state" class="text-sm">
+                {%- if not file.alt %}{{ status('missing', 'Missing') }} Describe it, or mark it decorative.
+                {%- elif file.alt.kind == 'decorative' %}{{ status('decorative', 'Decorative') }} Inserted with an empty alt.
+                {%- else %}{{ status('described', 'Described') }} Offered when it is inserted.{% endif -%}
+              </p>
+            </div>
+            <div class="mt-2">{{ button('Save', type='submit', color='primary') }}</div>
+          </form>
+        {% endif %}
+
+        <div class="flex flex-col gap-2">
+          <h2 class="text-sm font-semibold">Link</h2>
+          {{ copyField('media-url', 'URL of ' + file.name, file.url) }}
+          {{ copyField('media-markdown', 'Markdown for ' + file.name, file.markdown) }}
+        </div>
+
+        <div>
+          <h2 class="text-sm font-semibold">Used by</h2>
+          {% if file.references.length %}
+            <ul class="text-sm">
+              {% for reference in file.references %}
+                <li>
+                  <a class="link link-hover" href="{{ reference.editUrl }}">{{ reference.title }}</a>
+                  {% if reference.trashed %}{{ status('trashed', 'Trash') }}{% endif %}
+                </li>
+              {% endfor %}
+            </ul>
+          {% else %}
+            <p class="text-sm">Nothing links to it.</p>
+          {% endif %}
+        </div>
+
+        <form class="border-t border-base-300 pt-4 text-right" method="post" action="{{ deleteUrl }}">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
+          <input type="hidden" name="{{ fields.from }}" value="{{ from }}" />
+          {{ button('Delete', type='submit', style='ghost', color='error') }}
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <script defer src="{{ assetPrefix }}copy.js"></script>
+{% endblock %}

package/admin/pages/media/library.njk

@@ -1,228 +1,133 @@
-{# /admin/media: everything under content/uploads, what links to it, the
-   things that can be done to it, and the latest metadata sweep (TASK-392).
-   The directory is walked on every request, so a file copied in by hand is
-   here without a restart.
+{# /admin/media: everything under content/uploads as a grid of tiles, each a
+   link to its details screen (TASK-429). The directory is walked on every
+   request, so a file copied in by hand is here without a restart.
 
-   Everything works with JavaScript switched off. The URL and the Markdown are
-   readonly fields, which select and copy like any other text; copy.js adds a
-   button beside each of them and nothing else. #}
+   Everything works with JavaScript switched off: the upload form opens from a
+   <details>, the filters are a GET form, and a tile is a link. media.js opens
+   a tile's details in a dialog instead and steps through them with the arrow
+   keys. #}
 {% extends "layouts/shell.njk" %}
-{% from "components/badge.njk" import status %}
+{% from "components/alert.njk" import alert %}
+{% from "components/badge.njk" import badge %}
 {% from "components/button.njk" import button, buttonLink %}
-{% from "components/card.njk" import card, cardActions %}
-{% from "components/copy.njk" import copyField %}
-{% from "components/job-status.njk" import jobStatus %}
 {% from "components/pagination.njk" import pagination %}
-{% from "components/table.njk" import table %}
+{% from "components/tabs.njk" import tabs %}
 
 {% block title %}{{ heading }}{% endblock %}
 
 {% block content %}
-  <h1 class="mb-6 text-2xl font-bold">{{ heading }}</h1>
+  <div class="mb-6 flex flex-wrap items-center gap-3">
+    <h1 class="text-2xl font-bold">{{ heading }}</h1>
+    <details class="dropdown">
+      <summary class="btn btn-primary btn-sm">Upload</summary>
+      <form class="dropdown-content z-10 mt-2 w-80 rounded-box bg-base-100 p-4 shadow sm:w-96" method="post" action="{{ uploadUrl }}" enctype="multipart/form-data">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <div class="fieldset">
+          <label class="fieldset-legend" for="media-file">Add a file</label>
+          <input id="media-file" name="{{ fields.file }}" type="file" accept="{{ accepts }}" required class="file-input file-input-sm w-full" />
+          <p class="label block whitespace-normal">
+            This site accepts {{ accepts | replace(',', ', ') }}, up to {{ maxBytes | fileSize }}, or
+            {{ mediaMaxBytes | fileSize }} for audio and video. The same rules the editor’s upload
+            control enforces.
+          </p>
+        </div>
+        <div class="mt-2">{{ button('Upload', type='submit', color='primary') }}</div>
+      </form>
+    </details>
+  </div>
 
-  {% if confirm %}
-    <form class="mb-6 max-w-2xl" method="post" action="{{ deleteUrl }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-      <input type="hidden" name="{{ fields.path }}" value="{{ confirm.path }}" />
-      <input type="hidden" name="{{ fields.confirm }}" value="1" />
-      {% 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.
-        </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>
-            </li>
-          {% endfor %}
-        </ul>
-        {% call cardActions() %}
-          {{ buttonLink('Cancel', listUrl, style='ghost') }}
-          {{ button('Delete it anyway', type='submit', color='error') }}
-        {% endcall %}
+  {% if sweepNotice %}
+    <section id="strip-metadata-notice" class="mb-6 max-w-4xl" aria-label="Location and camera metadata">
+      {% call alert(color='info', style='soft', direction='responsive', polite=true) %}
+        <span>
+          {% if sweepNotice.sweep and sweepNotice.sweep.active %}
+            The sweep that strips location and camera metadata from older uploads is {{ sweepNotice.sweep.label | lower }}.
+          {% else %}
+            Uploads from before files were cleaned on arrival may still carry location or camera metadata.
+          {% endif %}
+        </span>
+        <div class="flex flex-wrap gap-2">
+          {% if not sweepNotice.sweep or not sweepNotice.sweep.active %}
+            <form method="post" action="{{ sweepNotice.url }}">
+              <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+              {{ button('Strip it now', type='submit') }}
+            </form>
+          {% endif %}
+          {{ buttonLink('Details in Maintenance', sweepNotice.panelUrl, style='ghost') }}
+        </div>
       {% endcall %}
-    </form>
+    </section>
   {% endif %}
 
-  <form class="mb-8 max-w-2xl" method="post" action="{{ uploadUrl }}" enctype="multipart/form-data">
-    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-    <div class="fieldset">
-      <label class="fieldset-legend" for="media-file">Add a file</label>
-      <input id="media-file" name="{{ fields.file }}" type="file" accept="{{ accepts }}" required class="file-input file-input-sm w-full" />
-      <p class="label block whitespace-normal">
-        This site accepts {{ accepts | replace(',', ', ') }}, up to {{ maxBytes }} bytes, or
-        {{ mediaMaxBytes }} bytes for audio and video. The same
-        rules the editor’s upload control enforces.
-      </p>
-    </div>
-    <div class="mt-2">{{ button('Upload', type='submit', color='primary') }}</div>
-  </form>
-
-  <section id="strip-metadata" class="mb-8 max-w-2xl" aria-labelledby="strip-metadata-heading">
-    {% call card() %}
-      <h2 id="strip-metadata-heading" class="card-title">Location and camera metadata</h2>
-      <p class="max-w-prose">
-        Location and camera metadata is removed from pictures and videos as they are
-        uploaded. Files uploaded before that keep theirs until this sweep runs over
-        <code>content/uploads/</code>. It runs in the background, leaves a clean file
-        as it is, and keeps each file's modification time.
-      </p>
-      {% if sweep %}
-        {% call jobStatus(sweep, listUrl + '#strip-metadata', verb='Checked', unit='files') %}
-          {% if sweepReport %}
-            <p>
-              Checked {{ sweepReport.checked }} {% if sweepReport.checked == 1 %}file{% else %}files{% endif %}:
-              {{ sweepReport.stripped.length }} stripped, {{ sweepReport.clean }} already clean,
-              {{ sweepReport.unreadable.length }} unreadable.
-            </p>
-            {% if sweepReport.stripped.length %}
-              <h3 class="font-semibold">Stripped</h3>
-              <ul class="list-disc pl-6">
-                {% for file in sweepReport.stripped %}
-                  <li><code class="break-all">{{ file.path }}</code>: removed {{ file.removed | join(', ') }}</li>
-                {% endfor %}
-              </ul>
-            {% endif %}
-            {% if sweepReport.unreadable.length %}
-              <h3 class="font-semibold">Left as they were</h3>
-              <ul class="list-disc pl-6">
-                {% for file in sweepReport.unreadable %}
-                  <li><code class="break-all">{{ file.path }}</code>: {{ file.problem }}</li>
-                {% endfor %}
-              </ul>
-            {% endif %}
-          {% endif %}
-        {% endcall %}
-      {% endif %}
-      {% if not sweep or not sweep.active %}
-        <form method="post" action="{{ stripMetadataUrl }}">
-          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-          {% call cardActions() %}
-            {{ button('Run the sweep again' if sweep else 'Strip metadata from every upload', type='submit', color='primary') }}
-          {% endcall %}
-        </form>
-      {% endif %}
-    {% endcall %}
-  </section>
-
   {% if total == 0 %}
     <p>Nothing has been uploaded yet.</p>
   {% else %}
-    {% call table(heading) %}
-      <thead>
-        <tr>
-          <th scope="col">File</th>
-          <th scope="col">Alt text</th>
-          <th scope="col">Uploaded</th>
-          <th scope="col">Size</th>
-          <th scope="col">Link</th>
-          <th scope="col">Used by</th>
-          <th scope="col">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
+    <div class="mb-4 flex flex-col gap-3">
+      {{ tabs(kindTabs, 'Kinds of file', size='sm') }}
+      <form class="flex flex-wrap items-center gap-3" method="get" action="{{ listUrl }}">
+        {% if view.kind %}<input type="hidden" name="kind" value="{{ view.kind }}" />{% endif %}
+        <label class="sr-only" for="media-search">Search file names and alt text</label>
+        <input id="media-search" name="q" type="search" value="{{ view.search }}" placeholder="Search file names and alt text" class="input input-sm w-64" />
+        <label class="label text-sm text-base-content">
+          <input name="alt" type="checkbox" value="missing" class="checkbox checkbox-sm"{% if view.needsAlt %} checked{% endif %} />
+          Needs alt text
+        </label>
+        <label class="label text-sm text-base-content">
+          <input name="unused" type="checkbox" value="1" class="checkbox checkbox-sm"{% if view.unused %} checked{% endif %} />
+          Not used anywhere
+        </label>
+        <label class="sr-only" for="media-sort">Sort</label>
+        <select id="media-sort" name="sort" class="select select-sm w-40">
+          {% for value, label in sorts %}
+            <option value="{{ value }}"{% if value == view.sort %} selected{% endif %}>{{ label }}</option>
+          {% endfor %}
+        </select>
+        {{ button('Filter', type='submit') }}
+        {% if filtered %}{{ buttonLink('Clear', clearUrl, style='ghost') }}{% endif %}
+      </form>
+    </div>
+
+    <p class="mb-3 text-sm">{{ shown }} of {{ total }} {% if total == 1 %}file{% else %}files{% endif %}</p>
+
+    {% if shown == 0 %}
+      <p>Nothing matches.</p>
+    {% else %}
+      <ul class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6">
         {% for file in files %}
-          <tr>
-            <td>
-              <div class="flex min-w-56 items-center gap-3">
+          <li>
+            <a class="block overflow-hidden rounded-box bg-base-100 shadow-sm ring-primary hover:ring-2 focus-visible:ring-2 focus-visible:outline-none" href="{{ file.detailsUrl }}" data-media-tile>
+              <span class="relative block aspect-square bg-base-200">
                 {% if file.kind == 'image' %}
-                  <a class="shrink-0" href="{{ file.url }}">
-                    <img class="size-15 rounded-box bg-base-200 object-cover" src="{{ file.url }}" alt="" width="60" height="60" />
-                  </a>
+                  <img class="size-full object-cover" src="{{ file.thumbnailUrl }}" alt="" loading="lazy" />
                 {% else %}
-                  <span class="flex size-15 shrink-0 items-center justify-center rounded-box bg-base-200 text-xs font-bold" aria-hidden="true">{{ file.extension | replace('.', '') | upper }}</span>
+                  <span class="flex size-full items-center justify-center text-sm font-bold" aria-hidden="true">{{ file.extension | replace('.', '') | upper }}</span>
+                {% endif %}
+                {% if file.needsAlt or not file.references.length %}
+                  <span class="absolute top-2 left-2 flex flex-col items-start gap-1">
+                    {% if file.needsAlt %}{{ badge('No alt text', color='warning') }}{% endif %}
+                    {% if not file.references.length %}{{ badge('Unused', color='neutral') }}{% endif %}
+                  </span>
                 {% endif %}
-                <a class="link link-hover break-all" href="{{ file.url }}">{{ file.path }}</a>
-              </div>
-            </td>
-            <td>
-              {% if file.kind == 'image' %}
-                <form class="flex min-w-72 flex-wrap items-center gap-2" method="post" action="{{ altUrl }}">
-                  <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-                  <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
-                  <input type="hidden" name="{{ fields.page }}" value="{{ page }}" />
-                  <label class="sr-only" for="media-alt-{{ loop.index }}">Alt text for {{ file.name }}</label>
-                  <input
-                    id="media-alt-{{ loop.index }}"
-                    name="{{ fields.alt }}"
-                    type="text"
-                    value="{% if file.alt and file.alt.kind == 'described' %}{{ file.alt.text }}{% endif %}"
-                    aria-describedby="media-alt-state-{{ loop.index }}"
-                    class="input input-sm min-w-40 flex-1"
-                  />
-                  <label class="label text-sm text-base-content" for="media-decorative-{{ loop.index }}">
-                    <input
-                      id="media-decorative-{{ loop.index }}"
-                      name="{{ fields.decorative }}"
-                      type="checkbox"
-                      value="1"
-                      {% if file.alt and file.alt.kind == 'decorative' %}checked{% endif %}
-                      class="checkbox checkbox-sm"
-                    />
-                    Decorative
-                  </label>
-                  {{ button('Save', type='submit', size='sm') }}
-                  <p id="media-alt-state-{{ loop.index }}" class="w-full text-sm">
-                    {%- if not file.alt %}{{ status('missing', 'Missing') }} Describe it, or mark it decorative.
-                    {%- elif file.alt.kind == 'decorative' %}{{ status('decorative', 'Decorative') }} Inserted with an empty alt.
-                    {%- else %}{{ status('described', 'Described') }} Offered when it is inserted.{% endif -%}
-                  </p>
-                </form>
-              {% else %}
-                Not an image
-              {% endif %}
-            </td>
-            <td class="whitespace-nowrap">{{ file.modified | date('html') }}</td>
-            <td class="whitespace-nowrap">{{ file.bytes }}</td>
-            <td>
-              <div class="flex min-w-60 flex-col gap-2">
-                {{ copyField('media-url-' + loop.index, 'URL of ' + file.name, file.url) }}
-                {{ copyField('media-markdown-' + loop.index, 'Markdown for ' + file.name, file.markdown) }}
-              </div>
-            </td>
-            <td>
-              {% if file.references.length %}
-                <ul>
-                  {% for reference in file.references %}
-                    <li class="whitespace-nowrap">
-                      <a class="link link-hover" href="{{ reference.editUrl }}">{{ reference.title }}</a>
-                      {% if reference.trashed %}{{ status('trashed', 'Trash') }}{% endif %}
-                    </li>
-                  {% endfor %}
-                </ul>
-              {% else %}
-                Nothing
-              {% endif %}
-            </td>
-            <td>
-              <form method="post" action="{{ deleteUrl }}">
-                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-                <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
-                {{ button('Delete', type='submit', style='ghost', size='xs') }}
-              </form>
-            </td>
-          </tr>
+              </span>
+              <span class="block truncate px-2 py-1.5 text-xs">{{ file.name }}</span>
+            </a>
+          </li>
         {% endfor %}
-      </tbody>
-    {% endcall %}
+      </ul>
 
-    <div class="mt-4">
-      {{ pagination(page, pages=pages, previousUrl=previousUrl, nextUrl=nextUrl) }}
-    </div>
+      <div class="mt-6">
+        {{ pagination(page, pages=pages, previousUrl=previousUrl, nextUrl=nextUrl) }}
+      </div>
+    {% endif %}
 
-    <p class="mt-4 max-w-prose text-sm">
-      The list is the <code>content/uploads</code> directory itself, read afresh on every request,
+    <p class="mt-6 max-w-prose text-sm">
+      The library is the <code>content/uploads</code> directory itself, read afresh on every request,
       so a file copied in by hand is here without a restart. Deleting one removes the file and
       whatever was derived from it; it does not touch the documents that link to it, which is why
       a file something still points at asks first.
     </p>
   {% endif %}
 
-  {# The one enhancement on this screen. The fields above are readonly inputs
-     and already copy by hand; this adds a button beside each of them. #}
   <script defer src="{{ assetPrefix }}copy.js"></script>
+  <script defer src="{{ assetPrefix }}media.js"></script>
 {% endblock %}

package/admin/pages/settings/general.njk

@@ -1,6 +1,9 @@
 {# /admin/settings: what the site is called, where it lives, and its picture. #}
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/badge.njk" import status %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
 
 {% block settingsProblems %}
   {{ field.problem('settings-title', problems.title) }}
@@ -93,4 +96,48 @@
        error=problems.license_name, hint='What the footer calls it. Only read for a custom license.') }}
 {% endblock %}
 
-{% block settingsPanels %}{% endblock %}
+{% block settingsPanels %}
+  {% call card(title='Movies and TV shows') %}
+    <p>
+      {% if tmdbPresent %}
+        {{ status('connected', 'Connected') }} Key {{ tmdbKeyHint }}.
+      {% else %}
+        {{ status('disconnected', 'Not connected') }} This site has no TMDb key.
+      {% endif %}
+    </p>
+
+    {% if tmdbSetBy %}
+      <p class="text-sm">The key is set by <code>{{ tmdbSetBy }}</code> and cannot be changed here.</p>
+    {% else %}
+      <form method="post" action="{{ tmdbUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        {{ field.password('settings-tmdb-key', tmdbFields.key, 'TMDb API key',
+             autocomplete='off', spellcheck='false',
+             placeholder=('Replace the stored key' if tmdbPresent else 'Paste your key')) }}
+        <div class="mt-2">
+          {{ button('Replace key' if tmdbPresent else 'Save key', type='submit', color='primary') }}
+        </div>
+      </form>
+    {% endif %}
+
+    <p class="text-sm">
+      With a key from <a class="link" href="https://www.themoviedb.org/settings/api">themoviedb.org</a>,
+      Look up on a review fills in a movie or TV show from its TMDb or IMDb link:
+      its title, director or network, year and poster. Either the API key or
+      the API read access token works. It is kept in <code>data/tmdb.json</code>,
+      never in <code>site.json</code> and never on the public site. A deployment
+      can set it instead with <code>GEEKITY_TMDB__KEY</code>. This site uses TMDB
+      and the TMDB APIs but is not endorsed, certified or otherwise approved by TMDB.
+    </p>
+
+    {% if tmdbPresent and not tmdbSetBy %}
+      <form method="post" action="{{ tmdbUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="{{ tmdbFields.action }}" value="{{ tmdbRemove }}" />
+        {% call cardActions() %}
+          {{ button('Remove key', type='submit', color='error', style='ghost') }}
+        {% endcall %}
+      </form>
+    {% endif %}
+  {% endcall %}
+{% endblock %}

package/admin/pages/settings/privacy.njk

@@ -31,7 +31,7 @@
   <p class="max-w-prose text-sm">
     Location and camera metadata is always removed from pictures and videos as
     they are uploaded, whatever is chosen above. Files uploaded before this
-    version keep theirs until the sweep on the <a class="link" href="{{ adminUrl }}/media#strip-metadata">Media</a>
+    version keep theirs until the sweep on the <a class="link" href="{{ adminUrl }}/tools/maintenance#strip-metadata">Maintenance</a>
     screen, or <code>geekity strip-metadata</code>, is run over <code>content/uploads/</code>.
   </p>
 {% endblock %}

package/admin/pages/tools/maintenance.njk

@@ -3,6 +3,7 @@
 {% from "components/alert.njk" import alert %}
 {% from "components/button.njk" import button %}
 {% from "components/card.njk" import card, cardActions %}
+{% from "components/job-status.njk" import jobStatus %}
 
 {% block title %}{{ heading }}{% endblock %}
 
@@ -47,5 +48,52 @@
       <code>geekity maintenance on</code> and <code>off</code> at the command line turn the
       same switch, and a running site notices either within a second.
     </p>
+
+    <section id="strip-metadata" aria-labelledby="strip-metadata-heading">
+      {% call card() %}
+        <h2 id="strip-metadata-heading" class="card-title">Location and camera metadata</h2>
+        <p class="max-w-prose">
+          Location and camera metadata is removed from pictures and videos as they are
+          uploaded. Files uploaded before that keep theirs until this sweep runs over
+          <code>content/uploads/</code>. It runs in the background, leaves a clean file
+          as it is, and keeps each file's modification time.
+        </p>
+        {% if sweep %}
+          {% call jobStatus(sweep, saveUrl + '#strip-metadata', verb='Checked', unit='files') %}
+            {% if sweepReport %}
+              <p>
+                Checked {{ sweepReport.checked }} {% if sweepReport.checked == 1 %}file{% else %}files{% endif %}:
+                {{ sweepReport.stripped.length }} stripped, {{ sweepReport.clean }} already clean,
+                {{ sweepReport.unreadable.length }} unreadable.
+              </p>
+              {% if sweepReport.stripped.length %}
+                <h3 class="font-semibold">Stripped</h3>
+                <ul class="list-disc pl-6">
+                  {% for file in sweepReport.stripped %}
+                    <li><code class="break-all">{{ file.path }}</code>: removed {{ file.removed | join(', ') }}</li>
+                  {% endfor %}
+                </ul>
+              {% endif %}
+              {% if sweepReport.unreadable.length %}
+                <h3 class="font-semibold">Left as they were</h3>
+                <ul class="list-disc pl-6">
+                  {% for file in sweepReport.unreadable %}
+                    <li><code class="break-all">{{ file.path }}</code>: {{ file.problem }}</li>
+                  {% endfor %}
+                </ul>
+              {% endif %}
+            {% endif %}
+          {% endcall %}
+        {% endif %}
+        {% if not sweep or not sweep.active %}
+          <form method="post" action="{{ stripMetadataUrl }}">
+            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+            {% call cardActions() %}
+              {{ button('Run the sweep again' if sweep else 'Strip metadata from every upload', type='submit', color='primary') }}
+            {% endcall %}
+          </form>
+        {% endif %}
+      {% endcall %}
+    </section>
   </div>
 {% endblock %}

package/admin/src/admin.css

@@ -3,6 +3,7 @@
 @source '../components';
 @source '../pages';
 @source '../../editor/look.ts';
+@source '../static/media.js';
 
 @plugin 'daisyui' {
   themes: