@jant/core 0.6.15 → 0.7.0

package/src/ui/pages/ArchivePage.tsx

@@ -11,12 +11,29 @@ import { useLingui } from "../../i18n/context.js";
 import type {
   ArchivePageProps,
   ArchiveFilters,
-  ArchiveView,
+  ArchiveLayout,
+  ArchiveSort,
   ArchiveVisibility,
+  Format,
   MediaKind,
 } from "../../types.js";
 import type { PostView } from "../../types/views.js";
-import { FORMATS, MEDIA_KINDS } from "../../types.js";
+import {
+  ARCHIVE_VISIBILITIES,
+  FORMATS,
+  MEDIA_KINDS,
+  PUBLIC_ARCHIVE_VISIBILITIES,
+} from "../../types.js";
+import type {
+  DimensionContext,
+  FilterDimensionValues,
+  MediaSelection,
+} from "../../lib/filter-dimensions.js";
+import {
+  buildCollectionVocabulary,
+  FILTER_DIMENSIONS,
+  serializePostFilterSelection,
+} from "../../lib/filter-dimensions.js";
 import { getFeaturedIconSvg } from "../../lib/featured-icons.js";
 import { getIconSvg } from "../../lib/icons.js";
 import { toPublicPath } from "../../lib/url.js";
@@ -24,49 +41,60 @@ import { toMediaKind } from "../../lib/upload.js";
 import { PagePagination } from "../shared/Pagination.js";
 import { TimelineFeedItem } from "../feed/TimelineFeed.js";
 import { DecorativeQuoteMark } from "../shared/DecorativeQuoteMark.js";
+import {
+  ARCHIVE_ALL_POSTS_LABEL,
+  getFormatLabelPlural as getSharedFormatLabelPlural,
+  getMediaKindLabel as getSharedMediaKindLabel,
+  getVisibilityLabel as getSharedVisibilityLabel,
+  hasActiveArchiveFilter,
+} from "../shared/archive-labels.js";
 
 // =============================================================================
 // URL Builder
 // =============================================================================
 
+/**
+ * One chip's edit to the current view.
+ *
+ * Dimensions are named exactly as the shared registry names them, so a chip
+ * cannot spell a filter the route is unable to read back. An explicit
+ * `undefined` clears a dimension, the same way spreading it does.
+ */
+type FilterUpdates = Partial<FilterDimensionValues> & {
+  layout?: ArchiveLayout;
+  sort?: ArchiveSort;
+  /** Drop every selection and return to the bare archive. */
+  clear?: boolean;
+};
+
 /** Build an archive URL preserving existing filter params, overriding with updates. */
 function buildFilterUrl(
   current: ArchiveFilters,
-  updates: Partial<ArchiveFilters & { clear?: boolean }>,
-  sitePathPrefix = "",
+  updates: FilterUpdates,
+  ctx: DimensionContext,
+  basePath = "",
 ): string {
-  if (updates.clear) return toPublicPath("/archive", sitePathPrefix);
-
-  const merged = { ...current, ...updates };
-  const params = new URLSearchParams();
-
-  if (merged.year) params.set("year", String(merged.year));
-  if (merged.collectionSlug) params.set("collection", merged.collectionSlug);
-  if (merged.format) params.set("format", merged.format);
-  if (merged.mediaKinds && merged.mediaKinds.length > 0) {
-    params.set("media", merged.mediaKinds.join(","));
-  } else if (merged.hasMedia !== undefined) {
-    params.set("media", merged.hasMedia ? "any" : "none");
-  }
-  if (merged.hasTitle !== undefined) {
-    params.set("title", merged.hasTitle ? "any" : "none");
-  }
-  if (merged.hasReplies !== undefined) {
-    params.set("replies", merged.hasReplies ? "any" : "none");
-  }
-  if (merged.visibility) {
-    // "hidden" is the URL spelling of the internal latest_hidden value
-    params.set(
-      "visibility",
-      merged.visibility === "latest_hidden" ? "hidden" : merged.visibility,
-    );
-  }
-  if (merged.view && merged.view !== "grid") params.set("view", merged.view);
+  if (updates.clear) return toPublicPath("/archive", basePath);
+
+  const { layout, sort, clear: _clear, ...selectionUpdates } = updates;
+  const params = serializePostFilterSelection(
+    { ...current.selection, ...selectionUpdates },
+    ctx,
+  );
+
+  // Both layouts are written out in full. An absent `layout` means "whatever
+  // this site defaults to", so a link shared with a layout chosen keeps that
+  // layout even if the site default changes later. Only `layout` is ever
+  // emitted; the older `view` spelling is read-only now.
+  const mergedLayout = "layout" in updates ? layout : current.layout;
+  if (mergedLayout) params.set("layout", mergedLayout);
+  const mergedSort = "sort" in updates ? sort : current.sort;
+  if (mergedSort === "updated") params.set("sort", "updated");
 
   const qs = params.toString();
   return qs
-    ? toPublicPath(`/archive?${qs}`, sitePathPrefix)
-    : toPublicPath("/archive", sitePathPrefix);
+    ? toPublicPath(`/archive?${qs}`, basePath)
+    : toPublicPath("/archive", basePath);
 }
 
 // =============================================================================
@@ -98,36 +126,16 @@ function getFormatLabel(format: string): string {
   return labels[format] ?? format;
 }
 
-function getFormatLabelPlural(format: string): string {
+function getFormatLabelPlural(format: Format): string {
   const { i18n } = useLingui();
-  const labels: Record<string, string> = {
-    note: i18n._(
-      msg({
-        message: "Notes",
-        comment: "@context: Post format label plural - notes",
-      }),
-    ),
-    link: i18n._(
-      msg({
-        message: "Links",
-        comment: "@context: Post format label plural - links",
-      }),
-    ),
-    quote: i18n._(
-      msg({
-        message: "Quotes",
-        comment: "@context: Post format label plural - quotes",
-      }),
-    ),
-  };
-  return labels[format] ?? format + "s";
+  return getSharedFormatLabelPlural(format, i18n);
 }
 
 /** Icon name mapping for post formats. */
 const FORMAT_ICONS: Record<string, string> = {
   note: "notepad-text",
   link: "external-link",
-  quote: "text-quote",
+  quote: "quote",
 };
 
 /** Icon name mapping for media kinds. */
@@ -141,39 +149,21 @@ const MEDIA_KIND_ICONS: Record<MediaKind, string> = {
 
 function getMediaKindLabel(kind: MediaKind): string {
   const { i18n } = useLingui();
-  const labels: Record<MediaKind, string> = {
-    image: i18n._(
-      msg({
-        message: "Images",
-        comment: "@context: Archive media filter - images",
-      }),
-    ),
-    video: i18n._(
-      msg({
-        message: "Video",
-        comment: "@context: Archive media filter - video",
-      }),
-    ),
-    audio: i18n._(
-      msg({
-        message: "Audio",
-        comment: "@context: Archive media filter - audio",
-      }),
-    ),
-    text: i18n._(
-      msg({
-        message: "Text attachment",
-        comment: "@context: Archive media filter - text file attachments",
-      }),
-    ),
-    document: i18n._(
-      msg({
-        message: "Files",
-        comment: "@context: Archive media filter - files/documents",
-      }),
-    ),
-  };
-  return labels[kind] ?? kind;
+  return getSharedMediaKindLabel(kind, i18n);
+}
+
+/**
+ * The kinds a media selection names, or none when it only asks about presence.
+ *
+ * `any`/`none` and a list of kinds are one value in the shared vocabulary; the
+ * chip's multi-select only has something to highlight in the list case.
+ */
+function selectedMediaKinds(
+  selection: MediaSelection | undefined,
+): readonly MediaKind[] {
+  return selection === undefined || selection === "any" || selection === "none"
+    ? []
+    : selection;
 }
 
 // =============================================================================
@@ -351,28 +341,25 @@ const ChipMediaSelect: FC<{
   id: string;
   icon: string;
   filters: ArchiveFilters;
+  ctx: DimensionContext;
   activeLabel?: string;
   clearUrl: string;
-  sitePathPrefix?: string;
-}> = ({ id, icon, filters: f, activeLabel, clearUrl, sitePathPrefix = "" }) => {
+  basePath?: string;
+}> = ({ id, icon, filters: f, ctx, activeLabel, clearUrl, basePath = "" }) => {
   const { i18n } = useLingui();
   const isActive = !!activeLabel;
-  const activeKinds = f.mediaKinds ?? [];
+  const activeKinds = selectedMediaKinds(f.selection.media);
 
   const singleKind = activeKinds.length === 1 ? activeKinds[0] : undefined;
   const activeMediaIcon = isActive
-    ? f.hasMedia === false
+    ? f.selection.media === "none"
       ? "text"
       : singleKind
         ? MEDIA_KIND_ICONS[singleKind]
         : icon
     : undefined;
 
-  const textOnlyUrl = buildFilterUrl(
-    { ...f, mediaKinds: undefined, hasMedia: undefined },
-    { hasMedia: false, mediaKinds: undefined },
-    sitePathPrefix,
-  );
+  const textOnlyUrl = buildFilterUrl(f, { media: "none" }, ctx, basePath);
   const clearLabel = i18n._(
     msg({
       message: "Clear filter",
@@ -386,7 +373,7 @@ const ChipMediaSelect: FC<{
       id={id}
       class="archive-chip-select archive-chip-dropdown archive-chip-media select"
       data-select-initialized
-      data-filter-key="media"
+      data-filter-key={FILTER_DIMENSIONS.media.url.param}
     >
       <button
         type="button"
@@ -419,7 +406,7 @@ const ChipMediaSelect: FC<{
             role="option"
             data-value={textOnlyUrl}
             data-navigate="true"
-            aria-selected={f.hasMedia === false ? "true" : undefined}
+            aria-selected={f.selection.media === "none" ? "true" : undefined}
           >
             <span class="flex items-center gap-2">
               <Icon name="text" class="[&>svg]:size-4 text-muted-foreground" />
@@ -463,34 +450,121 @@ const ChipMediaSelect: FC<{
 // View Toggle
 // =============================================================================
 
-const ViewToggle: FC<{
+/**
+ * One option in a toolbar toggle. `label` is used for both the hover tooltip
+ * and the accessible name — an icon-only control has to explain itself to
+ * both audiences, and one string keeps them from drifting apart.
+ */
+const ToggleOption: FC<{
+  href: string;
+  icon: string;
+  label: string;
+  active: boolean;
+}> = ({ href, icon, label, active }) => (
+  <a
+    href={href}
+    class={`archive-view-btn${active ? " archive-view-btn-active" : ""}`}
+    role="radio"
+    aria-checked={active ? "true" : "false"}
+    aria-label={label}
+    title={label}
+  >
+    <Icon name={icon} class="[&>svg]:size-4" />
+  </a>
+);
+
+const LayoutToggle: FC<{
   filters: ArchiveFilters;
-  sitePathPrefix?: string;
-}> = ({ filters, sitePathPrefix = "" }) => {
-  const currentView: ArchiveView = filters.view ?? "grid";
-  const gridUrl = buildFilterUrl(filters, { view: undefined }, sitePathPrefix);
-  const listUrl = buildFilterUrl(filters, { view: "list" }, sitePathPrefix);
+  ctx: DimensionContext;
+  defaultLayout: ArchiveLayout;
+  basePath?: string;
+}> = ({ filters, ctx, defaultLayout, basePath = "" }) => {
+  const { i18n } = useLingui();
+  const currentLayout: ArchiveLayout = filters.layout ?? defaultLayout;
 
   return (
-    <div class="archive-view-toggle" role="radiogroup" aria-label="View mode">
-      <a
-        href={gridUrl}
-        class={`archive-view-btn${currentView === "grid" ? " archive-view-btn-active" : ""}`}
-        role="radio"
-        aria-checked={currentView === "grid" ? "true" : "false"}
-        aria-label="Grid view"
-      >
-        <Icon name="layout-grid" class="[&>svg]:size-4" />
-      </a>
-      <a
-        href={listUrl}
-        class={`archive-view-btn${currentView === "list" ? " archive-view-btn-active" : ""}`}
-        role="radio"
-        aria-checked={currentView === "list" ? "true" : "false"}
-        aria-label="List view"
-      >
-        <Icon name="list" class="[&>svg]:size-4" />
-      </a>
+    <div
+      class="archive-view-toggle"
+      role="radiogroup"
+      aria-label={i18n._(
+        msg({
+          message: "Layout",
+          comment: "@context: Archive grid/list toggle group label",
+        }),
+      )}
+    >
+      <ToggleOption
+        href={buildFilterUrl(filters, { layout: "grid" }, ctx, basePath)}
+        icon="layout-grid"
+        active={currentLayout === "grid"}
+        label={i18n._(
+          msg({
+            message: "Show as a grid of tiles",
+            comment: "@context: Archive view option - grid",
+          }),
+        )}
+      />
+      <ToggleOption
+        href={buildFilterUrl(filters, { layout: "list" }, ctx, basePath)}
+        icon="list"
+        active={currentLayout === "list"}
+        label={i18n._(
+          msg({
+            message: "Show as a list with full posts",
+            comment: "@context: Archive view option - list",
+          }),
+        )}
+      />
+    </div>
+  );
+};
+
+/**
+ * Time-axis toggle. Sits next to the view toggle because it changes how the
+ * page is arranged, not which threads it contains — unlike the filter chips.
+ */
+const SortToggle: FC<{
+  filters: ArchiveFilters;
+  ctx: DimensionContext;
+  basePath?: string;
+}> = ({ filters, ctx, basePath = "" }) => {
+  const { i18n } = useLingui();
+  const sortsByActivity = filters.sort === "updated";
+
+  return (
+    <div
+      class="archive-view-toggle"
+      role="radiogroup"
+      aria-label={i18n._(
+        msg({
+          message: "Sort order",
+          comment: "@context: Archive sort toggle group label",
+        }),
+      )}
+    >
+      <ToggleOption
+        href={buildFilterUrl(filters, { sort: undefined }, ctx, basePath)}
+        icon="clock"
+        active={!sortsByActivity}
+        label={i18n._(
+          msg({
+            message: "Sort by when each thread was published",
+            comment: "@context: Archive sort option - newest published first",
+          }),
+        )}
+      />
+      <ToggleOption
+        href={buildFilterUrl(filters, { sort: "updated" }, ctx, basePath)}
+        icon="history"
+        active={sortsByActivity}
+        label={i18n._(
+          msg({
+            message: "Sort by when each thread was last added to",
+            comment:
+              "@context: Archive sort option - threads that recently gained a post first",
+          }),
+        )}
+      />
     </div>
   );
 };
@@ -499,43 +573,9 @@ const ViewToggle: FC<{
 // Filter Bar
 // =============================================================================
 
-const ARCHIVE_VISIBILITIES: ArchiveVisibility[] = [
-  "public",
-  "featured",
-  "latest_hidden",
-  "private",
-];
-
 function getVisibilityLabel(v: ArchiveVisibility): string {
   const { i18n } = useLingui();
-  const labels: Record<ArchiveVisibility, string> = {
-    public: i18n._(
-      msg({
-        message: "Public",
-        comment: "@context: Archive visibility filter - public posts",
-      }),
-    ),
-    latest_hidden: i18n._(
-      msg({
-        message: "Hidden from Latest",
-        comment:
-          "@context: Archive visibility filter for posts hidden from Latest",
-      }),
-    ),
-    private: i18n._(
-      msg({
-        message: "Private",
-        comment: "@context: Archive visibility filter - private posts",
-      }),
-    ),
-    featured: i18n._(
-      msg({
-        message: "Featured",
-        comment: "@context: Archive visibility filter - featured posts",
-      }),
-    ),
-  };
-  return labels[v];
+  return getSharedVisibilityLabel(v, i18n);
 }
 
 const VISIBILITY_ICONS: Record<ArchiveVisibility, string> = {
@@ -567,19 +607,27 @@ const THREAD_ICONS = {
 
 const FilterBar: FC<{
   filters: ArchiveFilters;
+  defaultLayout: ArchiveLayout;
   availableYears: number[];
-  availableCollections: { slug: string; title: string }[];
+  availableCollections: { id: string; slug: string; title: string }[];
   isAuthenticated: boolean;
-  sitePathPrefix?: string;
+  basePath?: string;
 }> = ({
   filters,
+  defaultLayout,
   availableYears,
   availableCollections,
   isAuthenticated,
-  sitePathPrefix = "",
+  basePath = "",
 }) => {
   const { i18n } = useLingui();
-  const currentUrl = buildFilterUrl(filters, {}, sitePathPrefix);
+  // Every link on this bar is this page with one dimension edited, so the bar
+  // spells them with the same serializer the route parses with.
+  const ctx: DimensionContext = {
+    collections: buildCollectionVocabulary(availableCollections),
+  };
+  const currentUrl = buildFilterUrl(filters, {}, ctx, basePath);
+  const selection = filters.selection;
 
   // --- Year options ---------------------------------------------------------
 
@@ -592,20 +640,24 @@ const FilterBar: FC<{
         }),
       ),
       icon: FILTER_ICONS.year,
-      value: buildFilterUrl(
-        { ...filters, year: undefined },
-        { year: undefined },
-        sitePathPrefix,
-      ),
+      value: buildFilterUrl(filters, { year: undefined }, ctx, basePath),
     },
     ...availableYears.map((year) => ({
       label: String(year),
-      value: buildFilterUrl(filters, { year }, sitePathPrefix),
+      value: buildFilterUrl(filters, { year }, ctx, basePath),
     })),
   ];
 
   // --- Collection options ---------------------------------------------------
 
+  // The chip picks one collection at a time. A URL may name several — the
+  // vocabulary supports it and the page renders it — but a dropdown that
+  // replaces the selection is the honest control for a single click.
+  const selectedCollectionIds = selection.collection ?? [];
+  const selectedCollectionTitles = selectedCollectionIds
+    .map((id) => ctx.collections?.titleById.get(id))
+    .filter((title): title is string => Boolean(title));
+
   const collectionOptions: ChipSelectOption[] = [
     {
       label: i18n._(
@@ -615,52 +667,40 @@ const FilterBar: FC<{
         }),
       ),
       icon: FILTER_ICONS.collection,
-      value: buildFilterUrl(
-        {
-          ...filters,
-          collectionSlug: undefined,
-          collectionTitle: undefined,
-        },
-        { collectionSlug: undefined, collectionTitle: undefined },
-        sitePathPrefix,
-      ),
+      value: buildFilterUrl(filters, { collection: undefined }, ctx, basePath),
     },
     ...availableCollections.map((col) => ({
       label: col.title,
-      value: buildFilterUrl(
-        filters,
-        { collectionSlug: col.slug },
-        sitePathPrefix,
-      ),
+      value: buildFilterUrl(filters, { collection: [col.id] }, ctx, basePath),
     })),
   ];
 
   // --- Format options (Notes split into All / Titled / Untitled) -----------
 
-  const formatActiveLabel = filters.format
-    ? filters.hasTitle === true
+  const formatActiveLabel = selection.format
+    ? selection.title === true
       ? i18n._(
           msg({
             message: "Titled",
             comment: "@context: Archive filter - notes that have a title",
           }),
         )
-      : filters.hasTitle === false
+      : selection.title === false
         ? i18n._(
             msg({
               message: "Untitled",
               comment: "@context: Archive filter - notes without a title",
             }),
           )
-        : getFormatLabelPlural(filters.format)
+        : getFormatLabelPlural(selection.format)
     : undefined;
 
-  const formatActiveIcon = filters.format
-    ? filters.hasTitle === true
+  const formatActiveIcon = selection.format
+    ? selection.title === true
       ? "type"
-      : filters.hasTitle === false
+      : selection.title === false
         ? "text"
-        : FORMAT_ICONS[filters.format]
+        : FORMAT_ICONS[selection.format]
     : undefined;
 
   const formatOptions: ChipSelectOption[] = [
@@ -673,9 +713,10 @@ const FilterBar: FC<{
       ),
       icon: FILTER_ICONS.format,
       value: buildFilterUrl(
-        { ...filters, format: undefined, hasTitle: undefined },
-        { format: undefined, hasTitle: undefined },
-        sitePathPrefix,
+        filters,
+        { format: undefined, title: undefined },
+        ctx,
+        basePath,
       ),
     },
     {
@@ -683,11 +724,9 @@ const FilterBar: FC<{
       icon: FORMAT_ICONS.note,
       value: buildFilterUrl(
         filters,
-        {
-          format: "note",
-          hasTitle: undefined,
-        },
-        sitePathPrefix,
+        { format: "note", title: undefined },
+        ctx,
+        basePath,
       ),
     },
     {
@@ -701,11 +740,9 @@ const FilterBar: FC<{
       indent: true,
       value: buildFilterUrl(
         filters,
-        {
-          format: "note",
-          hasTitle: true,
-        },
-        sitePathPrefix,
+        { format: "note", title: true },
+        ctx,
+        basePath,
       ),
     },
     {
@@ -719,11 +756,9 @@ const FilterBar: FC<{
       indent: true,
       value: buildFilterUrl(
         filters,
-        {
-          format: "note",
-          hasTitle: false,
-        },
-        sitePathPrefix,
+        { format: "note", title: false },
+        ctx,
+        basePath,
       ),
     },
     ...FORMATS.filter((f) => f !== "note").map((f) => ({
@@ -731,25 +766,33 @@ const FilterBar: FC<{
       icon: FORMAT_ICONS[f],
       value: buildFilterUrl(
         filters,
-        { format: f, hasTitle: undefined },
-        sitePathPrefix,
+        { format: f, title: undefined },
+        ctx,
+        basePath,
       ),
     })),
   ];
 
-  // --- Visibility options (authenticated only) --------------------------------
-
-  // "All visibility" needs the explicit ?visibility=all param so the route
-  // doesn't default back to "public". Build its URL by appending to the
-  // base URL (which has no visibility param since we merge undefined).
-  const allVisibilityBaseUrl = buildFilterUrl(
-    { ...filters, visibility: undefined },
+  // --- Visibility options ------------------------------------------------------
+
+  // A signed-out reader gets the same dimension minus `private`: the archive
+  // already shows them Hidden-from-Latest posts, so those two values name sets
+  // they can actually reach. `private` names one they cannot, and the route
+  // redirects rather than quietly widening it.
+  const selectableVisibilities = isAuthenticated
+    ? ARCHIVE_VISIBILITIES
+    : PUBLIC_ARCHIVE_VISIBILITIES;
+
+  // "All visibility" is the absence of the parameter, not a value of it. The
+  // page once emitted `?visibility=all` here, which read back as exactly the
+  // same thing — a second spelling of "nothing selected" that only the parser
+  // knew about. It is still read, for URLs already written; it is not written.
+  const allVisibilityUrl = buildFilterUrl(
+    filters,
     { visibility: undefined },
-    sitePathPrefix,
+    ctx,
+    basePath,
   );
-  const allVisibilityUrl = allVisibilityBaseUrl.includes("?")
-    ? `${allVisibilityBaseUrl}&visibility=all`
-    : `${allVisibilityBaseUrl}?visibility=all`;
 
   const visibilityOptions: ChipSelectOption[] = [
     {
@@ -762,21 +805,22 @@ const FilterBar: FC<{
       icon: FILTER_ICONS.visibility,
       value: allVisibilityUrl,
     },
-    ...ARCHIVE_VISIBILITIES.map((v) => ({
+    ...selectableVisibilities.map((v) => ({
       label: getVisibilityLabel(v),
       ...(v === "featured"
         ? { iconHtml: FEATURED_VISIBILITY_ICON_HTML }
         : { icon: VISIBILITY_ICONS[v] }),
-      value: buildFilterUrl(filters, { visibility: v }, sitePathPrefix),
+      value: buildFilterUrl(filters, { visibility: v }, ctx, basePath),
     })),
   ];
 
   // --- Thread options ---------------------------------------------------------
 
   const threadClearUrl = buildFilterUrl(
-    { ...filters, hasReplies: undefined },
-    { hasReplies: undefined },
-    sitePathPrefix,
+    filters,
+    { replies: undefined },
+    ctx,
+    basePath,
   );
 
   const threadsLabel = i18n._(
@@ -806,31 +850,31 @@ const FilterBar: FC<{
     {
       label: threadsLabel,
       icon: THREAD_ICONS.threads,
-      value: buildFilterUrl(filters, { hasReplies: true }, sitePathPrefix),
+      value: buildFilterUrl(filters, { replies: true }, ctx, basePath),
     },
     {
       label: singlePostsLabel,
       icon: THREAD_ICONS.single,
-      value: buildFilterUrl(filters, { hasReplies: false }, sitePathPrefix),
+      value: buildFilterUrl(filters, { replies: false }, ctx, basePath),
     },
   ];
 
   const threadActiveLabel =
-    filters.hasReplies === true
+    selection.replies === true
       ? threadsLabel
-      : filters.hasReplies === false
+      : selection.replies === false
         ? singlePostsLabel
         : undefined;
   const threadActiveIcon =
-    filters.hasReplies === true
+    selection.replies === true
       ? THREAD_ICONS.threads
-      : filters.hasReplies === false
+      : selection.replies === false
         ? THREAD_ICONS.single
         : undefined;
 
-  const activeKinds = filters.mediaKinds ?? [];
+  const activeKinds = selectedMediaKinds(selection.media);
   const mediaActiveLabel =
-    filters.hasMedia === false
+    selection.media === "none"
       ? i18n._(
           msg({
             message: "Text",
@@ -843,11 +887,20 @@ const FilterBar: FC<{
           getMediaKindLabel(activeKinds[0]!)
         : activeKinds.length > 1
           ? String(activeKinds.length)
-          : undefined;
+          : selection.media === "any"
+            ? i18n._(
+                msg({
+                  message: "With media",
+                  comment:
+                    "@context: Archive filter - posts carrying any media attachment",
+                }),
+              )
+            : undefined;
   const mediaClearUrl = buildFilterUrl(
-    { ...filters, mediaKinds: undefined, hasMedia: undefined },
-    { mediaKinds: undefined, hasMedia: undefined },
-    sitePathPrefix,
+    filters,
+    { media: undefined },
+    ctx,
+    basePath,
   );
 
   return (
@@ -860,11 +913,12 @@ const FilterBar: FC<{
             options={yearOptions}
             currentValue={currentUrl}
             clearUrl={buildFilterUrl(
-              { ...filters, year: undefined },
+              filters,
               { year: undefined },
-              sitePathPrefix,
+              ctx,
+              basePath,
             )}
-            activeLabel={filters.year ? String(filters.year) : undefined}
+            activeLabel={selection.year ? String(selection.year) : undefined}
           />
         )}
         {availableCollections.length > 0 && (
@@ -874,15 +928,16 @@ const FilterBar: FC<{
             options={collectionOptions}
             currentValue={currentUrl}
             clearUrl={buildFilterUrl(
-              {
-                ...filters,
-                collectionSlug: undefined,
-                collectionTitle: undefined,
-              },
-              { collectionSlug: undefined, collectionTitle: undefined },
-              sitePathPrefix,
+              filters,
+              { collection: undefined },
+              ctx,
+              basePath,
             )}
-            activeLabel={filters.collectionTitle}
+            activeLabel={
+              selectedCollectionTitles.length > 0
+                ? selectedCollectionTitles.join(", ")
+                : undefined
+            }
             iconOnly
           />
         )}
@@ -892,9 +947,10 @@ const FilterBar: FC<{
           options={formatOptions}
           currentValue={currentUrl}
           clearUrl={buildFilterUrl(
-            { ...filters, format: undefined, hasTitle: undefined },
-            { format: undefined, hasTitle: undefined },
-            sitePathPrefix,
+            filters,
+            { format: undefined, title: undefined },
+            ctx,
+            basePath,
           )}
           activeLabel={formatActiveLabel}
           activeIcon={formatActiveIcon}
@@ -916,39 +972,46 @@ const FilterBar: FC<{
           id="af-media"
           icon={FILTER_ICONS.media}
           filters={filters}
+          ctx={ctx}
           activeLabel={mediaActiveLabel}
           clearUrl={mediaClearUrl}
-          sitePathPrefix={sitePathPrefix}
+          basePath={basePath}
         />
 
-        {isAuthenticated && (
-          <ChipSelect
-            id="af-visibility"
-            icon={FILTER_ICONS.visibility}
-            options={visibilityOptions}
-            currentValue={currentUrl}
-            clearUrl={allVisibilityUrl}
-            activeLabel={
-              filters.visibility
-                ? getVisibilityLabel(filters.visibility)
-                : undefined
-            }
-            activeIcon={
-              filters.visibility && filters.visibility !== "featured"
-                ? VISIBILITY_ICONS[filters.visibility]
-                : undefined
-            }
-            activeIconHtml={
-              filters.visibility === "featured"
-                ? FEATURED_VISIBILITY_ICON_HTML
-                : undefined
-            }
-            iconOnly
-          />
-        )}
+        <ChipSelect
+          id="af-visibility"
+          icon={FILTER_ICONS.visibility}
+          options={visibilityOptions}
+          currentValue={currentUrl}
+          clearUrl={allVisibilityUrl}
+          activeLabel={
+            selection.visibility
+              ? getVisibilityLabel(selection.visibility)
+              : undefined
+          }
+          activeIcon={
+            selection.visibility && selection.visibility !== "featured"
+              ? VISIBILITY_ICONS[selection.visibility]
+              : undefined
+          }
+          activeIconHtml={
+            selection.visibility === "featured"
+              ? FEATURED_VISIBILITY_ICON_HTML
+              : undefined
+          }
+          iconOnly
+        />
       </div>
 
-      <ViewToggle filters={filters} sitePathPrefix={sitePathPrefix} />
+      <div class="archive-toolbar-toggles">
+        <SortToggle filters={filters} ctx={ctx} basePath={basePath} />
+        <LayoutToggle
+          filters={filters}
+          ctx={ctx}
+          defaultLayout={defaultLayout}
+          basePath={basePath}
+        />
+      </div>
     </div>
   );
 };
@@ -1245,20 +1308,26 @@ const ArchiveTile: FC<{ post: PostView; timeZone?: string }> = ({
 export const ArchivePage: FC<ArchivePageProps> = ({
   groups,
   items,
+  defaultLayout = "list",
   totalCount,
+  baselineCount,
   currentPage,
   totalPages,
   filters,
   availableYears,
   availableCollections,
   isAuthenticated,
-  sitePathPrefix = "",
+  basePath = "",
   timeZone = "UTC",
   feedHref,
 }) => {
   const { i18n } = useLingui();
-  const currentView: ArchiveView = filters.view ?? "grid";
-  const paginationBaseUrl = buildFilterUrl(filters, {}, sitePathPrefix);
+  const currentLayout: ArchiveLayout = filters.layout ?? defaultLayout;
+  const sortsByActivity = filters.sort === "updated";
+  const dimensionCtx: DimensionContext = {
+    collections: buildCollectionVocabulary(availableCollections),
+  };
+  const paginationBaseUrl = buildFilterUrl(filters, {}, dimensionCtx, basePath);
   const totalCountUnit =
     totalCount === 1
       ? i18n._(
@@ -1276,30 +1345,54 @@ export const ArchivePage: FC<ArchivePageProps> = ({
           }),
         );
 
+  // A reader who arrives on a pre-filtered URL never applied the filter and has
+  // no way to know how much it removed. Naming the seven dimensions back at
+  // them is what the chip bar already does; what it cannot say is how much is
+  // left, so the count carries its own baseline instead.
+  const showsSubset =
+    hasActiveArchiveFilter(filters.selection) &&
+    baselineCount !== undefined &&
+    baselineCount > totalCount;
+
+  const countRemainder = showsSubset
+    ? i18n._(
+        msg({
+          message: "of {total} {unit}",
+          comment:
+            "@context: Archive page count when a filter narrows the view, following the matching count — reads as '42 of 1,240 threads'",
+        }),
+        { total: baselineCount, unit: totalCountUnit },
+      )
+    : totalCountUnit;
+
+  const countSummary = `${totalCount} ${countRemainder}`;
+
   return (
     <div class="py-6" data-page="archive">
       <header class="archive-page-header page-intro">
         <div class="page-intro-title-row">
-          <h1 class="page-intro-title">
-            {i18n._(
-              msg({
-                message: "Archive",
-                comment: "@context: Archive page title",
-              }),
-            )}
-          </h1>
+          <h1 class="page-intro-title">{i18n._(ARCHIVE_ALL_POSTS_LABEL)}</h1>
         </div>
-        <p
-          class="page-intro-meta archive-page-meta"
-          aria-label={`${totalCount} ${totalCountUnit}`}
-        >
+        <p class="page-intro-meta archive-page-meta" aria-label={countSummary}>
           <span class="archive-page-summary-count">{totalCount}</span>{" "}
-          {totalCountUnit}
+          {countRemainder}
+          {sortsByActivity && (
+            <>
+              {" · "}
+              {i18n._(
+                msg({
+                  message: "newest changes first",
+                  comment:
+                    "@context: Archive page meta note explaining the active sort order",
+                }),
+              )}
+            </>
+          )}
           {feedHref && (
             <>
               {" "}
               <a
-                href={toPublicPath(feedHref, sitePathPrefix)}
+                href={toPublicPath(feedHref, basePath)}
                 class="feed-link"
                 title={i18n._(
                   msg({
@@ -1322,10 +1415,11 @@ export const ArchivePage: FC<ArchivePageProps> = ({
 
         <FilterBar
           filters={filters}
+          defaultLayout={defaultLayout}
           availableYears={availableYears}
           availableCollections={availableCollections}
           isAuthenticated={isAuthenticated}
-          sitePathPrefix={sitePathPrefix}
+          basePath={basePath}
         />
       </header>
 
@@ -1340,14 +1434,20 @@ export const ArchivePage: FC<ArchivePageProps> = ({
               }),
             )}
           </p>
-        ) : currentView === "grid" ? (
+        ) : currentLayout === "grid" ? (
           <div class="archive-grid-wrapper">
             <div class="archive-grid">
               {groups.map((group, groupIndex) => (
                 <div key={`grid-${group.year}-${group.month}`} class="contents">
                   <ArchiveMonthHeader
                     class={`archive-month-header${groupIndex > 0 ? " archive-month-header-spaced" : ""}`}
-                    label={group.label}
+                    // Not translated, on purpose: `group.label` is built with
+                    // a hardcoded en-US month name, so a translated wrapper
+                    // would only produce "更新于 August 2026". Both halves
+                    // become translatable together, or neither does.
+                    label={
+                      sortsByActivity ? `Updated ${group.label}` : group.label
+                    }
                     count={group.totalCount}
                   />
                   {group.posts.map((post) => (