@jant/core 0.6.16 → 0.7.1

package/src/ui/compose/ComposeDialog.tsx

@@ -13,12 +13,27 @@ import type { FC } from "hono/jsx";
 import { MAX_THREAD_POSTS, type Collection } from "../../types.js";
 import { useLingui } from "../../i18n/context.js";
 import { getCollectionFormLabels } from "../shared/collection-management-labels.js";
-import type { ComposeLabels } from "../../client/components/compose-types.js";
+import type {
+  ComposeLabels,
+  ComposeLanguage,
+} from "../../client/components/compose-types.js";
 
 export interface ComposeDialogProps {
   collections?: Collection[];
   uploadMaxFileSize?: number;
   slashCommandDiscovered?: boolean;
+  /**
+   * Languages the site publishes. Empty on a single-language site, and the
+   * composer then shows no language UI at all — an author who never turned
+   * multilingual content on should not meet it.
+   */
+  languages?: ComposeLanguage[];
+  /**
+   * Content language of the page the composer opens from. A post left on
+   * automatic publishes in this language until detection reads the writing as
+   * another one, which the composer says on the button beside Post.
+   */
+  contextLanguage?: string | null;
 }
 
 export interface ComposeFormProps extends ComposeDialogProps {
@@ -31,6 +46,8 @@ export const ComposeForm: FC<ComposeFormProps> = ({
   collections,
   uploadMaxFileSize,
   slashCommandDiscovered = false,
+  languages,
+  contextLanguage,
   pageMode = false,
   closeHref,
   autoRestoreDraft = false,
@@ -41,7 +58,15 @@ export const ComposeForm: FC<ComposeFormProps> = ({
     cancel: i18n._(
       msg({
         message: "Cancel",
-        comment: "@context: Close compose dialog",
+        comment:
+          "@context: Back out of the attached-text sub-editor, paired with Done. Leaving the composer itself says Close instead — it may keep the work as a draft, so nothing is being cancelled.",
+      }),
+    ),
+    close: i18n._(
+      msg({
+        message: "Close",
+        comment:
+          "@context: Leaves the composer — the × on a single post, and the button in a thread. Prompts to save a draft first if there is unsaved work.",
       }),
     ),
     imageNotRehosted: i18n._(
@@ -322,12 +347,39 @@ export const ComposeForm: FC<ComposeFormProps> = ({
         comment: "@context: Button to remove an uploaded attachment in compose",
       }),
     ),
+    moveAttachmentEarlier: i18n._(
+      msg({
+        message: "Move attachment earlier",
+        comment:
+          "@context: Button that moves an attachment one place toward the start in compose",
+      }),
+    ),
+    moveAttachmentLater: i18n._(
+      msg({
+        message: "Move attachment later",
+        comment:
+          "@context: Button that moves an attachment one place toward the end in compose",
+      }),
+    ),
     uploading: i18n._(
       msg({
         message: "Uploading...",
         comment: "@context: Toast shown during background upload",
       }),
     ),
+    publishing: i18n._(
+      msg({
+        message: "Publishing...",
+        comment: "@context: Toast shown while a post is being published",
+      }),
+    ),
+    saving: i18n._(
+      msg({
+        message: "Saving...",
+        comment:
+          "@context: Toast shown while a draft or an edited post is being saved",
+      }),
+    ),
     loadingPost: i18n._(
       msg({
         message: "Loading post...",
@@ -391,9 +443,9 @@ export const ComposeForm: FC<ComposeFormProps> = ({
     ),
     confirmCloseCancel: i18n._(
       msg({
-        message: "Cancel",
+        message: "Keep editing",
         comment:
-          "@context: Confirm close action sheet - cancel and return to editor",
+          "@context: Confirm close action sheet - dismiss the sheet and return to the editor. Says what it does rather than 'Cancel', which the composer already spends on leaving.",
       }),
     ),
     confirmCloseDiscard: i18n._(
@@ -510,6 +562,20 @@ export const ComposeForm: FC<ComposeFormProps> = ({
           "@context: Toast when publish fails and post is auto-saved as draft",
       }),
     ),
+    publishFailed: i18n._(
+      msg({
+        message: "Couldn't publish. Try again.",
+        comment:
+          "@context: Toast when publish fails and the server gave no reason",
+      }),
+    ),
+    publishFailedOffline: i18n._(
+      msg({
+        message: "Couldn't reach the server. Try again.",
+        comment:
+          "@context: Toast when a publish request never reached the server",
+      }),
+    ),
     uploadFailedDraft: i18n._(
       msg({
         message: "Some uploads failed. Saved as draft.",
@@ -795,11 +861,11 @@ export const ComposeForm: FC<ComposeFormProps> = ({
           "@context: Toast shown when a local draft is restored on compose open",
       }),
     ),
-    closeCompose: i18n._(
+    draftStoreFailed: i18n._(
       msg({
-        message: "Close compose",
+        message: "This browser can't keep a local copy. Save as a draft.",
         comment:
-          "@context: Post options row that leaves the composer; prompts to save a draft first if there is unsaved work",
+          "@context: Toast shown when the composer cannot write its local draft to browser storage",
       }),
     ),
     editing: i18n._(
@@ -897,10 +963,132 @@ export const ComposeForm: FC<ComposeFormProps> = ({
         }),
       ),
     },
+    languageLabel: i18n._(
+      msg({
+        message: "Language",
+        comment: "@context: Compose field for the post's content language",
+      }),
+    ),
+    languageAuto: i18n._(
+      msg({
+        message: "Detect",
+        comment:
+          "@context: Compose language option that leaves detection to Jant",
+      }),
+    ),
+    languageAutoHint: i18n._(
+      msg({
+        message: "Read from what you write",
+        comment: "@context: Help text under the compose language field",
+      }),
+    ),
+    languageAutoDetected: i18n._(
+      msg({
+        message: "Read from what you write — looks like {language}",
+        comment:
+          "@context: Help text under the compose language field once a language has been detected",
+      }),
+      // Detected in the browser from the current text; see `translationOf`.
+      { language: "{language}" },
+    ),
+    languageAutoPending: i18n._(
+      msg({
+        message: "Not enough text to tell yet — publishes in {language}",
+        comment:
+          "@context: Help text under the compose language field before there is enough writing to read a language out of; {language} is the one it would publish in meanwhile, which is the language of the page the composer was opened from",
+      }),
+      // Only known in the browser; see `translationOf`.
+      { language: "{language}" },
+    ),
+    languageTriggerLabel: i18n._(
+      msg({
+        message: "Language: {language}",
+        comment:
+          "@context: Accessible name of the composer's language button, which sits beside Post and names the language this post would publish in",
+      }),
+      // Filled in the browser with whichever language that is; see
+      // `translationOf`.
+      { language: "{language}" },
+    ),
+    translationOf: i18n._(
+      msg({
+        message: "Translation of “{title}”",
+        comment:
+          "@context: Compose banner shown while writing a translation of an existing post",
+      }),
+      // The post being translated is only known in the browser, and Lingui
+      // resolves an ICU message completely at `i18n._()` time — formatted with
+      // no value, this slot would come out empty. Passing the placeholder back
+      // as the value leaves it intact for the component to fill.
+      { title: "{title}" },
+    ),
+    translationContext: i18n._(
+      msg({
+        message: "Translating",
+        comment:
+          "@context: Divider between the original post and the editor writing its translation, when the target language is not known yet",
+      }),
+    ),
+    translationContextInLanguage: i18n._(
+      msg({
+        message: "Translating into {language}",
+        comment:
+          "@context: Divider between the original post above and the editor below, naming the language being written",
+      }),
+      // Filled in the browser from the chosen language; see `translationOf`.
+      { language: "{language}" },
+    ),
+    translationContextOpen: i18n._(
+      msg({
+        message: "Open the original in a new tab",
+        comment:
+          "@context: Tooltip on the source post link above the compose editor while writing a translation",
+      }),
+    ),
+    translationContextOriginal: i18n._(
+      msg({
+        message: "The original",
+        comment:
+          "@context: Accessible name of the scrollable panel holding the post being translated",
+      }),
+    ),
+    translationContextHide: i18n._(
+      msg({
+        message: "Hide",
+        comment:
+          "@context: Button that folds away the original while writing its translation. Sits right after the words “Translating into …”, which is what makes it clear what gets hidden — the accessible name spells it out",
+      }),
+    ),
+    translationContextHideLong: i18n._(
+      msg({
+        message: "Hide the original",
+        comment:
+          "@context: Accessible name of the button that folds away the post being translated",
+      }),
+    ),
+    translationContextShow: i18n._(
+      msg({
+        message: "Show",
+        comment:
+          "@context: Button that brings back the folded-away original while writing its translation",
+      }),
+    ),
+    translationContextShowLong: i18n._(
+      msg({
+        message: "Show the original",
+        comment:
+          "@context: Accessible name of the button that brings back the folded-away post being translated",
+      }),
+    ),
     collectionFormLabels: getCollectionFormLabels(i18n),
   } satisfies ComposeLabels;
   const labels = JSON.stringify(labelsObject).replace(/</g, "\\u003c");
 
+  const languagesJson = JSON.stringify(languages ?? []).replace(
+    /</g,
+    "\\u003c",
+  );
+
   const collectionsJson = JSON.stringify(
     (collections ?? []).map((c) => ({
       id: c.id,
@@ -912,6 +1100,8 @@ export const ComposeForm: FC<ComposeFormProps> = ({
   return (
     <jant-compose-dialog
       collections={collectionsJson}
+      languages={languagesJson}
+      {...(contextLanguage ? { "context-language": contextLanguage } : {})}
       labels={labels}
       upload-max-file-size={uploadMaxFileSize ?? 500}
       {...(pageMode ? { "page-mode": "" } : {})}
@@ -931,6 +1121,8 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({
   collections,
   uploadMaxFileSize,
   slashCommandDiscovered = false,
+  languages,
+  contextLanguage,
 }) => {
   return (
     <dialog id="compose-dialog" class="compose-dialog">
@@ -938,6 +1130,8 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({
         collections={collections}
         uploadMaxFileSize={uploadMaxFileSize}
         slashCommandDiscovered={slashCommandDiscovered}
+        languages={languages}
+        contextLanguage={contextLanguage}
       />
     </dialog>
   );

package/src/ui/compose/ComposePrompt.tsx

@@ -25,11 +25,7 @@ export const ComposePrompt: FC<ComposePromptProps> = ({
         composeOpenShortcutDiscovered ? "true" : "false"
       }
     >
-      <button
-        type="button"
-        class="compose-prompt-trigger"
-        data-on:click="document.getElementById('compose-dialog')?.querySelector('jant-compose-dialog')?.openNew()"
-      >
+      <button type="button" class="compose-prompt-trigger" data-compose-open>
         <span class="compose-prompt-avatar">
           <svg
             xmlns="http://www.w3.org/2000/svg"

package/src/ui/compose/__tests__/ComposeDialog.test.tsx

@@ -0,0 +1,125 @@
+/**
+ * Compose dialog labels.
+ *
+ * The composer fills two labels in the browser, from values only it knows: the
+ * post being translated and the detected language. Lingui resolves an ICU
+ * message completely at `i18n._()` time, so those slots have to be carried
+ * through deliberately — a label formatted with no value renders as an empty
+ * string, which reads as a missing title rather than as a bug.
+ */
+
+import type { Context } from "hono";
+import { renderToString } from "hono/jsx/dom/server";
+import { describe, expect, it } from "vitest";
+import { I18nProvider } from "../../../i18n/context.js";
+import { createI18n } from "../../../i18n/i18n.js";
+import { ComposeForm } from "../ComposeDialog.js";
+
+function renderComposeLabels(): Record<string, string> {
+  const i18n = createI18n("en");
+  const c = {
+    get(key: string) {
+      return key === "i18n" ? i18n : undefined;
+    },
+  } as unknown as Context;
+  I18nProvider({ c, children: "" });
+
+  const html = renderToString(
+    ComposeForm({
+      languages: [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ],
+    }),
+  );
+
+  const match = /labels="([^"]*)"/.exec(html);
+  if (!match?.[1]) throw new Error("expected a labels attribute");
+  const decoded = match[1]
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&#39;/g, "'");
+  return JSON.parse(decoded) as Record<string, string>;
+}
+
+describe("ComposeForm labels", () => {
+  it("leaves the slots the browser fills", () => {
+    const labels = renderComposeLabels();
+
+    expect(labels.translationOf).toContain("{title}");
+    expect(labels.translationContextInLanguage).toContain("{language}");
+    expect(labels.languageAutoDetected).toContain("{language}");
+    expect(labels.languageAutoPending).toContain("{language}");
+    expect(labels.languageTriggerLabel).toContain("{language}");
+  });
+
+  it("never ships an unresolved ICU construct", () => {
+    for (const [key, value] of Object.entries(renderComposeLabels())) {
+      if (typeof value !== "string") continue;
+      expect(value, key).not.toContain("plural,");
+      expect(value, key).not.toContain("NaN");
+    }
+  });
+
+  it("passes the site's languages to the component", () => {
+    const i18n = createI18n("en");
+    const c = {
+      get(key: string) {
+        return key === "i18n" ? i18n : undefined;
+      },
+    } as unknown as Context;
+    I18nProvider({ c, children: "" });
+
+    const html = renderToString(
+      ComposeForm({
+        languages: [{ tag: "en", label: "English" }],
+      }),
+    );
+    expect(html).toContain("languages=");
+    expect(html).toContain("English");
+  });
+
+  it("hands the component the page's language as the automatic default", () => {
+    const i18n = createI18n("en");
+    const c = {
+      get(key: string) {
+        return key === "i18n" ? i18n : undefined;
+      },
+    } as unknown as Context;
+    I18nProvider({ c, children: "" });
+
+    const html = renderToString(
+      ComposeForm({
+        languages: [
+          { tag: "zh-Hans", label: "简体中文" },
+          { tag: "ja", label: "日本語" },
+        ],
+        contextLanguage: "ja",
+      }),
+    );
+    expect(html).toContain('context-language="ja"');
+
+    // Without a page language the attribute stays off, and the component
+    // falls back to the primary language on its own.
+    expect(
+      renderToString(
+        ComposeForm({ languages: [{ tag: "en", label: "English" }] }),
+      ),
+    ).not.toContain("context-language");
+  });
+
+  it("sends an empty list on a single-language site", () => {
+    const i18n = createI18n("en");
+    const c = {
+      get(key: string) {
+        return key === "i18n" ? i18n : undefined;
+      },
+    } as unknown as Context;
+    I18nProvider({ c, children: "" });
+
+    // The composer renders no language UI at all in that case.
+    expect(renderToString(ComposeForm({}))).toContain('languages="[]"');
+  });
+});

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

@@ -4,10 +4,10 @@
 
 import { msg } from "@lingui/core/macro";
 import { useLingui } from "../../../i18n/context.js";
+import { getJantDocsUrl } from "../../../lib/jant-docs.js";
 import { toPublicPath } from "../../../lib/url.js";
 
-const THEMING_DOCS_URL =
-  "https://github.com/jant-me/jant/blob/main/docs/theming.md";
+const THEMING_DOCS_URL = getJantDocsUrl("theming");
 
 export function AdvancedContent({
   customCSS,

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

@@ -33,11 +33,7 @@ export function CodeInjectionContent({
       data-indicator="_codeLoading"
       class="max-w-form"
     >
-      <div
-        role="note"
-        class="alert alert-destructive mb-6"
-        style="display:flex;gap:.75rem;align-items:flex-start"
-      >
+      <div role="note" class="alert-destructive mb-6">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="20"
@@ -54,16 +50,16 @@ export function CodeInjectionContent({
           <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
           <path d="M12 17h.01" />
         </svg>
-        <div>
-          <p class="font-medium">
-            {i18n._(
-              msg({
-                message: "This code runs on every page of your site.",
-                comment: "@context: Code Injection security warning headline",
-              }),
-            )}
-          </p>
-          <p class="text-sm" style="margin-top:.25rem">
+        <strong>
+          {i18n._(
+            msg({
+              message: "This code runs on every page of your site.",
+              comment: "@context: Code Injection security warning headline",
+            }),
+          )}
+        </strong>
+        <section>
+          <p>
             {i18n._(
               msg({
                 message:
@@ -72,7 +68,7 @@ export function CodeInjectionContent({
               }),
             )}
           </p>
-        </div>
+        </section>
       </div>
 
       <fieldset class="mb-6">