@jant/core 0.6.16 → 0.7.0

package/src/client/components/jant-post-menu.ts

@@ -18,7 +18,15 @@ import {
 import { showConfirmDialog } from "../confirm.js";
 import { refreshArticleView } from "../post-refresh.js";
 import { showToast } from "../toast.js";
+import { readErrorMessage } from "../json.js";
 import { publicPath } from "../runtime-paths.js";
+import { looksLikeAddress } from "../../lib/url.js";
+import { pickPost } from "../post-picker.js";
+import {
+  ensureComposeDialog,
+  readComposeDialogLabels,
+} from "../compose-launch.js";
+import type { PostPickerResult } from "./jant-post-picker.js";
 import {
   applyItemOrder,
   filterCollectionsBySearch,
@@ -35,6 +43,51 @@ interface PostMenuData {
   visibility: string;
   isReply: boolean;
   isDraft: boolean;
+  /** Content language of the Thread, when the site publishes more than one. */
+  language: string | null;
+}
+
+/** One language the site publishes. */
+interface MenuLanguage {
+  tag: string;
+  label: string;
+}
+
+/**
+ * What the server made of an address pasted into the translation picker: the
+ * Thread it names, or why that Thread cannot be linked to this one.
+ */
+type TranslationAddressResolution =
+  | {
+      kind: "ok";
+      address: string;
+      candidate: { id: string; label: string; language: string | null };
+    }
+  | {
+      kind:
+        | "external"
+        | "not_found"
+        | "not_a_post"
+        | "same_thread"
+        | "unpublished"
+        | "no_language"
+        | "same_language"
+        | "group_conflict";
+      address: string;
+    }
+  | {
+      kind: "language_taken" | "group_language_taken";
+      address: string;
+      language: string;
+    };
+
+/** A Thread already linked to this one as a translation. */
+interface TranslationItem {
+  id: string;
+  slug: string;
+  /** What to call it — its title, or something derived when it has none. */
+  label: string;
+  language: string | null;
 }
 
 interface CollectionItem {
@@ -51,7 +104,16 @@ interface ThreadCollectionsResponse {
   collectionIds?: string[];
 }
 
-type PostMenuView = "menu" | "collections" | "visibility";
+type PostMenuView =
+  "menu" | "collections" | "visibility" | "language" | "language-switch";
+
+/**
+ * Where the language panel puts focus, in document order rather than in the
+ * order written here — `querySelector` picks the first match on the page, so
+ * this reads as "the topmost real action in the panel", whichever it is.
+ */
+const LANGUAGE_PANEL_FOCUS =
+  "[data-post-menu-translation] a, [data-post-menu-translation-first], [data-post-menu-open-language-switch]";
 
 interface MenuTriggerRect {
   top: number;
@@ -107,11 +169,14 @@ function readPostMenuData(article: HTMLElement): PostMenuData | null {
     visibility: article.dataset.postVisibility ?? "public",
     isReply: threadId !== id || article.hasAttribute("data-post-reply"),
     isDraft: article.hasAttribute("data-post-draft"),
+    // Carried on the Thread root, so a reply reads it from there.
+    language: threadRootArticle.dataset.postLanguage ?? null,
   };
 }
 
 export class JantPostMenu extends LitElement {
   static properties = {
+    languages: { type: Array },
     _open: { state: true },
     _data: { state: true },
     _x: { state: true },
@@ -123,8 +188,12 @@ export class JantPostMenu extends LitElement {
     _collectionSearch: { state: true },
     _threadCollectionIds: { state: true },
     _addCollectionPanelOpen: { state: true },
+    _translations: { state: true },
+    _translationsLoading: { state: true },
+    _translationBusy: { state: true },
   };
 
+  declare languages: MenuLanguage[];
   declare _open: boolean;
   declare _data: PostMenuData | null;
   declare _x: number;
@@ -136,6 +205,9 @@ export class JantPostMenu extends LitElement {
   declare _collectionSearch: string;
   declare _threadCollectionIds: string[];
   declare _addCollectionPanelOpen: boolean;
+  declare _translations: TranslationItem[] | null;
+  declare _translationsLoading: boolean;
+  declare _translationBusy: boolean;
   declare _triggerEl: HTMLElement | null;
 
   /** Whether collections were modified during this session (triggers page reload on close) */
@@ -150,6 +222,7 @@ export class JantPostMenu extends LitElement {
 
   constructor() {
     super();
+    this.languages = [];
     this._open = false;
     this._data = null;
     this._x = 0;
@@ -161,6 +234,9 @@ export class JantPostMenu extends LitElement {
     this._collectionSearch = "";
     this._threadCollectionIds = [];
     this._addCollectionPanelOpen = false;
+    this._translations = null;
+    this._translationsLoading = false;
+    this._translationBusy = false;
     this._triggerEl = null;
   }
 
@@ -218,6 +294,12 @@ export class JantPostMenu extends LitElement {
         return;
       }
       if (this._open) {
+        // One step back per press, not one step out: the language picker is a
+        // level deeper than the panel that opens it.
+        if (this._view === "language-switch") {
+          this.#showLanguagePanel();
+          return;
+        }
         if (this._view !== "menu") {
           this.#showMainMenu();
           return;
@@ -300,11 +382,27 @@ export class JantPostMenu extends LitElement {
       return;
     }
 
-    // Clicking inside the dropdown — don't close (menu or collection picker)
+    // Clicking inside the dropdown — don't close (menu or any of its panels).
+    //
+    // `.post-menu-view` — the root of whichever panel is on screen — and not
+    // the two obvious alternatives, for two different reasons.
+    //
+    // Not `[role="menu"]`: that is on the *list*, and a panel's header sits
+    // outside it, so every back button read as a click outside the menu and
+    // closed the whole thing.
+    //
+    // Not `.post-menu-panel`, the container the views render into, even though
+    // it reads as the more honest "anywhere in the dropdown". On a *real*
+    // click the browser runs a microtask checkpoint between event listeners,
+    // so a menu item that switches panels has already re-rendered by the time
+    // this handler runs: `target` is a detached node whose subtree ends at the
+    // view root, and `closest` can no longer reach the container. Clicking
+    // Language would open the panel and close the menu in the same event.
+    // (`el.click()` from a script never shows this — the stack never empties,
+    // so nothing re-renders mid-dispatch. Hence the `performUpdate()` in the
+    // test that covers it.)
     if (this._open) {
-      const inside = target.closest?.(
-        "[role='menu'], [data-collection-picker], [data-visibility-panel]",
-      );
+      const inside = target.closest?.(".post-menu-view, .post-menu-panel");
       if (inside) return;
     }
 
@@ -465,6 +563,402 @@ export class JantPostMenu extends LitElement {
     );
   }
 
+  // --- Language and translations ---
+
+  /** Whether this site publishes enough languages for any of this to matter. */
+  get #multilingual(): boolean {
+    return this.languages.length > 1;
+  }
+
+  #languageLabel(tag: string | null): string {
+    if (!tag) return "Not set";
+    return this.languages.find((l) => l.tag === tag)?.label ?? tag;
+  }
+
+  async #openLanguagePanel() {
+    if (this._data?.isReply) return;
+    this._view = "language";
+    this.#focusAfterUpdate(LANGUAGE_PANEL_FOCUS);
+    // The panel is mostly about them, and the picker one level down needs them
+    // too: a language is unavailable exactly when another post in the group
+    // already holds it.
+    await this.#loadTranslations();
+    // A Thread whose every other language is already spoken for has nothing to
+    // put on screen until this resolves, so the first attempt found nothing to
+    // land on. Anywhere else, focus is already inside and must stay put.
+    if (!this.contains(document.activeElement)) {
+      this.#focusAfterUpdate(LANGUAGE_PANEL_FOCUS);
+    }
+  }
+
+  #showLanguagePanel(focusSelector = "[data-post-menu-open-language-switch]") {
+    this._view = "language";
+    this.#focusAfterUpdate(focusSelector);
+  }
+
+  /**
+   * The one place the language picker lives.
+   *
+   * Behind a row of its own rather than at the top of the language panel:
+   * switching a Thread's language is a correction, made once if ever, while
+   * reading and adding other versions is the daily work. Left inline it also
+   * degenerated — on a two-language site whose other version is already linked,
+   * the radio group rendered a single unclickable row for the current language.
+   */
+  #openLanguageSwitch() {
+    if (this._data?.isReply) return;
+    this._view = "language-switch";
+    this.#focusAfterUpdate(
+      "[data-post-menu-language-current='true'], [data-post-menu-language-option]",
+    );
+  }
+
+  /**
+   * Split the site's languages by what this Thread can do with each.
+   *
+   * A language another version already holds is neither selectable nor free:
+   * the group allows one post per language, so it is spoken for either way.
+   */
+  #languageChoices() {
+    const current = this._data?.language ?? null;
+    const linked = this._translations ?? [];
+    const held = new Set(
+      linked.flatMap((translation) =>
+        translation.language ? [translation.language] : [],
+      ),
+    );
+    return {
+      current,
+      linked,
+      selectable: this.languages.filter(
+        (language) => language.tag === current || !held.has(language.tag),
+      ),
+      free: this.languages.filter(
+        (language) => language.tag !== current && !held.has(language.tag),
+      ),
+    };
+  }
+
+  /**
+   * Set the language of this whole Thread.
+   *
+   * Not optimistic: unlike visibility, this can be refused server-side — the
+   * Thread's translation group may already hold that language — and showing the
+   * new language before the server agrees would be a lie the author acts on.
+   */
+  async #setLanguage(tag: string) {
+    const data = this._data;
+    if (!data || this._translationBusy) return;
+    this._translationBusy = true;
+
+    try {
+      const response = await fetch(
+        publicPath(`/api/posts/${data.threadId}/language`),
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({ language: tag }),
+        },
+      );
+      if (!response.ok) {
+        showToast(
+          await readErrorMessage(
+            response,
+            "Could not change the language. Try again.",
+          ),
+          "error",
+        );
+        return;
+      }
+
+      const article = document.querySelector<HTMLElement>(
+        `article[data-post-id="${data.threadId}"]`,
+      );
+      if (article) article.dataset.postLanguage = tag;
+      this._data = { ...data, language: tag };
+      showToast(`Thread is now in ${this.#languageLabel(tag)}.`);
+      this.#close();
+    } catch {
+      showToast("Could not change the language. Try again.", "error");
+    } finally {
+      this._translationBusy = false;
+    }
+  }
+
+  async #loadTranslations() {
+    const data = this._data;
+    if (!data) return;
+    this._translationsLoading = true;
+    try {
+      const response = await fetch(
+        publicPath(`/api/posts/${data.threadId}/translations`),
+        { credentials: "same-origin" },
+      );
+      if (!response.ok) return;
+      const body = (await response.json()) as {
+        translations?: TranslationItem[];
+      };
+      this._translations = body.translations ?? [];
+    } catch {
+      this._translations = [];
+    } finally {
+      this._translationsLoading = false;
+    }
+  }
+
+  /**
+   * Open the composer on a new post that translates this one.
+   *
+   * Prefers the dialog, so the author writes the translation without leaving
+   * the post they are translating — navigating away to a blank page loses that
+   * context exactly when it is most useful. Pages that render no dialog (the
+   * standalone composer among them) fall back to the URL, which carries the
+   * same two values.
+   */
+  async #writeTranslation(tag: string) {
+    const data = this._data;
+    if (!data) return;
+    this.#close({ restoreFocus: false });
+
+    const composeEl = await ensureComposeDialog();
+    if (composeEl) {
+      await composeEl.openTranslation(data.threadId, tag);
+      return;
+    }
+
+    const params = new URLSearchParams({
+      translationOf: data.threadId,
+      lang: tag,
+    });
+    window.location.assign(publicPath(`/new?${params.toString()}`));
+  }
+
+  /**
+   * Ask the author which post to link, in a dialog rather than in this popover.
+   *
+   * The menu is the wrong shape for a search: results need room for a real
+   * title and a keyboard. The picker is generic — the eligibility rules stay on
+   * the server, and this only supplies the copy and the request.
+   */
+  async #openLinkPicker() {
+    const data = this._data;
+    if (!data) return;
+    this.#close({ restoreFocus: false });
+
+    const picked = await pickPost({
+      heading: "Link a translation",
+      hint: "Only posts you could actually link are listed: published, and in a language this one's group does not already have.",
+      placeholder: "Search your posts, or paste a URL…",
+      emptyHint: "Nothing matched that you could link.",
+      search: async (query) => {
+        // An author writing a translation has the other post open in a tab, so
+        // the URL is closer to hand than the title. Resolving it also lets the
+        // answer be a reason rather than an empty list.
+        if (looksLikeAddress(query)) {
+          return this.#resolveTranslationAddress(data.threadId, query);
+        }
+
+        const response = await fetch(
+          publicPath(
+            `/api/posts/${data.threadId}/translations/candidates?q=${encodeURIComponent(query)}`,
+          ),
+          { credentials: "same-origin" },
+        );
+        if (!response.ok) return { items: [] };
+        const body = (await response.json()) as {
+          candidates?: Array<{
+            id: string;
+            label: string;
+            language: string | null;
+          }>;
+        };
+        return {
+          items: (body.candidates ?? []).map((candidate) => ({
+            id: candidate.id,
+            label: candidate.label,
+            meta: this.#languageLabel(candidate.language),
+          })),
+        };
+      },
+    });
+
+    if (!picked) return;
+    this._data = data;
+    await this.#linkTranslation(picked);
+    // The page renders the link too ("Also available in …"), so it has to catch
+    // up with the change the author just made.
+    window.location.reload();
+  }
+
+  /**
+   * Look up the post at a pasted address, and say what is wrong with it when
+   * it cannot be linked. The rules are the server's; this only puts the answer
+   * into words.
+   */
+  async #resolveTranslationAddress(
+    threadId: string,
+    address: string,
+  ): Promise<PostPickerResult> {
+    let resolution: TranslationAddressResolution | undefined;
+    try {
+      const response = await fetch(
+        publicPath(
+          `/api/posts/${threadId}/translations/resolve?url=${encodeURIComponent(address)}`,
+        ),
+        { credentials: "same-origin" },
+      );
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      ({ resolution } = (await response.json()) as {
+        resolution?: TranslationAddressResolution;
+      });
+    } catch {
+      return {
+        items: [],
+        note: "Could not check that address. Try again in a moment.",
+      };
+    }
+
+    if (!resolution) return { items: [] };
+    if (resolution.kind === "ok") {
+      return {
+        items: [
+          {
+            id: resolution.candidate.id,
+            label: resolution.candidate.label,
+            meta: this.#languageLabel(resolution.candidate.language),
+          },
+        ],
+      };
+    }
+
+    return { items: [], note: this.#translationAddressNote(resolution) };
+  }
+
+  #translationAddressNote(resolution: TranslationAddressResolution): string {
+    const language = this.#languageLabel(
+      "language" in resolution ? resolution.language : null,
+    );
+
+    switch (resolution.kind) {
+      case "external":
+        return "That address is somewhere else. Only posts on this site can be linked.";
+      case "not_found":
+        return `Nothing at ${resolution.address}. Check the address, or search by title.`;
+      case "not_a_post":
+        return "That address is not a post. Translations link posts to posts.";
+      case "same_thread":
+        return "That is this post.";
+      case "unpublished":
+        return "That post is a draft. Publish it, then link it.";
+      case "no_language":
+        return "That post has no language yet. Set one on it first.";
+      case "same_language":
+        return `That post is written in ${this.#languageLabel(
+          this._data?.language ?? null,
+        )} too. A translation has to be in another language.`;
+      case "language_taken":
+        return `A ${language} version is already linked here. Unlink that one first.`;
+      case "group_conflict":
+        return "That post belongs to another translation group. Unlink it first.";
+      case "group_language_taken":
+        return `Its translation group already has a ${language} version.`;
+      default:
+        return "That post cannot be linked.";
+    }
+  }
+
+  async #linkTranslation(otherId: string) {
+    const data = this._data;
+    if (!data || this._translationBusy) return;
+    this._translationBusy = true;
+
+    try {
+      const response = await fetch(
+        publicPath(`/api/posts/${data.threadId}/translations`),
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({ postId: otherId }),
+        },
+      );
+      if (!response.ok) {
+        showToast(
+          await readErrorMessage(
+            response,
+            "Could not link those posts. Try again.",
+          ),
+          "error",
+        );
+        return;
+      }
+      await this.#loadTranslations();
+      showToast("Posts linked as translations.");
+    } catch {
+      showToast("Could not link those posts. Try again.", "error");
+    } finally {
+      this._translationBusy = false;
+    }
+  }
+
+  /**
+   * Take one other version out of this Thread's translation group.
+   *
+   * Unlinking is per-version rather than "leave the group": from the author's
+   * seat the group *is* the list of other versions, so removing the row they
+   * are looking at is the action they mean. A group left with a single member
+   * collapses server-side, which makes the two-post case do the obvious thing.
+   *
+   * The confirm runs after the menu closes, the way deleting a post does — a
+   * modal opened underneath a popover fights it for focus and for the backdrop
+   * click.
+   */
+  async #unlinkTranslation(target: TranslationItem) {
+    const data = this._data;
+    if (!data || this._translationBusy) return;
+
+    const trigger = this._triggerEl;
+    this.#close({ restoreFocus: false });
+
+    const languageLabel = this.#languageLabel(target.language);
+    const confirmed = await showConfirmDialog({
+      message: `Unlink the ${languageLabel} version, “${target.label}”? Both posts stay published — they just stop pointing at each other.`,
+      confirmLabel: "Unlink",
+      cancelLabel: "Cancel",
+      tone: "danger",
+    });
+    if (!confirmed) {
+      trigger?.focus();
+      return;
+    }
+
+    this._translationBusy = true;
+    try {
+      const response = await fetch(
+        publicPath(`/api/posts/${target.id}/translations`),
+        { method: "DELETE", credentials: "same-origin" },
+      );
+      if (!response.ok) {
+        showToast(
+          await readErrorMessage(response, "Could not unlink. Try again."),
+          "error",
+        );
+        trigger?.focus();
+        return;
+      }
+      showToast("Translation link removed.");
+      // The page renders the link too ("Also available in …"), so it has to
+      // catch up with the change the author just made.
+      window.location.reload();
+    } catch {
+      showToast("Could not unlink. Try again.", "error");
+      trigger?.focus();
+    } finally {
+      this._translationBusy = false;
+    }
+  }
+
   #close(options: { restoreFocus?: boolean } = {}) {
     const restoreFocus =
       options.restoreFocus ?? this.#restoreTriggerFocusOnClose;
@@ -476,6 +970,7 @@ export class JantPostMenu extends LitElement {
     this._view = "menu";
     this._addCollectionPanelOpen = false;
     this._collectionSearch = "";
+    this._translations = null;
 
     if (this.#collectionsDirty) {
       this.#collectionsDirty = false;
@@ -521,12 +1016,7 @@ export class JantPostMenu extends LitElement {
     const postId = this._data.id;
     this.#close({ restoreFocus: false });
 
-    const dialog = document.getElementById(
-      "compose-dialog",
-    ) as HTMLDialogElement | null;
-    const composeEl = dialog?.querySelector("jant-compose-dialog") as
-      | import("./jant-compose-dialog.js").JantComposeDialog
-      | null;
+    const composeEl = await ensureComposeDialog();
     if (composeEl) {
       await composeEl.openEdit(postId);
     }
@@ -931,8 +1421,7 @@ export class JantPostMenu extends LitElement {
     if (!detail) return;
 
     const formEl = this.querySelector("jant-collection-form") as
-      | (HTMLElement & { loading: boolean })
-      | null;
+      (HTMLElement & { loading: boolean }) | null;
     if (formEl) formEl.loading = true;
 
     try {
@@ -992,26 +1481,23 @@ export class JantPostMenu extends LitElement {
     }
   }
 
-  /** Get collection form labels from the compose dialog (already on the page) */
+  /** Collection form labels the server rendered onto the compose dialog. */
   #getCollectionFormLabels() {
-    const composeEl = document.querySelector("jant-compose-dialog") as
-      | import("./jant-compose-dialog.js").JantComposeDialog
-      | null;
-    return composeEl?.labels?.collectionFormLabels ?? null;
+    return readComposeDialogLabels()?.collectionFormLabels ?? null;
   }
 
   #getAddCollectionLabel() {
-    const composeEl = document.querySelector("jant-compose-dialog") as
-      | import("./jant-compose-dialog.js").JantComposeDialog
-      | null;
-    return composeEl?.labels?.addCollection ?? "Add Collection";
+    return readComposeDialogLabels()?.addCollection ?? "Add Collection";
   }
 
+  /**
+   * The composer reads its collections from server-rendered markup, so a
+   * collection created here would be missing from it until the next page
+   * load. Loading the composer to refresh it is the price of staying right.
+   */
   async #refreshComposeCollections() {
-    const composeEl = document.querySelector("jant-compose-dialog") as {
-      refreshCollections?: () => Promise<boolean>;
-    } | null;
-    await composeEl?.refreshCollections?.();
+    const composeEl = await ensureComposeDialog();
+    await composeEl?.refreshCollections();
   }
 
   #getVisibilityLabel(visibility: string) {
@@ -1181,6 +1667,22 @@ export class JantPostMenu extends LitElement {
     </svg>`;
   }
 
+  #iconExternal() {
+    return html`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.9"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M14 4h6v6" />
+      <path d="M20 4 11 13" />
+      <path d="M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4" />
+    </svg>`;
+  }
+
   // --- Render ---
 
   #renderCollectionPicker() {
@@ -1214,116 +1716,126 @@ export class JantPostMenu extends LitElement {
             <span>Collections</span>
           </div>
         </div>
-        ${collections.length > 0
-          ? html`<div class="post-menu-picker-search">
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="11" cy="11" r="8" />
-                <path d="m21 21-4.3-4.3" />
-              </svg>
-              <input
-                type="text"
-                placeholder="Search collections..."
-                autocomplete="off"
-                autocorrect="off"
-                spellcheck="false"
-                .value=${this._collectionSearch}
-                @keydown=${this.#handleCollectionSearchKeydown}
-                @input=${(e: Event) => {
-                  this._collectionSearch = (e.target as HTMLInputElement).value;
-                }}
-              />
-            </div>`
-          : nothing}
+        ${
+          collections.length > 0
+            ? html`<div class="post-menu-picker-search">
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.3-4.3" />
+                </svg>
+                <input
+                  type="text"
+                  placeholder="Search collections..."
+                  autocomplete="off"
+                  autocorrect="off"
+                  spellcheck="false"
+                  .value=${this._collectionSearch}
+                  @keydown=${this.#handleCollectionSearchKeydown}
+                  @input=${(e: Event) => {
+                    this._collectionSearch = (
+                      e.target as HTMLInputElement
+                    ).value;
+                  }}
+                />
+              </div>`
+            : nothing
+        }
         <div
           class="post-menu-picker-list"
           role="listbox"
           aria-multiselectable="true"
         >
-          ${this._collectionsLoading
-            ? html`<div class="post-menu-picker-empty">Loading...</div>`
-            : filtered.length > 0
-              ? filtered.map((c) => {
-                  const selected = this._threadCollectionIds.includes(c.id);
-                  return html`
-                    <button
-                      type="button"
-                      role="option"
-                      aria-selected=${selected ? "true" : "false"}
-                      class=${`post-menu-picker-option${
-                        selected ? " post-menu-picker-option-selected" : ""
-                      }`}
-                      @keydown=${(event: globalThis.KeyboardEvent) =>
-                        this.#handleCollectionOptionKeydown(event, c.id)}
-                      @click=${(event: globalThis.MouseEvent) =>
-                        this.#handleCollectionOptionClick(event, c.id)}
-                    >
-                      <span class="post-menu-picker-title">${c.title}</span>
-                      ${selected
-                        ? html`<span
-                            class="post-menu-picker-marker post-menu-picker-marker-selected"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              aria-hidden="true"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                r="10"
-                                fill="currentColor"
-                              />
-                              <path
-                                d="M8 12.5 10.7 15.2 16.4 9.5"
-                                stroke="var(--site-page-bg)"
-                                stroke-width="2.3"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              />
-                            </svg>
-                          </span>`
-                        : html`<span
-                            class="post-menu-picker-marker post-menu-picker-marker-add"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              aria-hidden="true"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                r="9"
-                                stroke="currentColor"
-                                stroke-width="1.8"
-                              />
-                              <path
-                                d="M12 8v8M8 12h8"
-                                stroke="currentColor"
-                                stroke-width="1.9"
-                                stroke-linecap="round"
-                              />
-                            </svg>
-                          </span>`}
-                    </button>
-                  `;
-                })
-              : html`<div class="post-menu-picker-empty">
-                  ${hasSearch
-                    ? "No matching collections"
-                    : "No collections yet"}
-                </div>`}
+          ${
+            this._collectionsLoading
+              ? html`<div class="post-menu-picker-empty">Loading...</div>`
+              : filtered.length > 0
+                ? filtered.map((c) => {
+                    const selected = this._threadCollectionIds.includes(c.id);
+                    return html`
+                      <button
+                        type="button"
+                        role="option"
+                        aria-selected=${selected ? "true" : "false"}
+                        class=${`post-menu-picker-option${
+                          selected ? " post-menu-picker-option-selected" : ""
+                        }`}
+                        @keydown=${(event: globalThis.KeyboardEvent) =>
+                          this.#handleCollectionOptionKeydown(event, c.id)}
+                        @click=${(event: globalThis.MouseEvent) =>
+                          this.#handleCollectionOptionClick(event, c.id)}
+                      >
+                        <span class="post-menu-picker-title">${c.title}</span>
+                        ${
+                          selected
+                            ? html`<span
+                                class="post-menu-picker-marker post-menu-picker-marker-selected"
+                              >
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  aria-hidden="true"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    fill="currentColor"
+                                  />
+                                  <path
+                                    d="M8 12.5 10.7 15.2 16.4 9.5"
+                                    stroke="var(--site-page-bg)"
+                                    stroke-width="2.3"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                  />
+                                </svg>
+                              </span>`
+                            : html`<span
+                                class="post-menu-picker-marker post-menu-picker-marker-add"
+                              >
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  aria-hidden="true"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="9"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                  />
+                                  <path
+                                    d="M12 8v8M8 12h8"
+                                    stroke="currentColor"
+                                    stroke-width="1.9"
+                                    stroke-linecap="round"
+                                  />
+                                </svg>
+                              </span>`
+                        }
+                      </button>
+                    `;
+                  })
+                : html`<div class="post-menu-picker-empty">
+                    ${
+                      hasSearch
+                        ? "No matching collections"
+                        : "No collections yet"
+                    }
+                  </div>`
+          }
         </div>
         <div class="post-menu-picker-footer">
           <button
@@ -1352,6 +1864,236 @@ export class JantPostMenu extends LitElement {
     `;
   }
 
+  /**
+   * Everything about this Thread's language, in one place.
+   *
+   * The picker and the translation list belong together: a language is
+   * unavailable here precisely because another post in the group already holds
+   * it, and that reason is only legible next to the list of those posts. Two
+   * top-level menu entries for one subject was one too many.
+   *
+   * Top to bottom, the panel answers three questions in the order they get
+   * asked. *What language is this?* — the entry that opened this panel already
+   * said "Language · 简体中文", so the panel opens by confirming it, and the
+   * picker itself is one level down (see `#openLanguageSwitch`) because
+   * changing it is a correction, made once if ever. *What can I do?* — writing
+   * or linking a version, the recurring work, and self-describing enough to
+   * need no section label over it. *What is already there?* — the other
+   * versions, last, because they arrive with a fetch: any earlier and the
+   * panel would shove itself downward under the author's cursor a moment
+   * after opening.
+   */
+  #renderLanguagePanel() {
+    if (!this._data || this._data.isReply) return nothing;
+
+    const { current, linked, free } = this.#languageChoices();
+    return html`
+      <div class="post-menu-view post-menu-language-panel">
+        <div class="post-menu-panel-header">
+          <button
+            type="button"
+            class="post-menu-panel-back"
+            aria-label="Back"
+            @click=${() => this.#showMainMenu("[data-post-menu-open-language]")}
+          >
+            ${this.#iconChevronLeft()}
+          </button>
+          <div class="post-menu-panel-heading">
+            <span>Language</span>
+          </div>
+        </div>
+        <div role="menu" class="post-menu-list">
+          <!-- Both sections stand or fall together: with every other language
+               spoken for there is nothing to switch to and nothing to add. -->
+          ${
+            free.length > 0
+              ? html`
+                  <div class="post-menu-section">
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      data-post-menu-open-language-switch
+                      ?disabled=${this._translationBusy}
+                      @click=${() => this.#openLanguageSwitch()}
+                    >
+                      <span class="post-menu-item-label">Change language</span>
+                      <span class="post-menu-item-meta"
+                        >${this.#languageLabel(current)}</span
+                      >
+                      <span
+                        class="post-menu-item-trailing post-menu-item-chevron"
+                        >${this.#iconChevronRight()}</span
+                      >
+                    </button>
+                  </div>
+                  <div class="post-menu-section">
+                    ${free.map(
+                      (language, index) => html`
+                        <button
+                          type="button"
+                          role="menuitem"
+                          class="post-menu-item"
+                          ?data-post-menu-translation-first=${index === 0}
+                          @click=${() => this.#writeTranslation(language.tag)}
+                        >
+                          <span class="post-menu-item-label"
+                            >Write the ${language.label} version</span
+                          >
+                          <span
+                            class="post-menu-item-trailing post-menu-item-chevron"
+                            >${this.#iconChevronRight()}</span
+                          >
+                        </button>
+                      `,
+                    )}
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      @click=${() => this.#openLinkPicker()}
+                    >
+                      <span class="post-menu-item-label"
+                        >Link a version you already wrote</span
+                      >
+                      <span
+                        class="post-menu-item-trailing post-menu-item-chevron"
+                        >${this.#iconChevronRight()}</span
+                      >
+                    </button>
+                  </div>
+                `
+              : nothing
+          }
+          ${
+            linked.length > 0
+              ? html`
+                  <div class="post-menu-section">
+                    <p class="post-menu-section-label">Other versions</p>
+                    ${linked.map((translation) => {
+                      const languageLabel = this.#languageLabel(
+                        translation.language,
+                      );
+                      return html`
+                        <div class="post-menu-row" data-post-menu-translation>
+                          <a
+                            role="menuitem"
+                            class="post-menu-item post-menu-row-main"
+                            href=${publicPath(`/${translation.slug}`)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            title=${translation.label}
+                            aria-label=${`Open the ${languageLabel} version, ${translation.label}, in a new tab`}
+                          >
+                            <span
+                              class="post-menu-item-label"
+                              lang=${translation.language ?? nothing}
+                              >${languageLabel}</span
+                            >
+                            <span
+                              class="post-menu-item-trailing post-menu-item-chevron"
+                              >${this.#iconExternal()}</span
+                            >
+                          </a>
+                          <button
+                            type="button"
+                            role="menuitem"
+                            class="post-menu-row-action post-menu-row-action-danger"
+                            data-post-menu-translation-unlink
+                            ?disabled=${this._translationBusy}
+                            aria-label=${`Unlink the ${languageLabel} version`}
+                            @click=${() => this.#unlinkTranslation(translation)}
+                          >
+                            Unlink
+                          </button>
+                        </div>
+                      `;
+                    })}
+                  </div>
+                `
+              : nothing
+          }
+          ${
+            this._translationsLoading
+              ? html`<p class="post-menu-hint">Loading…</p>`
+              : nothing
+          }
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Which language this Thread is written in.
+   *
+   * A language another version already holds is left out entirely rather than
+   * shown greyed out: the author cannot switch to it, and a dead row saying
+   * "Taken" answers a question nobody asked. The version holding it is one
+   * level up under *Other versions*, where reading it and unlinking it are one
+   * click each.
+   */
+  #renderLanguageSwitchPanel() {
+    if (!this._data || this._data.isReply) return nothing;
+
+    const { current, selectable } = this.#languageChoices();
+    return html`
+      <div
+        class="post-menu-view post-menu-language-panel post-menu-language-switch-panel"
+      >
+        <div class="post-menu-panel-header">
+          <button
+            type="button"
+            class="post-menu-panel-back"
+            aria-label="Back"
+            @click=${() => this.#showLanguagePanel()}
+          >
+            ${this.#iconChevronLeft()}
+          </button>
+          <div class="post-menu-panel-heading">
+            <span>Change language</span>
+          </div>
+        </div>
+        <div role="menu" class="post-menu-list">
+          <div
+            class="post-menu-section"
+            role="radiogroup"
+            aria-label="Language"
+          >
+            ${selectable.map((language) => {
+              const selected = language.tag === current;
+              return html`
+                <button
+                  type="button"
+                  role="menuitemradio"
+                  lang=${language.tag}
+                  aria-checked=${selected ? "true" : "false"}
+                  ?disabled=${this._translationBusy}
+                  data-post-menu-language-option
+                  data-post-menu-language-current=${selected ? "true" : "false"}
+                  class=${`post-menu-item${selected ? " post-menu-item-active" : ""}`}
+                  @click=${() =>
+                    selected
+                      ? this.#showLanguagePanel()
+                      : this.#setLanguage(language.tag)}
+                >
+                  <span class="post-menu-item-label">${language.label}</span>
+                  ${
+                    selected
+                      ? html`<span
+                          class="post-menu-item-trailing post-menu-item-check"
+                          >${this.#iconCheck()}</span
+                        >`
+                      : nothing
+                  }
+                </button>
+              `;
+            })}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   #renderVisibilityPanel() {
     if (!this._data || this._data.isReply) return nothing;
 
@@ -1382,9 +2124,9 @@ export class JantPostMenu extends LitElement {
               role="menuitemradio"
               aria-checked=${visibility === "public" ? "true" : "false"}
               data-post-menu-visibility-option
-              data-post-menu-visibility-current=${visibility === "public"
-                ? "true"
-                : "false"}
+              data-post-menu-visibility-current=${
+                visibility === "public" ? "true" : "false"
+              }
               class=${`post-menu-item${
                 visibility === "public" ? " post-menu-item-active" : ""
               }`}
@@ -1394,12 +2136,14 @@ export class JantPostMenu extends LitElement {
                   : this.#setVisibility("public")}
             >
               <span class="post-menu-item-label">Public</span>
-              ${visibility === "public"
-                ? html`<span
-                    class="post-menu-item-trailing post-menu-item-check"
-                    >${this.#iconCheck()}</span
-                  >`
-                : nothing}
+              ${
+                visibility === "public"
+                  ? html`<span
+                      class="post-menu-item-trailing post-menu-item-check"
+                      >${this.#iconCheck()}</span
+                    >`
+                  : nothing
+              }
             </button>
 
             <button
@@ -1407,9 +2151,9 @@ export class JantPostMenu extends LitElement {
               role="menuitemradio"
               aria-checked=${visibility === "latest_hidden" ? "true" : "false"}
               data-post-menu-visibility-option
-              data-post-menu-visibility-current=${visibility === "latest_hidden"
-                ? "true"
-                : "false"}
+              data-post-menu-visibility-current=${
+                visibility === "latest_hidden" ? "true" : "false"
+              }
               class=${`post-menu-item${
                 visibility === "latest_hidden" ? " post-menu-item-active" : ""
               }`}
@@ -1419,12 +2163,14 @@ export class JantPostMenu extends LitElement {
                   : this.#setVisibility("latest_hidden")}
             >
               <span class="post-menu-item-label">Hidden from Latest</span>
-              ${visibility === "latest_hidden"
-                ? html`<span
-                    class="post-menu-item-trailing post-menu-item-check"
-                    >${this.#iconCheck()}</span
-                  >`
-                : nothing}
+              ${
+                visibility === "latest_hidden"
+                  ? html`<span
+                      class="post-menu-item-trailing post-menu-item-check"
+                      >${this.#iconCheck()}</span
+                    >`
+                  : nothing
+              }
             </button>
 
             <button
@@ -1432,9 +2178,9 @@ export class JantPostMenu extends LitElement {
               role="menuitemradio"
               aria-checked=${visibility === "private" ? "true" : "false"}
               data-post-menu-visibility-option
-              data-post-menu-visibility-current=${visibility === "private"
-                ? "true"
-                : "false"}
+              data-post-menu-visibility-current=${
+                visibility === "private" ? "true" : "false"
+              }
               class=${`post-menu-item${
                 visibility === "private" ? " post-menu-item-active" : ""
               }`}
@@ -1444,12 +2190,14 @@ export class JantPostMenu extends LitElement {
                   : this.#setVisibility("private")}
             >
               <span class="post-menu-item-label">Private</span>
-              ${visibility === "private"
-                ? html`<span
-                    class="post-menu-item-trailing post-menu-item-check"
-                    >${this.#iconCheck()}</span
-                  >`
-                : nothing}
+              ${
+                visibility === "private"
+                  ? html`<span
+                      class="post-menu-item-trailing post-menu-item-check"
+                      >${this.#iconCheck()}</span
+                    >`
+                  : nothing
+              }
             </button>
           </div>
         </div>
@@ -1551,118 +2299,164 @@ export class JantPostMenu extends LitElement {
               <span class="post-menu-item-trailing">${this.#iconEdit()}</span>
             </button>
 
-            ${this._data.isDraft
-              ? html`
-                  <button
-                    type="button"
-                    role="menuitem"
-                    class="post-menu-item"
-                    @click=${() => this.#publish()}
-                  >
-                    <span class="post-menu-item-label">Publish</span>
-                    <span class="post-menu-item-trailing"
-                      >${this.#iconPublish()}</span
+            ${
+              this._data.isDraft
+                ? html`
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      @click=${() => this.#publish()}
                     >
-                  </button>
-                `
-              : nothing}
-            ${this._data.isReply
-              ? nothing
-              : html`
-                  <button
-                    type="button"
-                    role="menuitem"
-                    class="post-menu-item"
-                    data-post-menu-open-collections
-                    @click=${() => this.#openCollectionPicker()}
-                  >
-                    <span class="post-menu-item-label">Add to collection</span>
-                    <span class="post-menu-item-trailing post-menu-item-chevron"
-                      >${this.#iconChevronRight()}</span
+                      <span class="post-menu-item-label">Publish</span>
+                      <span class="post-menu-item-trailing"
+                        >${this.#iconPublish()}</span
+                      >
+                    </button>
+                  `
+                : nothing
+            }
+            ${
+              this._data.isReply
+                ? nothing
+                : html`
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      data-post-menu-open-collections
+                      @click=${() => this.#openCollectionPicker()}
                     >
-                  </button>
-                `}
-            ${this._data.isReply
-              ? nothing
-              : html`
-                  <button
-                    type="button"
-                    role="menuitem"
-                    class="post-menu-item"
-                    data-post-menu-open-visibility
-                    @click=${() => this.#openVisibilityPanel()}
-                  >
-                    <span class="post-menu-item-label">Visibility</span>
-                    <span class="post-menu-item-meta"
-                      >${this.#getVisibilityLabel(visibility)}</span
+                      <span class="post-menu-item-label"
+                        >Add to collection</span
+                      >
+                      <span
+                        class="post-menu-item-trailing post-menu-item-chevron"
+                        >${this.#iconChevronRight()}</span
+                      >
+                    </button>
+                  `
+            }
+            ${
+              this._data.isReply
+                ? nothing
+                : html`
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      data-post-menu-open-visibility
+                      @click=${() => this.#openVisibilityPanel()}
                     >
-                    <span class="post-menu-item-trailing post-menu-item-chevron"
-                      >${this.#iconChevronRight()}</span
+                      <span class="post-menu-item-label">Visibility</span>
+                      <span class="post-menu-item-meta"
+                        >${this.#getVisibilityLabel(visibility)}</span
+                      >
+                      <span
+                        class="post-menu-item-trailing post-menu-item-chevron"
+                        >${this.#iconChevronRight()}</span
+                      >
+                    </button>
+                  `
+            }
+            ${
+              this._data.isReply || !this.#multilingual
+                ? nothing
+                : html`
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      data-post-menu-open-language
+                      @click=${() => this.#openLanguagePanel()}
                     >
-                  </button>
-                `}
+                      <span class="post-menu-item-label">Language</span>
+                      <span class="post-menu-item-meta"
+                        >${this.#languageLabel(this._data.language)}</span
+                      >
+                      <span
+                        class="post-menu-item-trailing post-menu-item-chevron"
+                        >${this.#iconChevronRight()}</span
+                      >
+                    </button>
+                  `
+            }
           </div>
 
           <div class="post-menu-section">
-            ${this._data.isDraft
-              ? nothing
-              : html`
-                  <button
-                    type="button"
-                    role="menuitem"
-                    class="post-menu-item"
-                    @click=${() => this.#setFeatured(!isFeatured)}
-                  >
-                    <span class="post-menu-item-label"
-                      >${isFeatured
-                        ? "Remove from Featured"
-                        : "Add to Featured"}</span
-                    >
-                    <span class="post-menu-item-trailing"
-                      >${isFeatured
-                        ? this.#iconFeaturedOff()
-                        : this.#iconFeatured()}</span
-                    >
-                  </button>
-                `}
-            ${this._data.isReply
-              ? nothing
-              : html`
-                  <button
-                    type="button"
-                    role="menuitem"
-                    class="post-menu-item"
-                    @click=${() => this.#togglePin()}
-                  >
-                    <span class="post-menu-item-label"
-                      >${isPinned ? "Unpin" : "Pin this post"}</span
-                    >
-                    <span class="post-menu-item-trailing"
-                      >${isPinned ? this.#iconPinOff() : this.#iconPin()}</span
+            ${
+              this._data.isDraft
+                ? nothing
+                : html`
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      @click=${() => this.#setFeatured(!isFeatured)}
                     >
-                  </button>
-                `}
-            ${collectionId && !this._data.isReply
-              ? html`
-                  <button
-                    type="button"
-                    role="menuitem"
-                    class="post-menu-item"
-                    @click=${() => this.#toggleCollectionPin()}
-                  >
-                    <span class="post-menu-item-label"
-                      >${isPinnedInCollection
-                        ? "Unpin from collection"
-                        : "Pin in collection"}</span
+                      <span class="post-menu-item-label"
+                        >${
+                          isFeatured
+                            ? "Remove from Featured"
+                            : "Add to Featured"
+                        }</span
+                      >
+                      <span class="post-menu-item-trailing"
+                        >${
+                          isFeatured
+                            ? this.#iconFeaturedOff()
+                            : this.#iconFeatured()
+                        }</span
+                      >
+                    </button>
+                  `
+            }
+            ${
+              this._data.isReply
+                ? nothing
+                : html`
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      @click=${() => this.#togglePin()}
                     >
-                    <span class="post-menu-item-trailing"
-                      >${isPinnedInCollection
-                        ? this.#iconPinOff()
-                        : this.#iconPin()}</span
+                      <span class="post-menu-item-label"
+                        >${isPinned ? "Unpin" : "Pin this post"}</span
+                      >
+                      <span class="post-menu-item-trailing"
+                        >${isPinned ? this.#iconPinOff() : this.#iconPin()}</span
+                      >
+                    </button>
+                  `
+            }
+            ${
+              collectionId && !this._data.isReply
+                ? html`
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="post-menu-item"
+                      @click=${() => this.#toggleCollectionPin()}
                     >
-                  </button>
-                `
-              : nothing}
+                      <span class="post-menu-item-label"
+                        >${
+                          isPinnedInCollection
+                            ? "Unpin from collection"
+                            : "Pin in collection"
+                        }</span
+                      >
+                      <span class="post-menu-item-trailing"
+                        >${
+                          isPinnedInCollection
+                            ? this.#iconPinOff()
+                            : this.#iconPin()
+                        }</span
+                      >
+                    </button>
+                  `
+                : nothing
+            }
           </div>
 
           <div class="post-menu-section post-menu-section-danger">
@@ -1693,30 +2487,40 @@ export class JantPostMenu extends LitElement {
     const showMenuSurface = !this._addCollectionPanelOpen;
 
     return html`
-      ${showMenuSurface
-        ? html`
-            <div
-              class="post-menu-backdrop"
-              @click=${() => this.#close({ restoreFocus: false })}
-            ></div>
-            <div class="dropdown-menu" style=${wrapperStyle}>
+      ${
+        showMenuSurface
+          ? html`
               <div
-                data-popover
-                aria-hidden="false"
-                class="!static post-menu-panel"
-              >
-                ${this._view === "collections"
-                  ? this.#renderCollectionPicker()
-                  : this._view === "visibility"
-                    ? this.#renderVisibilityPanel()
-                    : this.#renderMenu()}
+                class="post-menu-backdrop"
+                @click=${() => this.#close({ restoreFocus: false })}
+              ></div>
+              <div class="dropdown-menu" style=${wrapperStyle}>
+                <div
+                  data-popover
+                  aria-hidden="false"
+                  class="!static post-menu-panel"
+                >
+                  ${
+                    this._view === "collections"
+                      ? this.#renderCollectionPicker()
+                      : this._view === "visibility"
+                        ? this.#renderVisibilityPanel()
+                        : this._view === "language"
+                          ? this.#renderLanguagePanel()
+                          : this._view === "language-switch"
+                            ? this.#renderLanguageSwitchPanel()
+                            : this.#renderMenu()
+                  }
+                </div>
               </div>
-            </div>
-          `
-        : nothing}
-      ${this._addCollectionPanelOpen
-        ? this.#renderAddCollectionPanel()
-        : nothing}
+            `
+          : nothing
+      }
+      ${
+        this._addCollectionPanelOpen
+          ? this.#renderAddCollectionPanel()
+          : nothing
+      }
     `;
   }
 }