@jant/core 0.3.35 → 0.3.37

package/src/ui/compose/ComposeDialog.tsx

@@ -15,9 +15,22 @@ import { useLingui } from "@lingui/react/macro";
 
 export interface ComposeDialogProps {
   collections?: Collection[];
+  uploadMaxFileSize?: number;
 }
 
-export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
+export interface ComposeFormProps extends ComposeDialogProps {
+  pageMode?: boolean;
+  closeHref?: string;
+  autoRestoreDraft?: boolean;
+}
+
+export const ComposeForm: FC<ComposeFormProps> = ({
+  collections,
+  uploadMaxFileSize,
+  pageMode = false,
+  closeHref,
+  autoRestoreDraft = false,
+}) => {
   const { t } = useLingui();
 
   const labels = JSON.stringify({
@@ -70,7 +83,7 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       comment: "@context: Compose quote source link placeholder",
     }),
     attachedText: t({
-      message: "Attached Text",
+      message: "Text attachment",
       comment: "@context: Attached text panel title",
     }),
     attachedTextPlaceholder: t({
@@ -90,9 +103,13 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       message: "Media",
       comment: "@context: Compose toolbar - media tooltip",
     }),
-    score: t({
-      message: "Score",
-      comment: "@context: Compose toolbar - score tooltip",
+    rate: t({
+      message: "Rate",
+      comment: "@context: Compose toolbar - rate tooltip",
+    }),
+    emoji: t({
+      message: "Emoji",
+      comment: "@context: Compose toolbar - emoji picker tooltip",
     }),
     title: t({
       message: "Title",
@@ -107,8 +124,14 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       comment: "@context: Compose collection combobox search placeholder",
     }),
     noCollections: t({
-      message: "No collections found.",
-      comment: "@context: Compose collection combobox empty state",
+      message: "No matching collections.",
+      comment:
+        "@context: Compose collection combobox empty state when search has no results",
+    }),
+    emptyCollections: t({
+      message: "Create a collection to get started.",
+      comment:
+        "@context: Compose collection combobox empty state when no collections exist",
     }),
     post: t({
       message: "Post",
@@ -127,7 +150,7 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       comment: "@context: Alt text textarea placeholder",
     }),
     altHint: t({
-      message: "Alt text improves accessibility",
+      message: "Helps screen readers describe the image",
       comment: "@context: Hint text in alt text panel",
     }),
     addMore: t({
@@ -142,6 +165,203 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       message: "Published!",
       comment: "@context: Toast shown after successful deferred publish",
     }),
+    view: t({
+      message: "View",
+      comment: "@context: Toast action button to view the published post",
+    }),
+    retryAll: t({
+      message: "Tap to retry",
+      comment:
+        "@context: Label on failed upload overlay button, tells user tapping retries the upload",
+    }),
+    editPost: t({
+      message: "Edit post",
+      comment: "@context: Compose dialog header title in edit mode",
+    }),
+    update: t({
+      message: "Done",
+      comment: "@context: Compose button - update existing post",
+    }),
+    confirmCloseTitle: t({
+      message: "Save to drafts?",
+      comment: "@context: Confirm close action sheet title",
+    }),
+    confirmCloseSubtitle: t({
+      message: "Save to drafts to edit and post at a later time.",
+      comment: "@context: Confirm close action sheet subtitle",
+    }),
+    confirmCloseSave: t({
+      message: "Save",
+      comment: "@context: Confirm close action sheet - save draft button",
+    }),
+    confirmCloseCancel: t({
+      message: "Cancel",
+      comment:
+        "@context: Confirm close action sheet - cancel and return to editor",
+    }),
+    confirmCloseDiscard: t({
+      message: "Don't save",
+      comment: "@context: Confirm close action sheet - discard button",
+    }),
+    confirmEditTitle: t({
+      message: "You have unsaved changes",
+      comment:
+        "@context: Confirm close action sheet title when editing a published post",
+    }),
+    confirmEditSubtitle: t({
+      message: "Do you want to publish your changes or discard them?",
+      comment:
+        "@context: Confirm close action sheet subtitle when editing a published post",
+    }),
+    confirmEditPublish: t({
+      message: "Publish",
+      comment:
+        "@context: Confirm close action sheet - publish update button for editing published post",
+    }),
+    confirmEditDiscard: t({
+      message: "Discard",
+      comment:
+        "@context: Confirm close action sheet - discard changes button for editing published post",
+    }),
+    drafts: t({ message: "Drafts", comment: "@context: Drafts panel title" }),
+    draftsEmpty: t({
+      message: "No drafts yet. Save a draft to find it here.",
+      comment: "@context: Drafts panel empty state",
+    }),
+    deleteDraft: t({
+      message: "Delete Draft",
+      comment: "@context: Draft item action",
+    }),
+    draftDeleted: t({
+      message: "Draft deleted.",
+      comment: "@context: Toast after draft deletion",
+    }),
+    publishFailedDraft: t({
+      message: "Couldn't publish. Saved as draft.",
+      comment:
+        "@context: Toast when publish fails and post is auto-saved as draft",
+    }),
+    uploadFailedDraft: t({
+      message: "Some uploads failed. Saved as draft.",
+      comment:
+        "@context: Toast when uploads fail and post is auto-saved as draft",
+    }),
+    reply: t({
+      message: "Reply",
+      comment: "@context: Compose button - reply to post",
+    }),
+    publishFeatured: t({
+      message: "Post as Featured",
+      comment:
+        "@context: Compose dropdown option - publish post and mark it as featured",
+    }),
+    publishUnlisted: t({
+      message: "Post Unlisted",
+      comment:
+        "@context: Compose dropdown option - publish post with unlisted visibility, hidden from main feed",
+    }),
+    publishPrivate: t({
+      message: "Post as Private",
+      comment:
+        "@context: Compose dropdown option - publish post visible only when logged in",
+    }),
+    showMore: t({
+      message: "Show more",
+      comment: "@context: Expand reply context",
+    }),
+    showLess: t({
+      message: "Show less",
+      comment: "@context: Collapse reply context",
+    }),
+    addCollection: t({
+      message: "Add Collection",
+      comment: "@context: Action to create a new collection from compose",
+    }),
+    collectionCountLabel: t({
+      message: "%name% + %count% more",
+      comment:
+        "@context: Compose collection trigger label when multiple collections selected. %name% is the first collection name, %count% is how many more",
+    }),
+    draftRestored: t({
+      message: "Draft restored.",
+      comment:
+        "@context: Toast shown when a local draft is restored on compose open",
+    }),
+    collectionFormLabels: {
+      titleLabel: t({
+        message: "Title",
+        comment: "@context: Collection form field",
+      }),
+      titlePlaceholder: t({
+        message: "My Collection",
+        comment: "@context: Collection title placeholder",
+      }),
+      slugLabel: t({
+        message: "Slug",
+        comment: "@context: Collection form field",
+      }),
+      slugHelp: t({
+        message:
+          "URL-safe identifier (lowercase, numbers, hyphens). For CJK titles, slug will be auto-generated on the server.",
+        comment: "@context: Collection path help text",
+      }),
+      descriptionLabel: t({
+        message: "Description (optional)",
+        comment: "@context: Collection form field",
+      }),
+      descriptionPlaceholder: t({
+        message: "What's this collection about?",
+        comment: "@context: Collection description placeholder",
+      }),
+      removeIcon: t({
+        message: "Remove",
+        comment: "@context: Button to remove icon",
+      }),
+      iconsTab: t({
+        message: "Icons",
+        comment: "@context: Icon picker tab label",
+      }),
+      emojisTab: t({
+        message: "Emojis",
+        comment: "@context: Emoji picker tab label",
+      }),
+      searchIconsPlaceholder: t({
+        message: "Search icons...",
+        comment: "@context: Icon picker search placeholder",
+      }),
+      searchEmojisPlaceholder: t({
+        message: "Search emojis...",
+        comment: "@context: Emoji picker search placeholder",
+      }),
+      sortOrderLabel: t({
+        message: "Sort Order",
+        comment: "@context: Collection form field",
+      }),
+      sortNewest: t({
+        message: "Newest first",
+        comment: "@context: Collection sort order option",
+      }),
+      sortOldest: t({
+        message: "Oldest first",
+        comment: "@context: Collection sort order option",
+      }),
+      sortRatingDesc: t({
+        message: "Highest rated",
+        comment: "@context: Collection sort order option",
+      }),
+      sortRatingAsc: t({
+        message: "Lowest rated",
+        comment: "@context: Collection sort order option",
+      }),
+      submitLabel: t({
+        message: "Save",
+        comment: "@context: Button to save collection",
+      }),
+      cancelLabel: t({
+        message: "Cancel",
+        comment: "@context: Button to cancel form",
+      }),
+    },
   }).replace(/</g, "\\u003c");
 
   const collectionsJson = JSON.stringify(
@@ -152,19 +372,38 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
     })),
   ).replace(/</g, "\\u003c");
 
+  return (
+    <jant-compose-dialog
+      collections={collectionsJson}
+      labels={labels}
+      upload-max-file-size={uploadMaxFileSize ?? 500}
+      {...(pageMode ? { "page-mode": "" } : {})}
+      {...(closeHref ? { "close-href": closeHref } : {})}
+      {...(autoRestoreDraft ? { "auto-restore-draft": "" } : {})}
+    >
+      {/* SSR fallback skeleton */}
+      <div class="compose-dialog-inner">
+        <div class="compose-dialog-header" />
+        <div class="compose-body skel-section-md" />
+      </div>
+    </jant-compose-dialog>
+  );
+};
+
+export const ComposeDialog: FC<ComposeDialogProps> = ({
+  collections,
+  uploadMaxFileSize,
+}) => {
   return (
     <dialog
       id="compose-dialog"
       class="compose-dialog"
-      onclick="event.target === this && this.close()"
+      data-on:click="evt.target === el && el.querySelector('jant-compose-dialog')?.requestClose()"
     >
-      <jant-compose-dialog collections={collectionsJson} labels={labels}>
-        {/* SSR fallback skeleton */}
-        <div class="compose-dialog-inner">
-          <div class="compose-dialog-header" />
-          <div class="compose-body skel-section-md" />
-        </div>
-      </jant-compose-dialog>
+      <ComposeForm
+        collections={collections}
+        uploadMaxFileSize={uploadMaxFileSize}
+      />
     </dialog>
   );
 };

package/src/ui/compose/ComposePrompt.tsx

@@ -16,7 +16,7 @@ export const ComposePrompt: FC = () => {
       <button
         type="button"
         class="compose-prompt-trigger"
-        onclick="const d=document.getElementById('compose-dialog');d.showModal();d.querySelector('jant-compose-editor')?.focusInput()"
+        data-on:click="document.getElementById('compose-dialog').querySelector('jant-compose-dialog')?.restoreLocalDraft(); document.getElementById('compose-dialog').showModal(); document.getElementById('compose-dialog').querySelector('jant-compose-editor')?.focusInput()"
       >
         <span class="compose-prompt-avatar">
           <svg

package/src/ui/dash/CrudPageHeader.tsx

@@ -1,7 +1,7 @@
 /**
  * CRUD Page Header Component
  *
- * Provides consistent header layout for dashboard CRUD list pages
+ * Provides consistent header layout for admin CRUD list pages
  * with title and primary action button
  */
 

package/src/ui/dash/ListItemRow.tsx

@@ -1,7 +1,7 @@
 /**
  * List Item Row Component
  *
- * Provides consistent layout for list items in dashboard CRUD pages.
+ * Provides consistent layout for list items in admin CRUD pages.
  * Handles responsive spacing, overflow, and action button placement.
  */
 

package/src/ui/dash/StatusBadge.tsx

@@ -1,21 +1,23 @@
 /**
  * Status Badge Component
  *
- * Displays badges for post status, featured, and pinned state.
+ * Displays badges for post status, visibility, and pinned state.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { Status } from "../../types.js";
+import type { Status, Visibility } from "../../types.js";
 
 export interface StatusBadgeProps {
   status: Status;
+  visibility?: Visibility;
   featured?: boolean;
   pinned?: boolean;
 }
 
 export const StatusBadge: FC<StatusBadgeProps> = ({
   status,
+  visibility,
   featured,
   pinned,
 }) => {
@@ -48,6 +50,14 @@ export const StatusBadge: FC<StatusBadgeProps> = ({
           })}
         </span>
       )}
+      {visibility === "unlisted" && (
+        <span class="badge-outline">
+          {t({
+            message: "Unlisted",
+            comment: "@context: Post badge - unlisted",
+          })}
+        </span>
+      )}
       {pinned && (
         <span class="badge-outline">
           {t({

package/src/ui/dash/appearance/AdvancedContent.tsx

@@ -3,7 +3,9 @@
  */
 
 import { useLingui } from "@lingui/react/macro";
-import { AppearanceNav } from "./AppearanceNav.js";
+
+const THEMING_DOCS_URL =
+  "https://github.com/jant-me/jant/blob/main/docs/theming.md";
 
 export function AdvancedContent({ customCSS }: { customCSS: string }) {
   const { t } = useLingui();
@@ -11,67 +13,77 @@ export function AdvancedContent({ customCSS }: { customCSS: string }) {
   const cssSignals = JSON.stringify({ customCSS }).replace(/</g, "\\u003c");
 
   return (
-    <>
-      <AppearanceNav currentTab="advanced" />
-
-      <form
-        data-signals={cssSignals}
-        data-on:submit__prevent="@post('/dash/appearance/custom-css')"
-        data-indicator="_cssLoading"
-        class="max-w-3xl"
-      >
-        <fieldset>
-          <legend class="text-lg font-semibold">
-            {t({
-              message: "Custom CSS",
-              comment: "@context: Appearance settings heading for custom CSS",
-            })}
-          </legend>
-          <p class="text-sm text-muted-foreground mb-4">
+    <form
+      data-signals={cssSignals}
+      data-on:submit__prevent="@post('/settings/custom-css')"
+      data-indicator="_cssLoading"
+      class="max-w-3xl"
+    >
+      <fieldset>
+        <legend class="text-lg font-semibold">
+          {t({
+            message: "Custom CSS",
+            comment: "@context: Appearance settings heading for custom CSS",
+          })}
+        </legend>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements.",
+            comment: "@context: Custom CSS settings description",
+          })}{" "}
+          <a
+            href={THEMING_DOCS_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="underline hover:text-foreground transition-colors"
+          >
             {t({
-              message:
-                "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements.",
-              comment: "@context: Custom CSS settings description",
+              message: "Theming guide",
+              comment:
+                "@context: Link to theming documentation on Custom CSS page",
             })}
-          </p>
-          <textarea
-            data-bind="customCSS"
-            class="textarea font-mono text-sm min-h-32"
-            rows={8}
-            placeholder={t({
-              message: "/* Your custom CSS here */",
-              comment: "@context: Custom CSS textarea placeholder",
-            })}
-          >
-            {customCSS}
-          </textarea>
-        </fieldset>
-        <button
-          type="submit"
-          class="btn mt-4"
-          data-attr:disabled="$_cssLoading"
-        >
-          <svg
-            data-show="$_cssLoading"
-            style="display:none"
-            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>
+          </a>
+          {" — "}
           {t({
-            message: "Save CSS",
-            comment: "@context: Button to save custom CSS",
+            message: "available CSS variables, data attributes, and examples.",
+            comment:
+              "@context: Description after theming guide link on Custom CSS page",
           })}
-        </button>
-      </form>
-    </>
+        </p>
+        <textarea
+          data-bind="customCSS"
+          class="textarea font-mono text-sm min-h-32"
+          rows={8}
+          placeholder={t({
+            message: "/* Your custom CSS here */",
+            comment: "@context: Custom CSS textarea placeholder",
+          })}
+        >
+          {customCSS}
+        </textarea>
+      </fieldset>
+      <button type="submit" class="btn mt-4" data-attr:disabled="$_cssLoading">
+        <svg
+          data-show="$_cssLoading"
+          style="display:none"
+          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>
+        {t({
+          message: "Save CSS",
+          comment: "@context: Button to save custom CSS",
+        })}
+      </button>
+    </form>
   );
 }

package/src/ui/dash/appearance/ColorThemeContent.tsx

@@ -4,7 +4,6 @@
 
 import { useLingui } from "@lingui/react/macro";
 import type { ColorTheme } from "../../color-themes.js";
-import { AppearanceNav } from "./AppearanceNav.js";
 
 function ThemeCard({
   theme,
@@ -87,40 +86,56 @@ export function ColorThemeContent({
   );
 
   return (
-    <>
-      <AppearanceNav currentTab="color" />
-
-      <div
-        data-signals={themeSignals}
-        data-on:change="@post('/dash/appearance/color')"
-        class="max-w-3xl"
-      >
-        <fieldset>
-          <legend class="text-lg font-semibold">
-            {t({
-              message: "Color theme",
-              comment: "@context: Appearance settings heading",
-            })}
-          </legend>
-          <p class="text-sm text-muted-foreground mb-4">
+    <div
+      data-signals={themeSignals}
+      data-on:change="@post('/settings/color-theme')"
+      class="max-w-3xl"
+    >
+      <fieldset>
+        <legend class="text-lg font-semibold">
+          {t({
+            message: "Color theme",
+            comment: "@context: Appearance settings heading",
+          })}
+        </legend>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "Applies to your entire site, including admin pages. All themes support dark mode.",
+            comment: "@context: Appearance settings description",
+          })}{" "}
+          {t({
+            message: "Want more control?",
+            comment:
+              "@context: Prefix before Custom CSS link on color theme page",
+          })}{" "}
+          <a
+            href="/settings/custom-css"
+            class="underline hover:text-foreground transition-colors"
+          >
             {t({
-              message:
-                "This will theme both your site and your dashboard. All color themes support dark mode.",
-              comment: "@context: Appearance settings description",
+              message: "Custom CSS",
+              comment:
+                "@context: Link to Custom CSS settings from color theme page",
             })}
-          </p>
+          </a>{" "}
+          {t({
+            message: "lets you override any theme variable.",
+            comment:
+              "@context: Suffix after Custom CSS link on color theme page",
+          })}
+        </p>
 
-          <div class="flex flex-col gap-4">
-            {themes.map((theme) => (
-              <ThemeCard
-                key={theme.id}
-                theme={theme}
-                selected={theme.id === currentThemeId}
-              />
-            ))}
-          </div>
-        </fieldset>
-      </div>
-    </>
+        <div class="flex flex-col gap-4">
+          {themes.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              selected={theme.id === currentThemeId}
+            />
+          ))}
+        </div>
+      </fieldset>
+    </div>
   );
 }