Improve compose/edit UX and i18n for media and delete prompts

Move compose content label to visually-hidden, use unicode emoji as
data attributes instead of rendered img tags, size emoji buttons for
readability, and add `.visually-hidden` helper class. Refactor
media_preflight.js to pull user-facing strings from template data
attributes so translations work. Hoist "More options" and "URL alias"
into a collapsible details section on edit forms. Translate error page
titles and delete confirmation prompts context-sensitively per the
visitor's locale.

Author: toniher

app/main.py

@@ -80,6 +80,8 @@
 from app.database import AsyncSession
 from app.database import async_session
 from app.database import get_db_session
+from app.i18n import get_translations
+from app.i18n import resolve_locale
 from app.mastodon.errors import MastodonError
 from app.mastodon.errors import mastodon_error_handler
 from app.mastodon.oauth import router as mastodon_oauth_router
@@ -356,10 +358,15 @@ async def custom_http_exception_handler(
         and 400 <= exc.status_code < 600
     ):
         async with async_session() as db_session:
+            # Translated against the visitor's negotiated locale, like the
+            # page it's rendered into -- not `gettext_default`, which is
+            # pinned to the instance locale. `exc.detail` is passed through
+            # untouched: it already arrives translated from its raiser.
+            translations = get_translations(resolve_locale(request))
             title = (
                 {
-                    404: "Oops, nothing to see here",
-                    500: "Oops, something went wrong",
+                    404: translations.gettext("Oops, nothing to see here"),
+                    500: translations.gettext("Oops, something went wrong"),
                 }
             ).get(exc.status_code, exc.detail)
             try:

app/scss/main.scss

@@ -198,12 +198,31 @@ body.htmx-request::after {
   padding: 2px;
   cursor: pointer;
   border-radius: 4px;
+  // Unicode emoji are rendered as text, so this needs a readable size of its
+  // own -- `.form { input, select, textarea }` doesn't cover <button>.
+  font-size: 1.3rem;
+  line-height: 1;
+  vertical-align: middle;
 
   &:hover, &:focus-visible {
     outline: 1px solid $secondary-color;
   }
 }
 
+// Available to assistive tech, but not shown -- for a label whose field is
+// already self-evident on screen (the compose box).
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .show-more-wrapper {
   .p-summary {
     display: inline-block;

app/static/common-admin.js

@@ -1,9 +1,15 @@
 document.addEventListener('DOMContentLoaded', (ev) => {
-  // Add confirm to "delete" button next to outbox objects
+  // Add confirm to "delete" button next to outbox objects. The prompt is
+  // rendered (and translated) by the template on the form's `data-confirm`,
+  // so this file holds no English of its own -- a federated delete and a
+  // local-only one say different things. The fallback only covers a template
+  // that predates the attribute.
   var forms = document.getElementsByClassName("object-delete-form")
   for (var i = 0; i < forms.length; i++) {
     forms[i].addEventListener('submit', (ev) => {
-      if (!confirm('Do you really want to delete this object?')) {
+      var message = ev.currentTarget.getAttribute('data-confirm')
+        || 'Do you really want to delete this object?';
+      if (!confirm(message)) {
         ev.preventDefault();
       };
     });

app/static/media_preflight.js

@@ -12,6 +12,14 @@
         return;
     }
 
+    // User-facing strings are rendered (and translated) by the template and
+    // handed over on the input's data attributes, so this file holds no
+    // English of its own. The defaults only cover a template that predates
+    // them.
+    function msg(name, fallback) {
+        return fileInput.getAttribute("data-msg-" + name) || fallback;
+    }
+
     function formatDuration(seconds) {
         var total = Math.round(seconds);
         var minutes = Math.floor(total / 60);
@@ -38,7 +46,9 @@
         }
 
         var row = document.createElement("p");
-        row.textContent = file.name + ": checking playback in this browser…";
+        row.textContent = msg(
+            "checking", "__FILENAME__: checking playback in this browser…"
+        ).replace("__FILENAME__", file.name);
         container.appendChild(row);
 
         var probe = document.createElement(isVideo ? "video" : "audio");
@@ -61,12 +71,14 @@
         }
 
         probe.addEventListener("loadedmetadata", function () {
-            var details = file.name + ": ";
-            if (isVideo) {
-                details += probe.videoWidth + "x" + probe.videoHeight + ", ";
-            }
-            details += formatDuration(probe.duration) + " — plays in this browser";
-            row.textContent = details;
+            var dimensions = isVideo
+                ? probe.videoWidth + "x" + probe.videoHeight + ", "
+                : "";
+            row.textContent = msg(
+                "plays", "__FILENAME__: __DETAILS__ — plays in this browser"
+            )
+                .replace("__FILENAME__", file.name)
+                .replace("__DETAILS__", dimensions + formatDuration(probe.duration));
             cleanup();
         });
 
@@ -79,17 +91,19 @@
             // the error) is more likely a local blob-loading quirk than a
             // real codec/container problem, so say that instead of guessing.
             if (errorCode === 4 && !canPlayGuess) {
-                row.textContent = (
-                    file.name + ": this browser could not play this file " +
+                row.textContent = msg(
+                    "unsupported",
+                    "__FILENAME__: this browser could not play this file " +
                     "(unsupported codec/container) — it may be rejected on " +
                     "upload. Re-encoding as H.264/AAC in an MP4 is the safest bet."
-                );
+                ).replace("__FILENAME__", file.name);
             } else {
-                row.textContent = (
-                    file.name + ": couldn't generate a local preview in this " +
+                row.textContent = msg(
+                    "nopreview",
+                    "__FILENAME__: couldn't generate a local preview in this " +
                     "browser (this check isn't authoritative — it may still " +
                     "upload and play fine; the server has the final say)."
-                );
+                ).replace("__FILENAME__", file.name);
             }
             cleanup();
         });

app/static/new.js

@@ -24,13 +24,15 @@
             ta.selectionStart = ta.selectionEnd = start + textToInsert.length;
         }
     }
-    // Emoji click callback func
+    // Emoji click callback func. The value comes from the button's own
+    // `data-emoji` rather than a nested <img alt>: unicode emoji render as
+    // plain text here (no twemoji asset needed), so there is no image to read.
     var ji = function (ev) {
-        var emojiEl = ev.target.closest("[alt]");
-        if (emojiEl == null) {
+        var value = ev.currentTarget.getAttribute("data-emoji");
+        if (!value) {
             return;
         }
-        insertAtCursor(emojiEl.getAttribute("alt") + " ");
+        insertAtCursor(value + " ");
         ta.focus()
     }
     // Enable the click for each emojis

app/templates/admin_edit_text.html

@@ -19,39 +19,47 @@
     {% if outbox_object.ap_type == "Article" %}
     <p class="form-field">
         <label for="name">{{ _("Title") }}</label>
-        <input type="text" class="width-95" id="name" name="name" placeholder="{{ _("Title") }}" value="{{ outbox_object.name }}">
+        <input type="text" class="width-95" id="name" name="name" value="{{ outbox_object.name or "" }}">
     </p>
     {% endif %}
 
     <p class="form-field">
-        <label for="alias">{{ _("URL alias") }}</label>
-        <input type="text" class="width-95" id="alias" name="alias"
-               placeholder="{{ _("URL alias") }}" value="{{ outbox_object.alias or "" }}">
-        <span class="muted">{{ _("Leave empty to remove the alias.") }}</span>
-    </p>
-
-    <p class="form-field">
-        <label for="content">{{ _("Content") }}</label>
+        <label for="content" class="visually-hidden">{{ _("Content") }}</label>
         {% if emojis or custom_emojis %}
         <div class="emoji-picker">
+        {# Unicode emoji are rendered as plain characters, not via `emojify`:
+           the picker shows exactly what gets inserted, and it keeps working
+           when `inv download-twemoji` hasn't populated app/static/twemoji. #}
         {% for emoji in emojis %}
-        <button type="button" class="ji">{{ emoji | emojify(True) | safe }}</button>
+        <button type="button" class="ji" data-emoji="{{ emoji }}" title="{{ emoji }}">{{ emoji }}</button>
         {% endfor %}
         {% for emoji in custom_emojis %}
-        <button type="button" class="ji"><img src="{{ emoji.icon.url }}" alt="{{ emoji.name }}" title="{{ emoji.name }}" class="custom-emoji" loading="lazy"></button>
+        <button type="button" class="ji" data-emoji="{{ emoji.name }}" title="{{ emoji.name }}"><img src="{{ emoji.icon.url }}" alt="{{ emoji.name }}" class="custom-emoji" loading="lazy"></button>
         {% endfor %}
         </div>
         {% endif %}
         <textarea id="content" name="content" rows="10" cols="50" autofocus="autofocus">{{ content }}</textarea>
+        <span class="muted">{{ _("Markdown is supported. #hashtags, @mentions and :custom_emoji: work too.") }}</span>
     </p>
 
     <p class="form-field">
         <label for="content_warning">{{ _("Content warning") }}</label>
         <input type="text" id="content_warning" name="content_warning" placeholder="{{ _("will mark the post as sensitive") }}"{% if content_warning %} value="{{ content_warning }}"{% endif %} class="width-95">
     </p>
+
+    <details class="more-options" {% if outbox_object.alias or is_sensitive or error %}open{% endif %}>
+    <summary>{{ _("More options") }}</summary>
+
+    <p class="form-field">
+        <label for="alias">{{ _("URL alias") }}</label>
+        <input type="text" class="width-95" id="alias" name="alias" placeholder="{{ _("optional") }}" value="{{ outbox_object.alias or "" }}">
+        <span class="muted">{{ _("A short custom URL for this post, instead of its permalink.") }} {{ _("Leave empty to remove the alias.") }}</span>
+    </p>
+
     <p class="form-field-inline">
         <input type="checkbox" name="is_sensitive" id="is_sensitive" {% if is_sensitive %}checked{% endif %}> <label for="is_sensitive">{{ _("Mark attachment(s) as sensitive") }}</label>
     </p>
+    </details>
 
     <p>
         <input type="submit" value="{{ _("Submit") }}">

app/templates/admin_new.html

@@ -33,9 +33,15 @@
 </ul>
 </nav>
 {% if False %}
-    {# dynamic `_(ap_type_choice)` lookup above isn't statically extractable; these
-       calls exist only so `pybabel extract` picks up each label. #}
+    {# dynamic `_(...)` lookups (the type labels above, the visibility names
+       below) aren't statically extractable; these calls exist only so
+       `pybabel extract` picks up each label. The visibility strings must stay
+       byte-identical to `VisibilityEnum.get_display_name`. #}
     {{ _("Note") }}{{ _("Article") }}{{ _("Question") }}
+    {{ _("Public - sent to followers and visible on the homepage") }}
+    {{ _("Unlisted - like public, but hidden from the homepage") }}
+    {{ _("Followers only") }}
+    {{ _("Direct - only visible for mentioned actors") }}
 {% endif %}
 
 {% if error %}
@@ -50,7 +56,7 @@
         <label for="visibility">{{ _("Visibility") }}</label>
         <select name="visibility" id="visibility">
             {% for (k, v) in visibility_choices %}
-            <option value="{{ k }}" {% if visibility == k or in_reply_to_object and in_reply_to_object.visibility.name == k %}selected{% endif %}>{{ v }}</option>
+            <option value="{{ k }}" {% if visibility == k or in_reply_to_object and in_reply_to_object.visibility.name == k %}selected{% endif %}>{{ _(v) }}</option>
             {% endfor %}
         </select>
     </p>
@@ -63,14 +69,17 @@
     {% endif %}
 
     <p class="form-field">
-        <label for="content">{{ _("Content") }}</label>
+        <label for="content" class="visually-hidden">{{ _("Content") }}</label>
         {% if emojis or custom_emojis %}
         <div class="emoji-picker">
+        {# Unicode emoji are rendered as plain characters, not via `emojify`:
+           the picker shows exactly what gets inserted, and it keeps working
+           when `inv download-twemoji` hasn't populated app/static/twemoji. #}
         {% for emoji in emojis %}
-        <button type="button" class="ji">{{ emoji | emojify(True) | safe }}</button>
+        <button type="button" class="ji" data-emoji="{{ emoji }}" title="{{ emoji }}">{{ emoji }}</button>
         {% endfor %}
         {% for emoji in custom_emojis %}
-        <button type="button" class="ji"><img src="{{ emoji.icon.url }}" alt="{{ emoji.name }}" title="{{ emoji.name }}" class="custom-emoji" loading="lazy"></button>
+        <button type="button" class="ji" data-emoji="{{ emoji.name }}" title="{{ emoji.name }}"><img src="{{ emoji.icon.url }}" alt="{{ emoji.name }}" class="custom-emoji" loading="lazy"></button>
         {% endfor %}
         </div>
         {% endif %}
@@ -115,6 +124,7 @@
     <p class="form-field">
         <label for="alias">{{ _("URL alias") }}</label>
         <input type="text" class="width-95" id="alias" name="alias" placeholder="{{ _("optional") }}" value="{{ alias or "" }}">
+        <span class="muted">{{ _("A short custom URL for this post, instead of its permalink.") }}</span>
     </p>
 
     <p class="form-field">
@@ -131,7 +141,11 @@
     <input type="hidden" name="quote_of" value="{{ quote_of or "" }}">
     <p class="form-field">
         <label for="files">{{ _("Attachments") }}</label>
-        <input id="files" name="files" type="file" class="width-95" multiple accept="image/*,video/*,audio/*">
+        <input id="files" name="files" type="file" class="width-95" multiple accept="image/*,video/*,audio/*"
+               data-msg-checking="{{ _("%(filename)s: checking playback in this browser…", filename="__FILENAME__") }}"
+               data-msg-plays="{{ _("%(filename)s: %(details)s — plays in this browser", filename="__FILENAME__", details="__DETAILS__") }}"
+               data-msg-unsupported="{{ _("%(filename)s: this browser could not play this file (unsupported codec/container) — it may be rejected on upload. Re-encoding as H.264/AAC in an MP4 is the safest bet.", filename="__FILENAME__") }}"
+               data-msg-nopreview="{{ _("%(filename)s: couldn't generate a local preview in this browser (this check isn't authoritative — it may still upload and play fine; the server has the final say).", filename="__FILENAME__") }}">
     </p>
     <div id="alts" data-alt-placeholder="{{ _("Alt text for %(filename)s", filename="__FILENAME__") }}"></div>
     <p>

app/templates/components/admin_buttons.html

@@ -183,7 +183,7 @@
 {% endmacro %}
 
 {% macro admin_delete_button(request, csrf_token, ap_object) %}
-<form action="{{ request.url_for("admin_actions_delete") }}" class="object-delete-form" method="POST">
+<form action="{{ request.url_for("admin_actions_delete") }}" class="object-delete-form" method="POST" data-confirm="{{ _("Do you really want to delete this object? A Delete will be sent to the other servers that have it.") }}">
     {{ hidden_inputs.embed_csrf_token(csrf_token) }}
     <input type="hidden" name="redirect_url" value="{% if request.url.path.endswith("/" + ap_object.public_id) or (request.url.path == "/admin/object" and request.query_params.ap_id.endswith("/" + ap_object.public_id)) %}{{ request.base_url}}{% else %}{{ request.url }}{% endif %}">
     <input type="hidden" name="ap_object_id" value="{{ ap_object.ap_id }}">
@@ -192,7 +192,7 @@
 {% endmacro %}
 
 {% macro admin_force_delete_button(request, csrf_token, ap_object_id, permalink_id=None) %}
-<form action="{{ request.url_for("admin_actions_force_delete") }}" class="object-delete-form" method="POST">
+<form action="{{ request.url_for("admin_actions_force_delete") }}" class="object-delete-form" method="POST" data-confirm="{{ _("Do you really want to delete this object? It will only be removed from this instance.") }}">
     {{ hidden_inputs.embed_csrf_token(csrf_token) }}
     {{ hidden_inputs.embed_redirect_url(request, permalink_id) }}
     <input type="hidden" name="ap_object_id" value="{{ ap_object_id }}">
@@ -201,7 +201,7 @@
 {% endmacro %}
 
 {% macro admin_force_delete_webmention_button(request, csrf_token, webmention_id, permalink_id=None) %}
-<form action="{{ request.url_for("admin_actions_force_delete_webmention") }}" class="object-delete-form" method="POST">
+<form action="{{ request.url_for("admin_actions_force_delete_webmention") }}" class="object-delete-form" method="POST" data-confirm="{{ _("Do you really want to delete this webmention? It will only be removed from this instance.") }}">
     {{ hidden_inputs.embed_csrf_token(csrf_token) }}
     {{ hidden_inputs.embed_redirect_url(request, permalink_id) }}
     <input type="hidden" name="webmention_id" value="{{ webmention_id }}">