@jant/core 0.6.7 → 0.6.9

package/src/services/settings.ts

@@ -19,6 +19,7 @@ import {
 } from "../lib/constants.js";
 import {
   baseLocale,
+  isLocale,
   isValidContentLanguage,
   normalizeContentLanguage,
 } from "../i18n/locales.js";
@@ -41,6 +42,8 @@ export interface GeneralSettingsData {
   siteDescription: string;
   siteFooter: string;
   siteLanguage: string;
+  /** Admin UI locale; empty string follows the content language. */
+  dashboardLanguage?: string;
   cjkSerifFont: string;
   showJantBrandingOnHome: boolean;
   homeDefaultView?: FeedKind;
@@ -61,6 +64,11 @@ export interface SiteSettingsResult {
 
 export interface LocaleSettingsData {
   siteLanguage: string;
+  /**
+   * Admin dashboard UI locale. Empty string clears the explicit setting so the
+   * dashboard follows the content language. When set, must be a catalog locale.
+   */
+  dashboardLanguage?: string;
   cjkSerifFont: string;
   timeZone: string;
 }
@@ -97,7 +105,11 @@ export interface SettingsService {
   ): Promise<SiteSettingsResult>;
   updateLocaleSettings(
     data: LocaleSettingsData,
-    opts: { oldLanguage: string; oldCjkSerifFont?: string },
+    opts: {
+      oldLanguage: string;
+      oldCjkSerifFont?: string;
+      oldDashboardLanguage?: string;
+    },
   ): Promise<{ languageChanged: boolean }>;
   updateFeedSettings(data: { mainRssFeed?: FeedKind }): Promise<void>;
   updateHomeBranding(showJantBrandingOnHome: boolean): Promise<void>;
@@ -131,15 +143,16 @@ export interface SettingsService {
    */
   uploadAvatar(data: AvatarUploadData, deps: AvatarUploadDeps): Promise<void>;
   /**
-   * Remove avatar and all favicon-related settings.
-   * Deletes the apple-touch-icon from storage if it exists.
-   *
-   * @param storage - Optional storage driver for deleting the apple-touch-icon file
+   * Remove avatar and all favicon-related settings. The apple-touch-icon's
+   * media row is deleted and its storage object is retired (moved to the
+   * recycle bin, or deleted) via the media service when supplied — so removal
+   * is recoverable rather than erasing the bytes with no trace.
    */
-  removeAvatar(
-    storage?: StorageDriver | null,
-    deps?: { media?: MediaService; storageProvider?: string },
-  ): Promise<void>;
+  removeAvatar(deps?: {
+    storage?: StorageDriver | null;
+    media?: MediaService;
+    storageProvider?: string;
+  }): Promise<void>;
 }
 
 export function createSettingsService(
@@ -301,6 +314,26 @@ export function createSettingsService(
         normalizeContentLanguage(trimmedLanguage),
       );
 
+      // Dashboard UI locale. undefined = leave untouched; "" = clear so the
+      // dashboard follows the content language; otherwise it must be one of the
+      // translated catalog locales.
+      let dashboardChanged = false;
+      if (data.dashboardLanguage !== undefined) {
+        const dashboardLanguage = data.dashboardLanguage.trim();
+        if (dashboardLanguage && !isLocale(dashboardLanguage)) {
+          throw new ValidationError(
+            "Choose a dashboard language Jant is translated into.",
+          );
+        }
+        if (dashboardLanguage) {
+          await this.set("DASHBOARD_LANGUAGE", dashboardLanguage);
+        } else {
+          await this.remove("DASHBOARD_LANGUAGE");
+        }
+        dashboardChanged =
+          (opts.oldDashboardLanguage ?? "") !== dashboardLanguage;
+      }
+
       // CJK serif font setting
       const cjkFont = data.cjkSerifFont?.trim() ?? "";
       if (cjkFont && isCjkSerifFont(cjkFont) && cjkFont !== "off") {
@@ -329,7 +362,8 @@ export function createSettingsService(
       return {
         languageChanged:
           opts.oldLanguage !== trimmedLanguage ||
-          (opts.oldCjkSerifFont ?? "off") !== effectiveCjkFont,
+          (opts.oldCjkSerifFont ?? "off") !== effectiveCjkFont ||
+          dashboardChanged,
       };
     },
 
@@ -469,19 +503,19 @@ export function createSettingsService(
       await this.set("SITE_FAVICON_VERSION", version);
     },
 
-    async removeAvatar(storage, deps) {
+    async removeAvatar(deps) {
       const appleTouchKey = await this.get("SITE_FAVICON_APPLE_TOUCH");
-      if (storage && appleTouchKey) {
-        await storage.delete(appleTouchKey);
-      }
 
+      // Retire the apple-touch-icon through the media service so its object goes
+      // to the recycle bin (recoverable) rather than being erased now. Also
+      // removes its media row.
       if (deps?.media && deps.storageProvider && appleTouchKey) {
         const existing = await deps.media.getByStorageKey(
           appleTouchKey,
           deps.storageProvider,
         );
         if (existing) {
-          await deps.media.delete(existing.id);
+          await deps.media.delete(existing.id, deps.storage);
         }
       }
 

package/src/services/upload-session.ts

@@ -52,6 +52,10 @@ const RELAY_MULTIPART_THRESHOLD = 95 * 1024 * 1024;
 const RELAY_MULTIPART_PART_SIZE = 50 * 1024 * 1024;
 const IMMUTABLE_CACHE_CONTROL = "public, max-age=31536000, immutable";
 const DEFAULT_EXPIRED_UPLOAD_CLEANUP_LIMIT = 20;
+// Grace window before a finalized-but-unattached media row (uploaded during
+// compose, `postId IS NULL`) is reaped. Generous enough that an in-progress
+// compose/edit is never affected; based on `createdAt`, no heartbeat needed.
+const ORPHAN_MEDIA_GRACE_SECONDS = 7 * 24 * 60 * 60;
 type CleanupableUploadSessionState = "pending" | "uploaded" | "failed";
 const CLEANUPABLE_UPLOAD_SESSION_STATES = [
   "pending",
@@ -143,6 +147,8 @@ export interface UploadSessionService {
   }): Promise<{
     abortedMultipartUploads: number;
     deletedSessions: number;
+    deletedOrphanMedia: number;
+    purgedStorageObjects: number;
   }>;
   abort(id: string, deps: { storage: StorageDriver }): Promise<void>;
 }
@@ -760,9 +766,31 @@ export function createUploadSessionService(
         deletedSessions += 1;
       }
 
+      // Reap finalized media that was uploaded during compose but never
+      // attached to a post (`postId IS NULL`) past the grace window. This now
+      // soft-deletes via the media service: the DB row is removed and the
+      // storage object is enqueued for deferred deletion. Bounded by the same
+      // per-run `limit`; any backlog drains over subsequent runs.
+      const orphanIds = await media.listOrphanedMediaIds({
+        before: now() - ORPHAN_MEDIA_GRACE_SECONDS,
+        limit,
+      });
+      if (orphanIds.length > 0) {
+        await media.deleteByIds(orphanIds, deps.storage);
+      }
+
+      // Physically delete storage objects whose recycle window has elapsed.
+      // Skips any object a live media row still references (re-uploads).
+      const purgedStorageObjects = await media.purgeDueStorageObjects(
+        { before: now(), limit, provider: deps.storageDriver },
+        deps.storage,
+      );
+
       return {
         abortedMultipartUploads,
         deletedSessions,
+        deletedOrphanMedia: orphanIds.length,
+        purgedStorageObjects,
       };
     },
   };

package/src/styles/tokens.css

@@ -84,7 +84,7 @@
      mobile overrides below cap sizes for small screens.
      --type-content-scale uniformly scales all content sizes
      without affecting UI controls. */
-  --type-content-scale: 0.81;
+  --type-content-scale: 0.78;
   --type-content-display: calc(var(--type-display) * var(--type-content-scale));
   --type-content-title: calc(var(--type-title) * var(--type-content-scale));
   --type-content-subtitle: calc(
@@ -467,13 +467,15 @@
 
 @media (max-width: 760px), (hover: none) and (pointer: coarse) {
   :root {
-    /* Content layer — tighter scale for mobile reading
-       Ratio ≈ 1.9 : 1.4 : 1.15 : 1 (display:title:subtitle:body)
-       13px base → 31.9 / 24 / 19.5 / 16.9 */
+    /* Content layer — tighter scale for mobile reading.
+       Ratio ≈ 1.88 : 1.42 : 1.15 : 1 (display:title:subtitle:body).
+       At 15px root × 0.78 content-scale: 28.7 / 21.6 / 17.6 / 15.2px.
+       Body is floored to a 16px minimum below (max()) for readability;
+       the floor still yields to calc() when the user zooms the root up. */
     --type-content-display: calc(2.45rem * var(--type-content-scale));
     --type-content-title: calc(1.85rem * var(--type-content-scale));
     --type-content-subtitle: calc(1.5rem * var(--type-content-scale));
-    --type-content-body: calc(1.3rem * var(--type-content-scale));
+    --type-content-body: max(16px, calc(1.3rem * var(--type-content-scale)));
 
     /* UI layer — pixel floors for touch targets */
     --type-ui-title: max(16px, var(--type-secondary));

package/src/styles/ui.css

@@ -2205,8 +2205,16 @@
   }
 
   .feed-continue-link {
-    display: inline-block;
-    margin-top: 0.5rem;
+    /* Block so the whole content-width row is the tap target, not just the few
+       characters of "Read more". On mobile the trailing link on the last
+       summary line sits just above this control, so taps aimed here used to
+       land on that link. The larger `margin-top` is a dead (non-clickable)
+       buffer that separates the prose's trailing link from the control, and
+       `padding-bottom` grows the tap area downward, away from the footer
+       links below. Appearance is unchanged — only the hit area and spacing. */
+    display: block;
+    margin-top: 1rem;
+    padding-bottom: 0.6rem;
     font-size: var(--type-ui-meta);
     color: var(--site-text-secondary);
   }
@@ -2215,6 +2223,19 @@
     text-decoration: underline;
   }
 
+  /* Untitled note expand-in-place. The full body is rendered with a zero-width
+     `data-note-break` marker at the summary boundary; clamping hides only the
+     marker's following siblings, leaving the visible summary untouched so the
+     note grows in place without the page jumping. note-expand.ts toggles
+     `data-note-clamp` to reveal/hide the tail. */
+  [data-note-break] {
+    display: none;
+  }
+
+  [data-note-clamp] [data-note-break] ~ * {
+    display: none;
+  }
+
   .post-header-block {
     margin-bottom: 1rem;
   }
@@ -2331,16 +2352,39 @@
 
   .sidenote,
   .marginnote {
+    /* Layout: float into the right margin. A floated note anchors to its containing
+       block's right *content* edge, so if a theme gives that block inline-end padding
+       (e.g. a padded blockquote card) the anchor is inset and the note drifts left.
+       Themes expose that inset via --sidenote-anchor-inset (default 0) — best derived
+       from the same token that sets the padding — so the note still reaches the gutter
+       no matter how the container is indented. Core's own blocks add no inset. */
     float: right;
     clear: right;
-    margin-right: var(--layout-sidenote-margin);
+    margin-right: calc(
+      var(--layout-sidenote-margin) - var(--sidenote-anchor-inset, 0px)
+    );
     width: var(--layout-sidenote-width);
     margin-top: 0.3rem;
-    margin-bottom: 0;
-    font-size: var(--type-secondary);
-    line-height: 1.3;
+    /* Breathing room so multiple notes from one paragraph don't touch when they stack. */
+    margin-bottom: 1.4rem;
     vertical-align: baseline;
     position: relative;
+
+    /* Typographic isolation. A footnote is an annotation, not part of the text it
+       hangs off of, so it must render identically no matter what its reference sits
+       inside. The body span is emitted at the reference position (see tiptap-render
+       renderSidenoteReference), so when the [^n] is inside a blockquote / bold run /
+       heading the span inherits that context. Pin every inheritable type property to
+       the canonical note look to cut every such leak — not just the blockquote
+       serif+italic case. */
+    font-family: var(--font-body);
+    font-size: var(--type-sm);
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    line-height: 1.3;
+    letter-spacing: var(--type-body-tracking, normal);
+    text-align: left;
     color: var(--site-reading-meta);
   }
 
@@ -2358,12 +2402,16 @@
     content: counter(sidenote-counter);
     font-size: var(--type-code);
     top: -0.5rem;
-    left: 0.1rem;
+    /* Real margins (not `left`, which reserves no space) so the superscript
+       number keeps a gap from the words on both sides — matters for CJK, which
+       has no inter-word spacing. */
+    margin-left: 0.1rem;
+    margin-right: 0.25rem;
   }
 
   .sidenote::before {
     content: counter(sidenote-counter) " ";
-    font-size: var(--type-code);
+    font-size: var(--type-xs);
     top: -0.5rem;
   }
 
@@ -2372,13 +2420,6 @@
     font-size: var(--type-code);
   }
 
-  blockquote .sidenote,
-  blockquote .marginnote {
-    margin-right: -82%;
-    min-width: 59%;
-    text-align: left;
-  }
-
   input.margin-toggle {
     display: none;
   }
@@ -2637,13 +2678,28 @@
      secondary to the focused post but not so much that text becomes gray
      and hard to read. Combined with the mask-image bottom fade this gives
      a "context drifts into the background" effect without dimming the
-     whole shell to the point of illegibility. */
-  .thread-context-shell {
+     whole shell to the point of illegibility.
+
+     Fade per item, not the whole shell: a blanket `opacity` on the shell
+     makes it a stacking context that *caps* descendant opacity, so the gap
+     marker ("N more posts") could never read brighter than the faded
+     context around it. Fading each item individually leaves the gap — a
+     real route into the rest of the thread, not background context — at
+     full strength. The items cover everything inside the shell (feed:
+     context + gap; detail page: ancestor detail items), so nothing slips
+     through undimmed. */
+  .thread-context-shell .thread-item {
     opacity: 0.6;
     transition: opacity 0.22s ease;
   }
 
-  .thread-context-shell:not([data-collapsed]) {
+  .thread-context-shell:not([data-collapsed]) .thread-item {
+    opacity: 1;
+  }
+
+  /* The gap is a structural "thread continues here" marker — never faded,
+     collapsed or expanded. */
+  .thread-context-shell .thread-item.thread-item-gap {
     opacity: 1;
   }
 
@@ -2708,33 +2764,78 @@
     padding-bottom: 0.35rem;
   }
 
+  /* Gap marker on the rail: swap the single post dot for a short column of
+     small beads (a vertical "⋮") so the thread line visibly "skips" a run
+     of posts — the familiar threaded-conversation cue for collapsed
+     content. Smaller and quieter than the real post dots, sitting on the
+     same rail x-position. The continuous rail line still shows through
+     behind the beads, so thread continuity reads intact. */
+  .thread-group-preview .thread-item-gap::before,
+  .thread-group-detail .thread-item-gap::before {
+    top: 50%;
+    transform: translateY(-50%);
+    left: calc(
+      var(--site-thread-rail-line-left) + var(--site-thread-rail-line-width) /
+        2 - 2px - var(--site-thread-rail-indent)
+    );
+    width: 4px;
+    height: 24px;
+    border: 0;
+    border-radius: 0;
+    background: radial-gradient(
+      circle,
+      var(--site-threadline) 1.75px,
+      transparent 2px
+    );
+    background-size: 4px 8px;
+    background-repeat: repeat-y;
+    background-position: center top;
+    box-shadow: none;
+  }
+
+  /* "N more posts" — a calm route into the rest of the thread, styled as a
+     sibling of `.thread-context-toggle` (same muted colour + size) rather
+     than a pill or an underlined link. A small chevron does the "this is
+     tappable / leads somewhere" work an underline does poorly on a short
+     standalone label; it points right because the link navigates into the
+     thread rather than expanding in place. Full opacity keeps it from
+     fading into the context above. */
   .thread-gap-link {
     display: inline-flex;
     align-items: center;
-    gap: 0.35rem;
-    padding: 0.38rem 0.78rem;
-    border: 1px dashed var(--site-thread-context-border);
-    border-radius: 999px;
-    background: var(--site-thread-gap-bg);
+    gap: 0.4rem;
+    padding: 0.25rem 0;
     color: var(--site-text-secondary);
     font-size: var(--type-thread-context-meta);
-    line-height: 1.3;
+    font-weight: 500;
+    line-height: 1.2;
     text-decoration: none;
+    transition: color 0.18s ease;
+  }
+
+  .thread-gap-link::after {
+    content: "";
+    width: 0.36em;
+    height: 0.36em;
+    border: 1.5px solid currentColor;
+    border-left: 0;
+    border-bottom: 0;
+    opacity: 0.65;
+    transform: rotate(45deg);
     transition:
-      border-color 0.18s ease,
-      color 0.18s ease,
-      background-color 0.18s ease;
+      transform 0.18s ease,
+      opacity 0.18s ease;
   }
 
   .thread-gap-link:hover {
-    border-color: color-mix(
-      in srgb,
-      var(--site-accent) 22%,
-      var(--site-divider)
-    );
     color: var(--site-text-primary);
   }
 
+  .thread-gap-link:hover::after {
+    opacity: 1;
+    transform: translateX(2px) rotate(45deg);
+  }
+
   .thread-item-hero {
     padding-top: 0.95rem;
   }
@@ -7739,9 +7840,12 @@
     min-height: 72px;
   }
 
-  /* Focused thread post gets a subtle left accent */
+  /* Focused thread post gets a subtle left accent. Use an inset box-shadow, not
+     a border: a border adds 2px of layout width only while focused, so switching
+     focus between thread posts shifted each one sideways ("jitter"). box-shadow
+     paints in the same spot without affecting layout. */
   .compose-thread-post:focus-within > jant-compose-editor {
-    border-left: 2px solid transparent;
+    box-shadow: inset 2px 0 0 transparent;
   }
 
   /* "Add to thread" row inside thread compose layout */
@@ -7852,6 +7956,22 @@
     padding: 6px 0 4px;
   }
 
+  /* Reply / edit-reply compose (a .compose-editor-row directly under
+     .compose-thread-layout — not the multi-post thread variant) needs clear
+     separation from the parent post shown above it. A thread post is meant to
+     sit tight on the rail, so this is scoped away from thread compose. Uses a
+     static :not() rather than :has() on purpose: a :has() here re-evaluates on
+     focus changes inside the row and caused a one-frame horizontal reflow
+     ("jitter") when clicking into the editor. */
+  .compose-thread-layout:not(.compose-thread-compose-layout)
+    .compose-editor-row {
+    padding-top: 14px;
+  }
+
+  .compose-thread-post-header + .compose-body {
+    padding-top: 8px;
+  }
+
   /* Thread format selector: pill-tag style (lighter than the main segmented) */
   .compose-thread-segmented {
     background: transparent;
@@ -8630,6 +8750,15 @@
     margin-bottom: 1.4rem;
   }
 
+  /* In inline-format compose (reply / edit-reply / thread — the editors wrapped
+     in .compose-editor-row), the format header sits right above the body, so the
+     first block's 1.4rem top margin reads as a gap between the format pills and
+     the input. Drop it there so the text hugs the header. Standalone new/edit
+     editors keep their natural lead-in. */
+  .compose-editor-row .compose-tiptap-body .tiptap > :first-child {
+    margin-top: 0;
+  }
+
   .compose-tiptap-body .tiptap ul {
     list-style-type: disc;
     padding-left: 1.5em;

package/src/types/bindings.ts

@@ -35,6 +35,7 @@ export interface Bindings {
   SITE_NAME?: EnvBindingValue;
   SITE_DESCRIPTION?: EnvBindingValue;
   SITE_LANGUAGE?: EnvBindingValue;
+  DASHBOARD_LANGUAGE?: EnvBindingValue;
   HOME_DEFAULT_VIEW?: EnvBindingValue;
   MAIN_RSS_FEED?: EnvBindingValue;
   TIME_ZONE?: EnvBindingValue;

package/src/types/config.ts

@@ -41,6 +41,13 @@ export const CONFIG_FIELDS = {
     envOnly: false,
     envKeys: ["SITE_LANGUAGE"],
   },
+  // Admin dashboard UI locale. Empty means "follow the content language"
+  // (resolved through the catalog fallback chain, i.e. today's behaviour).
+  DASHBOARD_LANGUAGE: {
+    defaultValue: "",
+    envOnly: false,
+    envKeys: ["DASHBOARD_LANGUAGE"],
+  },
   CJK_SERIF_FONT: {
     defaultValue: "off",
     envOnly: false,
@@ -163,7 +170,7 @@ export const CONFIG_FIELDS = {
     envKeys: ["ASSET_BASE_URL"],
   },
   UPLOAD_MAX_FILE_SIZE_MB: {
-    defaultValue: "500",
+    defaultValue: "1024",
     envOnly: true,
     envKeys: ["UPLOAD_MAX_FILE_SIZE_MB"],
   },
@@ -455,6 +462,12 @@ export interface AppConfig {
   /** true only when description is set in DB or ENV (not just the default) */
   siteDescriptionExplicit: boolean;
   siteLanguage: string;
+  /**
+   * Admin dashboard UI locale. Empty string means "follow the content
+   * language" (derived via the catalog fallback chain). When set, it is one of
+   * the translated catalog locales ("en", "zh-Hans", "zh-Hant").
+   */
+  dashboardLanguage: string;
   /** CJK serif font locale: "off", "zh-Hans", "zh-Hant", "ja", or "ko" */
   cjkSerifFont: string;
   homeDefaultView: string;

package/src/types/props.ts

@@ -59,6 +59,8 @@ export interface ArchiveFilters {
   mediaKinds?: MediaKind[];
   hasMedia?: boolean;
   hasTitle?: boolean;
+  /** true = threads (roots with replies), false = single posts (no replies) */
+  hasReplies?: boolean;
   visibility?: ArchiveVisibility;
   view?: ArchiveView;
 }
@@ -122,6 +124,7 @@ export interface CollectionsPageProps {
   items: CollectionDirectoryItem[];
   isAuthenticated: boolean;
   sitePathPrefix?: string;
+  siteOrigin?: string;
 }
 
 // =============================================================================

package/src/ui/compose/ComposeDialog.tsx

@@ -743,6 +743,19 @@ export const ComposeForm: FC<ComposeFormProps> = ({
           "@context: Compose dialog header title when composing a thread",
       }),
     ),
+    replyTitle: i18n._(
+      msg({
+        message: "Reply",
+        comment:
+          "@context: Compose dialog header title when replying to a post",
+      }),
+    ),
+    editTitle: i18n._(
+      msg({
+        message: "Edit",
+        comment: "@context: Compose dialog header title when editing a post",
+      }),
+    ),
     slashHint: i18n._(
       msg({
         message: "Type / for commands",

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

@@ -31,13 +31,11 @@ export function AccountMenuContent({
   demoMode = false,
   hostedControlPlaneAccountUrl,
   hostedControlPlaneProviderLabel,
-  hostedControlPlaneSiteDeleteUrl,
 }: {
   sitePathPrefix?: string;
   demoMode?: boolean;
   hostedControlPlaneAccountUrl?: string | null;
   hostedControlPlaneProviderLabel?: string | null;
-  hostedControlPlaneSiteDeleteUrl?: string | null;
 }) {
   const { i18n } = useLingui();
   const isHosted = Boolean(hostedControlPlaneAccountUrl);
@@ -266,43 +264,6 @@ export function AccountMenuContent({
         />
       </SettingsDirectorySection>
 
-      {!demoMode && isHosted && hostedControlPlaneSiteDeleteUrl ? (
-        <SettingsDirectorySection
-          title={i18n._(
-            msg({
-              message: "Danger Zone",
-              comment:
-                "@context: Settings group label for destructive account actions",
-            }),
-          )}
-          tone="danger"
-        >
-          <SettingsDirectoryLink
-            href={hostedControlPlaneSiteDeleteUrl}
-            icon={ICONS.trash}
-            tone="danger"
-            name={i18n._(
-              msg({
-                message: "Delete Hosted Site",
-                comment:
-                  "@context: Settings item — open the hosted site danger zone in the control plane",
-              }),
-            )}
-            description={i18n._(
-              msg({
-                message:
-                  "Open the hosted site controls in {providerLabel} to cancel billing or permanently delete this site.",
-                comment:
-                  "@context: Settings item description for the hosted delete-site entry in the account menu",
-              }),
-              {
-                providerLabel,
-              },
-            )}
-          />
-        </SettingsDirectorySection>
-      ) : null}
-
       {!demoMode && !isHosted && (
         <SettingsDirectorySection
           title={i18n._(