@jant/core 0.3.27 → 0.3.28

package/src/ui/dash/posts/PostForm.tsx

@@ -0,0 +1,248 @@
+/**
+ * Post Form
+ *
+ * Server-rendered wrapper that feeds data/labels to `<jant-post-form>`.
+ * Provides SSR fallback skeleton while Lit hydrates.
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { FC } from "hono/jsx";
+import type { Post, Media, Collection } from "../../../types.js";
+import {
+  getMediaUrl,
+  getImageUrl,
+  getPublicUrlForProvider,
+} from "../../../lib/image.js";
+import { renderCollectionIcon } from "../../../lib/icons.js";
+
+export interface PostFormProps {
+  post?: Post;
+  action: string;
+  mediaAttachments?: Media[];
+  r2PublicUrl?: string;
+  imageTransformUrl?: string;
+  s3PublicUrl?: string;
+  collections?: Collection[];
+  postCollectionIds?: number[];
+  cancelHref?: string;
+}
+
+export const PostForm: FC<PostFormProps> = ({
+  post,
+  action,
+  mediaAttachments = [],
+  r2PublicUrl,
+  imageTransformUrl,
+  s3PublicUrl,
+  collections = [],
+  postCollectionIds = [],
+  cancelHref,
+}) => {
+  const { t } = useLingui();
+  const isEdit = Boolean(post);
+
+  const labels = JSON.stringify({
+    formatLabel: t({
+      message: "Format",
+      comment: "@context: Post form field - post format",
+    }),
+    noteOption: t({
+      message: "Note",
+      comment: "@context: Post format option",
+    }),
+    linkOption: t({
+      message: "Link",
+      comment: "@context: Post format option",
+    }),
+    quoteOption: t({
+      message: "Quote",
+      comment: "@context: Post format option",
+    }),
+    titleLabel: t({
+      message: "Title (optional)",
+      comment: "@context: Post form field",
+    }),
+    titlePlaceholder: t({
+      message: "Post title...",
+      comment: "@context: Post title placeholder",
+    }),
+    bodyLabel: t({
+      message: "Content",
+      comment: "@context: Post form field",
+    }),
+    bodyPlaceholder: t({
+      message: "What's on your mind?",
+      comment: "@context: Post content placeholder",
+    }),
+    urlLabel: t({
+      message: "URL (optional)",
+      comment: "@context: Post form field - source URL",
+    }),
+    urlPlaceholder: "https://...",
+    quoteTextLabel: t({
+      message: "Quote Text",
+      comment: "@context: Post form field - quoted text",
+    }),
+    quoteTextPlaceholder: t({
+      message: "The text being quoted...",
+      comment: "@context: Quote text placeholder",
+    }),
+    mediaLabel: t({
+      message: "Media",
+      comment: "@context: Post form field - media attachments",
+    }),
+    mediaAddButton: t({
+      message: "Add Media",
+      comment: "@context: Button to open media picker",
+    }),
+    mediaRemoveButton: t({
+      message: "Remove",
+      comment: "@context: Remove media attachment button",
+    }),
+    mediaEmptyLabel: t({
+      message: "No media selected yet.",
+      comment: "@context: Post form media empty state",
+    }),
+    statusLabel: t({
+      message: "Status",
+      comment: "@context: Post form field",
+    }),
+    statusPublished: t({
+      message: "Published",
+      comment: "@context: Post status option",
+    }),
+    statusDraft: t({
+      message: "Draft",
+      comment: "@context: Post status option",
+    }),
+    featuredLabel: t({
+      message: "Featured",
+      comment: "@context: Post form checkbox - mark as featured",
+    }),
+    pinnedLabel: t({
+      message: "Pinned",
+      comment: "@context: Post form checkbox - pin to top",
+    }),
+    collectionsLabel: t({
+      message: "Collections (optional)",
+      comment: "@context: Post form field - assign to collections",
+    }),
+    submitLabel: isEdit
+      ? t({
+          message: "Update",
+          comment: "@context: Button to update existing post",
+        })
+      : t({
+          message: "Publish",
+          comment: "@context: Button to publish new post",
+        }),
+    cancelLabel: t({
+      message: "Cancel",
+      comment: "@context: Button to cancel form",
+    }),
+    mediaDialogTitle: t({
+      message: "Select Media",
+      comment: "@context: Media picker dialog title",
+    }),
+    mediaDialogDone: t({
+      message: "Done",
+      comment: "@context: Close media picker button",
+    }),
+    mediaDialogLoading: t({
+      message: "Loading...",
+      comment: "@context: Loading state for media picker",
+    }),
+    submitSuccessMessage: isEdit
+      ? t({
+          message: "Post updated successfully.",
+          comment: "@context: Toast after editing post",
+        })
+      : t({
+          message: "Post published successfully.",
+          comment: "@context: Toast after creating post",
+        }),
+    submitErrorMessage: t({
+      message: "Failed to save post. Please try again.",
+      comment: "@context: Toast when post save fails",
+    }),
+  }).replace(/</g, "\\u003c");
+
+  const initial = JSON.stringify({
+    format: post?.format ?? "note",
+    title: post?.title ?? "",
+    body: post?.body ?? "",
+    url: post?.url ?? "",
+    quoteText: post?.quoteText ?? "",
+    status: post?.status ?? "published",
+    featured: post?.featured === 1,
+    pinned: post?.pinned === 1,
+    rating: post?.rating ?? 0,
+    collectionIds: postCollectionIds,
+    mediaIds: mediaAttachments.map((m) => m.id),
+  }).replace(/</g, "\\u003c");
+
+  const media = JSON.stringify(
+    mediaAttachments.map((m) => {
+      const pUrl = getPublicUrlForProvider(
+        m.provider,
+        r2PublicUrl,
+        s3PublicUrl,
+      );
+      const mediaUrl = getMediaUrl(m.storageKey, pUrl);
+      const thumbUrl = getImageUrl(mediaUrl, imageTransformUrl, {
+        width: 150,
+        quality: 80,
+        format: "auto",
+        fit: "cover",
+      });
+      return {
+        id: m.id,
+        thumbUrl,
+        alt: m.alt || m.originalName,
+      };
+    }),
+  ).replace(/</g, "\\u003c");
+
+  const collectionOptions = JSON.stringify(
+    collections.map((col) => ({
+      id: col.id,
+      title: col.title,
+      icon: col.icon,
+      iconHtml: renderCollectionIcon(col.icon, { size: 18 }),
+    })),
+  ).replace(/</g, "\\u003c");
+
+  const cancel = cancelHref ?? "/dash/posts";
+
+  return (
+    <jant-post-form
+      labels={labels}
+      initial={initial}
+      action={action}
+      cancel-href={cancel}
+      media={media}
+      collections={collectionOptions}
+      media-picker-url="/dash/media/picker"
+      is-edit={isEdit ? "true" : undefined}
+    >
+      <div class="flex flex-col gap-4 max-w-2xl">
+        <div class="field">
+          <div class="label skel-label"></div>
+          <div class="input skel-input"></div>
+        </div>
+        <div class="field">
+          <div class="label skel-label"></div>
+          <div class="textarea skel-textarea"></div>
+        </div>
+        <div class="field">
+          <div class="label skel-label"></div>
+          <div class="input skel-input"></div>
+        </div>
+        <div class="flex gap-2">
+          <div class="btn skel-input min-w-24"></div>
+          <div class="btn-outline skel-input min-w-20"></div>
+        </div>
+      </div>
+    </jant-post-form>
+  );
+};

package/src/ui/dash/settings/AccountContent.tsx

@@ -17,37 +17,28 @@ export function AccountContent({ userName }: { userName: string }) {
       </h1>
       <SettingsNav currentTab="account" />
 
-      <div class="flex flex-col gap-6 max-w-lg">
+      <div class="flex flex-col max-w-lg">
         <form
           data-signals={profileSignals}
           data-on:submit__prevent="@post('/dash/settings/account')"
           data-indicator="_profileLoading"
         >
-          <div class="card">
-            <header>
-              <h2>
+          <h2 class="text-lg font-semibold mb-4">
+            {t({
+              message: "Profile",
+              comment: "@context: Account settings section heading",
+            })}
+          </h2>
+          <div class="flex flex-col gap-4">
+            <div class="field">
+              <label class="label">
                 {t({
-                  message: "Profile",
-                  comment: "@context: Account settings section heading",
+                  message: "Name",
+                  comment: "@context: Account settings form field",
                 })}
-              </h2>
-            </header>
-            <section class="flex flex-col gap-4">
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Name",
-                    comment: "@context: Account settings form field",
-                  })}
-                </label>
-                <input
-                  type="text"
-                  data-bind="userName"
-                  class="input"
-                  required
-                />
-              </div>
-            </section>
+              </label>
+              <input type="text" data-bind="userName" class="input" required />
+            </div>
           </div>
 
           <button
@@ -77,71 +68,69 @@ export function AccountContent({ userName }: { userName: string }) {
           </button>
         </form>
 
+        <hr class="my-8" />
+
         <form
           data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
           data-on:submit__prevent="@post('/dash/settings/password')"
           data-indicator="_passwordLoading"
         >
-          <div class="card">
-            <header>
-              <h2>
+          <h2 class="text-lg font-semibold mb-4">
+            {t({
+              message: "Change Password",
+              comment: "@context: Settings section heading",
+            })}
+          </h2>
+          <div class="flex flex-col gap-4">
+            <div class="field">
+              <label class="label">
                 {t({
-                  message: "Change Password",
-                  comment: "@context: Settings section heading",
+                  message: "Current Password",
+                  comment: "@context: Password form field",
                 })}
-              </h2>
-            </header>
-            <section class="flex flex-col gap-4">
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Current Password",
-                    comment: "@context: Password form field",
-                  })}
-                </label>
-                <input
-                  type="password"
-                  data-bind="currentPassword"
-                  class="input"
-                  required
-                  autocomplete="current-password"
-                />
-              </div>
+              </label>
+              <input
+                type="password"
+                data-bind="currentPassword"
+                class="input"
+                required
+                autocomplete="current-password"
+              />
+            </div>
 
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "New Password",
-                    comment: "@context: Password form field",
-                  })}
-                </label>
-                <input
-                  type="password"
-                  data-bind="newPassword"
-                  class="input"
-                  required
-                  minlength={8}
-                  autocomplete="new-password"
-                />
-              </div>
+            <div class="field">
+              <label class="label">
+                {t({
+                  message: "New Password",
+                  comment: "@context: Password form field",
+                })}
+              </label>
+              <input
+                type="password"
+                data-bind="newPassword"
+                class="input"
+                required
+                minlength={8}
+                autocomplete="new-password"
+              />
+            </div>
 
-              <div class="field">
-                <label class="label">
-                  {t({
-                    message: "Confirm New Password",
-                    comment: "@context: Password form field",
-                  })}
-                </label>
-                <input
-                  type="password"
-                  data-bind="confirmPassword"
-                  class="input"
-                  required
-                  minlength={8}
-                  autocomplete="new-password"
-                />
-              </div>
-            </section>
+            <div class="field">
+              <label class="label">
+                {t({
+                  message: "Confirm New Password",
+                  comment: "@context: Password form field",
+                })}
+              </label>
+              <input
+                type="password"
+                data-bind="confirmPassword"
+                class="input"
+                required
+                minlength={8}
+                autocomplete="new-password"
+              />
+            </div>
           </div>
 
           <button