@jant/core 0.3.39 → 1.0.0

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

@@ -27,6 +27,7 @@ import type {
   ComposeLabels,
   ComposeAttachment,
   AttachedTextItem,
+  ComposeEditorSelection,
   ComposeFullscreenOpenDetail,
 } from "./compose-types.js";
 import {
@@ -35,9 +36,16 @@ import {
   validateUploadFile,
 } from "../../lib/upload.js";
 import type { MediaCategory } from "../../lib/upload.js";
+import {
+  DECORATIVE_QUOTE_MARK_SVG_CONTENT,
+  DECORATIVE_QUOTE_MARK_VIEWBOX,
+} from "../../lib/decorative-quote-mark.js";
 import { showToast } from "../toast.js";
 import { createTiptapEditor } from "../tiptap/create-editor.js";
-import { uploadAndInsertInlineImage } from "../tiptap/inline-image-upload.js";
+import {
+  uploadAndInsertInlineImage,
+  adoptPendingInlineImageUploads,
+} from "../tiptap/inline-image-upload.js";
 import { isSafeAbsoluteUrl } from "../../lib/url.js";
 
 interface ComposeFilePickerCloseDetail {
@@ -131,11 +139,38 @@ function renderComposeToolbarIcon(
   </svg>`;
 }
 
+function renderDecorativeQuoteMark(className: string) {
+  return html`<span
+    class=${`decorative-quote-mark ${className}`}
+    aria-hidden="true"
+  >
+    <svg
+      viewBox=${DECORATIVE_QUOTE_MARK_VIEWBOX}
+      role="presentation"
+      focusable="false"
+    >
+      ${unsafeSVG(DECORATIVE_QUOTE_MARK_SVG_CONTENT)}
+    </svg>
+  </span>`;
+}
+
+function clampEditorSelection(
+  editor: Editor,
+  selection: ComposeEditorSelection,
+): ComposeEditorSelection {
+  const max = editor.state.doc.content.size;
+  const from = Math.max(1, Math.min(selection.from, max));
+  const to = Math.max(from, Math.min(selection.to, max));
+  return { from, to };
+}
+
 export class JantComposeEditor extends LitElement {
   static properties = {
     format: { type: String },
     labels: { type: Object },
     uploadMaxFileSize: { type: Number },
+    threadItem: { type: Boolean, attribute: "thread-item" },
+    removable: { type: Boolean },
     _title: { state: true },
     _bodyJson: { state: true },
     _url: { state: true },
@@ -147,6 +182,7 @@ export class JantComposeEditor extends LitElement {
     _attachedTexts: { state: true },
     _attachments: { state: true },
     _attachmentOrder: { state: true },
+    _failedAttachmentPreviews: { state: true },
     _showAltPanel: { state: true },
     _altPanelIndex: { state: true },
     _showEmojiPicker: { state: true },
@@ -157,6 +193,8 @@ export class JantComposeEditor extends LitElement {
   declare format: ComposeFormat;
   declare labels: ComposeLabels;
   declare uploadMaxFileSize: number;
+  declare threadItem: boolean;
+  declare removable: boolean;
   declare _title: string;
   declare _bodyJson: JSONContent | null;
   declare _url: string;
@@ -168,6 +206,7 @@ export class JantComposeEditor extends LitElement {
   declare _attachedTexts: AttachedTextItem[];
   declare _attachments: ComposeAttachment[];
   declare _attachmentOrder: string[];
+  declare _failedAttachmentPreviews: string[];
   declare _showAltPanel: boolean;
   declare _altPanelIndex: number;
   declare _showEmojiPicker: boolean;
@@ -178,6 +217,7 @@ export class JantComposeEditor extends LitElement {
   private _fileInput: HTMLInputElement | null = null;
   private _lastFocusedField: HTMLTextAreaElement | HTMLInputElement | null =
     null;
+  private _lastEditorSelection: ComposeEditorSelection | null = null;
   private _emojiPickerEl: HTMLElement | null = null;
   private _emojiContainer: HTMLElement | null = null;
   private readonly _urlStatusId = `compose-url-status-${crypto.randomUUID()}`;
@@ -185,6 +225,8 @@ export class JantComposeEditor extends LitElement {
   private _scrollBufferApplied = false;
   private _filePickerCleanup: (() => void) | null = null;
   private _suppressAttachedTextOpenUntil = 0;
+  #inlineImageUploadGeneration = 0;
+  #inlineImageUploadPromises = new Set<Promise<void>>();
   #sortable: { destroy(): void } | null = null;
   #revertNextSibling: globalThis.Node | null = null;
 
@@ -197,6 +239,8 @@ export class JantComposeEditor extends LitElement {
     this.format = "note";
     this.labels = {} as ComposeLabels;
     this.uploadMaxFileSize = 500;
+    this.threadItem = false;
+    this.removable = false;
     this._title = "";
     this._bodyJson = null;
     this._url = "";
@@ -208,6 +252,7 @@ export class JantComposeEditor extends LitElement {
     this._attachedTexts = [];
     this._attachments = [];
     this._attachmentOrder = [];
+    this._failedAttachmentPreviews = [];
     this._showAltPanel = false;
     this._altPanelIndex = 0;
     this._showEmojiPicker = false;
@@ -222,13 +267,15 @@ export class JantComposeEditor extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.#clearPendingInlineImageUploads();
     this._editor?.destroy();
     this._editor = null;
     this.#sortable?.destroy();
     this.#sortable = null;
     document.removeEventListener("jant:slash-image", this._onSlashImage);
-    document.removeEventListener("click", this._onDocClickBound, true);
+    document.removeEventListener("click", this._onDocClickBound);
     this._emojiContainer?.remove();
+    this._emojiPickerEl = null;
     this._filePickerCleanup?.();
     this._filePickerCleanup = null;
   }
@@ -263,8 +310,50 @@ export class JantComposeEditor extends LitElement {
 
   private _uploadAndInsertImage(file: File) {
     const editor = this._editor;
-    if (!editor) return;
-    void uploadAndInsertInlineImage(editor, file);
+    if (!editor) return Promise.resolve();
+
+    const generation = this.#inlineImageUploadGeneration;
+    const uploadPromise = uploadAndInsertInlineImage(editor, file).finally(
+      () => {
+        if (generation !== this.#inlineImageUploadGeneration) return;
+        this.#inlineImageUploadPromises.delete(uploadPromise);
+      },
+    );
+    this.#inlineImageUploadPromises.add(uploadPromise);
+    return uploadPromise;
+  }
+
+  hasPendingInlineImageUploads(): boolean {
+    return this.#inlineImageUploadPromises.size > 0;
+  }
+
+  async waitForPendingInlineImageUploads(): Promise<void> {
+    const generation = this.#inlineImageUploadGeneration;
+    while (
+      generation === this.#inlineImageUploadGeneration &&
+      this.#inlineImageUploadPromises.size > 0
+    ) {
+      await Promise.allSettled(Array.from(this.#inlineImageUploadPromises));
+    }
+  }
+
+  #clearPendingInlineImageUploads() {
+    this.#inlineImageUploadGeneration += 1;
+    this.#inlineImageUploadPromises.clear();
+  }
+
+  /** Adopt in-flight inline image uploads from another editor (e.g. fullscreen). */
+  adoptPendingUploads() {
+    if (!this._editor) return;
+    const generation = this.#inlineImageUploadGeneration;
+    const adopted = adoptPendingInlineImageUploads(this._editor);
+    for (const promise of adopted) {
+      const tracked = promise.finally(() => {
+        if (generation !== this.#inlineImageUploadGeneration) return;
+        this.#inlineImageUploadPromises.delete(tracked);
+      });
+      this.#inlineImageUploadPromises.add(tracked);
+    }
   }
 
   private _dispatchFilePickerEvent(
@@ -318,7 +407,9 @@ export class JantComposeEditor extends LitElement {
     return json.content.every(
       (node) =>
         node.type === "paragraph" &&
-        (!node.content || node.content.length === 0),
+        (!node.content ||
+          node.content.length === 0 ||
+          node.content.every((child) => child.type === "hardBreak")),
     );
   }
 
@@ -409,9 +500,11 @@ export class JantComposeEditor extends LitElement {
   }
 
   reset() {
+    this.#clearPendingInlineImageUploads();
     this._title = "";
     this._bodyJson = null;
     this._editor?.commands.clearContent();
+    this._lastEditorSelection = null;
     this._url = "";
     this._quoteText = "";
     this._quoteAuthor = "";
@@ -422,9 +515,11 @@ export class JantComposeEditor extends LitElement {
     // Revoke preview URLs before clearing
     for (const a of this._attachments) {
       URL.revokeObjectURL(a.previewUrl);
+      if (a.posterUrl) URL.revokeObjectURL(a.posterUrl);
     }
     this._attachments = [];
     this._attachmentOrder = [];
+    this._failedAttachmentPreviews = [];
     this._showAltPanel = false;
     this._altPanelIndex = 0;
     this._showUrlValidation = false;
@@ -444,13 +539,27 @@ export class JantComposeEditor extends LitElement {
   }
 
   updateAttachmentPreview(clientId: string, file: File) {
+    this._setAttachmentPreviewFailure(clientId, false);
     this._attachments = this._attachments.map((a) => {
       if (a.clientId !== clientId) return a;
       URL.revokeObjectURL(a.previewUrl);
-      return { ...a, file, previewUrl: URL.createObjectURL(file) };
+      if (a.posterUrl) URL.revokeObjectURL(a.posterUrl);
+      return {
+        ...a,
+        file,
+        previewUrl: URL.createObjectURL(file),
+        posterUrl: null,
+      };
     });
   }
 
+  updateAttachmentPoster(clientId: string, poster: Blob) {
+    const posterUrl = URL.createObjectURL(poster);
+    this._attachments = this._attachments.map((a) =>
+      a.clientId === clientId ? { ...a, posterUrl } : a,
+    );
+  }
+
   updateAttachmentProgress(clientId: string, progress: number) {
     this._attachments = this._attachments.map((a) =>
       a.clientId === clientId ? { ...a, progress } : a,
@@ -476,6 +585,26 @@ export class JantComposeEditor extends LitElement {
     this._editor?.commands.focus();
   }
 
+  focusSelection(selection?: ComposeEditorSelection | null) {
+    if (this.format !== "note" || !this._editor) {
+      this.focusInput();
+      return;
+    }
+
+    const targetSelection = selection ?? this.getEditorSelection();
+    if (!targetSelection) {
+      this.focusInput();
+      return;
+    }
+
+    const normalizedSelection = clampEditorSelection(
+      this._editor,
+      targetSelection,
+    );
+    this._lastEditorSelection = normalizedSelection;
+    this._editor.chain().focus().setTextSelection(normalizedSelection).run();
+  }
+
   focusUrlInput(position?: "start" | "end") {
     this._focusTextControl(
       this.querySelector<HTMLInputElement>(".compose-url-input"),
@@ -527,10 +656,20 @@ export class JantComposeEditor extends LitElement {
     return this.getLinkTitleValidationMessage();
   }
 
+  getEditorSelection(): ComposeEditorSelection | null {
+    return this._readEditorSelection() ?? this._lastEditorSelection;
+  }
+
   isEmojiPickerOpen(): boolean {
     return this._showEmojiPicker;
   }
 
+  private _readEditorSelection(): ComposeEditorSelection | null {
+    if (!this._editor) return null;
+    const { from, to } = this._editor.state.selection;
+    return { from, to };
+  }
+
   private _focusTextControl(
     field: HTMLInputElement | HTMLTextAreaElement | null,
     position?: "start" | "end",
@@ -561,22 +700,31 @@ export class JantComposeEditor extends LitElement {
       onFocus: () => {
         this._lastFocusedField = null;
       },
+      onSelectionUpdate: (selection) => {
+        this._lastEditorSelection = selection;
+      },
       pasteMedia: {
         shouldInsertInline: (file) => this._shouldPasteInlineImage(file),
+        uploadInlineImage: (file) => this._uploadAndInsertImage(file),
         onPasteFiles: (files) => {
           this.addFiles(files);
         },
       },
     });
+    this._lastEditorSelection = this._readEditorSelection();
 
     // Lock editor min-height once so new lines fill existing space
     // instead of growing the dialog line-by-line.
+    // Skip in page mode where the editor grows freely with the page.
     this._scrollBufferApplied = false;
     const dom = this._editor.view.dom as HTMLElement;
-    const last = dom.lastElementChild as HTMLElement | null;
-    const contentH = last ? last.offsetTop + last.offsetHeight : 0;
-    const buffer = this.format !== "note" ? 60 : 120;
-    dom.style.minHeight = `${contentH + buffer}px`;
+    const isPageMode = !!this.closest(".compose-page-shell");
+    if (!isPageMode) {
+      const last = dom.lastElementChild as HTMLElement | null;
+      const contentH = last ? last.offsetTop + last.offsetHeight : 0;
+      const buffer = this.format !== "note" ? 60 : 120;
+      dom.style.minHeight = `${contentH + buffer}px`;
+    }
   }
 
   /**
@@ -591,12 +739,13 @@ export class JantComposeEditor extends LitElement {
     const body = this.querySelector(".compose-body") as HTMLElement | null;
     if (!body) return;
     if (body.scrollHeight > body.clientHeight + 20) {
-      dom.style.paddingBottom = "80px";
+      dom.style.paddingBottom = "40px";
       this._scrollBufferApplied = true;
     }
   }
 
   private _destroyEditor() {
+    this.#clearPendingInlineImageUploads();
     this._editor?.destroy();
     this._editor = null;
   }
@@ -641,6 +790,9 @@ export class JantComposeEditor extends LitElement {
       changed.has("_attachments") ||
       changed.has("_attachedTexts")
     ) {
+      if (changed.has("_attachments")) {
+        this._syncFailedAttachmentPreviews();
+      }
       if (this._attachmentOrder.length > 1) {
         this.#initSortable();
       } else {
@@ -666,6 +818,7 @@ export class JantComposeEditor extends LitElement {
       json: this._editor?.getJSON() ?? this._bodyJson,
       title: this._title,
       showTitle: this._showTitle,
+      selection: this.getEditorSelection(),
     };
   }
 
@@ -709,6 +862,7 @@ export class JantComposeEditor extends LitElement {
     if (data.showTitle !== undefined) this._showTitle = data.showTitle;
     else if (data.title && data.format === "note") this._showTitle = true;
     if (data.showRating !== undefined) this._showRating = data.showRating;
+    this._failedAttachmentPreviews = [];
 
     // Parse body JSON and set editor content
     if (data.bodyJson) {
@@ -729,6 +883,7 @@ export class JantComposeEditor extends LitElement {
         clientId: crypto.randomUUID(),
         file: new File([], m.originalName ?? "existing", { type: m.mimeType }),
         previewUrl: m.previewUrl,
+        posterUrl: null,
         status: "done" as const,
         progress: null,
         mediaId: m.id,
@@ -792,7 +947,12 @@ export class JantComposeEditor extends LitElement {
   }
 
   /** Updates editor content and title from fullscreen close */
-  setEditorState(json: JSONContent | null, title: string, showTitle: boolean) {
+  setEditorState(
+    json: JSONContent | null,
+    title: string,
+    showTitle: boolean,
+    selection?: ComposeEditorSelection | null,
+  ) {
     this._bodyJson = json;
     this._title = title;
     if (this.format === "note") {
@@ -806,6 +966,7 @@ export class JantComposeEditor extends LitElement {
         },
       );
     }
+    this._lastEditorSelection = selection ?? this._readEditorSelection();
   }
 
   private static SUMMARY_LENGTH = 100;
@@ -985,7 +1146,14 @@ export class JantComposeEditor extends LitElement {
 
   closeAttachedPanel(index: number) {
     const item = this._attachedTexts[index];
-    if (item && !this._hasAttachedTextContent(item.bodyJson)) {
+    if (!item) return;
+    // Never auto-remove an attachment that's already persisted server-side:
+    // if the user wanted to delete it, they'd click the X. Silently dropping
+    // an existing attachment because its content briefly looked empty (e.g.
+    // a transient fetch failure during edit-hydration) would be data loss
+    // the user didn't ask for.
+    if (item.mediaId) return;
+    if (!this._hasAttachedTextContent(item.bodyJson)) {
       this._attachedTexts = this._attachedTexts.filter((_, i) => i !== index);
       this._attachmentOrder = this._attachmentOrder.filter(
         (id) => id !== item.clientId,
@@ -1027,18 +1195,11 @@ export class JantComposeEditor extends LitElement {
     this._rating = this._rating === star ? 0 : star;
   }
 
-  private _shouldPasteInlineImage(file: File): boolean {
-    if (!file.type.startsWith("image/")) return false;
-
-    if (this.format === "quote") {
-      return false;
-    }
-
-    if (this.format === "note") {
-      return this._showTitle && this._title.trim().length > 0;
-    }
-
-    return this._title.trim().length > 0;
+  private _shouldPasteInlineImage(_file: File): boolean {
+    // Always route pasted images to attachments in compose editor.
+    // Inline images are inserted via /media slash command instead.
+    // Fullscreen editor has its own handler that allows inline paste.
+    return false;
   }
 
   private _openFilePicker() {
@@ -1087,6 +1248,7 @@ export class JantComposeEditor extends LitElement {
         clientId,
         file,
         previewUrl,
+        posterUrl: null,
         status: "pending",
         progress: null,
         mediaId: null,
@@ -1136,7 +1298,9 @@ export class JantComposeEditor extends LitElement {
   private _removeAttachment(index: number) {
     const attachment = this._attachments[index];
     if (attachment) {
+      this._setAttachmentPreviewFailure(attachment.clientId, false);
       URL.revokeObjectURL(attachment.previewUrl);
+      if (attachment.posterUrl) URL.revokeObjectURL(attachment.posterUrl);
       this.dispatchEvent(
         new CustomEvent("jant:attachment-removed", {
           bubbles: true,
@@ -1232,6 +1396,7 @@ export class JantComposeEditor extends LitElement {
     }
     this._showEmojiPicker = false;
     this._emojiContainer?.remove();
+    this._emojiPickerEl = null;
     document.removeEventListener("click", this._onDocClickBound);
     if (options?.restoreFocus) {
       this._restoreEmojiFocus();
@@ -1241,10 +1406,10 @@ export class JantComposeEditor extends LitElement {
   private _restoreEmojiFocus() {
     const field = this._lastFocusedField;
     if (field && this.contains(field) && !field.disabled) {
-      this._focusTextControl(field, "end");
+      field.focus();
       return;
     }
-    this.focusInput("end");
+    this.focusSelection();
   }
 
   private _onDocumentClick(e: Event) {
@@ -1264,7 +1429,9 @@ export class JantComposeEditor extends LitElement {
     }
     (dialog ?? document.body).appendChild(this._emojiContainer);
 
-    // Only create the picker element once
+    // Recreate the picker after every close. emoji-mart doesn't recover its
+    // row observers reliably after disconnect/reconnect, which leaves later
+    // categories empty on reopen.
     if (!this._emojiPickerEl) {
       const [{ default: data }, { Picker }] = await Promise.all([
         import("@emoji-mart/data"),
@@ -1375,7 +1542,7 @@ export class JantComposeEditor extends LitElement {
       inner = `<line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="15" x2="16" y2="15"/><line x1="8" y1="18" x2="16" y2="18"/><line x1="10.7" y1="12" x2="10.7" y2="18"/><line x1="13.3" y1="12" x2="13.3" y2="18"/>`;
     } else if (getMediaCategory(mimeType) === "archive") {
       inner = `<line x1="12" y1="10" x2="12" y2="11.5"/><line x1="12" y1="13" x2="12" y2="14.5"/><line x1="12" y1="16" x2="12" y2="17.5"/>`;
-    } else if (mimeType === "text/x-tiptap+json") {
+    } else if (mimeType === "text/html; charset=utf-8") {
       inner = `<line x1="16" y1="11" x2="8" y2="11"/><line x1="16" y1="14" x2="8" y2="14"/><line x1="12" y1="17" x2="8" y2="17"/>`;
     } else {
       // Plain text default — 3 text lines
@@ -1396,6 +1563,63 @@ export class JantComposeEditor extends LitElement {
     </svg>`;
   }
 
+  private _hasFailedAttachmentPreview(clientId: string): boolean {
+    return this._failedAttachmentPreviews.includes(clientId);
+  }
+
+  private _setAttachmentPreviewFailure(clientId: string, failed: boolean) {
+    const hasFailure = this._failedAttachmentPreviews.includes(clientId);
+    if (failed === hasFailure) return;
+    this._failedAttachmentPreviews = failed
+      ? [...this._failedAttachmentPreviews, clientId]
+      : this._failedAttachmentPreviews.filter((id) => id !== clientId);
+  }
+
+  private _syncFailedAttachmentPreviews() {
+    const attachmentIds = new Set(
+      this._attachments.map((item) => item.clientId),
+    );
+    const nextFailures = this._failedAttachmentPreviews.filter((clientId) =>
+      attachmentIds.has(clientId),
+    );
+    if (nextFailures.length === this._failedAttachmentPreviews.length) return;
+    this._failedAttachmentPreviews = nextFailures;
+  }
+
+  private _renderAttachmentPreviewFallback(category: "image" | "video") {
+    return html`
+      <div
+        class="compose-attachment-preview-fallback"
+        data-preview-failed=${category}
+        aria-hidden="true"
+      >
+        <svg
+          width="28"
+          height="28"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <rect x="3.5" y="5" width="17" height="14" rx="2.5" />
+          <circle cx="9" cy="10" r="1.25" />
+          <path d="m7 16 3.4-3.45 2.65 2.45 2.45-3.05 1.95 2.5" />
+        </svg>
+        ${category === "video"
+          ? html`
+              <div class="compose-attachment-play-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
   // ── Render helpers ────────────────────────────────────────────────
 
   private _renderNoteFields() {
@@ -1460,7 +1684,7 @@ export class JantComposeEditor extends LitElement {
             @blur=${() => {
               this._showUrlValidation = true;
             }}
-            class="compose-input compose-url-input text-[0.9rem]"
+            class="compose-input compose-url-input"
             placeholder=${this.labels.urlPlaceholder}
             aria-invalid=${urlError ? "true" : "false"}
             aria-describedby=${ifDefined(
@@ -1498,7 +1722,9 @@ export class JantComposeEditor extends LitElement {
             </p>`
           : nothing}
         <div class="compose-divider"></div>
-        <div class="compose-tiptap-body compose-tiptap-thoughts"></div>
+        <div
+          class="compose-tiptap-body compose-tiptap-thoughts compose-tiptap-link"
+        ></div>
       </div>
     `;
   }
@@ -1511,7 +1737,7 @@ export class JantComposeEditor extends LitElement {
     return html`
       <div class="compose-field-enter">
         <div class="compose-quote-wrap">
-          <span class="compose-quote-mark">"</span>
+          ${renderDecorativeQuoteMark("compose-quote-mark")}
           <textarea
             .value=${this._quoteText}
             @input=${(e: Event) => this._onInput("_quoteText", e)}
@@ -1522,7 +1748,7 @@ export class JantComposeEditor extends LitElement {
           ></textarea>
         </div>
         <div class="compose-quote-author-row">
-          <span class="compose-quote-dash">—</span>
+          <span class="compose-quote-dash" aria-hidden="true">—</span>
           <input
             type="text"
             .value=${this._quoteAuthor}
@@ -1541,7 +1767,7 @@ export class JantComposeEditor extends LitElement {
             @blur=${() => {
               this._showUrlValidation = true;
             }}
-            class="compose-input compose-url-input text-[0.78rem]"
+            class="compose-input compose-url-input compose-quote-source-input"
             placeholder=${this.labels.sourcePlaceholder}
             aria-invalid=${urlError ? "true" : "false"}
             aria-describedby=${ifDefined(
@@ -1558,7 +1784,10 @@ export class JantComposeEditor extends LitElement {
               </p>`
             : nothing}
         </div>
-        <div class="compose-divider"></div>
+        <div
+          class="compose-divider compose-divider-quote"
+          aria-hidden="true"
+        ></div>
         <div
           class="compose-tiptap-body compose-tiptap-thoughts compose-tiptap-thoughts-quote"
         ></div>
@@ -1782,7 +2011,7 @@ export class JantComposeEditor extends LitElement {
         >
           <div class="compose-attachment-text-card">
             <div class="compose-attachment-file-icon">
-              ${this._renderFileIcon("text/x-tiptap+json", 20)}
+              ${this._renderFileIcon("text/html; charset=utf-8", 20)}
             </div>
             <span class="compose-attachment-text-summary">${item.summary}</span>
             ${item.bodyJson
@@ -1805,6 +2034,8 @@ export class JantComposeEditor extends LitElement {
   private _renderMediaAttachment(a: ComposeAttachment, i: number) {
     const category = this._getCategory(a);
     const isFileCard = category !== "image" && category !== "video";
+    const visualCategory = category === "video" ? "video" : "image";
+    const previewFailed = this._hasFailedAttachmentPreview(a.clientId);
 
     return html`
       <div class="compose-attachment" data-attachment-id=${a.clientId}>
@@ -1832,49 +2063,73 @@ export class JantComposeEditor extends LitElement {
                   @keydown=${(e: globalThis.KeyboardEvent) =>
                     this._handleAttachmentKeydown(a.clientId, e)}
                 >
-                  ${category === "video"
-                    ? html`
-                        <video
-                          src=${a.previewUrl}
-                          class="compose-attachment-img"
-                          preload="metadata"
-                          muted
-                        ></video>
-                        <div class="compose-attachment-play-icon">
-                          <svg
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="white"
-                          >
-                            <path d="M8 5v14l11-7z" />
-                          </svg>
-                        </div>
-                      `
-                    : a.status === "processing"
+                  ${previewFailed
+                    ? this._renderAttachmentPreviewFallback(visualCategory)
+                    : category === "video"
                       ? html`
-                          <div class="compose-attachment-processing">
+                          <video
+                            src=${a.previewUrl}
+                            poster=${a.posterUrl ?? nothing}
+                            class="compose-attachment-img"
+                            preload="metadata"
+                            .playsInline=${true}
+                            .muted=${true}
+                            @loadeddata=${() =>
+                              this._setAttachmentPreviewFailure(
+                                a.clientId,
+                                false,
+                              )}
+                            @error=${() =>
+                              this._setAttachmentPreviewFailure(
+                                a.clientId,
+                                true,
+                              )}
+                          ></video>
+                          <div class="compose-attachment-play-icon">
                             <svg
-                              class="animate-spin size-5"
+                              width="24"
+                              height="24"
                               viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-width="2"
+                              fill="white"
                             >
-                              <path
-                                d="M12 2a10 10 0 1 0 10 10"
-                                stroke-linecap="round"
-                              />
+                              <path d="M8 5v14l11-7z" />
                             </svg>
                           </div>
                         `
-                      : html`
-                          <img
-                            src=${a.previewUrl}
-                            alt=""
-                            class="compose-attachment-img"
-                          />
-                        `}
+                      : a.status === "processing"
+                        ? html`
+                            <div class="compose-attachment-processing">
+                              <svg
+                                class="animate-spin size-5"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                              >
+                                <path
+                                  d="M12 2a10 10 0 1 0 10 10"
+                                  stroke-linecap="round"
+                                />
+                              </svg>
+                            </div>
+                          `
+                        : html`
+                            <img
+                              src=${a.previewUrl}
+                              alt=""
+                              class="compose-attachment-img"
+                              @load=${() =>
+                                this._setAttachmentPreviewFailure(
+                                  a.clientId,
+                                  false,
+                                )}
+                              @error=${() =>
+                                this._setAttachmentPreviewFailure(
+                                  a.clientId,
+                                  true,
+                                )}
+                            />
+                          `}
                 </div>
                 ${this._renderAttachmentOverlay(a, i)}
               </div>
@@ -1928,6 +2183,15 @@ export class JantComposeEditor extends LitElement {
     `;
   }
 
+  private _renderAttachmentDock() {
+    if (this._attachments.length === 0 && this._attachedTexts.length === 0)
+      return nothing;
+
+    return html`
+      <div class="compose-attachments-dock">${this._renderAttachments()}</div>
+    `;
+  }
+
   private _renderToolsRow() {
     const hasAttached = this._attachedTexts.length > 0;
     return html`
@@ -1989,7 +2253,15 @@ export class JantComposeEditor extends LitElement {
           })}
           title=${this.labels.rate}
           @click=${() => {
-            this._showRating = !this._showRating;
+            const willShow = !this._showRating;
+            this._showRating = willShow;
+            if (willShow) {
+              this.updateComplete.then(() => {
+                this.querySelector<HTMLElement>(
+                  ".compose-star-rating",
+                )?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+              });
+            }
           }}
         >
           ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.rate)}
@@ -2039,6 +2311,78 @@ export class JantComposeEditor extends LitElement {
     `;
   }
 
+  private _renderThreadPostHeader() {
+    const formatLabels: Record<ComposeFormat, string> = {
+      note: this.labels.note,
+      link: this.labels.link,
+      quote: this.labels.quote,
+    };
+    const formats: ComposeFormat[] = ["note", "link", "quote"];
+    const CLOSE_ICON = `<path d="M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5"/>`;
+
+    return html`
+      <div class="compose-thread-post-header">
+        <div class="compose-segmented compose-thread-segmented">
+          <div
+            class=${classMap({
+              "compose-format-pill": true,
+              "compose-format-pill-link": this.format === "link",
+              "compose-format-pill-quote": this.format === "quote",
+            })}
+          ></div>
+          ${formats.map(
+            (f) => html`
+              <button
+                type="button"
+                class=${classMap({
+                  "compose-segmented-item": true,
+                  "compose-segmented-item-active": this.format === f,
+                })}
+                @click=${() => {
+                  if (this.format !== f) {
+                    this.dispatchEvent(
+                      new CustomEvent("jant:thread-format-change", {
+                        bubbles: true,
+                        detail: { format: f },
+                      }),
+                    );
+                  }
+                }}
+              >
+                ${formatLabels[f]}
+              </button>
+            `,
+          )}
+        </div>
+        ${this.removable
+          ? html`<button
+              type="button"
+              class="compose-thread-post-remove"
+              title="Remove post"
+              @click=${() => {
+                this.dispatchEvent(
+                  new CustomEvent("jant:thread-remove", { bubbles: true }),
+                );
+              }}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                ${unsafeSVG(CLOSE_ICON)}
+              </svg>
+            </button>`
+          : nothing}
+      </div>
+    `;
+  }
+
   openFullscreen() {
     if (this.format !== "note") return;
     const state = this.getEditorState();
@@ -2052,15 +2396,16 @@ export class JantComposeEditor extends LitElement {
 
   render() {
     return html`
+      ${this.threadItem ? this._renderThreadPostHeader() : nothing}
       <section class="compose-body">
         ${this.format === "note"
           ? this._renderNoteFields()
           : this.format === "link"
             ? this._renderLinkFields()
             : this._renderQuoteFields()}
-        ${this._renderAttachments()} ${this._renderStarRating()}
+        ${this._renderStarRating()}
       </section>
-      ${this._renderToolsRow()}
+      ${this._renderAttachmentDock()} ${this._renderToolsRow()}
     `;
   }
 }