@jant/core 0.6.16 → 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,50 +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 (merged.sort === "updated") params.set("sort", "updated");
+  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);
 }
 
 // =============================================================================
@@ -99,29 +126,9 @@ 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. */
@@ -142,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;
 }
 
 // =============================================================================
@@ -352,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",
@@ -387,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"
@@ -420,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" />
@@ -487,12 +473,14 @@ const ToggleOption: FC<{
   </a>
 );
 
-const ViewToggle: FC<{
+const LayoutToggle: FC<{
   filters: ArchiveFilters;
-  sitePathPrefix?: string;
-}> = ({ filters, sitePathPrefix = "" }) => {
+  ctx: DimensionContext;
+  defaultLayout: ArchiveLayout;
+  basePath?: string;
+}> = ({ filters, ctx, defaultLayout, basePath = "" }) => {
   const { i18n } = useLingui();
-  const currentView: ArchiveView = filters.view ?? "grid";
+  const currentLayout: ArchiveLayout = filters.layout ?? defaultLayout;
 
   return (
     <div
@@ -500,15 +488,15 @@ const ViewToggle: FC<{
       role="radiogroup"
       aria-label={i18n._(
         msg({
-          message: "View mode",
+          message: "Layout",
           comment: "@context: Archive grid/list toggle group label",
         }),
       )}
     >
       <ToggleOption
-        href={buildFilterUrl(filters, { view: undefined }, sitePathPrefix)}
+        href={buildFilterUrl(filters, { layout: "grid" }, ctx, basePath)}
         icon="layout-grid"
-        active={currentView === "grid"}
+        active={currentLayout === "grid"}
         label={i18n._(
           msg({
             message: "Show as a grid of tiles",
@@ -517,9 +505,9 @@ const ViewToggle: FC<{
         )}
       />
       <ToggleOption
-        href={buildFilterUrl(filters, { view: "list" }, sitePathPrefix)}
+        href={buildFilterUrl(filters, { layout: "list" }, ctx, basePath)}
         icon="list"
-        active={currentView === "list"}
+        active={currentLayout === "list"}
         label={i18n._(
           msg({
             message: "Show as a list with full posts",
@@ -537,8 +525,9 @@ const ViewToggle: FC<{
  */
 const SortToggle: FC<{
   filters: ArchiveFilters;
-  sitePathPrefix?: string;
-}> = ({ filters, sitePathPrefix = "" }) => {
+  ctx: DimensionContext;
+  basePath?: string;
+}> = ({ filters, ctx, basePath = "" }) => {
   const { i18n } = useLingui();
   const sortsByActivity = filters.sort === "updated";
 
@@ -554,7 +543,7 @@ const SortToggle: FC<{
       )}
     >
       <ToggleOption
-        href={buildFilterUrl(filters, { sort: undefined }, sitePathPrefix)}
+        href={buildFilterUrl(filters, { sort: undefined }, ctx, basePath)}
         icon="clock"
         active={!sortsByActivity}
         label={i18n._(
@@ -565,7 +554,7 @@ const SortToggle: FC<{
         )}
       />
       <ToggleOption
-        href={buildFilterUrl(filters, { sort: "updated" }, sitePathPrefix)}
+        href={buildFilterUrl(filters, { sort: "updated" }, ctx, basePath)}
         icon="history"
         active={sortsByActivity}
         label={i18n._(
@@ -584,43 +573,9 @@ const SortToggle: 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> = {
@@ -652,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 ---------------------------------------------------------
 
@@ -677,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._(
@@ -700,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[] = [
@@ -758,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,
       ),
     },
     {
@@ -768,11 +724,9 @@ const FilterBar: FC<{
       icon: FORMAT_ICONS.note,
       value: buildFilterUrl(
         filters,
-        {
-          format: "note",
-          hasTitle: undefined,
-        },
-        sitePathPrefix,
+        { format: "note", title: undefined },
+        ctx,
+        basePath,
       ),
     },
     {
@@ -786,11 +740,9 @@ const FilterBar: FC<{
       indent: true,
       value: buildFilterUrl(
         filters,
-        {
-          format: "note",
-          hasTitle: true,
-        },
-        sitePathPrefix,
+        { format: "note", title: true },
+        ctx,
+        basePath,
       ),
     },
     {
@@ -804,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) => ({
@@ -816,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[] = [
     {
@@ -847,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._(
@@ -891,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",
@@ -928,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 (
@@ -945,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 && (
@@ -959,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
           />
         )}
@@ -977,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}
@@ -1001,41 +972,45 @@ 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>
 
       <div class="archive-toolbar-toggles">
-        <SortToggle filters={filters} sitePathPrefix={sitePathPrefix} />
-        <ViewToggle filters={filters} sitePathPrefix={sitePathPrefix} />
+        <SortToggle filters={filters} ctx={ctx} basePath={basePath} />
+        <LayoutToggle
+          filters={filters}
+          ctx={ctx}
+          defaultLayout={defaultLayout}
+          basePath={basePath}
+        />
       </div>
     </div>
   );
@@ -1333,21 +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 currentLayout: ArchiveLayout = filters.layout ?? defaultLayout;
   const sortsByActivity = filters.sort === "updated";
-  const paginationBaseUrl = buildFilterUrl(filters, {}, sitePathPrefix);
+  const dimensionCtx: DimensionContext = {
+    collections: buildCollectionVocabulary(availableCollections),
+  };
+  const paginationBaseUrl = buildFilterUrl(filters, {}, dimensionCtx, basePath);
   const totalCountUnit =
     totalCount === 1
       ? i18n._(
@@ -1365,25 +1345,37 @@ 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 && (
             <>
               {" · "}
@@ -1400,7 +1392,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
             <>
               {" "}
               <a
-                href={toPublicPath(feedHref, sitePathPrefix)}
+                href={toPublicPath(feedHref, basePath)}
                 class="feed-link"
                 title={i18n._(
                   msg({
@@ -1423,10 +1415,11 @@ export const ArchivePage: FC<ArchivePageProps> = ({
 
         <FilterBar
           filters={filters}
+          defaultLayout={defaultLayout}
           availableYears={availableYears}
           availableCollections={availableCollections}
           isAuthenticated={isAuthenticated}
-          sitePathPrefix={sitePathPrefix}
+          basePath={basePath}
         />
       </header>
 
@@ -1441,7 +1434,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
               }),
             )}
           </p>
-        ) : currentView === "grid" ? (
+        ) : currentLayout === "grid" ? (
           <div class="archive-grid-wrapper">
             <div class="archive-grid">
               {groups.map((group, groupIndex) => (