@jant/core 0.3.27 → 0.3.28

package/src/ui/components/jant-post-form.ts

@@ -0,0 +1,290 @@
+/**
+ * Dashboard Post Form
+ *
+ * Light DOM Lit component that manages post create/edit form state.
+ * Dispatches `jant:post-submit` for the bridge to handle networking.
+ */
+
+import { LitElement } from "lit";
+import type {
+  PostFormInitial,
+  PostFormLabels,
+  PostCollectionOption,
+  PostMediaItem,
+  PostSubmitDetail,
+  PostFormat,
+  PostStatus,
+} from "./post-form-types.js";
+import { renderPostForm } from "./post-form-template.js";
+
+const DEFAULT_INITIAL: PostFormInitial = {
+  format: "note",
+  title: "",
+  body: "",
+  url: "",
+  quoteText: "",
+  status: "published",
+  featured: false,
+  pinned: false,
+  rating: 0,
+  collectionIds: [],
+  mediaIds: [],
+};
+
+const EMPTY_LABELS: PostFormLabels = {
+  formatLabel: "",
+  noteOption: "",
+  linkOption: "",
+  quoteOption: "",
+  titleLabel: "",
+  titlePlaceholder: "",
+  bodyLabel: "",
+  bodyPlaceholder: "",
+  urlLabel: "",
+  urlPlaceholder: "",
+  quoteTextLabel: "",
+  quoteTextPlaceholder: "",
+  mediaLabel: "",
+  mediaAddButton: "",
+  mediaRemoveButton: "",
+  mediaEmptyLabel: "",
+  statusLabel: "",
+  statusPublished: "",
+  statusDraft: "",
+  featuredLabel: "",
+  pinnedLabel: "",
+  collectionsLabel: "",
+  submitLabel: "",
+  cancelLabel: "",
+  mediaDialogTitle: "",
+  mediaDialogDone: "",
+  mediaDialogLoading: "",
+  submitSuccessMessage: "",
+  submitErrorMessage: "",
+};
+
+function parseJson<T>(value: unknown, fallback: T): T {
+  if (typeof value === "string") {
+    try {
+      return JSON.parse(value) as T;
+    } catch {
+      return fallback;
+    }
+  }
+  if (value && typeof value === "object") {
+    return value as T;
+  }
+  return fallback;
+}
+
+export class JantPostForm extends LitElement {
+  static properties = {
+    labels: { type: Object },
+    initial: { type: Object },
+    collections: { type: Array },
+    media: { type: Array },
+    action: { type: String },
+    cancelHref: { type: String, attribute: "cancel-href" },
+    mediaPickerUrl: { type: String, attribute: "media-picker-url" },
+    isEdit: { type: Boolean, attribute: "is-edit" },
+    _format: { state: true },
+    _title: { state: true },
+    _body: { state: true },
+    _url: { state: true },
+    _quoteText: { state: true },
+    _status: { state: true },
+    _featured: { state: true },
+    _pinned: { state: true },
+    _rating: { state: true },
+    _collectionIds: { state: true },
+    _mediaIds: { state: true },
+    _loading: { state: true },
+  };
+
+  declare labels: PostFormLabels;
+  declare initial: PostFormInitial;
+  declare collections: PostCollectionOption[];
+  declare media: PostMediaItem[];
+  declare action: string;
+  declare cancelHref: string;
+  declare mediaPickerUrl: string;
+  declare isEdit: boolean;
+  declare _format: PostFormat;
+  declare _title: string;
+  declare _body: string;
+  declare _url: string;
+  declare _quoteText: string;
+  declare _status: PostStatus;
+  declare _featured: boolean;
+  declare _pinned: boolean;
+  declare _rating: number;
+  declare _collectionIds: number[];
+  declare _mediaIds: string[];
+  declare _loading: boolean;
+
+  #initialized = false;
+
+  createRenderRoot() {
+    this.innerHTML = "";
+    return this;
+  }
+
+  constructor() {
+    super();
+    this.labels = { ...EMPTY_LABELS };
+    this.initial = { ...DEFAULT_INITIAL };
+    this.collections = [];
+    this.media = [];
+    this.action = "";
+    this.cancelHref = "/dash/posts";
+    this.mediaPickerUrl = "/dash/media/picker";
+    this.isEdit = false;
+    this._format = "note";
+    this._title = "";
+    this._body = "";
+    this._url = "";
+    this._quoteText = "";
+    this._status = "published";
+    this._featured = false;
+    this._pinned = false;
+    this._rating = 0;
+    this._collectionIds = [];
+    this._mediaIds = [];
+    this._loading = false;
+  }
+
+  protected willUpdate(changed: Map<string, unknown>): void {
+    if (typeof this.labels === "string") {
+      this.labels = parseJson<PostFormLabels>(this.labels, { ...EMPTY_LABELS });
+    }
+    if (typeof this.initial === "string") {
+      this.initial = parseJson<PostFormInitial>(this.initial, {
+        ...DEFAULT_INITIAL,
+      });
+    }
+    if (typeof this.collections === "string") {
+      this.collections = parseJson<PostCollectionOption[]>(
+        this.collections,
+        [],
+      );
+    }
+    if (typeof this.media === "string") {
+      this.media = parseJson<PostMediaItem[]>(this.media, []);
+    }
+
+    if (!this.#initialized || changed.has("initial")) this.#applyInitial();
+  }
+
+  set loading(value: boolean) {
+    this._loading = value;
+  }
+
+  get loading(): boolean {
+    return this._loading;
+  }
+
+  set mediaIds(ids: string[]) {
+    this._mediaIds = [...ids];
+  }
+
+  get mediaIds(): string[] {
+    return [...this._mediaIds];
+  }
+
+  get #mediaDialog(): HTMLDialogElement | null {
+    return this.querySelector("#post-media-picker");
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.closeMediaPicker();
+  }
+
+  #applyInitial() {
+    const init = this.initial ?? DEFAULT_INITIAL;
+    this._format = init.format ?? "note";
+    this._title = init.title ?? "";
+    this._body = init.body ?? "";
+    this._url = init.url ?? "";
+    this._quoteText = init.quoteText ?? "";
+    this._status = init.status ?? "published";
+    this._featured = !!init.featured;
+    this._pinned = !!init.pinned;
+    this._rating = init.rating ?? 0;
+    this._collectionIds = [...(init.collectionIds ?? [])];
+    this._mediaIds = [...(init.mediaIds ?? [])];
+    this.#initialized = true;
+  }
+
+  handleInput(field: "_title" | "_body" | "_url" | "_quoteText", e: Event) {
+    const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+    (this as unknown as Record<string, string>)[field] = target.value;
+  }
+
+  toggleCollection(id: number) {
+    this._collectionIds = this._collectionIds.includes(id)
+      ? this._collectionIds.filter((cid) => cid !== id)
+      : [...this._collectionIds, id];
+  }
+
+  removeMedia(id: string) {
+    this._mediaIds = this._mediaIds.filter((mid) => mid !== id);
+  }
+
+  openMediaPicker() {
+    const dialog = this.#mediaDialog;
+    if (!dialog) return;
+    dialog.showModal();
+    this.dispatchEvent(
+      new CustomEvent("jant:post-load-media", {
+        bubbles: true,
+        detail: {
+          endpoint: this.mediaPickerUrl,
+          selectedIds: [...this._mediaIds],
+        },
+      }),
+    );
+  }
+
+  closeMediaPicker() {
+    this.#mediaDialog?.close();
+  }
+
+  handleSubmit(e: Event) {
+    e.preventDefault();
+    if (this._loading || !this.action) return;
+    const detail: PostSubmitDetail = {
+      endpoint: this.action,
+      isEdit: this.isEdit,
+      data: {
+        format: this._format,
+        title: this._title.trim(),
+        body: this._body,
+        status: this._status,
+        featured: this._featured,
+        pinned: this._pinned,
+        url: this._url.trim(),
+        quoteText: this._quoteText.trim(),
+        rating: this._rating,
+        collectionIds: [...this._collectionIds],
+        mediaIds: [...this._mediaIds],
+      },
+      messages: {
+        success: this.labels.submitSuccessMessage,
+        error: this.labels.submitErrorMessage,
+      },
+    };
+    this.dispatchEvent(
+      new CustomEvent<PostSubmitDetail>("jant:post-submit", {
+        bubbles: true,
+        detail,
+      }),
+    );
+  }
+
+  render() {
+    return renderPostForm(this);
+  }
+}
+
+customElements.define("jant-post-form", JantPostForm);

package/src/ui/components/jant-settings-avatar.ts

@@ -0,0 +1,231 @@
+/**
+ * Settings Avatar Section
+ *
+ * Handles avatar preview, upload button, remove button,
+ * and "display in header" toggle with dirty tracking.
+ *
+ * Upload is handled by the existing avatar-upload.ts script
+ * via `[data-avatar-upload]` event delegation (Light DOM).
+ * Remove dispatches `jant:avatar-remove` for the bridge.
+ *
+ * Light DOM only — BaseCoat and Tailwind classes apply directly.
+ */
+
+import { LitElement, html, nothing } from "lit";
+import type { SettingsLabels } from "./settings-types.js";
+
+export class JantSettingsAvatar extends LitElement {
+  static properties = {
+    avatarUrl: { type: String, attribute: "avatar-url" },
+    showInHeader: { type: Boolean, attribute: "show-in-header" },
+    labels: { type: Object },
+    _showInHeader: { state: true },
+    _origShowInHeader: { state: true },
+    _dirty: { state: true },
+    _loading: { state: true },
+    _removeLoading: { state: true },
+  };
+
+  declare avatarUrl: string;
+  declare showInHeader: boolean;
+  declare labels: SettingsLabels;
+  declare _showInHeader: boolean;
+  declare _origShowInHeader: boolean;
+  declare _dirty: boolean;
+  declare _loading: boolean;
+  declare _removeLoading: boolean;
+
+  createRenderRoot() {
+    this.innerHTML = "";
+    return this;
+  }
+
+  constructor() {
+    super();
+    this.avatarUrl = "";
+    this.showInHeader = false;
+    this.labels = {} as SettingsLabels;
+    this._showInHeader = false;
+    this._origShowInHeader = false;
+    this._dirty = false;
+    this._loading = false;
+    this._removeLoading = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._showInHeader = this.showInHeader;
+    this._origShowInHeader = this.showInHeader;
+  }
+
+  /** Called by bridge after successful display save */
+  saved() {
+    this._origShowInHeader = this._showInHeader;
+    this._dirty = false;
+    this._loading = false;
+  }
+
+  /** Called by bridge on save error */
+  saveError() {
+    this._loading = false;
+  }
+
+  private _toggleDisplay() {
+    this._showInHeader = !this._showInHeader;
+    this._dirty = this._showInHeader !== this._origShowInHeader;
+  }
+
+  private _cancelDisplay() {
+    this._showInHeader = this._origShowInHeader;
+    this._dirty = false;
+  }
+
+  private _saveDisplay() {
+    if (this._loading || !this._dirty) return;
+    this._loading = true;
+    this.dispatchEvent(
+      new CustomEvent("jant:settings-save", {
+        bubbles: true,
+        detail: {
+          endpoint: "/dash/settings/avatar/display",
+          data: { showHeaderAvatar: this._showInHeader ? "true" : "" },
+          section: "avatar-display",
+        },
+      }),
+    );
+  }
+
+  private _removeAvatar() {
+    if (this._removeLoading) return;
+    this._removeLoading = true;
+    this.dispatchEvent(
+      new CustomEvent("jant:avatar-remove", {
+        bubbles: true,
+        detail: { endpoint: "/dash/settings/avatar/remove" },
+      }),
+    );
+  }
+
+  private _renderPreview() {
+    if (this.avatarUrl) {
+      return html`<img
+        src=${this.avatarUrl}
+        alt=""
+        class="rounded-full object-cover size-16"
+      />`;
+    }
+    return html`
+      <div
+        class="rounded-full bg-muted flex items-center justify-center text-muted-foreground size-16"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+          <circle cx="9" cy="9" r="2" />
+          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+        </svg>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div>
+        <h2 class="text-lg font-semibold mb-4">${this.labels.blogAvatar}</h2>
+        <div class="flex flex-col gap-4">
+          <div class="flex items-center gap-4">
+            ${this._renderPreview()}
+            <div class="flex flex-col gap-2">
+              <form
+                action="/dash/settings/avatar"
+                method="post"
+                enctype="multipart/form-data"
+                class="inline"
+              >
+                <label class="btn text-sm cursor-pointer">
+                  ${this.labels.uploadAvatar}
+                  <input
+                    type="file"
+                    name="file"
+                    accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml"
+                    class="hidden"
+                    data-avatar-upload
+                    data-text-processing=${this.labels.processing}
+                    data-text-uploading=${this.labels.uploading}
+                    data-text-error=${this.labels.uploadError}
+                  />
+                </label>
+              </form>
+              ${this.avatarUrl
+                ? html`
+                    <button
+                      type="button"
+                      class="btn-outline text-sm"
+                      ?disabled=${this._removeLoading}
+                      @click=${this._removeAvatar}
+                    >
+                      ${this.labels.remove}
+                    </button>
+                  `
+                : nothing}
+            </div>
+          </div>
+          <p class="text-sm text-muted-foreground">${this.labels.avatarHelp}</p>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              class="checkbox"
+              .checked=${this._showInHeader}
+              @change=${this._toggleDisplay}
+            />
+            <span>${this.labels.displayInHeader}</span>
+          </label>
+          <div class="flex gap-2 mt-4">
+            <button
+              type="button"
+              class="btn"
+              ?disabled=${this._loading || !this._dirty}
+              @click=${this._saveDisplay}
+            >
+              ${this._loading
+                ? html`<svg
+                    class="animate-spin size-4"
+                    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"
+                    role="status"
+                  >
+                    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                  </svg>`
+                : nothing}
+              ${this.labels.save}
+            </button>
+            <button
+              type="button"
+              class="btn-outline"
+              ?disabled=${this._loading || !this._dirty}
+              @click=${this._cancelDisplay}
+            >
+              ${this.labels.cancel}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("jant-settings-avatar", JantSettingsAvatar);