@jant/core 0.3.27 → 0.3.28

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

@@ -0,0 +1,799 @@
+/**
+ * Compose Editor
+ *
+ * Format-specific content editing sub-component for the compose dialog.
+ * Handles note/link/quote fields, star rating, attached text panel,
+ * file attachments with thumbnail strip, and alt text editing.
+ *
+ * Light DOM only — BaseCoat and Tailwind classes apply directly.
+ */
+
+import { LitElement, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import type {
+  ComposeFormat,
+  ComposeLabels,
+  ComposeAttachment,
+} from "./compose-types.js";
+
+export class JantComposeEditor extends LitElement {
+  static properties = {
+    format: { type: String },
+    labels: { type: Object },
+    _title: { state: true },
+    _body: { state: true },
+    _url: { state: true },
+    _quoteText: { state: true },
+    _quoteAuthor: { state: true },
+    _rating: { state: true },
+    _showTitle: { state: true },
+    _showRating: { state: true },
+    _attachedText: { state: true },
+    _showAttachedText: { state: true },
+    _attachments: { state: true },
+    _showAltPanel: { state: true },
+    _altPanelIndex: { state: true },
+  };
+
+  declare format: ComposeFormat;
+  declare labels: ComposeLabels;
+  declare _title: string;
+  declare _body: string;
+  declare _url: string;
+  declare _quoteText: string;
+  declare _quoteAuthor: string;
+  declare _rating: number;
+  declare _showTitle: boolean;
+  declare _showRating: boolean;
+  declare _attachedText: string;
+  declare _showAttachedText: boolean;
+  declare _attachments: ComposeAttachment[];
+  declare _showAltPanel: boolean;
+  declare _altPanelIndex: number;
+
+  private _fileInput: HTMLInputElement | null = null;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  constructor() {
+    super();
+    this.format = "note";
+    this.labels = {} as ComposeLabels;
+    this._title = "";
+    this._body = "";
+    this._url = "";
+    this._quoteText = "";
+    this._quoteAuthor = "";
+    this._rating = 0;
+    this._showTitle = false;
+    this._showRating = false;
+    this._attachedText = "";
+    this._showAttachedText = false;
+    this._attachments = [];
+    this._showAltPanel = false;
+    this._altPanelIndex = 0;
+  }
+
+  getData() {
+    const shared = {
+      rating: this._rating,
+      attachedText: this._attachedText,
+      attachments: this._attachments,
+    };
+
+    switch (this.format) {
+      case "link":
+        return {
+          ...shared,
+          title: this._title,
+          body: this._body,
+          url: this._url,
+          quoteText: "",
+          quoteAuthor: "",
+        };
+      case "quote":
+        return {
+          ...shared,
+          title: "",
+          body: this._body,
+          url: this._url,
+          quoteText: this._quoteText,
+          quoteAuthor: this._quoteAuthor,
+        };
+      default:
+        return {
+          ...shared,
+          title: this._title,
+          body: this._body,
+          url: "",
+          quoteText: "",
+          quoteAuthor: "",
+        };
+    }
+  }
+
+  reset() {
+    this._title = "";
+    this._body = "";
+    this._url = "";
+    this._quoteText = "";
+    this._quoteAuthor = "";
+    this._rating = 0;
+    this._showTitle = false;
+    this._showRating = false;
+    this._attachedText = "";
+    this._showAttachedText = false;
+    // Revoke preview URLs before clearing
+    for (const a of this._attachments) {
+      URL.revokeObjectURL(a.previewUrl);
+    }
+    this._attachments = [];
+    this._showAltPanel = false;
+    this._altPanelIndex = 0;
+  }
+
+  updateAttachmentStatus(
+    clientId: string,
+    status: ComposeAttachment["status"],
+    mediaId: string | null,
+    error: string | null,
+  ) {
+    this._attachments = this._attachments.map((a) =>
+      a.clientId === clientId ? { ...a, status, mediaId, error } : a,
+    );
+  }
+
+  focusInput() {
+    const selector =
+      this.format === "link"
+        ? '.compose-input[type="url"]'
+        : this.format === "quote"
+          ? ".compose-quote-text"
+          : ".compose-body-input";
+    this.querySelector<HTMLElement>(selector)?.focus();
+  }
+
+  private _openAttachedText() {
+    this._showAttachedText = true;
+    this.updateComplete.then(() => {
+      this.querySelector<HTMLTextAreaElement>(
+        ".compose-attached-textarea",
+      )?.focus();
+    });
+  }
+
+  private _onInput(field: string, e: Event) {
+    const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+    (this as Record<string, unknown>)[field] = target.value;
+    if (
+      target.tagName === "TEXTAREA" &&
+      !target.classList.contains("compose-attached-textarea")
+    ) {
+      this._autoResize(target as HTMLElement);
+    }
+  }
+
+  private _autoResize(el: HTMLElement) {
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }
+
+  private _setRating(star: number) {
+    this._rating = this._rating === star ? 0 : star;
+  }
+
+  private _openFilePicker() {
+    if (!this._fileInput) {
+      this._fileInput = document.createElement("input");
+      this._fileInput.type = "file";
+      this._fileInput.accept = "image/*";
+      this._fileInput.multiple = true;
+      this._fileInput.style.display = "none";
+      this._fileInput.addEventListener("change", () =>
+        this._handleFilesSelected(),
+      );
+      this.appendChild(this._fileInput);
+    }
+    this._fileInput.value = "";
+    this._fileInput.click();
+  }
+
+  private _handleFilesSelected() {
+    if (!this._fileInput?.files?.length) return;
+
+    const newAttachments: ComposeAttachment[] = [];
+    const files: { file: File; clientId: string }[] = [];
+
+    for (const file of Array.from(this._fileInput.files)) {
+      const clientId = crypto.randomUUID();
+      const previewUrl = URL.createObjectURL(file);
+      newAttachments.push({
+        clientId,
+        file,
+        previewUrl,
+        status: "pending",
+        mediaId: null,
+        alt: "",
+        error: null,
+      });
+      files.push({ file, clientId });
+    }
+
+    this._attachments = [...this._attachments, ...newAttachments];
+
+    this.dispatchEvent(
+      new CustomEvent("jant:files-selected", {
+        bubbles: true,
+        detail: { files },
+      }),
+    );
+  }
+
+  private _removeAttachment(index: number) {
+    const attachment = this._attachments[index];
+    if (attachment) {
+      URL.revokeObjectURL(attachment.previewUrl);
+    }
+    this._attachments = this._attachments.filter((_, i) => i !== index);
+    // Close alt panel if it was showing the removed item
+    if (this._showAltPanel && this._altPanelIndex === index) {
+      this._showAltPanel = false;
+    } else if (this._showAltPanel && this._altPanelIndex > index) {
+      this._altPanelIndex = this._altPanelIndex - 1;
+    }
+  }
+
+  private _openAltPanel(index: number) {
+    this._altPanelIndex = index;
+    this._showAltPanel = true;
+    this.updateComplete.then(() => {
+      this.querySelector<HTMLTextAreaElement>(".compose-alt-textarea")?.focus();
+    });
+  }
+
+  private _closeAltPanel() {
+    this._showAltPanel = false;
+  }
+
+  private _onAltInput(e: Event) {
+    const value = (e.target as HTMLTextAreaElement).value;
+    this._attachments = this._attachments.map((a, i) =>
+      i === this._altPanelIndex ? { ...a, alt: value } : a,
+    );
+  }
+
+  // ── Render helpers ────────────────────────────────────────────────
+
+  private _renderNoteFields() {
+    return html`
+      <div class="compose-field-enter">
+        ${this._showTitle
+          ? html`
+              <div class="compose-note-title-row">
+                <input
+                  type="text"
+                  .value=${this._title}
+                  @input=${(e: Event) => this._onInput("_title", e)}
+                  class="compose-input compose-note-title"
+                  placeholder=${this.labels.titlePlaceholder}
+                />
+                <button
+                  type="button"
+                  class="compose-note-title-dismiss"
+                  @click=${() => {
+                    this._showTitle = false;
+                  }}
+                >
+                  ✕
+                </button>
+              </div>
+            `
+          : nothing}
+        <textarea
+          .value=${this._body}
+          @input=${(e: Event) => this._onInput("_body", e)}
+          class="compose-input compose-body-input"
+          placeholder=${this.labels.bodyPlaceholder}
+          rows="4"
+        ></textarea>
+      </div>
+    `;
+  }
+
+  private _renderLinkFields() {
+    return html`
+      <div class="compose-field-enter">
+        <div class="compose-link-url-wrap">
+          <span class="text-base opacity-50 shrink-0">🔗</span>
+          <input
+            type="url"
+            .value=${this._url}
+            @input=${(e: Event) => this._onInput("_url", e)}
+            class="compose-input text-[0.9rem]"
+            placeholder=${this.labels.urlPlaceholder}
+          />
+        </div>
+        <input
+          type="text"
+          .value=${this._title}
+          @input=${(e: Event) => this._onInput("_title", e)}
+          class="compose-input compose-link-title"
+          placeholder=${this.labels.linkTitlePlaceholder}
+        />
+        <div class="compose-divider"></div>
+        <textarea
+          .value=${this._body}
+          @input=${(e: Event) => this._onInput("_body", e)}
+          class="compose-input compose-thoughts"
+          placeholder=${this.labels.thoughtsPlaceholder}
+          rows="3"
+        ></textarea>
+      </div>
+    `;
+  }
+
+  private _renderQuoteFields() {
+    return html`
+      <div class="compose-field-enter">
+        <div class="compose-quote-wrap">
+          <span class="compose-quote-mark">"</span>
+          <textarea
+            .value=${this._quoteText}
+            @input=${(e: Event) => this._onInput("_quoteText", e)}
+            class="compose-input compose-quote-text"
+            placeholder=${this.labels.quotePlaceholder}
+            rows="3"
+          ></textarea>
+        </div>
+        <div class="compose-quote-author-row">
+          <span class="compose-quote-dash">—</span>
+          <input
+            type="text"
+            .value=${this._quoteAuthor}
+            @input=${(e: Event) => this._onInput("_quoteAuthor", e)}
+            class="compose-input compose-quote-author"
+            placeholder=${this.labels.authorPlaceholder}
+          />
+        </div>
+        <div class="compose-quote-source">
+          <input
+            type="url"
+            .value=${this._url}
+            @input=${(e: Event) => this._onInput("_url", e)}
+            class="compose-input text-[0.78rem]"
+            placeholder=${this.labels.sourcePlaceholder}
+          />
+        </div>
+        <div class="compose-divider"></div>
+        <textarea
+          .value=${this._body}
+          @input=${(e: Event) => this._onInput("_body", e)}
+          class="compose-input compose-thoughts"
+          placeholder=${this.labels.thoughtsPlaceholder}
+          rows="2"
+        ></textarea>
+      </div>
+    `;
+  }
+
+  private _renderStarRating() {
+    if (!this._showRating) return nothing;
+    const stars = [1, 2, 3, 4, 5];
+    return html`
+      <div class="compose-star-rating">
+        ${stars.map(
+          (n) => html`
+            <button
+              type="button"
+              class=${classMap({
+                "compose-star": true,
+                "compose-star-filled": this._rating >= n,
+              })}
+              @click=${() => this._setRating(n)}
+            >
+              ★
+            </button>
+          `,
+        )}
+        ${this._rating > 0
+          ? html`<span class="compose-star-label">${this._rating}/5</span>`
+          : nothing}
+      </div>
+    `;
+  }
+
+  private _renderAttachedBadge() {
+    if (this._attachedText.trim().length === 0 || this._showAttachedText)
+      return nothing;
+    return html`
+      <div
+        class="compose-attached-badge"
+        @click=${() => this._openAttachedText()}
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 18 18"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.3"
+          stroke-linecap="round"
+          class="text-muted-foreground"
+        >
+          <rect x="3" y="2" width="12" height="14" rx="2" />
+          <line x1="6" y1="6" x2="12" y2="6" />
+          <line x1="6" y1="9" x2="12" y2="9" />
+          <line x1="6" y1="12" x2="9.5" y2="12" />
+        </svg>
+        <span class="text-xs font-medium">${this.labels.attachedText}</span>
+        <span class="text-xs text-muted-foreground"
+          >· ${this._attachedText.length.toLocaleString()} chars</span
+        >
+        <div class="flex-1"></div>
+        <button
+          type="button"
+          class="compose-attached-badge-dismiss"
+          @click=${(e: Event) => {
+            e.stopPropagation();
+            this._attachedText = "";
+          }}
+        >
+          ✕
+        </button>
+      </div>
+    `;
+  }
+
+  private _renderAttachedPanel() {
+    if (!this._showAttachedText) return nothing;
+    return html`
+      <div class="compose-attached-panel">
+        <div
+          class="flex items-center gap-2.5 px-3 py-2.5 border-b border-border"
+        >
+          <button
+            type="button"
+            class="compose-attached-panel-back"
+            @click=${() => {
+              this._showAttachedText = false;
+            }}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M11 3L6 8l5 5" />
+            </svg>
+          </button>
+          <span class="text-sm font-medium tracking-tight"
+            >${this.labels.attachedText}</span
+          >
+          <div class="flex-1"></div>
+          ${this._attachedText.length > 0
+            ? html`<span class="text-xs text-muted-foreground tracking-wide"
+                >${this._attachedText.length.toLocaleString()} chars</span
+              >`
+            : nothing}
+        </div>
+        <div class="flex-1 p-4 overflow-hidden flex flex-col">
+          <textarea
+            .value=${this._attachedText}
+            @input=${(e: Event) => this._onInput("_attachedText", e)}
+            class="compose-input compose-attached-textarea"
+            placeholder=${this.labels.attachedTextPlaceholder}
+          ></textarea>
+        </div>
+        <div
+          class="flex items-center justify-between px-3 py-2 border-t border-border"
+        >
+          <span class="text-xs text-muted-foreground"
+            >${this.labels.attachedTextHint}</span
+          >
+          <button
+            type="button"
+            class="compose-post-btn"
+            @click=${() => {
+              this._showAttachedText = false;
+            }}
+          >
+            ${this.labels.done}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderAltPanel() {
+    if (!this._showAltPanel) return nothing;
+    const attachment = this._attachments[this._altPanelIndex];
+    if (!attachment) return nothing;
+
+    return html`
+      <div class="compose-alt-panel">
+        <div
+          class="flex items-center gap-2.5 px-3 py-2.5 border-b border-border"
+        >
+          <button
+            type="button"
+            class="compose-attached-panel-back"
+            @click=${() => this._closeAltPanel()}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M11 3L6 8l5 5" />
+            </svg>
+          </button>
+          <span class="text-sm font-medium tracking-tight"
+            >${this.labels.addAltTitle}</span
+          >
+        </div>
+        <div class="compose-alt-preview">
+          <img
+            src=${attachment.previewUrl}
+            alt=""
+            class="compose-alt-preview-img"
+          />
+        </div>
+        <div class="flex-1 p-4 overflow-hidden flex flex-col">
+          <textarea
+            .value=${attachment.alt}
+            @input=${(e: Event) => this._onAltInput(e)}
+            class="compose-input compose-alt-textarea"
+            placeholder=${this.labels.altPlaceholder}
+            rows="3"
+          ></textarea>
+        </div>
+        <div
+          class="flex items-center justify-between px-3 py-2 border-t border-border"
+        >
+          <span class="text-xs text-muted-foreground"
+            >${this.labels.altHint}</span
+          >
+          <button
+            type="button"
+            class="compose-post-btn"
+            @click=${() => this._closeAltPanel()}
+          >
+            ${this.labels.done}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderAttachments() {
+    if (this._attachments.length === 0) return nothing;
+
+    return html`
+      <div class="compose-attachments">
+        ${this._attachments.map(
+          (a, i) => html`
+            <div class="compose-attachment">
+              <div class="compose-attachment-thumb">
+                <img
+                  src=${a.previewUrl}
+                  alt=""
+                  class="compose-attachment-img"
+                />
+                ${a.status === "pending" || a.status === "uploading"
+                  ? html`
+                      <div class="compose-attachment-overlay">
+                        <svg
+                          class="animate-spin size-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2.5"
+                          stroke-linecap="round"
+                        >
+                          <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                        </svg>
+                      </div>
+                    `
+                  : nothing}
+                ${a.status === "error"
+                  ? html`
+                      <div
+                        class="compose-attachment-overlay compose-attachment-error"
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                        >
+                          <circle cx="8" cy="8" r="6" />
+                          <path d="M10 6L6 10M6 6l4 4" />
+                        </svg>
+                      </div>
+                    `
+                  : nothing}
+                <button
+                  type="button"
+                  class="compose-attachment-remove"
+                  @click=${() => this._removeAttachment(i)}
+                >
+                  ✕
+                </button>
+              </div>
+              <button
+                type="button"
+                class=${classMap({
+                  "compose-attachment-alt": true,
+                  "compose-attachment-alt-set": a.alt.length > 0,
+                })}
+                @click=${() => this._openAltPanel(i)}
+              >
+                ${a.alt.length > 0 ? "ALT" : "+ ALT"}
+              </button>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  private _renderToolsRow() {
+    const hasAttached = this._attachedText.trim().length > 0;
+    return html`
+      <div class="compose-tools-row">
+        <!-- Media / Add -->
+        <button
+          type="button"
+          class=${classMap({
+            "compose-tool-btn": true,
+            "compose-tool-btn-active": this._attachments.length > 0,
+          })}
+          @click=${() => this._openFilePicker()}
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="2" y="3" width="14" height="12" rx="2.5" />
+            <circle cx="6.5" cy="7.5" r="1.5" />
+            <path d="M2 13l4-4c.6-.6 1.4-.6 2 0l4 4" />
+            <path d="M11 11l1.5-1.5c.6-.6 1.4-.6 2 0L16 11" />
+          </svg>
+          <span class="compose-tool-tip"
+            >${this._attachments.length > 0
+              ? this.labels.addMore
+              : this.labels.media}</span
+          >
+        </button>
+
+        <!-- Attached Text -->
+        <button
+          type="button"
+          class=${classMap({
+            "compose-tool-btn": true,
+            "compose-tool-btn-active": hasAttached,
+          })}
+          @click=${() => this._openAttachedText()}
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.3"
+            stroke-linecap="round"
+          >
+            <rect x="3" y="2" width="12" height="14" rx="2" />
+            <line x1="6" y1="6" x2="12" y2="6" />
+            <line x1="6" y1="9" x2="12" y2="9" />
+            <line x1="6" y1="12" x2="9.5" y2="12" />
+          </svg>
+          <span class="compose-tool-tip">${this.labels.attachedText}</span>
+        </button>
+
+        <!-- Score -->
+        <button
+          type="button"
+          class=${classMap({
+            "compose-tool-btn": true,
+            "compose-tool-btn-active": this._showRating,
+          })}
+          @click=${() => {
+            this._showRating = !this._showRating;
+          }}
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="3" y="12" width="2.8" height="3" rx="0.7" />
+            <rect x="7.6" y="8.5" width="2.8" height="6.5" rx="0.7" />
+            <rect x="12.2" y="5" width="2.8" height="10" rx="0.7" />
+          </svg>
+          <span class="compose-tool-tip">${this.labels.score}</span>
+        </button>
+
+        <!-- Title toggle (Note only) -->
+        ${this.format === "note"
+          ? html`
+              <div class="flex items-center gap-0.5">
+                <div class="compose-tool-sep"></div>
+                <button
+                  type="button"
+                  class=${classMap({
+                    "compose-tool-btn": true,
+                    "compose-tool-btn-active": this._showTitle,
+                  })}
+                  @click=${() => {
+                    this._showTitle = !this._showTitle;
+                  }}
+                >
+                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+                    <text
+                      x="3.5"
+                      y="14"
+                      font-family="serif"
+                      font-size="14"
+                      font-weight="400"
+                      fill="currentColor"
+                    >
+                      T
+                    </text>
+                  </svg>
+                  <span class="compose-tool-tip">${this.labels.title}</span>
+                </button>
+              </div>
+            `
+          : nothing}
+
+        <div class="flex-1"></div>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this._renderAttachedPanel()} ${this._renderAltPanel()}
+      <section class="compose-body">
+        ${this.format === "note"
+          ? this._renderNoteFields()
+          : this.format === "link"
+            ? this._renderLinkFields()
+            : this._renderQuoteFields()}
+        ${this._renderStarRating()} ${this._renderAttachedBadge()}
+        ${this._renderAttachments()}
+      </section>
+      ${this._renderToolsRow()}
+    `;
+  }
+}
+
+customElements.define("jant-compose-editor", JantComposeEditor);