@jant/core 0.3.23 → 0.3.25

package/src/ui/compose/ComposeDialog.tsx

@@ -0,0 +1,395 @@
+/**
+ * Compose Dialog
+ *
+ * Full-screen compose dialog for quick post creation.
+ * Rendered server-side as part of SiteLayout for authenticated users.
+ */
+
+import type { FC } from "hono/jsx";
+import type { Collection } from "../../types.js";
+import { useLingui } from "@lingui/react/macro";
+
+export interface ComposeDialogProps {
+  collections?: Collection[];
+}
+
+export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
+  const { t } = useLingui();
+
+  const signals = JSON.stringify({
+    format: "note",
+    title: "",
+    body: "",
+    url: "",
+    quoteText: "",
+    status: "published",
+    featured: false,
+    pinned: false,
+    rating: 0,
+    collectionId: 0,
+    mediaIds: [],
+    _composeLoading: false,
+    _showRating: false,
+    _showCollection: false,
+  }).replace(/</g, "\\u003c");
+
+  return (
+    <dialog
+      id="compose-dialog"
+      class="compose-dialog backdrop:bg-black/50"
+      onclick="event.target === this && this.close()"
+    >
+      <div class="compose-dialog-inner">
+        {/* Header */}
+        <header class="compose-dialog-header">
+          <button
+            type="button"
+            class="compose-dialog-close"
+            onclick="this.closest('dialog').close()"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M18 6 6 18" />
+              <path d="M6 6l12 12" />
+            </svg>
+          </button>
+          <h2 class="compose-dialog-title">
+            {t({
+              message: "New Post",
+              comment: "@context: Compose dialog title",
+            })}
+          </h2>
+          <div class="w-5" />
+        </header>
+
+        {/* Form */}
+        <section class="compose-dialog-body">
+          <form
+            data-signals={signals}
+            data-on:submit__prevent="@post('/compose')"
+            data-indicator="_composeLoading"
+            class="flex flex-col gap-3"
+          >
+            {/* Format tabs */}
+            <div class="compose-format-tabs">
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'note'"
+                data-on:click="$format = 'note'"
+              >
+                {t({
+                  message: "Note",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'link'"
+                data-on:click="$format = 'link'"
+              >
+                {t({
+                  message: "Link",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'quote'"
+                data-on:click="$format = 'quote'"
+              >
+                {t({
+                  message: "Quote",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+            </div>
+
+            {/* Title input */}
+            <input
+              type="text"
+              data-bind="title"
+              class="compose-title-input"
+              placeholder={t({
+                message: "Title (optional)",
+                comment: "@context: Compose title placeholder",
+              })}
+            />
+
+            {/* Body textarea */}
+            <textarea
+              data-bind="body"
+              class="compose-body-input"
+              placeholder={t({
+                message: "What's on your mind?",
+                comment: "@context: Compose body placeholder",
+              })}
+              rows={4}
+            />
+
+            {/* URL input (link/quote) */}
+            <div data-show="$format === 'link' || $format === 'quote'">
+              <input
+                type="url"
+                data-bind="url"
+                class="input text-sm"
+                placeholder="https://..."
+              />
+            </div>
+
+            {/* Quote text (quote format) */}
+            <div data-show="$format === 'quote'">
+              <textarea
+                data-bind="quoteText"
+                class="textarea text-sm"
+                placeholder={t({
+                  message: "The text being quoted...",
+                  comment: "@context: Compose quote text placeholder",
+                })}
+                rows={2}
+              />
+            </div>
+
+            {/* Rating picker (toggleable) */}
+            <div data-show="$_showRating" class="field">
+              <label class="label text-sm">
+                {t({
+                  message: "Rating",
+                  comment: "@context: Compose rating field",
+                })}
+              </label>
+              <select data-bind="rating" class="select text-sm">
+                <option value="0">
+                  {t({
+                    message: "None",
+                    comment: "@context: No rating selected",
+                  })}
+                </option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+              </select>
+            </div>
+
+            {/* Collection picker (toggleable) */}
+            {collections && collections.length > 0 && (
+              <div data-show="$_showCollection" class="field">
+                <label class="label text-sm">
+                  {t({
+                    message: "Collection",
+                    comment: "@context: Compose collection field",
+                  })}
+                </label>
+                <select data-bind="collectionId" class="select text-sm">
+                  <option value="0">
+                    {t({
+                      message: "None",
+                      comment: "@context: No collection selected",
+                    })}
+                  </option>
+                  {collections.map((col) => (
+                    <option key={col.id} value={col.id}>
+                      {col.title}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            {/* Toolbar */}
+            <div class="compose-toolbar">
+              <div class="flex gap-1">
+                {/* Media button */}
+                <button
+                  type="button"
+                  class="compose-toolbar-btn"
+                  title={t({
+                    message: "Add Media",
+                    comment: "@context: Compose toolbar - add media",
+                  })}
+                  data-on:click="document.getElementById('compose-media-picker').showModal(); fetch('/dash/media/picker').then(r => r.text()).then(html => document.getElementById('compose-media-grid').innerHTML = html)"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    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>
+                </button>
+
+                {/* Rating toggle */}
+                <button
+                  type="button"
+                  class="compose-toolbar-btn"
+                  title={t({
+                    message: "Rating",
+                    comment: "@context: Compose toolbar - toggle rating",
+                  })}
+                  data-on:click="$_showRating = !$_showRating"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                  </svg>
+                </button>
+
+                {/* Collection toggle */}
+                {collections && collections.length > 0 && (
+                  <button
+                    type="button"
+                    class="compose-toolbar-btn"
+                    title={t({
+                      message: "Collection",
+                      comment: "@context: Compose toolbar - toggle collection",
+                    })}
+                    data-on:click="$_showCollection = !$_showCollection"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Footer: checkboxes + submit */}
+            <div class="compose-dialog-footer">
+              <div class="flex gap-3">
+                <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    class="checkbox"
+                    data-bind="featured"
+                  />
+                  {t({
+                    message: "Featured",
+                    comment: "@context: Compose checkbox - mark as featured",
+                  })}
+                </label>
+                <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <input type="checkbox" class="checkbox" data-bind="pinned" />
+                  {t({
+                    message: "Pinned",
+                    comment: "@context: Compose checkbox - pin to top",
+                  })}
+                </label>
+              </div>
+              <div class="flex gap-2">
+                <button
+                  type="button"
+                  class="btn-outline text-sm"
+                  data-attr-disabled="$_composeLoading"
+                  data-on:click="$status = 'draft'; document.querySelector('#compose-dialog form').requestSubmit()"
+                >
+                  <span data-show="!$_composeLoading">
+                    {t({
+                      message: "Draft",
+                      comment: "@context: Compose button - save as draft",
+                    })}
+                  </span>
+                  <span data-show="$_composeLoading">...</span>
+                </button>
+                <button
+                  type="submit"
+                  class="btn text-sm"
+                  data-attr-disabled="$_composeLoading"
+                >
+                  <span data-show="!$_composeLoading">
+                    {t({
+                      message: "Post",
+                      comment: "@context: Compose button - publish post",
+                    })}
+                  </span>
+                  <span data-show="$_composeLoading">
+                    {t({
+                      message: "Posting...",
+                      comment: "@context: Compose loading text while posting",
+                    })}
+                  </span>
+                </button>
+              </div>
+            </div>
+          </form>
+        </section>
+      </div>
+
+      {/* Nested media picker dialog */}
+      <dialog
+        id="compose-media-picker"
+        class="p-6 rounded-lg max-w-2xl w-full backdrop:bg-black/50"
+        onclick="event.target === this && this.close()"
+      >
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold">
+            {t({
+              message: "Select Media",
+              comment: "@context: Media picker dialog title",
+            })}
+          </h2>
+          <button
+            type="button"
+            class="btn-outline text-sm"
+            onclick="this.closest('dialog').close()"
+          >
+            {t({
+              message: "Done",
+              comment: "@context: Close media picker button",
+            })}
+          </button>
+        </div>
+        <div
+          id="compose-media-grid"
+          class="grid grid-cols-4 gap-2 max-h-96 overflow-y-auto"
+        >
+          <p class="text-muted-foreground text-sm col-span-4">
+            {t({
+              message: "Loading...",
+              comment: "@context: Loading state for media picker",
+            })}
+          </p>
+        </div>
+      </dialog>
+    </dialog>
+  );
+};

package/src/ui/compose/ComposePrompt.tsx

@@ -0,0 +1,55 @@
+/**
+ * Compose Prompt
+ *
+ * "What's new?" prompt bar at the top of the content area.
+ * Clicking it opens the compose dialog.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+
+export const ComposePrompt: FC = () => {
+  const { t } = useLingui();
+
+  return (
+    <div class="compose-prompt">
+      <button
+        type="button"
+        class="compose-prompt-trigger"
+        onclick="document.getElementById('compose-dialog').showModal()"
+      >
+        <span class="compose-prompt-avatar">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 1 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+          </svg>
+        </span>
+        <span class="compose-prompt-text">
+          {t({
+            message: "What's new?",
+            comment: "@context: Compose prompt placeholder text",
+          })}
+        </span>
+      </button>
+      <button
+        type="button"
+        class="compose-prompt-post-btn"
+        onclick="document.getElementById('compose-dialog').showModal()"
+      >
+        {t({
+          message: "Post",
+          comment: "@context: Compose prompt post button",
+        })}
+      </button>
+    </div>
+  );
+};

package/src/ui/dash/FormatBadge.tsx

@@ -0,0 +1,28 @@
+/**
+ * Format Badge Component
+ *
+ * Displays a badge indicating the format of a post (note, link, quote).
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { Format } from "../../types.js";
+
+export interface FormatBadgeProps {
+  type: Format;
+}
+
+export const FormatBadge: FC<FormatBadgeProps> = ({ type }) => {
+  const { t } = useLingui();
+
+  const labels: Record<Format, string> = {
+    note: t({ message: "Note", comment: "@context: Post format badge - note" }),
+    link: t({ message: "Link", comment: "@context: Post format badge - link" }),
+    quote: t({
+      message: "Quote",
+      comment: "@context: Post format badge - quote",
+    }),
+  };
+
+  return <span class="badge-outline">{labels[type]}</span>;
+};

package/src/{theme/components → ui/dash}/PageForm.tsx

@@ -1,15 +1,15 @@
 /**
  * Page Creation/Edit Form
  *
- * For managing custom pages (posts with type="page")
+ * For managing standalone pages (about, now, etc.)
  */
 
 import type { FC } from "hono/jsx";
-import type { Post } from "../../types.js";
+import type { Page } from "../../types.js";
 import { useLingui } from "@lingui/react/macro";
 
 export interface PageFormProps {
-  page?: Post;
+  page?: Page;
   action: string;
   cancelUrl?: string;
 }
@@ -24,9 +24,9 @@ export const PageForm: FC<PageFormProps> = ({
 
   const signals = JSON.stringify({
     title: page?.title ?? "",
-    path: page?.path ?? "",
-    content: page?.content ?? "",
-    visibility: page?.visibility ?? "unlisted",
+    slug: page?.slug ?? "",
+    body: page?.body ?? "",
+    status: page?.status ?? "published",
   }).replace(/</g, "\\u003c");
 
   return (
@@ -58,25 +58,25 @@ export const PageForm: FC<PageFormProps> = ({
         />
       </div>
 
-      {/* Path */}
+      {/* Slug */}
       <div class="field">
         <label class="label">
           {t({
-            message: "Path",
-            comment: "@context: Page form field label - URL path",
+            message: "Slug",
+            comment: "@context: Page form field label - URL slug",
           })}
         </label>
         <div class="flex items-center gap-2">
           <span class="text-muted-foreground">/</span>
           <input
             type="text"
-            data-bind="path"
+            data-bind="slug"
             class="input flex-1"
             placeholder="about"
             pattern="[a-z0-9\-]+"
             title={t({
               message: "Lowercase letters, numbers, and hyphens only",
-              comment: "@context: Page path validation message",
+              comment: "@context: Page slug validation message",
             })}
             required
           />
@@ -85,12 +85,12 @@ export const PageForm: FC<PageFormProps> = ({
           {t({
             message:
               "The URL path for this page. Use lowercase letters, numbers, and hyphens.",
-            comment: "@context: Page path helper text",
+            comment: "@context: Page slug helper text",
           })}
         </p>
       </div>
 
-      {/* Content */}
+      {/* Body */}
       <div class="field">
         <label class="label">
           {t({
@@ -99,7 +99,7 @@ export const PageForm: FC<PageFormProps> = ({
           })}
         </label>
         <textarea
-          data-bind="content"
+          data-bind="body"
           class="textarea min-h-48"
           placeholder={t({
             message: "Page content (Markdown supported)...",
@@ -107,11 +107,11 @@ export const PageForm: FC<PageFormProps> = ({
           })}
           required
         >
-          {page?.content ?? ""}
+          {page?.body ?? ""}
         </textarea>
       </div>
 
-      {/* Visibility */}
+      {/* Status */}
       <div class="field">
         <label class="label">
           {t({
@@ -119,17 +119,17 @@ export const PageForm: FC<PageFormProps> = ({
             comment: "@context: Page form field label - publish status",
           })}
         </label>
-        <select data-bind="visibility" class="select">
+        <select data-bind="status" class="select">
           <option
-            value="unlisted"
-            selected={page?.visibility === "unlisted" || !page}
+            value="published"
+            selected={page?.status === "published" || !page}
           >
             {t({
               message: "Published",
               comment: "@context: Page status option - published",
             })}
           </option>
-          <option value="draft" selected={page?.visibility === "draft"}>
+          <option value="draft" selected={page?.status === "draft"}>
             {t({
               message: "Draft",
               comment: "@context: Page status option - draft",
@@ -139,7 +139,7 @@ export const PageForm: FC<PageFormProps> = ({
         <p class="text-xs text-muted-foreground mt-1">
           {t({
             message:
-              "Published pages are accessible via their path. Drafts are not visible.",
+              "Published pages are accessible via their slug. Drafts are not visible.",
             comment: "@context: Page status helper text",
           })}
         </p>