@jant/core 0.6.16 → 0.7.0

package/src/client/components/jant-compose-dialog.ts

@@ -12,17 +12,22 @@ import { classMap } from "lit/directives/class-map.js";
 import { repeat } from "lit/directives/repeat.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import type { Editor, JSONContent } from "@tiptap/core";
+import { extractBodyText } from "../../lib/summary.js";
+import { readContentLanguage } from "../../lib/lang-detect.js";
 import type {
   ComposeFormat,
   ComposeVisibility,
   ComposeLabels,
   ComposeCollection,
+  ComposeLanguage,
   ComposeSubmitDetail,
   ComposeSubmitAttachment,
   ComposeAttachment,
   ComposeRowStatus,
   DraftItem,
+  DraftRestoreOutcome,
   LocalDraft,
   LocalDraftMedia,
   ComposeFullscreenOpenDetail,
@@ -76,6 +81,11 @@ interface ThreadItem {
   slug?: string;
   /** Last availability answer for this post's slug. */
   slugTaken?: boolean;
+  /**
+   * The saved draft post this row was loaded from, if any. Its slug already
+   * belongs to that post, so the availability check leaves it out.
+   */
+  sourcePostId?: string;
 }
 
 interface ApiMediaAttachment {
@@ -122,6 +132,11 @@ interface ComposePostResponse {
   rating?: number | null;
   publishedAt?: number | null;
   bodyHtml?: string | null;
+  /**
+   * The language this Post is filed under. Null on a single-language site, and
+   * on posts written before the feature was turned on.
+   */
+  language?: string | null;
 }
 
 interface DraftsResponse {
@@ -152,6 +167,8 @@ interface ComposeStateSnapshot {
   publishedAtInput: string;
   publishedAtTimeMinutes: number | null;
   visibility: ComposeVisibility;
+  /** The author's explicit language choice, not what detection reads. */
+  language: string | null;
   title: string;
   bodyJson: JSONContent | null;
   url: string;
@@ -240,22 +257,30 @@ const COMPOSE_PUBLISH_VISIBILITY_ICONS: Record<ComposeVisibility, string> = {
   `,
 };
 
+/* Drawn on a 14 grid, which is also the size these render at: a 16-unit
+   drawing shown at 14px scales every coordinate by 0.875, so no edge lands on
+   a device pixel and the whole glyph greys out. Diagonals are antialiased
+   whatever you do, so the checks and carets only needed the grid; the calendar
+   is all horizontals and verticals, and those are what the scale was smearing.
+   See its stroke width for the rest of that story. */
 const COMPOSE_PUBLISH_ACTION_ICONS = {
   check: `
-    <path d="M4.35 8.2 6.9 10.7 11.65 5.95" />
+    <path d="M3.75 7.25 6 9.5l4.25-4.25" />
   `,
   caretRight: `
-    <path d="M6.45 5.1 9.3 8l-2.85 2.9" />
-  `,
-  close: `
-    <path d="M4.5 4.5 11.5 11.5" />
-    <path d="M11.5 4.5 4.5 11.5" />
+    <path d="M5.65 4.5 8.15 7l-2.5 2.5" />
   `,
+  /* Every straight stroke is centred on a half unit and drawn 1 wide, which is
+     the only combination that lands on whole device pixels at 1x, 2x and 3x
+     alike: a 1px stroke centred at x.5 covers exactly one pixel at 1x, two at
+     2x, three at 3x. Hence also the flat `stroke-width`, overriding the
+     family's 1.35 — the weight is worth less here than the edges are. The
+     rounded corners still antialias, as corners should. */
   calendar: `
-    <rect x="2.75" y="3.45" width="10.5" height="9.8" rx="2.2" />
-    <path d="M5.35 2.55v2.1" />
-    <path d="M10.65 2.55v2.1" />
-    <path d="M2.75 6.2h10.5" />
+    <rect x="2.5" y="3.5" width="9" height="8" rx="2" stroke-width="1" />
+    <path d="M4.5 2.5v2" stroke-width="1" />
+    <path d="M9.5 2.5v2" stroke-width="1" />
+    <path d="M2.5 6.5h9" stroke-width="1" />
   `,
   /* Two sliders — "settings for this thing", without borrowing the gear, which
      elsewhere means site settings. No enclosing box: the trigger is already a
@@ -271,6 +296,17 @@ const COMPOSE_PUBLISH_ACTION_ICONS = {
   `,
 } as const;
 
+/* The site header's globe, stroke for stroke. Language already has a symbol on
+   this site — the switcher in the top right — and the author is the one person
+   who sees both. A second glyph for the same idea would only be a second thing
+   to learn. Drawn on a 24 grid like its counterpart, so the two are literally
+   the same artwork at two sizes. */
+const COMPOSE_LANGUAGE_ICON = `
+  <circle cx="12" cy="12" r="10" />
+  <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+  <path d="M2 12h20" />
+`;
+
 const COMPOSE_COLLECTION_PICKER_ICONS = {
   /* A stack seen edge-on, not a folder: a collection is a post filed under
      several topics at once, and the folder glyph promises a single container
@@ -365,10 +401,10 @@ function renderComposePublishActionIcon(
     class=${classes}
     width="14"
     height="14"
-    viewBox="0 0 16 16"
+    viewBox="0 0 14 14"
     fill="none"
     stroke="currentColor"
-    stroke-width="1.55"
+    stroke-width="1.35"
     stroke-linecap="round"
     stroke-linejoin="round"
     aria-hidden="true"
@@ -615,6 +651,8 @@ export class JantComposeDialog extends LitElement {
 
   static properties = {
     collections: { type: Array },
+    languages: { type: Array },
+    contextLanguage: { type: String, attribute: "context-language" },
     labels: { type: Object },
     uploadMaxFileSize: { type: Number, attribute: "upload-max-file-size" },
     pageMode: { type: Boolean, attribute: "page-mode" },
@@ -663,9 +701,16 @@ export class JantComposeDialog extends LitElement {
     _slugTaken: { state: true },
     _visibilityLocked: { state: true },
     _quietReply: { state: true },
+    _language: { state: true },
+    _showLanguagePicker: { state: true },
+    _translationOf: { state: true },
+    _translationCollapsed: { state: true },
   };
 
   declare collections: ComposeCollection[];
+  declare languages: ComposeLanguage[];
+  /** Content language of the page the composer opened from. */
+  declare contextLanguage: string;
   declare labels: ComposeLabels;
   declare uploadMaxFileSize: number;
   declare pageMode: boolean;
@@ -715,22 +760,59 @@ export class JantComposeDialog extends LitElement {
   declare _slugTaken: boolean;
   declare _visibilityLocked: boolean;
   declare _quietReply: boolean;
+  /** Author's explicit language choice. Null means "let Jant read it". */
+  declare _language: string | null;
+  /** Whether the language pill's list of choices is open. */
+  declare _showLanguagePicker: boolean;
+  /**
+   * Thread root this post is being written as a translation of, with enough of
+   * it to read: translating from a title alone means keeping the original open
+   * in another tab.
+   */
+  declare _translationOf: {
+    id: string;
+    title: string;
+    href: string;
+    /** The post rendered server-side, exactly as its own page renders it. */
+    previewHtml: string;
+  } | null;
+  /**
+   * Whether the original is folded away.
+   *
+   * Per composer session, not remembered: an author who folds it to get room
+   * for one paragraph should not find it gone the next time they open a
+   * translation, when the first thing they need is to read.
+   */
+  declare _translationCollapsed: boolean;
 
   private _attachedEditor: Editor | null = null;
   private _attachedTextSnapshot: JSONContent | null = null;
+  /** Whether this composer was pre-filled from the post it translates. */
+  private _seededFromSource = false;
   private _confirmForDrafts = false;
   private _confirmForAttachedText = false;
   private _draftSaveTimer: ReturnType<typeof setTimeout> | null = null;
   private _draftRestored = false;
+  /**
+   * Whether this composer has ever held content under its current storage key.
+   *
+   * The stored draft is shared: one key answers for new posts and for replies,
+   * across every tab. A composer that opens empty — a reply whose parent does
+   * not match the stored draft, a restore that bailed, a second tab sitting
+   * idle — is empty because it never loaded anything, not because the author
+   * threw the draft away. Only a composer that actually held the content may
+   * decide it is gone; without this, any empty composer deletes work it never
+   * showed.
+   */
+  private _hasOwnedContent = false;
+  /** Whether the author has already been told this composer cannot store drafts. */
+  private _reportedStorageFailure = false;
   private _initialSnapshot: string | null = null;
   private _pageFocusApplied = false;
   private _pageLeaveRequested = false;
   private _replyThreadRootId: string | null = null;
   private _replyRefreshKind:
-    | "timeline-item"
-    | "post-card"
-    | "post-view"
-    | null = null;
+    "timeline-item" | "post-card" | "post-view" | null = null;
   private _replyRefreshId: string | null = null;
   private _publishedAtTimeMinutes: number | null = null;
   private _originalPublishedAt: number | null = null;
@@ -761,6 +843,8 @@ export class JantComposeDialog extends LitElement {
   constructor() {
     super();
     this.collections = [];
+    this.languages = [];
+    this.contextLanguage = "";
     this.labels = {} as ComposeLabels;
     this.uploadMaxFileSize = 1024;
     this.pageMode = false;
@@ -815,6 +899,11 @@ export class JantComposeDialog extends LitElement {
     this._slugTaken = false;
     this._visibilityLocked = false;
     this._quietReply = false;
+    this._language = null;
+    this._showLanguagePicker = false;
+    this._translationOf = null;
+    this._translationCollapsed = false;
+    this._seededFromSource = false;
   }
 
   private get _editor(): JantComposeEditor | null {
@@ -871,6 +960,7 @@ export class JantComposeDialog extends LitElement {
     if (this._initialSnapshot === null && this._editor) {
       this._captureInitialSnapshot();
     }
+    this._adoptTranslationPreview();
     // The visible title used to be the dialog's accessible name. Nothing on
     // screen needs to replace it, but a screen reader announcing an unnamed
     // dialog does — so the name moves to an attribute, where it costs no space.
@@ -964,9 +1054,16 @@ export class JantComposeDialog extends LitElement {
     this._slugSuggestionKey = "";
     this._visibilityLocked = false;
     this._quietReply = false;
+    this._language = null;
+    this._showLanguagePicker = false;
+    this._translationOf = null;
+    this._translationCollapsed = false;
+    this._seededFromSource = false;
     this._confirmForDrafts = false;
     this._confirmForAttachedText = false;
     this._initialSnapshot = null;
+    this._hasOwnedContent = false;
+    this._reportedStorageFailure = false;
     this._pageFocusApplied = false;
     this._pageLeaveRequested = false;
     this._slugSuggestRequestId += 1;
@@ -1038,6 +1135,11 @@ export class JantComposeDialog extends LitElement {
       this._initialSlug = this._slug.trim();
       this._visibility = post.visibility ?? "public";
       this._visibilityLocked = Boolean(post.replyToId);
+      // A published post's language is a settled fact, so it comes back as the
+      // author's own choice rather than as something to re-read: editing a
+      // Chinese post from an English page must not quietly re-file it, and the
+      // pill next to Post has to show what this post *is*, not a fresh guess.
+      this._language = post.language ?? null;
 
       if (post.replyToId) {
         this._replyToId = post.replyToId;
@@ -1119,8 +1221,9 @@ export class JantComposeDialog extends LitElement {
     // answer, which is right: that one belongs to the draft, not to the habit.
     this._editor?.setTitleDefault(JantComposeDialog._getNoteTitleDefault());
 
+    let restored: DraftRestoreOutcome = "none";
     if (options?.restoreDraft !== false) {
-      await this.restoreLocalDraft({
+      restored = await this.restoreLocalDraft({
         notify: options?.restoreToast,
         extraMedia: options?.restoreMedia,
       });
@@ -1137,12 +1240,18 @@ export class JantComposeDialog extends LitElement {
       this._collectionIds = [options.collectionId, ...this._collectionIds];
     }
 
-    // Restore per-collection visibility preference (only for new posts, not restored drafts)
+    // The collection's remembered visibility is a default for a fresh post. A
+    // restored draft already carries the answer the author gave it, and a
+    // default must not quietly overwrite a choice — unlike the collection
+    // itself just above, visibility is one value, so applying it here would
+    // replace what they picked rather than add to it, with nothing on screen
+    // to show that it changed.
     if (options?.collectionId) {
       this._sourceCollectionId = options.collectionId;
-      const saved = JantComposeDialog._getCollectionVisibility(
-        options.collectionId,
-      );
+      const saved =
+        restored === "restored"
+          ? null
+          : JantComposeDialog._getCollectionVisibility(options.collectionId);
       if (saved) {
         this._visibility = saved;
       }
@@ -1154,6 +1263,37 @@ export class JantComposeDialog extends LitElement {
     this._captureInitialSnapshot();
   }
 
+  /**
+   * Open the composer on a new post that translates an existing one.
+   *
+   * Nothing is created server-side here: the source ID and the target language
+   * ride along in memory, and the translation group is minted only if the
+   * author saves. Closing the composer leaves no trace — no draft row, no slug,
+   * no single-member group.
+   *
+   * @param sourcePostId - Thread root the new post translates
+   * @param language - Language to write it in
+   */
+  async openTranslation(sourcePostId: string, language: string) {
+    this.reset();
+    this._editor?.setTitleDefault(JantComposeDialog._getNoteTitleDefault());
+
+    if (this.languages.some((entry) => entry.tag === language)) {
+      this._language = language;
+    }
+
+    this.closest("dialog")?.showModal();
+    await this.updateComplete;
+    this._editor?.focusInput();
+    this._captureInitialSnapshot();
+
+    // Deliberately after the open: the original is context, not a
+    // precondition, and blocking the composer on a fetch would trade a visible
+    // delay for it. `seed` is safe this late because it stands down the moment
+    // the author has typed anything.
+    await this._loadTranslationSource(sourcePostId, { seed: true });
+  }
+
   /**
    * Open compose dialog in reply mode.
    *
@@ -1320,6 +1460,20 @@ export class JantComposeDialog extends LitElement {
     );
   }
 
+  /**
+   * Whether closing would throw away something the author wrote.
+   *
+   * Normally "is there content" answers that, because a new composer opens
+   * empty. A translation opens pre-seeded with the original's citation, though,
+   * and being asked to save a draft of a URL you never typed is worse than the
+   * prompt is worth — so once seeded, the question becomes whether anything has
+   * changed since it opened.
+   */
+  private _hasWorkToLose(): boolean {
+    if (!this._hasContent()) return false;
+    return this._seededFromSource ? this._hasUnsavedChanges() : true;
+  }
+
   private _buildSnapshot(): ComposeStateSnapshot | null {
     const editor = this._editor;
     if (!editor) return null;
@@ -1337,6 +1491,7 @@ export class JantComposeDialog extends LitElement {
       publishedAtInput: this._publishedAtInput,
       publishedAtTimeMinutes: this._publishedAtTimeMinutes,
       visibility: this._visibility,
+      language: this._language,
       title: editorData.title,
       bodyJson: editor.getNormalizedBodyJson(),
       url: editorData.url,
@@ -1396,6 +1551,7 @@ export class JantComposeDialog extends LitElement {
     if (this._showPublishPanel) {
       this._showPublishPanel = false;
     }
+    this._showLanguagePicker = false;
 
     if (this._confirmPanelOpen) {
       const restoreAttachedFocus = this._confirmForAttachedText;
@@ -1426,7 +1582,7 @@ export class JantComposeDialog extends LitElement {
       return;
     }
 
-    if (this._hasContent()) {
+    if (this._hasWorkToLose()) {
       this._confirmForDrafts = false;
       this._confirmForAttachedText = false;
       this._confirmPanelOpen = true;
@@ -1496,7 +1652,12 @@ export class JantComposeDialog extends LitElement {
     }
   }
 
-  /** Build the submit payload for a single thread editor (index-aware). */
+  /**
+   * Build the submit payload for the post at `index` — the single post, or one
+   * post of a thread. The one builder for both, so a field the single post
+   * gains reaches a thread's root too: the thread path used to be a copy that
+   * never learned about language or translations.
+   */
   private _buildEditorPostDetail(
     editor: JantComposeEditor,
     format: ComposeFormat,
@@ -1569,6 +1730,17 @@ export class JantComposeDialog extends LitElement {
         ? (this._replyRefreshKind ?? undefined)
         : undefined,
       replyRefreshId: isRoot ? (this._replyRefreshId ?? undefined) : undefined,
+      // Only a Thread's root carries a language: its other posts, and a reply
+      // to an existing Thread, inherit it server-side. An automatic choice
+      // resolves here to whatever the pill beside this button has been showing
+      // — what detection read, or the page's language while it has read
+      // nothing. Absent only on a single-language site, where the server
+      // decides.
+      language:
+        isRoot && !this._replyToId
+          ? (this._effectiveLanguage() ?? undefined)
+          : undefined,
+      translationOfId: isRoot ? this._translationOf?.id : undefined,
     };
   }
 
@@ -1578,68 +1750,10 @@ export class JantComposeDialog extends LitElement {
     const editor = this._editor;
     if (!editor) return null;
 
-    editor.promoteLeadingH1Title({ force: true });
-    const editorData = editor.getData();
-    const mediaAttachments = new Map(
-      (editorData.attachments ?? []).map((attachment) => [
-        attachment.clientId,
-        attachment,
-      ]),
-    );
-    const textAttachments = new Map(
-      editorData.attachedTexts.map((item) => [item.clientId, item]),
-    );
-    const orderedAttachments: ComposeSubmitAttachment[] = [];
-    for (const clientId of editorData.attachmentOrder) {
-      const mediaAttachment = mediaAttachments.get(clientId);
-      if (mediaAttachment) {
-        orderedAttachments.push({
-          type: "media",
-          clientId,
-          mediaId: mediaAttachment.mediaId,
-          alt: mediaAttachment.alt || undefined,
-        });
-        continue;
-      }
-
-      const textAttachment = textAttachments.get(clientId);
-      if (textAttachment?.bodyJson) {
-        orderedAttachments.push({
-          type: "text",
-          clientId,
-          bodyJson: textAttachment.bodyJson,
-          summary: textAttachment.summary,
-          mediaId: textAttachment.mediaId,
-          originalBodyJson: normalizeComposeDoc(
-            textAttachment.originalBodyJson ?? null,
-          ),
-        });
-      }
-    }
-
     return {
-      format: this._format,
-      title: editorData.title,
-      body: editorData.body,
-      url: editorData.url,
-      quoteText: editorData.quoteText,
-      quoteAuthor: editorData.quoteAuthor,
-      slug: this._slug.trim() || undefined,
-      publishedAt: this._getPublishedAtSubmitValue(status),
-      status,
-      visibility: this._visibilityLocked ? undefined : this._visibility,
-      rating: editorData.rating,
-      collectionIds: this._replyToId ? [] : [...this._collectionIds],
-      attachments: orderedAttachments,
+      ...this._buildEditorPostDetail(editor, this._format, 0, status),
       editPostId: this._editPostId ?? this._draftSourceId ?? undefined,
       draftSourceId: this._draftSourceId ?? undefined,
-      replyToId: this._replyToId ?? undefined,
-      quietReply: this._canReplyQuietly()
-        ? this._quietReply || undefined
-        : undefined,
-      replyThreadRootId: this._replyThreadRootId ?? undefined,
-      replyRefreshKind: this._replyRefreshKind ?? undefined,
-      replyRefreshId: this._replyRefreshId ?? undefined,
     };
   }
 
@@ -2275,7 +2389,12 @@ export class JantComposeDialog extends LitElement {
       mode: "check",
       slug,
     });
-    const postId = this._currentSlugOwnerId();
+    // Each post is checked against its own saved copy: a reply's slug is not
+    // the root's to release, and the root's is not the reply's.
+    const postId =
+      index === 0
+        ? this._currentSlugOwnerId()
+        : this._threadItems[index]?.sourcePostId;
     if (postId) params.set("postId", postId);
 
     try {
@@ -2612,6 +2731,11 @@ export class JantComposeDialog extends LitElement {
       return true;
     }
 
+    if (this._showLanguagePicker) {
+      this._closeLanguagePicker(true);
+      return true;
+    }
+
     if (this._showCollection) {
       this._closeCollectionPicker({ restoreFocus: "editor" });
       return true;
@@ -2869,7 +2993,7 @@ export class JantComposeDialog extends LitElement {
 
   private _handleDraftButtonClick() {
     if (this._loading) return;
-    if (this._hasContent()) {
+    if (this._hasWorkToLose()) {
       this._confirmForDrafts = true;
       this._confirmPanelOpen = true;
     } else {
@@ -2887,8 +3011,7 @@ export class JantComposeDialog extends LitElement {
       const res = await fetch("/api/posts?status=draft&limit=50");
       if (!res.ok) throw new Error("Failed to load drafts");
       const json = (await res.json()) as
-        | DraftsResponse
-        | Record<string, unknown>[];
+        DraftsResponse | Record<string, unknown>[];
       const posts = Array.isArray(json) ? json : (json.posts ?? []);
       const allDraftItems = (posts as Record<string, unknown>[]).map(
         (p): DraftItem => ({
@@ -3019,8 +3142,7 @@ export class JantComposeDialog extends LitElement {
         const draftsRes = await fetch("/api/posts?status=draft&limit=50");
         if (draftsRes.ok) {
           const draftsJson = (await draftsRes.json()) as
-            | { posts?: Record<string, unknown>[] }
-            | Record<string, unknown>[];
+            { posts?: Record<string, unknown>[] } | Record<string, unknown>[];
           const allDrafts = Array.isArray(draftsJson)
             ? draftsJson
             : (draftsJson.posts ?? []);
@@ -3036,6 +3158,7 @@ export class JantComposeDialog extends LitElement {
             .map((p) => ({
               id: p.id as string,
               format: p.format as ComposeFormat,
+              slug: (p.slug as string | null) ?? null,
               replyToId: (p.replyToId as string) ?? null,
               title: (p.title as string) ?? null,
               body: (p.body as string) ?? null,
@@ -3063,12 +3186,16 @@ export class JantComposeDialog extends LitElement {
               if (!ordered.includes(p)) ordered.push(p);
             }
 
-            // Enter thread mode
+            // Enter thread mode. Each reply keeps its own permalink: saving
+            // recreates the thread, so a slug left behind here would come back
+            // as a random id.
             this._threadItems = [
               { id: randomUUID(), format: post.format },
               ...ordered.map((p) => ({
                 id: randomUUID(),
                 format: p.format,
+                slug: p.slug ?? "",
+                sourcePostId: p.id,
               })),
             ];
             this._focusedThreadIndex = 0;
@@ -3267,7 +3394,7 @@ export class JantComposeDialog extends LitElement {
       });
 
       if (!hasContent) {
-        globalThis.localStorage.removeItem(this._currentDraftStorageKey());
+        this._releaseStoredDraft();
         return;
       }
 
@@ -3286,6 +3413,10 @@ export class JantComposeDialog extends LitElement {
             url: data.url,
             quoteText: data.quoteText,
             quoteAuthor: data.quoteAuthor,
+            // Same rules as the single-post draft below.
+            rating: data.rating,
+            showTitle: item.format === "note" ? editor._showTitle : false,
+            showRating: data.rating > 0 ? editor._showRating : false,
             attachedTexts: data.attachedTexts.map((t) => ({
               clientId: t.clientId,
               bodyJson: t.bodyJson,
@@ -3316,20 +3447,15 @@ export class JantComposeDialog extends LitElement {
         showRating: false,
         collectionIds: [...this._collectionIds],
         replyToId: this._replyToId,
+        language: this._language,
+        translationOfId: this._translationOf?.id ?? null,
         attachedTexts: [],
         attachmentOrder: [],
         threadItems,
         savedAt: Date.now(),
       };
 
-      try {
-        globalThis.localStorage.setItem(
-          this._currentDraftStorageKey(),
-          JSON.stringify(draft),
-        );
-      } catch {
-        // Storage full or unavailable — silently ignore
-      }
+      this._writeStoredDraft(draft);
       return;
     }
 
@@ -3341,7 +3467,7 @@ export class JantComposeDialog extends LitElement {
     // for edit (or restoring a draft) would write a local draft of the
     // unchanged content, since loading fires content-change events.
     if (!this._hasUnsavedChanges()) {
-      globalThis.localStorage.removeItem(this._currentDraftStorageKey());
+      this._releaseStoredDraft();
       return;
     }
 
@@ -3357,7 +3483,7 @@ export class JantComposeDialog extends LitElement {
       data.attachedTexts.length > 0;
 
     if (!hasContent) {
-      globalThis.localStorage.removeItem(this._currentDraftStorageKey());
+      this._releaseStoredDraft();
       return;
     }
 
@@ -3380,6 +3506,8 @@ export class JantComposeDialog extends LitElement {
       showRating: data.rating > 0 ? editor._showRating : false,
       collectionIds: [...this._collectionIds],
       replyToId: this._replyToId,
+      language: this._language,
+      translationOfId: this._translationOf?.id ?? null,
       attachedTexts: data.attachedTexts.map((t) => ({
         clientId: t.clientId,
         bodyJson: t.bodyJson,
@@ -3393,18 +3521,49 @@ export class JantComposeDialog extends LitElement {
       savedAt: Date.now(),
     };
 
+    this._writeStoredDraft(draft);
+  }
+
+  /**
+   * Persist the draft and take ownership of the key it went to.
+   *
+   * A write that does not stick is the one failure the author must hear about:
+   * the local copy is the last thing standing between a dropped connection and
+   * lost work, and a composer that cannot store one looks exactly like a
+   * composer that can. Said once per composer, not once per keystroke.
+   */
+  private _writeStoredDraft(draft: LocalDraft) {
     try {
       globalThis.localStorage.setItem(
         this._currentDraftStorageKey(),
         JSON.stringify(draft),
       );
-    } catch {
-      // Storage full or unavailable — silently ignore
+      this._hasOwnedContent = true;
+    } catch (error) {
+      // eslint-disable-next-line no-console -- the local copy is the last safety net; a lost one must be visible
+      console.warn("[jant] compose draft could not be stored", error);
+      if (!this._reportedStorageFailure) {
+        this._reportedStorageFailure = true;
+        showToast(this.labels.draftStoreFailed, "error");
+      }
     }
   }
 
+  /**
+   * Drop the stored draft, but only when this composer is the one holding it.
+   *
+   * See `_hasOwnedContent`: an empty composer that never loaded anything has
+   * nothing to say about a draft written by another composer or another tab.
+   */
+  private _releaseStoredDraft() {
+    if (!this._hasOwnedContent) return;
+    this._hasOwnedContent = false;
+    globalThis.localStorage.removeItem(this._currentDraftStorageKey());
+  }
+
   private _clearDraftFromStorage() {
     this._cancelDraftSaveTimer();
+    this._hasOwnedContent = false;
     globalThis.localStorage.removeItem(this._currentDraftStorageKey());
   }
 
@@ -3478,39 +3637,44 @@ export class JantComposeDialog extends LitElement {
     notify?: boolean;
     /** Completed uploads known to the bridge at failure time */
     extraMedia?: LocalDraftMedia[];
-  }) {
+  }): Promise<DraftRestoreOutcome> {
+    const key = JantComposeDialog._DRAFT_KEY;
     // Don't restore if already in edit or draft-load mode
-    if (this._editPostId || this._draftSourceId) return;
+    if (this._editPostId || this._draftSourceId) {
+      return this._reportRestoreOutcome("composer-busy", key);
+    }
     // Don't restore if the editor already has content (e.g. reopened dialog)
-    if (this._hasContent()) return;
+    if (this._hasContent()) {
+      return this._reportRestoreOutcome("composer-has-content", key);
+    }
 
     let raw: string | null;
     try {
-      raw = globalThis.localStorage.getItem(JantComposeDialog._DRAFT_KEY);
+      raw = globalThis.localStorage.getItem(key);
     } catch {
-      return;
+      return "none";
     }
-    if (!raw) return;
+    if (!raw) return "none";
 
     let draft: LocalDraft;
     try {
       draft = JSON.parse(raw) as LocalDraft;
     } catch {
-      globalThis.localStorage.removeItem(JantComposeDialog._DRAFT_KEY);
-      return;
+      // Deliberately kept: bytes we cannot parse are still something the author
+      // wrote, and deleting them here would turn a bad read into a lost draft.
+      return this._reportRestoreOutcome("unreadable", key, raw);
     }
 
-    // Discard stale drafts
+    // Too old to put back, but still theirs — leave it where it is.
     if (Date.now() - draft.savedAt > JantComposeDialog._DRAFT_MAX_AGE) {
-      globalThis.localStorage.removeItem(JantComposeDialog._DRAFT_KEY);
-      return;
+      return this._reportRestoreOutcome("expired", key, raw, draft);
     }
 
     if (
       options?.expectedReplyToId !== undefined &&
       draft.replyToId !== options.expectedReplyToId
     ) {
-      return;
+      return this._reportRestoreOutcome("other-reply", key, raw, draft);
     }
 
     this._collectionIds = draft.replyToId
@@ -3525,6 +3689,10 @@ export class JantComposeDialog extends LitElement {
     this._publishedAtInput = draft.publishedAtInput ?? "";
     this._publishedAtTimeMinutes = draft.publishedAtTimeMinutes ?? null;
     this._visibility = draft.visibility ?? "public";
+    this._language = draft.language ?? null;
+    if (draft.translationOfId) {
+      await this._loadTranslationSource(draft.translationOfId);
+    }
 
     // Restore reply context if this draft was a reply
     if (draft.replyToId) {
@@ -3587,6 +3755,9 @@ export class JantComposeDialog extends LitElement {
           url: item.url || undefined,
           quoteText: item.quoteText || undefined,
           quoteAuthor: item.quoteAuthor || undefined,
+          rating: item.rating || undefined,
+          showTitle: item.showTitle,
+          showRating: item.showRating,
           media: media.length
             ? JantComposeDialog._restoredMediaToPopulate(media)
             : undefined,
@@ -3598,11 +3769,12 @@ export class JantComposeDialog extends LitElement {
       }
 
       this._draftRestored = true;
+      this._hasOwnedContent = true;
       if (options?.notify !== false) showToast(this.labels.draftRestored);
       globalThis.requestAnimationFrame(() => {
         this._captureInitialSnapshot();
       });
-      return;
+      return "restored";
     }
 
     // ── Single-post draft restore ────────────────────────────────────
@@ -3648,10 +3820,59 @@ export class JantComposeDialog extends LitElement {
     });
 
     this._draftRestored = true;
+    this._hasOwnedContent = true;
     if (options?.notify !== false) showToast(this.labels.draftRestored);
     globalThis.requestAnimationFrame(() => {
       this._captureInitialSnapshot();
     });
+    return "restored";
+  }
+
+  /**
+   * Say why a stored draft did not reach the composer.
+   *
+   * A composer that opens empty looks the same whether there was nothing to
+   * restore or something went wrong reading what was there. That costs nothing
+   * until an author asks where their work went, at which point there is nothing
+   * to look at. `none` — the ordinary "no draft stored" case — stays quiet;
+   * everything else means bytes existed and did not come back, which is worth
+   * saying out loud.
+   *
+   * @param outcome - Why the restore stopped
+   * @param key - Storage key that was read
+   * @param raw - The stored string, when one was found
+   * @param draft - The parsed draft, when it parsed
+   * @returns The outcome, so callers can `return` this directly
+   * @example
+   * return this._reportRestoreOutcome("expired", key, raw, draft);
+   */
+  private _reportRestoreOutcome(
+    outcome: DraftRestoreOutcome,
+    key: string,
+    raw?: string | null,
+    draft?: LocalDraft,
+  ): DraftRestoreOutcome {
+    if (outcome === "restored" || outcome === "none") return outcome;
+
+    let stored = raw;
+    if (stored === undefined) {
+      try {
+        stored = globalThis.localStorage.getItem(key);
+      } catch {
+        stored = null;
+      }
+    }
+    // Nothing was stored, so nothing was lost — the composer just opened empty.
+    if (!stored) return "none";
+
+    // eslint-disable-next-line no-console -- the one record of why recovered work did not come back
+    console.warn(`[jant] compose draft not restored: ${outcome}`, {
+      key,
+      bytes: stored.length,
+      savedAt: draft?.savedAt ? new Date(draft.savedAt).toISOString() : null,
+      thread: draft?.threadItems?.length ?? null,
+    });
+    return outcome;
   }
 
   /**
@@ -3676,12 +3897,13 @@ export class JantComposeDialog extends LitElement {
     try {
       draft = JSON.parse(raw) as LocalDraft;
     } catch {
-      globalThis.localStorage.removeItem(key);
+      // Kept, not deleted: see `restoreLocalDraft`.
+      this._reportRestoreOutcome("unreadable", key, raw);
       return false;
     }
 
     if (Date.now() - draft.savedAt > JantComposeDialog._DRAFT_MAX_AGE) {
-      globalThis.localStorage.removeItem(key);
+      this._reportRestoreOutcome("expired", key, raw, draft);
       return false;
     }
 
@@ -3694,6 +3916,10 @@ export class JantComposeDialog extends LitElement {
     this._publishedAtInput = draft.publishedAtInput ?? "";
     this._publishedAtTimeMinutes = draft.publishedAtTimeMinutes ?? null;
     this._visibility = draft.visibility ?? "public";
+    // The draft speaks for the language too, and its answer may be that the
+    // author put this post back on automatic — so it replaces the one seeded
+    // from the post rather than filling in for a missing one.
+    this._language = draft.language ?? null;
 
     // Restore editor content
     const textAttachments = draft.attachedTexts?.flatMap((t) => {
@@ -3724,16 +3950,42 @@ export class JantComposeDialog extends LitElement {
     });
 
     this._draftRestored = true;
+    this._hasOwnedContent = true;
     if (notify !== false) showToast(this.labels.draftRestored);
     return true;
   }
 
+  /**
+   * Pick up a "write the translation" request from the URL.
+   *
+   * The post menu sends the author here with the source Thread and the target
+   * language in the query string, and nothing else exists yet: no draft row, no
+   * slug, no group. Applied after any local draft restore so a draft the author
+   * already started for this translation wins over the bare request.
+   */
+  private async _applyTranslationRequestFromUrl(): Promise<void> {
+    const params = new URLSearchParams(globalThis.location?.search ?? "");
+    const translationOf = params.get("translationOf");
+    if (!translationOf) return;
+
+    const lang = params.get("lang");
+    if (lang && this.languages.some((language) => language.tag === lang)) {
+      this._language = lang;
+    }
+    if (!this._translationOf) {
+      // `seed` still stands down on its own if the restore above brought
+      // content back, so a draft the author already started keeps its format.
+      await this._loadTranslationSource(translationOf, { seed: true });
+    }
+  }
+
   private async _focusPageEditorOnMount() {
     if (this._pageFocusApplied) return;
 
     if (this.autoRestoreDraft) {
       await this.restoreLocalDraft();
     }
+    await this._applyTranslationRequestFromUrl();
 
     await this.updateComplete;
     globalThis.requestAnimationFrame(() => {
@@ -3769,37 +4021,43 @@ export class JantComposeDialog extends LitElement {
           </button>
           <span class="compose-alt-title">${this.labels.drafts}</span>
         </div>
-        ${this._draftsLoading
-          ? html`<div class="compose-drafts-loading">
-              <svg
-                class="animate-spin size-5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-              </svg>
-            </div>`
-          : this._draftsError
-            ? html`<div class="compose-drafts-empty">${this._draftsError}</div>`
-            : this._drafts.length === 0
+        ${
+          this._draftsLoading
+            ? html`<div class="compose-drafts-loading">
+                <svg
+                  class="animate-spin size-5"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                </svg>
+              </div>`
+            : this._draftsError
               ? html`<div class="compose-drafts-empty">
-                  ${this.labels.draftsEmpty}
+                  ${this._draftsError}
                 </div>`
-              : html`<div class="compose-drafts-list">
-                  ${this._drafts.map(
-                    (draft, i) => html`
-                      ${i > 0
-                        ? html`<div class="compose-drafts-divider"></div>`
-                        : nothing}
-                      ${this._renderDraftItem(draft)}
-                    `,
-                  )}
-                </div>`}
+              : this._drafts.length === 0
+                ? html`<div class="compose-drafts-empty">
+                    ${this.labels.draftsEmpty}
+                  </div>`
+                : html`<div class="compose-drafts-list">
+                    ${this._drafts.map(
+                      (draft, i) => html`
+                        ${
+                          i > 0
+                            ? html`<div class="compose-drafts-divider"></div>`
+                            : nothing
+                        }
+                        ${this._renderDraftItem(draft)}
+                      `,
+                    )}
+                  </div>`
+        }
       </div>
     `;
   }
@@ -3813,13 +4071,15 @@ export class JantComposeDialog extends LitElement {
     return html`
       <div class="compose-draft-item" @click=${() => this.openDraft(draft.id)}>
         <div class="compose-draft-content">
-          ${preview
-            ? html`<div class="compose-draft-preview">${preview}</div>`
-            : html`<div
-                class="compose-draft-preview compose-draft-preview-empty"
-              >
-                Empty draft
-              </div>`}
+          ${
+            preview
+              ? html`<div class="compose-draft-preview">${preview}</div>`
+              : html`<div
+                  class="compose-draft-preview compose-draft-preview-empty"
+                >
+                  Empty draft
+                </div>`
+          }
           <div class="compose-draft-meta">
             <span class="compose-draft-format">${formatLabel}</span>
             <span aria-hidden="true">·</span>
@@ -3827,15 +4087,17 @@ export class JantComposeDialog extends LitElement {
           </div>
         </div>
         <div class="relative">
-          ${menuOpen
-            ? html`<div
-                class="compose-dropdown-backdrop"
-                @click=${(e: Event) => {
-                  e.stopPropagation();
-                  this._draftMenuOpenId = null;
-                }}
-              ></div>`
-            : nothing}
+          ${
+            menuOpen
+              ? html`<div
+                  class="compose-dropdown-backdrop"
+                  @click=${(e: Event) => {
+                    e.stopPropagation();
+                    this._draftMenuOpenId = null;
+                  }}
+                ></div>`
+              : nothing
+          }
           <button
             type="button"
             class="compose-draft-more"
@@ -3855,44 +4117,46 @@ export class JantComposeDialog extends LitElement {
               <circle cx="12" cy="8" r="1.2" />
             </svg>
           </button>
-          ${menuOpen
-            ? html`
-                <div
-                  id=${menuId}
-                  class="compose-dropdown compose-dropdown-right"
-                  role="menu"
-                >
-                  <a
-                    class="compose-dropdown-item"
-                    href=${publicPath(`/preview/${draft.slug}`)}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    role="menuitem"
-                    @click=${(e: Event) => {
-                      e.stopPropagation();
-                      this._draftMenuOpenId = null;
-                    }}
-                  >
-                    ${this.labels.previewDraft}
-                  </a>
+          ${
+            menuOpen
+              ? html`
                   <div
-                    class="compose-dropdown-separator"
-                    role="separator"
-                  ></div>
-                  <button
-                    type="button"
-                    class="compose-dropdown-item compose-dropdown-item-danger"
-                    role="menuitem"
-                    @click=${(e: Event) => {
-                      e.stopPropagation();
-                      this._deleteDraft(draft.id);
-                    }}
+                    id=${menuId}
+                    class="compose-dropdown compose-dropdown-right"
+                    role="menu"
                   >
-                    ${this.labels.deleteDraft}
-                  </button>
-                </div>
-              `
-            : nothing}
+                    <a
+                      class="compose-dropdown-item"
+                      href=${publicPath(`/preview/${draft.slug}`)}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      role="menuitem"
+                      @click=${(e: Event) => {
+                        e.stopPropagation();
+                        this._draftMenuOpenId = null;
+                      }}
+                    >
+                      ${this.labels.previewDraft}
+                    </a>
+                    <div
+                      class="compose-dropdown-separator"
+                      role="separator"
+                    ></div>
+                    <button
+                      type="button"
+                      class="compose-dropdown-item compose-dropdown-item-danger"
+                      role="menuitem"
+                      @click=${(e: Event) => {
+                        e.stopPropagation();
+                        this._deleteDraft(draft.id);
+                      }}
+                    >
+                      ${this.labels.deleteDraft}
+                    </button>
+                  </div>
+                `
+              : nothing
+          }
         </div>
       </div>
     `;
@@ -3900,6 +4164,167 @@ export class JantComposeDialog extends LitElement {
 
   // ── Reply context rendering ──────────────────────────────────────
 
+  /**
+   * The original, above the composer that is translating it.
+   *
+   * Sits where the reply context sits, for the same reason: a composer that
+   * was opened *about* something should say so before the author starts
+   * typing, not bury it two panels deep.
+   *
+   * Three decisions worth keeping:
+   *
+   * - It shows the whole post as the site renders it — server-rendered by
+   *   `/_/post-preview`, so a Quote arrives with its attribution and a Link
+   *   with its card. Structure is part of what gets translated, and a
+   *   `bodyHtml`-only preview silently dropped everything that is not body.
+   * - It scrolls inside a fixed frame instead of expanding. Translation is
+   *   read-a-bit, write-a-bit: a "show more" that hands a long post its full
+   *   height pushes the editor off the screen exactly when both need to be
+   *   visible. (The reply context expands, and is right to — it is read once,
+   *   before writing, not alongside.)
+   * - Nothing is bolted on to say "this is a link somewhere". The post's own
+   *   permalink is inside the rendering already; `_adoptTranslationPreview`
+   *   sends it to a new tab. An external-link glyph on a title made the whole
+   *   card read as a Link post rather than as the article it is.
+   *
+   * The language goes on the divider underneath rather than at the top: it
+   * belongs at the seam, where it reads as "…and below is that, in Japanese".
+   */
+  private _renderTranslationContext() {
+    const source = this._translationOf;
+    if (!source) return nothing;
+
+    const languageLabel =
+      this.languages.find((entry) => entry.tag === this._language)?.label ?? "";
+    const seam = languageLabel
+      ? this.labels.translationContextInLanguage.replace(
+          "{language}",
+          languageLabel,
+        )
+      : this.labels.translationContext;
+
+    const collapsed = this._translationCollapsed;
+
+    return html`
+      <div class="compose-translation-context">
+        ${
+          collapsed
+            ? nothing
+            : source.previewHtml
+              ? html`<div
+                  class="compose-translation-original"
+                  tabindex="0"
+                  role="region"
+                  aria-label=${this.labels.translationContextOriginal}
+                >
+                  <div class="compose-translation-preview">
+                    ${unsafeHTML(source.previewHtml)}
+                  </div>
+                </div>`
+              : html`<p class="compose-translation-fallback">
+                  ${
+                    source.href
+                      ? html`<a
+                          href=${source.href}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          title=${this.labels.translationContextOpen}
+                          >${source.title}</a
+                        >`
+                      : source.title
+                  }
+                </p>`
+        }
+        <div class="compose-translation-seam">
+          <span class="compose-translation-seam-label">
+            ${this._iconArrowDown()}${seam}
+          </span>
+          <span class="compose-translation-seam-dot" aria-hidden="true">·</span>
+          <button
+            type="button"
+            class="compose-translation-seam-toggle"
+            aria-expanded=${collapsed ? "false" : "true"}
+            aria-label=${
+              collapsed
+                ? this.labels.translationContextShowLong
+                : this.labels.translationContextHideLong
+            }
+            @click=${() => {
+              this._translationCollapsed = !this._translationCollapsed;
+            }}
+          >
+            ${
+              collapsed
+                ? this.labels.translationContextShow
+                : this.labels.translationContextHide
+            }
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Make the server-rendered original safe to sit inside the composer.
+   *
+   * Two things have to be undone, both because this markup was written to *be*
+   * a post rather than to be quoted inside one:
+   *
+   * - Every link leaves for a new tab. A link followed in place navigates the
+   *   composer away and takes the unsaved translation with it.
+   * - The post's identity comes off. `data-post-id` and friends are how the
+   *   post menu, the keyboard shortcuts and `refreshArticleView` find a post;
+   *   leaving a second copy of the original's id in the DOM lets any of them
+   *   act on the preview believing it is the real card.
+   *
+   * Runs on every update because `unsafeHTML` re-creates the subtree whenever
+   * the markup changes, and is cheap to repeat — the marker attribute makes it
+   * a no-op once a given rendering has been adopted.
+   */
+  private _adoptTranslationPreview() {
+    const preview = this.querySelector<HTMLElement>(
+      ".compose-translation-preview:not([data-preview-adopted])",
+    );
+    if (!preview) return;
+    preview.dataset.previewAdopted = "";
+
+    for (const link of preview.querySelectorAll("a[href]")) {
+      link.setAttribute("target", "_blank");
+      link.setAttribute("rel", "noopener noreferrer");
+    }
+
+    for (const el of preview.querySelectorAll<HTMLElement>("[data-post-id]")) {
+      delete el.dataset.postId;
+      delete el.dataset.post;
+      delete el.dataset.threadRootId;
+      delete el.dataset.postMenuTarget;
+      el.classList.remove("post-menu-target");
+    }
+    for (const trigger of preview.querySelectorAll(
+      "[data-post-menu-trigger], [data-reply-trigger], [data-timeline-item]",
+    )) {
+      trigger.remove();
+    }
+  }
+
+  /** Points at what comes next: the version being written, below. */
+  private _iconArrowDown() {
+    return html`<svg
+      class="compose-translation-seam-icon"
+      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"
+      aria-hidden="true"
+    >
+      <path d="M12 5v14" />
+      <path d="m19 12-7 7-7-7" />
+    </svg>`;
+  }
+
   private _renderReplyContext() {
     if (!this._replyToId || !this._replyToData) return nothing;
 
@@ -3917,42 +4342,44 @@ export class JantComposeDialog extends LitElement {
         >
           <div class="compose-reply-context-body">
             ${unsafeHTML(contentHtml)}
-            ${media?.length
-              ? html`<div
-                  class="compose-reply-context-media"
-                  data-post-media
-                  data-lightbox-group=${JSON.stringify(
-                    media.map((m) => ({
-                      url: m.url,
-                      alt: m.alt ?? "",
-                      width: m.width,
-                      height: m.height,
-                      mimeType: m.mimeType,
-                    })),
-                  )}
-                >
-                  ${media.map(
-                    (m, i) => html`
-                      <a
-                        href=${m.url}
-                        data-lightbox-index=${i}
-                        class="compose-reply-context-media-link"
-                      >
-                        <img
-                          src=${m.previewUrl}
-                          alt=${m.alt ?? ""}
-                          class="compose-reply-context-media-img"
-                          loading="lazy"
-                        />
-                      </a>
-                    `,
-                  )}
-                </div>`
-              : nothing}
+            ${
+              media?.length
+                ? html`<div
+                    class="compose-reply-context-media"
+                    data-post-media
+                    data-lightbox-group=${JSON.stringify(
+                      media.map((m) => ({
+                        url: m.url,
+                        alt: m.alt ?? "",
+                        width: m.width,
+                        height: m.height,
+                        mimeType: m.mimeType,
+                      })),
+                    )}
+                  >
+                    ${media.map(
+                      (m, i) => html`
+                        <a
+                          href=${m.url}
+                          data-lightbox-index=${i}
+                          class="compose-reply-context-media-link"
+                        >
+                          <img
+                            src=${m.previewUrl}
+                            alt=${m.alt ?? ""}
+                            class="compose-reply-context-media-img"
+                            loading="lazy"
+                          />
+                        </a>
+                      `,
+                    )}
+                  </div>`
+                : nothing
+            }
           </div>
-          ${!isExpanded
-            ? html`<div class="compose-reply-fade"></div>`
-            : nothing}
+          ${
+            !isExpanded ? html`<div class="compose-reply-fade"></div>` : nothing
+          }
         </div>
       </div>
       <div class="compose-reply-meta">
@@ -3982,23 +4409,30 @@ export class JantComposeDialog extends LitElement {
     return !!(this._editPostId || this._draftSourceId);
   }
 
+  /**
+   * Fold fields the target format can't hold into the body before the format
+   * change recreates the editor from `_bodyJson`. Only a post that already
+   * exists on the server needs it — anything else keeps hidden fields in the
+   * editor, so switching back finds them — and every post of a saved thread
+   * draft is one. Synchronous, so the old Tiptap instance can't fire onUpdate
+   * and clobber what we just wrote. `applyConvertedFields` suppresses the one
+   * content-change event the conversion emits, so the switch itself never
+   * schedules a draft save.
+   */
+  private _convertForFormatSwitch(
+    editor: JantComposeEditor | null,
+    from: ComposeFormat,
+    to: ComposeFormat,
+  ) {
+    if (!editor || from === to || !this._shouldConvertOnFormatSwitch()) return;
+    editor.applyConvertedFields(
+      convertComposeFormat(from, to, editor.getConvertibleFields()),
+    );
+  }
+
   private _switchFormat(target: ComposeFormat) {
     if (this._format === target) return;
-    const editor = this._editor;
-    if (editor && this._shouldConvertOnFormatSwitch()) {
-      // Fold fields the target can't hold into the body before the format
-      // change recreates the editor from `_bodyJson`. Synchronous, so the old
-      // Tiptap instance can't fire onUpdate and clobber what we just wrote.
-      // `applyConvertedFields` suppresses the one content-change event the
-      // conversion emits, so the switch itself never schedules a draft save.
-      editor.applyConvertedFields(
-        convertComposeFormat(
-          this._format,
-          target,
-          editor.getConvertibleFields(),
-        ),
-      );
-    }
+    this._convertForFormatSwitch(this._editor, this._format, target);
     // A bare format switch shouldn't persist a local draft, so drop any save
     // already pending from loading the post.
     this._cancelDraftSaveTimer();
@@ -4028,8 +4462,8 @@ export class JantComposeDialog extends LitElement {
       <button
         type="button"
         class="compose-close-btn"
-        aria-label=${this.labels.cancel}
-        title=${this.labels.cancel}
+        aria-label=${this.labels.close}
+        title=${this.labels.close}
         @click=${() => this.requestClose()}
       >
         <svg
@@ -4070,12 +4504,14 @@ export class JantComposeDialog extends LitElement {
 
     return html`
       <div class="flex-1 min-w-0">
-        ${this._showCollection
-          ? html`<div
-              class="compose-dropdown-backdrop"
-              @click=${() => this._closeCollectionPicker()}
-            ></div>`
-          : nothing}
+        ${
+          this._showCollection
+            ? html`<div
+                class="compose-dropdown-backdrop"
+                @click=${() => this._closeCollectionPicker()}
+              ></div>`
+            : nothing
+        }
         <div
           class="select compose-collection-select"
           data-select-initialized
@@ -4092,6 +4528,7 @@ export class JantComposeDialog extends LitElement {
             @click=${() => {
               const nextOpen = !this._showCollection;
               this._showPublishPanel = false;
+              this._showLanguagePicker = false;
               if (nextOpen) {
                 this._prepareCollectionPickerOrder();
               }
@@ -4114,100 +4551,106 @@ export class JantComposeDialog extends LitElement {
             data-popover
             aria-hidden=${this._showCollection ? "false" : "true"}
           >
-            ${collections.length > 0
-              ? html`<div class="compose-collection-popover-header">
-                  <label class="compose-collection-search-shell">
-                    ${renderComposeCollectionPickerIcon(
-                      COMPOSE_COLLECTION_PICKER_ICONS.search,
-                      "compose-collection-search-icon",
-                    )}
-                    <input
-                      type="text"
-                      role="combobox"
-                      class="compose-collection-search-input"
-                      placeholder=${this.labels.searchCollections}
-                      autocomplete="off"
-                      autocorrect="off"
-                      spellcheck="false"
-                      .value=${this._collectionSearch}
-                      @keydown=${this._handleCollectionSearchKeydown}
-                      @input=${(e: Event) => {
-                        this._collectionSearch = (
-                          e.target as HTMLInputElement
-                        ).value;
-                      }}
-                    />
-                  </label>
-                </div>`
-              : nothing}
+            ${
+              collections.length > 0
+                ? html`<div class="compose-collection-popover-header">
+                    <label class="compose-collection-search-shell">
+                      ${renderComposeCollectionPickerIcon(
+                        COMPOSE_COLLECTION_PICKER_ICONS.search,
+                        "compose-collection-search-icon",
+                      )}
+                      <input
+                        type="text"
+                        role="combobox"
+                        class="compose-collection-search-input"
+                        placeholder=${this.labels.searchCollections}
+                        autocomplete="off"
+                        autocorrect="off"
+                        spellcheck="false"
+                        .value=${this._collectionSearch}
+                        @keydown=${this._handleCollectionSearchKeydown}
+                        @input=${(e: Event) => {
+                          this._collectionSearch = (
+                            e.target as HTMLInputElement
+                          ).value;
+                        }}
+                      />
+                    </label>
+                  </div>`
+                : nothing
+            }
             <div
               role="listbox"
               class="compose-collection-options"
               aria-multiselectable="true"
             >
-              ${filtered.length > 0
-                ? filtered.map((col) => {
-                    const selected = this._collectionIds.includes(col.id);
-
-                    return html`
-                      <button
-                        type="button"
-                        class=${classMap({
-                          "compose-collection-option": true,
-                          "compose-collection-option-selected": selected,
-                        })}
-                        role="option"
-                        data-value=${col.id}
-                        aria-selected=${selected ? "true" : "false"}
-                        @keydown=${(event: globalThis.KeyboardEvent) =>
-                          this._handleCollectionOptionKeydown(event, col.id)}
-                        @click=${() =>
-                          this._handleCollectionOptionClick(col.id)}
-                      >
-                        <span class="compose-collection-option-label"
-                          >${col.title}</span
-                        >
-                        <span
+              ${
+                filtered.length > 0
+                  ? filtered.map((col) => {
+                      const selected = this._collectionIds.includes(col.id);
+
+                      return html`
+                        <button
+                          type="button"
                           class=${classMap({
-                            "compose-collection-option-marker": true,
-                            "compose-collection-option-marker-selected":
-                              selected,
-                            "compose-collection-option-marker-add": !selected,
+                            "compose-collection-option": true,
+                            "compose-collection-option-selected": selected,
                           })}
+                          role="option"
+                          data-value=${col.id}
+                          aria-selected=${selected ? "true" : "false"}
+                          @keydown=${(event: globalThis.KeyboardEvent) =>
+                            this._handleCollectionOptionKeydown(event, col.id)}
+                          @click=${() =>
+                            this._handleCollectionOptionClick(col.id)}
                         >
-                          ${selected
-                            ? html`<svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="compose-collection-option-check-circle"
-                                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>`
-                            : renderComposeCollectionPickerIcon(
-                                COMPOSE_COLLECTION_PICKER_ICONS.plusCircle,
-                                "compose-collection-option-plus-circle",
-                              )}
-                        </span>
-                      </button>
-                    `;
-                  })
-                : html`<div class="compose-collection-empty">
-                    ${emptyLabel}
-                  </div>`}
+                          <span class="compose-collection-option-label"
+                            >${col.title}</span
+                          >
+                          <span
+                            class=${classMap({
+                              "compose-collection-option-marker": true,
+                              "compose-collection-option-marker-selected":
+                                selected,
+                              "compose-collection-option-marker-add": !selected,
+                            })}
+                          >
+                            ${
+                              selected
+                                ? html`<svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="compose-collection-option-check-circle"
+                                    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>`
+                                : renderComposeCollectionPickerIcon(
+                                    COMPOSE_COLLECTION_PICKER_ICONS.plusCircle,
+                                    "compose-collection-option-plus-circle",
+                                  )
+                            }
+                          </span>
+                        </button>
+                      `;
+                    })
+                  : html`<div class="compose-collection-empty">
+                      ${emptyLabel}
+                    </div>`
+              }
             </div>
             <div class="compose-collection-footer">
               <button
@@ -4251,8 +4694,7 @@ export class JantComposeDialog 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 {
@@ -4314,13 +4756,7 @@ export class JantComposeDialog extends LitElement {
   private _renderAddCollectionPanel() {
     if (!this._addCollectionPanelOpen) return nothing;
 
-    const initial = {
-      title: "",
-      slug: "",
-      description: "",
-      sortOrder: "newest",
-      icon: "",
-    };
+    const initial = { title: "", slug: "" };
 
     return html`
       <div
@@ -4354,11 +4790,9 @@ export class JantComposeDialog extends LitElement {
         </div>
         <div class="collection-quick-dialog-body">
           <jant-collection-form
-            variant="quick"
             .labels=${this.labels.collectionFormLabels}
             .initial=${initial}
             action=${publicPath("/api/collections")}
-            cancel-href="javascript:void(0)"
             @jant:collection-submit=${(e: Event) =>
               this._handleAddCollectionSubmit(e)}
           ></jant-collection-form>
@@ -4441,22 +4875,24 @@ export class JantComposeDialog extends LitElement {
           <span class="compose-alt-title">${this.labels.addAltTitle}</span>
         </div>
         <div class="compose-alt-preview">
-          ${category === "image"
-            ? html`<img
-                src=${attachment.previewUrl}
-                alt=""
-                class="compose-alt-preview-img"
-              />`
-            : category === "video"
-              ? html`<video
+          ${
+            category === "image"
+              ? html`<img
                   src=${attachment.previewUrl}
+                  alt=""
                   class="compose-alt-preview-img"
-                  preload="metadata"
-                  muted
-                ></video>`
-              : html`<span class="text-sm text-muted-foreground"
-                  >${attachment.file.name}</span
-                >`}
+                />`
+              : category === "video"
+                ? html`<video
+                    src=${attachment.previewUrl}
+                    class="compose-alt-preview-img"
+                    preload="metadata"
+                    muted
+                  ></video>`
+                : html`<span class="text-sm text-muted-foreground"
+                    >${attachment.file.name}</span
+                  >`
+          }
         </div>
         <div class="compose-alt-input-row">
           <input
@@ -4734,6 +5170,7 @@ export class JantComposeDialog extends LitElement {
     this._showCollection = false;
     this._collectionSearch = "";
     this._showPublishPanel = false;
+    this._showLanguagePicker = false;
     this._postMetaIndex = index;
     this._confirmPanelOpen = false;
     this._scheduleSuggestedSlugRefresh(true);
@@ -4777,6 +5214,7 @@ export class JantComposeDialog extends LitElement {
   private _togglePublishPanel() {
     this._showCollection = false;
     this._collectionSearch = "";
+    this._showLanguagePicker = false;
     const nextOpen = !this._showPublishPanel;
     this._showPublishPanel = nextOpen;
     if (nextOpen) {
@@ -4878,18 +5316,392 @@ export class JantComposeDialog extends LitElement {
           <span class="compose-sheet-title">${label}</span>
           <span class="compose-sheet-sub">${hint}</span>
         </span>
-        ${selected
-          ? html`<span class="compose-sheet-check" aria-hidden="true">
-              ${renderComposePublishActionIcon(
-                COMPOSE_PUBLISH_ACTION_ICONS.check,
-                "compose-sheet-check-icon",
-              )}
-            </span>`
-          : nothing}
+        ${
+          selected
+            ? html`<span class="compose-sheet-check" aria-hidden="true">
+                ${renderComposePublishActionIcon(
+                  COMPOSE_PUBLISH_ACTION_ICONS.check,
+                  "compose-sheet-check-icon",
+                )}
+              </span>`
+            : nothing
+        }
+      </button>
+    `;
+  }
+
+  /**
+   * Load the post a translation is being written for.
+   *
+   * Only the ID is carried around — through the URL that opens the composer,
+   * and through a local draft picked up later — so everything shown above the
+   * editor is fetched when it is needed. A post that has since been deleted
+   * simply drops the link rather than blocking the composer.
+   *
+   * @param postId - Thread root the new post translates
+   * @param options.seed - Also take the original's shape: its format, and the
+   *   citation fields that name a source rather than say anything in a
+   *   language. Only for a composer opened fresh on this translation; a
+   *   restored draft already carries the author's own answers.
+   */
+  private async _loadTranslationSource(
+    postId: string,
+    options: { seed?: boolean } = {},
+  ): Promise<void> {
+    try {
+      const response = await fetch(publicPath(`/api/posts/${postId}`), {
+        credentials: "same-origin",
+      });
+      if (!response.ok) return;
+      const post = (await response.json()) as ComposePostResponse & {
+        displayTitle?: string;
+      };
+      // `displayTitle` is derived server-side for untitled notes; a slug is a
+      // URL, not a name, and only stands in when there is nothing else.
+      this._translationOf = {
+        id: post.id,
+        title: post.displayTitle || post.slug || "",
+        href: post.slug ? publicPath(`/${post.slug}`) : "",
+        previewHtml: await this._fetchTranslationPreview(post.id),
+      };
+
+      if (options.seed) await this._seedFromTranslationSource(post);
+    } catch {
+      // Offline or the post is gone. The composer still works; the author is
+      // writing a post, just not a linked one.
+    }
+  }
+
+  /**
+   * The original rendered as it renders anywhere else on the site.
+   *
+   * Server-side rather than rebuilt here: a Quote's attribution and a Link's
+   * card are not `bodyHtml`, and reproducing each format's markup in the
+   * composer would be a second renderer to keep in step with the first.
+   *
+   * @param postId - Thread root the new post translates
+   * @returns The post's markup, or "" when it cannot be fetched
+   */
+  private async _fetchTranslationPreview(postId: string): Promise<string> {
+    try {
+      const response = await fetch(
+        publicPath(`/_/post-preview/${encodeURIComponent(postId)}`),
+        { headers: { Accept: "text/html" }, credentials: "same-origin" },
+      );
+      if (!response.ok) return "";
+      return await response.text();
+    } catch {
+      return "";
+    }
+  }
+
+  /**
+   * Start the translation in the shape of its original.
+   *
+   * A quote stays a quote — the format is a property of what was said, not of
+   * the language it was said in — and the citation travels with it: the URL a
+   * quote or a link points at is the same source whichever language describes
+   * it. Collections, visibility and rating come along for the same reason:
+   * they describe the post's place and its subject, neither of which changes
+   * when the words do. The prose is the part the author is here to write, so
+   * that is all that starts empty.
+   *
+   * Skipped the moment the author has typed anything: the fetch runs after the
+   * composer opens, and overwriting their first sentence to save them a format
+   * click is a bad trade.
+   */
+  private async _seedFromTranslationSource(
+    post: ComposePostResponse,
+  ): Promise<void> {
+    if (this._hasContent() || this._editPostId || this._draftSourceId) return;
+
+    const format = post.format;
+    this._format = format;
+    if (post.collectionIds?.length) {
+      this._collectionIds = [...post.collectionIds];
+    }
+    if (post.visibility) this._visibility = post.visibility;
+    await this.updateComplete;
+
+    this._editor?.populate({
+      format,
+      url:
+        format === "quote"
+          ? (post.sourceUrl ?? undefined)
+          : (post.url ?? undefined),
+      quoteAuthor:
+        format === "quote" ? (post.sourceName ?? undefined) : undefined,
+      rating: post.rating ?? undefined,
+    });
+    await this.updateComplete;
+    // The author has still typed nothing, so none of this counts as a change
+    // they would be asked to discard on close.
+    this._seededFromSource = true;
+    this._captureInitialSnapshot();
+  }
+
+  /**
+   * Plain text of the post being written, for the language suggestion.
+   *
+   * Read on demand rather than tracked: the panel is something the author
+   * opens deliberately, so reading the editor at that moment is both cheaper
+   * than watching every keystroke and more accurate than a cached value.
+   */
+  private _composeTextForDetection(): string {
+    const editor = this._editor;
+    if (!editor) return "";
+    const data = editor.getData();
+    const bodyText = data.body ? (extractBodyText(data.body) ?? "") : "";
+    return [data.title, data.quoteText, bodyText].filter(Boolean).join(" ");
+  }
+
+  /**
+   * The language of the page the composer opened from, as the automatic
+   * choice's default. Falls back to the primary language when the page's
+   * language is unknown or not one the site publishes.
+   */
+  private _contextLanguageTag(): string | null {
+    const tags = this.languages.map((language) => language.tag);
+    if (tags.length === 0) return null;
+    return tags.includes(this.contextLanguage)
+      ? this.contextLanguage
+      : (tags[0] as string);
+  }
+
+  /**
+   * What detection actually reads out of the text as it stands, or null when
+   * the text does not say yet.
+   *
+   * Null is a distinct answer from "the page's language", and the "Detect" row
+   * has to tell them apart: a row offering to read what you write cannot claim
+   * to have read something out of two words. It also ignores an explicit
+   * choice — the row describes what picking it would do, not what the author
+   * picked instead.
+   */
+  private _readLanguage(): string | null {
+    return readContentLanguage(this._composeTextForDetection(), {
+      languages: this.languages.map((language) => language.tag),
+    });
+  }
+
+  /** The language this post would be saved with if submitted right now. */
+  private _effectiveLanguage(): string | null {
+    return this._language ?? this._readLanguage() ?? this._contextLanguageTag();
+  }
+
+  private _renderLanguageRow(tag: string | null, label: string, hint: string) {
+    const selected = this._language === tag;
+
+    return html`
+      <button
+        type="button"
+        class=${classMap({
+          "compose-sheet-row": true,
+          "compose-sheet-row-selected": selected,
+        })}
+        role="radio"
+        aria-checked=${selected ? "true" : "false"}
+        lang=${ifDefined(tag ?? undefined)}
+        data-compose-language-row
+        @click=${() => {
+          this._language = tag;
+          this._scheduleDraftSave();
+          // Choosing is the whole job of this list, so it closes behind the
+          // choice — the same as picking a visibility in the options sheet.
+          this._closeLanguagePicker(true);
+        }}
+      >
+        <span class="compose-sheet-main">
+          <span class="compose-sheet-title">${label}</span>
+          ${
+            hint
+              ? html`<span class="compose-sheet-sub">${hint}</span>`
+              : nothing
+          }
+        </span>
+        ${
+          selected
+            ? html`<span class="compose-sheet-check" aria-hidden="true">
+                ${renderComposePublishActionIcon(
+                  COMPOSE_PUBLISH_ACTION_ICONS.check,
+                  "compose-sheet-check-icon",
+                )}
+              </span>`
+            : nothing
+        }
       </button>
     `;
   }
 
+  private _closeLanguagePicker(restoreFocus = false) {
+    if (!this._showLanguagePicker) return;
+    this._showLanguagePicker = false;
+    if (!restoreFocus) return;
+    this.updateComplete.then(() => {
+      this.querySelector<HTMLElement>(
+        "[data-compose-language-trigger]",
+      )?.focus();
+    });
+  }
+
+  private _toggleLanguagePicker() {
+    const nextOpen = !this._showLanguagePicker;
+    if (!nextOpen) {
+      this._closeLanguagePicker(true);
+      return;
+    }
+    this._showCollection = false;
+    this._collectionSearch = "";
+    this._showPublishPanel = false;
+    this._postMetaIndex = null;
+    this._showLanguagePicker = true;
+    this.updateComplete.then(() => {
+      const rows = this.querySelectorAll<HTMLElement>(
+        "[data-compose-language-row]",
+      );
+      const selected = Array.from(rows).find(
+        (row) => row.getAttribute("aria-checked") === "true",
+      );
+      (selected ?? rows[0])?.focus();
+    });
+  }
+
+  /**
+   * The post's content language, offered only once the site publishes more
+   * than one. A single-language author never meets this control — that is the
+   * point of the whole feature being opt-in.
+   *
+   * It sits next to Post rather than inside the options sheet because it is
+   * not a setting so much as a statement about what is being written: the pill
+   * names the language this would publish in right now, so the answer is
+   * visible before the button that makes it public, not two clicks behind it.
+   *
+   * It only *names* it when there is something to say, though. Writing from
+   * /ja in Japanese, the globe alone is the whole message — the answer is the
+   * page you are standing on. The name appears when the answer stops being
+   * obvious: detection has moved it somewhere else, or the author has pinned
+   * it themselves. So a language that changes under you announces itself by
+   * growing a word, and one that never changes never speaks.
+   *
+   * Replies are excluded: a Thread is written in one language, and a reply
+   * takes the root's server-side.
+   */
+  private _renderLanguageControl() {
+    if (this._replyToId || this.languages.length < 2) return nothing;
+
+    const effective = this._effectiveLanguage();
+    const effectiveLabel =
+      this.languages.find((language) => language.tag === effective)?.label ??
+      "";
+    const chosen = this._language !== null;
+    const named = chosen || effective !== this._contextLanguageTag();
+    const open = this._showLanguagePicker;
+    const accessibleLabel = this.labels.languageTriggerLabel.replace(
+      "{language}",
+      effectiveLabel,
+    );
+
+    return html`
+      <div
+        class=${classMap({
+          "compose-language": true,
+          "compose-language-open": open,
+        })}
+      >
+        ${
+          open
+            ? html`<div
+                class="compose-dropdown-backdrop"
+                @click=${() => this._closeLanguagePicker(true)}
+              ></div>`
+            : nothing
+        }
+        <button
+          type="button"
+          class=${classMap({
+            "compose-language-trigger": true,
+            "compose-language-trigger-bare": !named,
+          })}
+          data-compose-language-trigger
+          data-open=${open ? "true" : nothing}
+          data-chosen=${chosen ? "true" : nothing}
+          ?disabled=${this._loading}
+          aria-haspopup="dialog"
+          aria-expanded=${open ? "true" : "false"}
+          aria-label=${accessibleLabel}
+          title=${accessibleLabel}
+          @click=${() => this._toggleLanguagePicker()}
+        >
+          <svg
+            class="compose-language-trigger-svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.9"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            ${unsafeSVG(COMPOSE_LANGUAGE_ICON)}
+          </svg>
+          ${
+            named
+              ? html`<span
+                  class="compose-language-label"
+                  lang=${ifDefined(effective ?? undefined)}
+                  >${effectiveLabel}</span
+                >`
+              : nothing
+          }
+        </button>
+        ${open ? this._renderLanguagePicker() : nothing}
+      </div>
+    `;
+  }
+
+  private _renderLanguagePicker() {
+    const labelOf = (tag: string | null) =>
+      this.languages.find((language) => language.tag === tag)?.label ?? "";
+    // Two states, and the row has to be straight about which one it is in: it
+    // has read a language, or it has not read one yet and the page's language
+    // is standing in until it does.
+    const read = this._readLanguage();
+    const pendingLabel = labelOf(this._contextLanguageTag());
+    const autoHint = read
+      ? this.labels.languageAutoDetected.replace("{language}", labelOf(read))
+      : pendingLabel
+        ? this.labels.languageAutoPending.replace("{language}", pendingLabel)
+        : this.labels.languageAutoHint;
+
+    return html`
+      <div
+        class="compose-language-popover"
+        role="dialog"
+        aria-label=${this.labels.languageLabel}
+      >
+        <p class="compose-sheet-label">${this.labels.languageLabel}</p>
+        ${
+          this._translationOf
+            ? html`<p class="compose-sheet-note">
+                ${this.labels.translationOf.replace(
+                  "{title}",
+                  this._translationOf.title,
+                )}
+              </p>`
+            : nothing
+        }
+        <div role="radiogroup" aria-label=${this.labels.languageLabel}>
+          ${this._renderLanguageRow(null, this.labels.languageAuto, autoHint)}
+          ${this.languages.map((language) =>
+            this._renderLanguageRow(language.tag, language.label, ""),
+          )}
+        </div>
+      </div>
+    `;
+  }
+
   /**
    * The label above a field, with its reset on the right. The reset only shows
    * once there is something to reset, so the default state is a bare label.
@@ -4982,17 +5794,19 @@ export class JantComposeDialog extends LitElement {
             )}
           </button>
         </div>
-        ${publishedAtError
-          ? html`<p
-              class="compose-publish-date-status compose-publish-date-status-error"
-            >
-              ${publishedAtError}
-            </p>`
-          : hasValue
-            ? nothing
-            : html`<p class="compose-sheet-hint">
-                ${this.labels.publishDateHint}
-              </p>`}
+        ${
+          publishedAtError
+            ? html`<p
+                class="compose-publish-date-status compose-publish-date-status-error"
+              >
+                ${publishedAtError}
+              </p>`
+            : hasValue
+              ? nothing
+              : html`<p class="compose-sheet-hint">
+                  ${this.labels.publishDateHint}
+                </p>`
+        }
       </div>
     `;
   }
@@ -5038,64 +5852,68 @@ export class JantComposeDialog extends LitElement {
             @input=${(e: Event) => this._onSlugInput(e, index)}
           />
         </div>
-        ${showSuggestion
-          ? html`
-              <button
-                type="button"
-                class="compose-slug-suggestion"
-                @click=${() => this._useSuggestedSlug()}
-              >
-                <span class="compose-slug-suggestion-label"
-                  >${this.labels.publishSlugSuggested}</span
-                >
-                <span class="compose-slug-suggestion-value"
-                  >/${this._suggestedSlug}</span
+        ${
+          showSuggestion
+            ? html`
+                <button
+                  type="button"
+                  class="compose-slug-suggestion"
+                  @click=${() => this._useSuggestedSlug()}
                 >
-                <span class="compose-slug-suggestion-icon" aria-hidden="true">
-                  <svg
-                    width="13"
-                    height="13"
-                    viewBox="0 0 14 14"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.4"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
+                  <span class="compose-slug-suggestion-label"
+                    >${this.labels.publishSlugSuggested}</span
                   >
-                    <path d="M3 7h8" />
-                    <path d="m8 3 4 4-4 4" />
-                  </svg>
-                </span>
-              </button>
-            `
-          : nothing}
-        ${slugStatus
-          ? html`<p
-              class=${classMap({
-                "compose-publish-slug-status": true,
-                "compose-publish-slug-status-error": Boolean(slugError),
-              })}
-              data-compose-slug-error=${slugError ? "true" : nothing}
-            >
-              ${slugStatus}
-            </p>`
-          : slugPreview
+                  <span class="compose-slug-suggestion-value"
+                    >/${this._suggestedSlug}</span
+                  >
+                  <span class="compose-slug-suggestion-icon" aria-hidden="true">
+                    <svg
+                      width="13"
+                      height="13"
+                      viewBox="0 0 14 14"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.4"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path d="M3 7h8" />
+                      <path d="m8 3 4 4-4 4" />
+                    </svg>
+                  </span>
+                </button>
+              `
+            : nothing
+        }
+        ${
+          slugStatus
             ? html`<p
-                class="compose-publish-slug-preview"
-                data-compose-slug-preview
-                title=${slugPreview.full}
+                class=${classMap({
+                  "compose-publish-slug-status": true,
+                  "compose-publish-slug-status-error": Boolean(slugError),
+                })}
+                data-compose-slug-error=${slugError ? "true" : nothing}
               >
-                <span class="compose-publish-slug-preview-origin"
-                  >${slugPreview.origin}</span
-                ><span class="compose-publish-slug-preview-path"
-                  >${slugPreview.path}</span
-                >
+                ${slugStatus}
               </p>`
-            : this._hasPostManualSlug(index)
-              ? nothing
-              : html`<p class="compose-sheet-hint">
-                  ${this.labels.publishSlugHint}
-                </p>`}
+            : slugPreview
+              ? html`<p
+                  class="compose-publish-slug-preview"
+                  data-compose-slug-preview
+                  title=${slugPreview.full}
+                >
+                  <span class="compose-publish-slug-preview-origin"
+                    >${slugPreview.origin}</span
+                  ><span class="compose-publish-slug-preview-path"
+                    >${slugPreview.path}</span
+                  >
+                </p>`
+              : this._hasPostManualSlug(index)
+                ? nothing
+                : html`<p class="compose-sheet-hint">
+                    ${this.labels.publishSlugHint}
+                  </p>`
+        }
       </div>
     `;
   }
@@ -5295,12 +6113,14 @@ export class JantComposeDialog extends LitElement {
           "compose-post-meta-open": open,
         })}
       >
-        ${open
-          ? html`<div
-              class="compose-dropdown-backdrop"
-              @click=${() => this._closePostMeta()}
-            ></div>`
-          : nothing}
+        ${
+          open
+            ? html`<div
+                class="compose-dropdown-backdrop"
+                @click=${() => this._closePostMeta()}
+              ></div>`
+            : nothing
+        }
         <button
           type="button"
           class="compose-post-meta-pill"
@@ -5312,6 +6132,7 @@ export class JantComposeDialog extends LitElement {
             if (open) return this._closePostMeta();
             this._showPublishPanel = false;
             this._showCollection = false;
+            this._showLanguagePicker = false;
             this._postMetaIndex = index;
             if (isRoot) this._scheduleSuggestedSlugRefresh(true);
             // Focus the panel, not its first field: a focused `type="date"`
@@ -5334,28 +6155,30 @@ export class JantComposeDialog extends LitElement {
             >${this._getPostSlugRowValue(index)}</span
           >
         </button>
-        ${open
-          ? html`<div
-              class="compose-post-meta-panel"
-              role="dialog"
-              aria-label=${this.labels.publishSettings}
-              tabindex="-1"
-              data-compose-post-meta-panel
-            >
-              ${this._renderPublishDateSection(index)}
-              ${this._renderPublishSlugSection(index)}
-              <div class="compose-post-meta-footer">
-                <button
-                  type="button"
-                  class="compose-publish-done"
-                  data-compose-post-meta-done
-                  @click=${() => this._closePostMeta()}
-                >
-                  ${this.labels.done}
-                </button>
-              </div>
-            </div>`
-          : nothing}
+        ${
+          open
+            ? html`<div
+                class="compose-post-meta-panel"
+                role="dialog"
+                aria-label=${this.labels.publishSettings}
+                tabindex="-1"
+                data-compose-post-meta-panel
+              >
+                ${this._renderPublishDateSection(index)}
+                ${this._renderPublishSlugSection(index)}
+                <div class="compose-post-meta-footer">
+                  <button
+                    type="button"
+                    class="compose-publish-done"
+                    data-compose-post-meta-done
+                    @click=${() => this._closePostMeta()}
+                  >
+                    ${this.labels.done}
+                  </button>
+                </div>
+              </div>`
+            : nothing
+        }
       </div>
     `;
   }
@@ -5513,8 +6336,7 @@ export class JantComposeDialog extends LitElement {
     }
     return (
       this._renderSaveDraftRow() !== nothing ||
-      this._renderDraftsRow() !== nothing ||
-      this._renderCloseComposeRow() !== nothing
+      this._renderDraftsRow() !== nothing
     );
   }
 
@@ -5529,46 +6351,50 @@ export class JantComposeDialog extends LitElement {
     ></div>`;
     const saveDraftRow = this._renderSaveDraftRow();
     const draftsRow = this._renderDraftsRow();
-    const closeRow = this._renderCloseComposeRow();
-    const hasSessionRows =
-      saveDraftRow !== nothing || draftsRow !== nothing || closeRow !== nothing;
+    const hasSessionRows = saveDraftRow !== nothing || draftsRow !== nothing;
 
     return html`
       <div class="compose-sheet">
-        ${this._visibilityLocked
-          ? nothing
-          : html`
-              <p class="compose-sheet-label">
-                ${this.labels.publishVisibilityLabel}
-              </p>
-              <div
-                role="radiogroup"
-                aria-label=${this.labels.publishVisibilityLabel}
-              >
-                ${this._renderVisibilityRow(
-                  "public",
-                  this.labels.publishVisibilityPublic,
-                  this.labels.publishVisibilityPublicHint,
-                )}
-                ${this._renderVisibilityRow(
-                  "latest_hidden",
-                  this.labels.publishVisibilityHiddenFromLatest,
-                  this.labels.publishVisibilityHiddenFromLatestHint,
-                )}
-                ${this._renderVisibilityRow(
-                  "private",
-                  this.labels.publishVisibilityPrivate,
-                  this.labels.publishVisibilityPrivateHint,
-                )}
-              </div>
-            `}
-        ${this._replyToId
-          ? html`${this._visibilityLocked ? nothing : divider}
-            ${this._renderQuietReplySection()}`
-          : nothing}
-        ${hasSessionRows
-          ? html`${divider} ${saveDraftRow} ${draftsRow} ${closeRow}`
-          : nothing}
+        ${
+          this._visibilityLocked
+            ? nothing
+            : html`
+                <p class="compose-sheet-label">
+                  ${this.labels.publishVisibilityLabel}
+                </p>
+                <div
+                  role="radiogroup"
+                  aria-label=${this.labels.publishVisibilityLabel}
+                >
+                  ${this._renderVisibilityRow(
+                    "public",
+                    this.labels.publishVisibilityPublic,
+                    this.labels.publishVisibilityPublicHint,
+                  )}
+                  ${this._renderVisibilityRow(
+                    "latest_hidden",
+                    this.labels.publishVisibilityHiddenFromLatest,
+                    this.labels.publishVisibilityHiddenFromLatestHint,
+                  )}
+                  ${this._renderVisibilityRow(
+                    "private",
+                    this.labels.publishVisibilityPrivate,
+                    this.labels.publishVisibilityPrivateHint,
+                  )}
+                </div>
+              `
+        }
+        ${
+          this._replyToId
+            ? html`${this._visibilityLocked ? nothing : divider}
+              ${this._renderQuietReplySection()}`
+            : nothing
+        }
+        ${
+          hasSessionRows
+            ? html`${divider} ${saveDraftRow} ${draftsRow}`
+            : nothing
+        }
       </div>
     `;
   }
@@ -5580,7 +6406,7 @@ export class JantComposeDialog extends LitElement {
    * there is something to save, both are offered and each does one thing.
    */
   private _renderSaveDraftRow() {
-    if (this._editPostId || !this._hasContent()) return nothing;
+    if (this._editPostId || !this._hasWorkToLose()) return nothing;
 
     return html`
       <button
@@ -5635,31 +6461,41 @@ export class JantComposeDialog extends LitElement {
   }
 
   /**
-   * A thread's posts each spend their × on removing themselves, so this is the
-   * only visible exit there — and the only one at all on a phone, which has no
-   * Escape key and no backdrop to tap. It routes through `requestClose`, so
-   * unsaved work still gets the "Save to drafts?" prompt.
+   * A thread's posts each spend their × on removing themselves, so the exit
+   * cannot live in a post header there — and a phone has no Escape key and no
+   * backdrop to tap, so it has to be visible somewhere.
+   *
+   * It goes at the near edge of the quick actions row, the strip that already
+   * carries thread-wide switches: leaving is thread-wide too, and the row's
+   * near half was empty. Diagonally opposite Publish, and in the muted weight
+   * of the switches beside it rather than Publish's — an exit should neither
+   * compete with the thing it is an exit from nor sit next to it.
+   *
+   * The word is "Close", not "Cancel": leaving may keep the work as a draft, so
+   * nothing is cancelled, and a thread puts N posts on screen that each own a ×
+   * — "Cancel" would not say which of them it meant. It also keeps this out of
+   * a Cancel/Post pair, which would read as Publish's peer rather than the
+   * quiet way out. Same word as the single-post ×, which is the same action.
+   *
+   * It routes through `requestClose`, so unsaved work still gets the "Save to
+   * drafts?" prompt.
+   *
+   * Page mode sits this out for the same reason the × does: the page's own
+   * Back link is the exit there, and it already routes through the same
+   * prompt. The row would be the wrong place to argue otherwise — page mode
+   * pins the action row to the viewport bottom and leaves this strip below it.
    */
-  private _renderCloseComposeRow() {
-    if (this._threadItems.length === 0) return nothing;
+  private _renderCloseComposeQuickAction() {
+    if (this.pageMode || this._threadItems.length === 0) return nothing;
 
     return html`
       <button
         type="button"
-        class="compose-sheet-row"
+        class="compose-quick-actions-close"
         ?disabled=${this._loading}
-        @click=${() => {
-          this._closePublishPanel(false);
-          this.requestClose();
-        }}
+        @click=${() => this.requestClose()}
       >
-        ${renderComposePublishActionIcon(
-          COMPOSE_PUBLISH_ACTION_ICONS.close,
-          "compose-sheet-row-icon",
-        )}
-        <span class="compose-sheet-main">
-          <span class="compose-sheet-title">${this.labels.closeCompose}</span>
-        </span>
+        ${this.labels.close}
       </button>
     `;
   }
@@ -5792,12 +6628,14 @@ export class JantComposeDialog extends LitElement {
             "compose-publish-group-open": this._showPublishPanel,
           })}
         >
-          ${this._showPublishPanel && !this._publishPanelFullscreen
-            ? html`<div
-                class="compose-dropdown-backdrop"
-                @click=${() => this._closePublishPanel(true)}
-              ></div>`
-            : nothing}
+          ${
+            this._showPublishPanel && !this._publishPanelFullscreen
+              ? html`<div
+                  class="compose-dropdown-backdrop"
+                  @click=${() => this._closePublishPanel(true)}
+                ></div>`
+              : nothing
+          }
           <div
             role="group"
             class=${classMap({
@@ -5820,35 +6658,37 @@ export class JantComposeDialog extends LitElement {
           <!-- Options sits past Publish as its own control rather than a
                chevron welded to it: a split button reads as one button, which
                is why nobody found the settings. -->
-          ${this._hasPublishPanelContent()
-            ? html`<button
-                type="button"
-                class=${classMap({
-                  "compose-options-trigger": true,
-                  "compose-options-trigger-open": this._showPublishPanel,
-                })}
-                ?disabled=${this._loading}
-                aria-haspopup="dialog"
-                aria-expanded=${this._showPublishPanel ? "true" : "false"}
-                aria-label=${this.labels.publishSettings}
-                title=${this.labels.publishSettings}
-                @click=${() => this._togglePublishPanel()}
-              >
-                <svg
-                  class="compose-options-trigger-icon"
-                  width="22"
-                  height="22"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  aria-hidden="true"
+          ${
+            this._hasPublishPanelContent()
+              ? html`<button
+                  type="button"
+                  class=${classMap({
+                    "compose-options-trigger": true,
+                    "compose-options-trigger-open": this._showPublishPanel,
+                  })}
+                  ?disabled=${this._loading}
+                  aria-haspopup="dialog"
+                  aria-expanded=${this._showPublishPanel ? "true" : "false"}
+                  aria-label=${this.labels.publishSettings}
+                  title=${this.labels.publishSettings}
+                  @click=${() => this._togglePublishPanel()}
                 >
-                  ${unsafeSVG(COMPOSE_PUBLISH_ACTION_ICONS.options)}
-                </svg>
-              </button>`
-            : nothing}
+                  <svg
+                    class="compose-options-trigger-icon"
+                    width="22"
+                    height="22"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    ${unsafeSVG(COMPOSE_PUBLISH_ACTION_ICONS.options)}
+                  </svg>
+                </button>`
+              : nothing
+          }
           ${this._renderDesktopPublishPanel()}
         </div>
       </div>
@@ -5861,12 +6701,19 @@ export class JantComposeDialog extends LitElement {
    * mirrors of a row inside it, not a second source of truth.
    */
   private _renderQuickActionsRow() {
+    const close = this._renderCloseComposeQuickAction();
     const hideFromLatest = this._renderHideFromLatestQuickToggle();
     const quietReply = this._renderQuietReplyQuickToggle();
-    if (hideFromLatest === nothing && quietReply === nothing) return nothing;
+    if (
+      close === nothing &&
+      hideFromLatest === nothing &&
+      quietReply === nothing
+    ) {
+      return nothing;
+    }
     return html`
       <div class="compose-quick-actions-row">
-        ${hideFromLatest} ${quietReply}
+        ${close} ${hideFromLatest} ${quietReply}
       </div>
     `;
   }
@@ -5974,70 +6821,21 @@ export class JantComposeDialog extends LitElement {
         : this._format;
 
     if (this._threadItems.length === 0) {
-      // Entering thread mode: snapshot current single editor's state
-      const currentEditor = this._editor;
-      const editorState = currentEditor?.getEditorState() ?? null;
-      const editorData = currentEditor?.getData();
-      const bodyJson = currentEditor?.getNormalizedBodyJson() ?? null;
-
+      // Entering thread mode renders the post in a new editor element, so the
+      // single-post editor hands it everything once the swap has rendered.
+      // Reading the old element then, not now, picks up any upload that
+      // finished during the render.
+      const singleEditor = this._editor;
       this._threadItems = [
         { id: randomUUID(), format: this._format },
         { id: randomUUID(), format: lastFormat },
       ];
-
-      // Capture rating state before re-render (these can't change asynchronously)
-      const capturedRating = currentEditor?._rating ?? 0;
-      const capturedShowRating = currentEditor?._showRating ?? false;
-
-      // Restore first thread item's content from the snapshot
-      if (editorState || editorData) {
-        this.updateComplete.then(() => {
-          const editors = this.querySelectorAll<JantComposeEditor>(
-            "jant-compose-editor",
-          );
-          const firstEditor = editors[0];
-          if (!firstEditor) return;
-          if (editorState) {
-            firstEditor.setEditorState(
-              editorState.json,
-              editorState.title,
-              editorState.showTitle,
-              editorState.selection,
-            );
-          }
-          if (editorData) {
-            if (this._format === "link" && editorData.url) {
-              firstEditor._url = editorData.url;
-            } else if (this._format === "quote") {
-              if (editorData.quoteText)
-                firstEditor._quoteText = editorData.quoteText;
-              if (editorData.quoteAuthor)
-                firstEditor._quoteAuthor = editorData.quoteAuthor;
-            }
-            if (bodyJson) {
-              firstEditor._bodyJson = bodyJson;
-            }
-          }
-          // Read attachment state from the old editor NOW (after re-render) so
-          // we get the latest mediaId for any uploads that completed during the
-          // render cycle. The old editor element is still in memory even though
-          // it has been removed from the DOM.
-          const latestAttachments = currentEditor?._attachments ?? [];
-          const latestAttachmentOrder = currentEditor?._attachmentOrder ?? [];
-          const latestAttachedTexts = currentEditor?._attachedTexts ?? [];
-          if (latestAttachments.length > 0) {
-            firstEditor._attachments = [...latestAttachments];
-            firstEditor._attachmentOrder = [...latestAttachmentOrder];
-          }
-          if (latestAttachedTexts.length > 0) {
-            firstEditor._attachedTexts = [...latestAttachedTexts];
-          }
-          if (capturedRating > 0) {
-            firstEditor._rating = capturedRating;
-            firstEditor._showRating = capturedShowRating;
-          }
-        });
-      }
+      this.updateComplete.then(() => {
+        const rootEditor = this.querySelector<JantComposeEditor>(
+          "jant-compose-editor",
+        );
+        if (singleEditor && rootEditor) rootEditor.takeOver(singleEditor);
+      });
     } else {
       this._threadItems = [
         ...this._threadItems,
@@ -6062,67 +6860,32 @@ export class JantComposeDialog extends LitElement {
     if (this._threadItems.length <= 1) return;
     const newItems = this._threadItems.filter((_, i) => i !== index);
 
+    // The root's permalink and date live on the dialog rather than on its
+    // thread item, so removing the root has to move the next post's own
+    // values up — otherwise the removed post's permalink and date stay behind
+    // on the post that replaces it, and that post's own are dropped.
+    if (index === 0) {
+      const promoted = newItems[0];
+      this._slug = promoted.slug ?? "";
+      this._slugTaken = promoted.slugTaken ?? false;
+      this._publishedAtInput = promoted.publishedAtInput ?? "";
+      this._publishedAtTimeMinutes = promoted.publishedAtTimeMinutes ?? null;
+    }
+
     if (newItems.length === 1) {
-      // Exiting thread mode: capture remaining thread editor's state and restore
-      // it to the single-post editor after thread mode is cleared.
-      const editors = this.querySelectorAll<JantComposeEditor>(
-        "jant-compose-editor",
+      // Leaving thread mode renders the last post in the single-post editor,
+      // which takes everything over from the thread editor it replaces.
+      const remainingEditor = this.querySelector<JantComposeEditor>(
+        `jant-compose-editor[data-thread-id="${newItems[0].id}"]`,
       );
-      const remainingIndex = index === 0 ? 1 : 0;
-      const remainingEditor = editors[remainingIndex] ?? null;
-      const editorState = remainingEditor?.getEditorState() ?? null;
-      const editorData = remainingEditor?.getData();
-      const bodyJson = remainingEditor?.getNormalizedBodyJson() ?? null;
-      const remainingFormat = newItems[0].format;
-      // Capture rating state before re-render (can't change asynchronously)
-      const capturedRating = remainingEditor?._rating ?? 0;
-      const capturedShowRating = remainingEditor?._showRating ?? false;
-
       this._threadItems = [];
       this._focusedThreadIndex = 0;
-      this._format = remainingFormat;
+      this._format = newItems[0].format;
 
       this.updateComplete.then(() => {
         const singleEditor = this._editor;
         if (!singleEditor) return;
-        singleEditor.format = remainingFormat;
-        if (editorState) {
-          singleEditor.setEditorState(
-            editorState.json,
-            editorState.title,
-            editorState.showTitle,
-            editorState.selection,
-          );
-        }
-        if (editorData) {
-          if (remainingFormat === "link" && editorData.url) {
-            singleEditor._url = editorData.url;
-          } else if (remainingFormat === "quote") {
-            if (editorData.quoteText)
-              singleEditor._quoteText = editorData.quoteText;
-            if (editorData.quoteAuthor)
-              singleEditor._quoteAuthor = editorData.quoteAuthor;
-          }
-          if (bodyJson) {
-            singleEditor._bodyJson = bodyJson;
-          }
-        }
-        // Read attachment state from the old editor NOW so we capture any
-        // mediaIds set by uploads that completed during the render cycle.
-        const latestAttachments = remainingEditor?._attachments ?? [];
-        const latestAttachmentOrder = remainingEditor?._attachmentOrder ?? [];
-        const latestAttachedTexts = remainingEditor?._attachedTexts ?? [];
-        if (latestAttachments.length > 0) {
-          singleEditor._attachments = [...latestAttachments];
-          singleEditor._attachmentOrder = [...latestAttachmentOrder];
-        }
-        if (latestAttachedTexts.length > 0) {
-          singleEditor._attachedTexts = [...latestAttachedTexts];
-        }
-        if (capturedRating > 0) {
-          singleEditor._rating = capturedRating;
-          singleEditor._showRating = capturedShowRating;
-        }
+        if (remainingEditor) singleEditor.takeOver(remainingEditor);
         singleEditor.focusInput();
       });
     } else {
@@ -6180,6 +6943,11 @@ export class JantComposeDialog extends LitElement {
         }}
         @jant:format-change=${(e: CustomEvent<{ format: ComposeFormat }>) => {
           e.stopPropagation();
+          this._convertForFormatSwitch(
+            e.target as JantComposeEditor,
+            item.format,
+            e.detail.format,
+          );
           this._threadItems = this._threadItems.map((it, i) =>
             i === index ? { ...it, format: e.detail.format } : it,
           );
@@ -6257,7 +7025,11 @@ export class JantComposeDialog extends LitElement {
         })}
         @jant:compose-content-changed=${() => this._scheduleDraftSave()}
       >
-        ${isReply ? this._renderReplyContext() : nothing}
+        ${
+          isReply
+            ? this._renderReplyContext()
+            : this._renderTranslationContext()
+        }
         <!-- Keyed by row id, not by position: an editor holds its own content,
              so an unkeyed list would reuse elements by position and drop the
              last one when a middle post is removed — taking that post's text
@@ -6287,7 +7059,7 @@ export class JantComposeDialog extends LitElement {
   // placeholder sits where the next post will land instead of floating out at
   // the dialog's own left edge, a rail's width clear of everything above it.
   private _renderAddThreadTrigger(onRail: boolean) {
-    const disabled = !this._hasContent();
+    const disabled = !this._hasWorkToLose();
     const button = html`
       <button
         type="button"
@@ -6358,39 +7130,46 @@ export class JantComposeDialog extends LitElement {
         ?inert=${this._addCollectionPanelOpen}
       >
         <div class="compose-scroll">
-          ${isOpeningEdit
-            ? this._renderEditLoadingState()
-            : isThreadMode
-              ? this._renderThreadComposeLayout()
-              : isReply
-                ? html`
-                    <div
-                      class="compose-thread-layout compose-reply-compose-layout"
-                    >
-                      ${this._renderReplyContext()}
-                      <div class="compose-editor-row is-current">
-                        <div class="compose-thread-dot"></div>
-                        ${editor}
+          ${
+            isOpeningEdit
+              ? this._renderEditLoadingState()
+              : isThreadMode
+                ? this._renderThreadComposeLayout()
+                : isReply
+                  ? html`
+                      <div
+                        class="compose-thread-layout compose-reply-compose-layout"
+                      >
+                        ${this._renderReplyContext()}
+                        <div class="compose-editor-row is-current">
+                          <div class="compose-thread-dot"></div>
+                          ${editor}
+                        </div>
+                        ${addThreadRow}
                       </div>
-                      ${addThreadRow}
-                    </div>
-                  `
-                : html`${editor}${addThreadRow}`}
+                    `
+                  : html`${this._renderTranslationContext()}${editor}${addThreadRow}`
+          }
         </div>
-        ${isOpeningEdit
-          ? nothing
-          : html`<div
-                class=${classMap({
-                  "compose-action-row": true,
-                  "compose-action-row-without-collection": !!this._replyToId,
-                  "compose-action-row-overlay-open":
-                    this._showPublishPanel || this._showCollection,
-                })}
-              >
-                ${this._replyToId ? nothing : this._renderCollectionSelector()}
-                ${this._renderPublishButton()}
-              </div>
-              ${this._renderQuickActionsRow()}`}
+        ${
+          isOpeningEdit
+            ? nothing
+            : html`<div
+                  class=${classMap({
+                    "compose-action-row": true,
+                    "compose-action-row-without-collection": !!this._replyToId,
+                    "compose-action-row-overlay-open":
+                      this._showPublishPanel ||
+                      this._showCollection ||
+                      this._showLanguagePicker,
+                  })}
+                >
+                  ${this._replyToId ? nothing : this._renderCollectionSelector()}
+                  ${this._renderLanguageControl()}
+                  ${this._renderPublishButton()}
+                </div>
+                ${this._renderQuickActionsRow()}`
+        }
         ${this._renderMobilePublishPanel()} ${this._renderAttachedPanel()}
         ${this._renderAltPanel()} ${this._renderDraftsPanel()}
         ${this._renderConfirmPanel()}