@byline/host-tanstack-start 0.9.3

package/src/admin-shell/chrome/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,96 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import cx from 'classnames'
+
+import { Link } from '../loose-router.js'
+import styles from './breadcrumbs.module.css'
+import type { Breadcrumb } from './@types.js'
+
+function truncate(str: string, length: number, useWordBoundary = true, useSuffix = true): string {
+  if (str == null || str.length <= length) return str
+  const subString = str.slice(0, length - 2)
+  const truncated = useWordBoundary ? subString.slice(0, subString.lastIndexOf(' ')) : subString
+  return useSuffix ? `${truncated}...` : truncated
+}
+
+export function Breadcrumbs({
+  breadcrumbs,
+  className,
+  homeLabel = 'Home',
+  homePath = '/',
+}: {
+  breadcrumbs: Breadcrumb[]
+  className?: string
+  homeLabel?: string
+  homePath?: string
+}): React.JSX.Element {
+  return (
+    <nav aria-label="Breadcrumb" className={cx('byline-breadcrumbs', styles.nav, className)}>
+      <ul className={cx('byline-breadcrumbs-list', styles.list)}>
+        <li className={cx('byline-breadcrumbs-item', styles.item)}>
+          <Link to={homePath as string} className={cx('byline-breadcrumbs-link', styles.link)}>
+            <svg
+              role="presentation"
+              className={cx('byline-breadcrumbs-home-icon', styles.homeIcon)}
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+            </svg>
+            {homeLabel}
+          </Link>
+        </li>
+        {breadcrumbs != null &&
+          breadcrumbs.length > 0 &&
+          breadcrumbs.map((breadcrumb, index) => {
+            const isLeaf = index === breadcrumbs.length - 1
+            return (
+              <li
+                key={breadcrumb.href}
+                aria-current={isLeaf ? 'page' : undefined}
+                className={cx('byline-breadcrumbs-item', styles.item)}
+              >
+                <div className={cx('byline-breadcrumbs-item-row', styles.item)}>
+                  <svg
+                    role="presentation"
+                    className={cx('byline-breadcrumbs-chevron', styles.chevron, {
+                      'byline-breadcrumbs-chevron-current': isLeaf,
+                      [styles.chevronCurrent]: isLeaf,
+                    })}
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  {isLeaf ? (
+                    <span className={cx('byline-breadcrumbs-leaf', styles.leaf)}>
+                      {truncate(breadcrumb.label, 20, true)}
+                    </span>
+                  ) : (
+                    <Link
+                      to={breadcrumb.href as string}
+                      className={cx('byline-breadcrumbs-link', styles.link)}
+                    >
+                      {truncate(breadcrumb.label, 20, true)}
+                    </Link>
+                  )}
+                </div>
+              </li>
+            )
+          })}
+      </ul>
+    </nav>
+  )
+}

package/src/admin-shell/chrome/byline-logo.tsx

@@ -0,0 +1,151 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+const SvgComponent = ({ className }: { className?: string }) => (
+  <svg
+    role="presentation"
+    id="AW"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 512 512"
+    className={className}
+  >
+    <defs>
+      <linearGradient
+        id="linear-gradient"
+        x1={256}
+        y1={-61.06}
+        x2={256}
+        y2={844.52}
+        gradientTransform="translate(512 0) rotate(90)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.19} stopColor="#871fff" />
+        <stop offset={1} stopColor="#00005e" />
+      </linearGradient>
+    </defs>
+    <rect
+      x={6}
+      y={6}
+      width={500}
+      height={500}
+      rx={56.38}
+      ry={56.38}
+      transform="translate(0 512) rotate(-90)"
+      style={{
+        fill: 'url(#linear-gradient)',
+      }}
+    />
+    <g>
+      <g>
+        <rect
+          x={61.13}
+          y={76.47}
+          width={149.54}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          style={{ fill: '#031133' }}
+        />
+        <rect
+          x={61.13}
+          y={145.83}
+          width={102.9}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          style={{ fill: '#031133' }}
+        />
+        <rect
+          x={61.13}
+          y={215.18}
+          width={56.26}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          style={{ fill: '#031133' }}
+        />
+        <rect
+          x={61.13}
+          y={76.47}
+          width={139.93}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          style={{ fill: '#fff' }}
+        />
+        <rect
+          x={61.13}
+          y={145.83}
+          width={93.29}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          style={{ fill: '#fff' }}
+        />
+        <rect
+          x={61.13}
+          y={215.18}
+          width={46.64}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          style={{ fill: '#fff' }}
+        />
+      </g>
+      <g>
+        <rect
+          x={301.92}
+          y={405.12}
+          width={149.54}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          transform="translate(753.38 839.9) rotate(180)"
+          style={{ fill: '#031133' }}
+        />
+        <rect
+          x={348.56}
+          y={335.77}
+          width={102.9}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          transform="translate(800.02 701.19) rotate(180)"
+          style={{ fill: '#031133' }}
+        />
+        <rect
+          x={311.53}
+          y={405.12}
+          width={139.93}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          transform="translate(762.99 839.9) rotate(180)"
+          style={{ fill: '#fff' }}
+        />
+        <rect
+          x={358.17}
+          y={335.77}
+          width={93.29}
+          height={29.65}
+          rx={14.83}
+          ry={14.83}
+          transform="translate(809.64 701.19) rotate(180)"
+          style={{ fill: '#fff' }}
+        />
+      </g>
+    </g>
+    <path
+      d="M351.68,191.96s24.57,12.11,66.36-8.06c-3.22,4.24-12.96,22.53-39.01,35.05-18.67,8.98-33.44,13.47-60.53,19.52,0,0,28.27,14.57,66.23-5.43-29.64,43.26-53.21,56.9-132.88,80.78,0,0,19.82,12.09,61.09-5.89-7.81,11.57-18.67,19.81-26.67,26.36-25.74,21.09-41.93,19.65-92.41,26.52-9.96,21.86-18.61,44.08-23.16,66.66-1.83,10.93-6.57,20.49-15.15,30.05l-2.56.49c-2.56-5.38-3.3-10.97-3.31-16.59,0-1.59.04-3.17.16-4.76,2.48-21.31,11.16-39.56,19.81-60,2.23-5.2,4.58-10.4,7.02-15.55,2.58-5.45,5.25-10.89,8.05-16.27,4.75-9.3,9.81-18.51,15.15-27.62,5.25-8.96,10.75-17.85,16.52-26.63,2.62-4.35,5.29-8.68,8.04-13,5.92-9.44,12.09-18.79,18.46-28.08,9.28-13.54,18.95-26.94,28.92-40.21,7.21-9.58,14.54-19.11,21.99-28.56,8.29-10.54,16.71-20.99,25.2-31.42l-2.96-4.01c-11.11,11.14-21.93,22.43-32.45,33.9-8.8,9.59-17.39,19.27-25.76,29.08-2.06,2.37-4.07,4.75-6.08,7.14-9.24,11.02-18.14,22.22-26.61,33.58-6.98,9.32-13.66,18.76-20.07,28.3-8.74,13.01-16.94,26.22-24.54,39.62-5.16,9.09-10.06,18.28-14.66,27.56-.11.19-.2.36-.28.55-.07-.17-.11-.32-.16-.49-2.42-6.69-1.51-26.16-.89-36.13.63-10.85,3.6-23.3,7.57-37.3,13.9-49.03,47.15-87.85,54.64-97.2,54.13-67.7,143.46-128.01,187.49-119.71,20.59,3.88,24.01,18.78,25.97,23.85.11.3.22.61.35.89,26.84,69.91-76.02,107.15-88.85,113.01Z"
+      style={{ fill: '#fff' }}
+    />
+  </svg>
+)
+
+export default SvgComponent

package/src/admin-shell/chrome/content.module.css

@@ -0,0 +1,16 @@
+/**
+ * Content — main scrollable region of the admin shell.
+ *
+ * Override handle: .byline-admin-content
+ */
+
+.root,
+:global(.byline-admin-content) {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding-top: 1rem;
+  padding-bottom: 1.5rem;
+}

package/src/admin-shell/chrome/content.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type React from 'react'
+import { useEffect } from 'react'
+
+import cx from 'classnames'
+
+import styles from './content.module.css'
+import { useAdminMenu } from './menu-provider.js'
+
+/**
+ * Wrapper for the main content area of the admin shell.
+ *
+ * With the new drawer model there is no margin trick to perform — the
+ * drawer is inline in the flex row on desktop (flex reclaims space
+ * automatically when it narrows to icon-only) and fully fixed-positioned
+ * on mobile (doesn't affect flow). This wrapper therefore just renders
+ * the content stream and adds one behaviour: a window click listener
+ * that closes the mobile overlay when the user taps outside it.
+ */
+interface ContentProps {
+  children: React.ReactNode
+}
+
+export function Content({ children }: ContentProps): React.JSX.Element {
+  const { mobile, closeDrawer } = useAdminMenu()
+
+  useEffect(() => {
+    if (mobile !== true) return
+    const handleWindowClick = (event: MouseEvent) => {
+      const target = event.target
+      if (!(target instanceof Element)) {
+        closeDrawer()
+        return
+      }
+      // Don't close if the click originated inside the drawer itself or on
+      // the floating launcher button (both carry an `aria-controls` /
+      // `id` of `admin-menu`). Without this guard the open-click would
+      // race the window listener and immediately close the drawer it just
+      // opened.
+      if (target.closest('#admin-menu')) return
+      if (target.closest('[aria-controls="admin-menu"]')) return
+      closeDrawer()
+    }
+    window.addEventListener('click', handleWindowClick)
+    return () => {
+      window.removeEventListener('click', handleWindowClick)
+    }
+  }, [mobile, closeDrawer])
+
+  return <div className={cx('byline-admin-content', styles.root)}>{children}</div>
+}

package/src/admin-shell/chrome/dashboard.module.css

@@ -0,0 +1,245 @@
+/**
+ * AdminDashboard — collection-summary cards on /admin.
+ *
+ * Override handles:
+ *   .byline-dashboard-grid             — outer auto-fit card grid
+ *   .byline-dashboard-card-header      — header row of each card
+ *   .byline-dashboard-card-title       — flex row inside the header
+ *   .byline-dashboard-title-text       — collection plural-name label
+ *   .byline-dashboard-title-meta       — "<n> total" caption
+ *   .byline-dashboard-stat-grid        — auto-fit grid of status tiles
+ *   .byline-dashboard-stat-tile        — each tile (also a Link)
+ *   .byline-dashboard-stat-tile-label  — status label (DRAFT, PUBLISHED, …)
+ *   .byline-dashboard-stat-tile-number — status count
+ *   .byline-dashboard-tile-draft       — colour modifier for status="draft"
+ *   .byline-dashboard-tile-published   — colour modifier for status="published"
+ *   .byline-dashboard-tile-archived    — colour modifier for status="archived"
+ *   .byline-dashboard-tile-custom      — colour modifier for any other status
+ *   .byline-dashboard-empty-link       — fallback card body link when no stats
+ */
+
+.grid,
+:global(.byline-dashboard-grid) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  gap: 1.5rem;
+}
+
+.cardLink,
+:global(.byline-dashboard-card-link) {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.cardLink:hover,
+:global(.byline-dashboard-card-link:hover) {
+  opacity: 0.9;
+}
+
+.cardHeader,
+:global(.byline-dashboard-card-header) {
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  padding-bottom: 0.75rem;
+}
+
+:is([data-theme="dark"], :global(.dark)) .cardHeader,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-card-header) {
+  border-bottom-color: var(--gray-700);
+}
+
+.cardTitle,
+:global(.byline-dashboard-card-title) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+
+.titleText,
+:global(.byline-dashboard-title-text) {
+  font-size: 1.5rem;
+}
+
+.titleMeta,
+:global(.byline-dashboard-title-meta) {
+  font-size: 0.9rem;
+  font-weight: normal;
+}
+
+.statGrid,
+:global(.byline-dashboard-stat-grid) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+  gap: 0.5rem;
+}
+
+.statTile,
+:global(.byline-dashboard-stat-tile) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  padding: 1rem 0.5rem 0.625rem;
+  gap: 0.125rem;
+  transition: opacity 200ms ease;
+  text-decoration: none;
+}
+
+.statTile:hover,
+:global(.byline-dashboard-stat-tile:hover) {
+  opacity: 0.8;
+}
+
+.statTileLabel,
+:global(.byline-dashboard-stat-tile-label) {
+  font-size: 0.6rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  line-height: 1;
+}
+
+.statTileNumber,
+:global(.byline-dashboard-stat-tile-number) {
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  margin-top: 0.25rem;
+}
+
+/* Colour modifiers — one set per known status, plus a fallback. */
+
+.tileDraft,
+:global(.byline-dashboard-tile-draft) {
+  background-color: #fffbeb;
+}
+
+.tileDraft .statTileLabel,
+:global(.byline-dashboard-tile-draft) :global(.byline-dashboard-stat-tile-label) {
+  color: #d97706;
+}
+
+.tileDraft .statTileNumber,
+:global(.byline-dashboard-tile-draft) :global(.byline-dashboard-stat-tile-number) {
+  color: #b45309;
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileDraft,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-draft) {
+  background-color: rgba(120, 53, 15, 0.2);
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileDraft .statTileLabel,
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-dashboard-tile-draft)
+  :global(.byline-dashboard-stat-tile-label) {
+  color: #fbbf24;
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileDraft .statTileNumber,
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-dashboard-tile-draft)
+  :global(.byline-dashboard-stat-tile-number) {
+  color: #fcd34d;
+}
+
+.tilePublished,
+:global(.byline-dashboard-tile-published) {
+  background-color: #ecfdf5;
+}
+
+.tilePublished .statTileLabel,
+:global(.byline-dashboard-tile-published) :global(.byline-dashboard-stat-tile-label),
+.tilePublished .statTileNumber,
+:global(.byline-dashboard-tile-published) :global(.byline-dashboard-stat-tile-number) {
+  color: #047857;
+}
+
+:is([data-theme="dark"], :global(.dark)) .tilePublished,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-published) {
+  background-color: rgba(6, 78, 59, 0.2);
+}
+
+:is([data-theme="dark"], :global(.dark)) .tilePublished .statTileLabel,
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-dashboard-tile-published)
+  :global(.byline-dashboard-stat-tile-label) {
+  color: #34d399;
+}
+
+:is([data-theme="dark"], :global(.dark)) .tilePublished .statTileNumber,
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-dashboard-tile-published)
+  :global(.byline-dashboard-stat-tile-number) {
+  color: #6ee7b7;
+}
+
+.tileArchived,
+:global(.byline-dashboard-tile-archived) {
+  background-color: #f0f9ff;
+}
+
+.tileArchived .statTileLabel,
+:global(.byline-dashboard-tile-archived) :global(.byline-dashboard-stat-tile-label),
+.tileArchived .statTileNumber,
+:global(.byline-dashboard-tile-archived) :global(.byline-dashboard-stat-tile-number) {
+  color: #0369a1;
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileArchived,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-archived) {
+  background-color: rgba(12, 74, 110, 0.2);
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileArchived .statTileLabel,
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-dashboard-tile-archived)
+  :global(.byline-dashboard-stat-tile-label) {
+  color: #38bdf8;
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileArchived .statTileNumber,
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-dashboard-tile-archived)
+  :global(.byline-dashboard-stat-tile-number) {
+  color: #7dd3fc;
+}
+
+.tileCustom,
+:global(.byline-dashboard-tile-custom) {
+  background-color: #f5f3ff;
+}
+
+.tileCustom .statTileLabel,
+:global(.byline-dashboard-tile-custom) :global(.byline-dashboard-stat-tile-label),
+.tileCustom .statTileNumber,
+:global(.byline-dashboard-tile-custom) :global(.byline-dashboard-stat-tile-number) {
+  color: #6d28d9;
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileCustom,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-custom) {
+  background-color: rgba(76, 29, 149, 0.2);
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileCustom .statTileLabel,
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-dashboard-tile-custom)
+  :global(.byline-dashboard-stat-tile-label) {
+  color: #a78bfa;
+}
+
+:is([data-theme="dark"], :global(.dark)) .tileCustom .statTileNumber,
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-dashboard-tile-custom)
+  :global(.byline-dashboard-stat-tile-number) {
+  color: #c4b5fd;
+}
+
+.emptyLink,
+:global(.byline-dashboard-empty-link) {
+  display: block;
+}

package/src/admin-shell/chrome/dashboard.tsx

@@ -0,0 +1,128 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { WorkflowStatus } from '@byline/core'
+import { getClientConfig, getWorkflowStatuses } from '@byline/core'
+import { Card, Container, Section } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import styles from './dashboard.module.css'
+import { Link } from './loose-router.js'
+import type { CollectionStatusCount } from '../../server-fns/collections/index.js'
+
+const TILE_MODIFIER: Record<string, { local: string; global: string }> = {
+  draft: { local: styles.tileDraft, global: 'byline-dashboard-tile-draft' },
+  published: { local: styles.tilePublished, global: 'byline-dashboard-tile-published' },
+  archived: { local: styles.tileArchived, global: 'byline-dashboard-tile-archived' },
+}
+const CUSTOM_TILE_MODIFIER = {
+  local: styles.tileCustom,
+  global: 'byline-dashboard-tile-custom',
+}
+
+function tileModifier(name: string) {
+  return TILE_MODIFIER[name] ?? CUSTOM_TILE_MODIFIER
+}
+
+function StatTile({
+  ws,
+  count,
+  collectionPath,
+}: {
+  ws: WorkflowStatus
+  count: number
+  collectionPath: string
+}) {
+  const modifier = tileModifier(ws.name)
+  return (
+    <Link
+      to={'/admin/collections/$collection' as never}
+      params={{ collection: collectionPath }}
+      search={{ status: ws.name }}
+      className={cx('byline-dashboard-stat-tile', styles.statTile, modifier.global, modifier.local)}
+    >
+      <span className={cx('byline-dashboard-stat-tile-label', styles.statTileLabel)}>
+        {ws.label ?? ws.name}
+      </span>
+      <span className={cx('byline-dashboard-stat-tile-number', styles.statTileNumber)}>
+        {count}
+      </span>
+    </Link>
+  )
+}
+
+interface AdminDashboardProps {
+  statsMap: Record<string, CollectionStatusCount[]>
+}
+
+export function AdminDashboard({ statsMap }: AdminDashboardProps) {
+  const config = getClientConfig()
+
+  return (
+    <Section>
+      <Container>
+        <div className={cx('byline-dashboard-grid', styles.grid)}>
+          {config.collections.map((collection) => {
+            const stats = statsMap[collection.path]
+            const total = stats?.reduce((sum, s) => sum + s.count, 0) ?? 0
+            const workflowStatuses = getWorkflowStatuses(collection)
+
+            return (
+              <Card key={collection.path}>
+                <Link
+                  to={'/admin/collections/$collection' as never}
+                  params={{ collection: collection.path }}
+                  className={cx('byline-dashboard-card-link', styles.cardLink)}
+                >
+                  <Card.Header>
+                    <div className={cx('byline-dashboard-card-header', styles.cardHeader)}>
+                      <Card.Title className={cx('byline-dashboard-card-title', styles.cardTitle)}>
+                        <span className={cx('byline-dashboard-title-text', styles.titleText)}>
+                          {collection.labels.plural}
+                        </span>
+                        <span className={cx('muted byline-dashboard-title-meta', styles.titleMeta)}>
+                          {total} total
+                        </span>
+                      </Card.Title>
+                      <Card.Description className="muted">{`${collection.labels.plural} collection`}</Card.Description>
+                    </div>
+                  </Card.Header>
+                </Link>
+                <Card.Content>
+                  {stats !== undefined ? (
+                    <div className={cx('byline-dashboard-stat-grid', styles.statGrid)}>
+                      {workflowStatuses.map((ws) => {
+                        const entry = stats.find((s) => s.status === ws.name)
+                        return (
+                          <StatTile
+                            key={ws.name}
+                            ws={ws}
+                            count={entry?.count ?? 0}
+                            collectionPath={collection.path}
+                          />
+                        )
+                      })}
+                    </div>
+                  ) : (
+                    <Link
+                      to={'/admin/collections/$collection' as never}
+                      params={{ collection: collection.path }}
+                      className={cx('byline-dashboard-empty-link', styles.emptyLink)}
+                    >
+                      <p>{collection.labels.plural} collection</p>
+                    </Link>
+                  )}
+                </Card.Content>
+              </Card>
+            )
+          })}
+        </div>
+      </Container>
+    </Section>
+  )
+}