@byline/host-tanstack-start 4.14.0 → 4.15.0

package/src/admin-shell/chrome/admin-menu-drawer.module.css

@@ -47,10 +47,16 @@
   overflow: hidden;
 }
 
+/* Pinned under the fixed app bar (45px) for the whole scroll of the page.
+   `align-self: flex-start` keeps the sticky box from being stretched to the
+   full height of the flex row — a stretched sticky item has no room to move
+   and never pins. */
 .asideDesktop,
 :global(.byline-admin-menu-drawer-aside-desktop) {
-  position: relative;
-  align-self: stretch;
+  position: sticky;
+  top: 45px;
+  align-self: flex-start;
+  height: calc(100vh - 45px);
   flex-shrink: 0;
 }
 
@@ -64,12 +70,13 @@
   width: 60px;
 }
 
+/* The aside owns the viewport-height box; the nav just fills it and scrolls
+   internally when the menu is longer than the drawer. */
 .nav,
 :global(.byline-admin-menu-drawer) {
-  position: sticky;
-  top: 0;
+  flex: 1 1 auto;
+  min-height: 0;
   margin: 0;
-  max-height: calc(100vh - 60px);
   overflow-y: auto;
 }
 
@@ -96,9 +103,15 @@
   width: 24px;
 }
 
+/* A real line-height, not 0. Zero leaves every line box with no height, which
+   a single-line label survives — the flex row centres it anyway — but a label
+   long enough to wrap does not: both lines land in the same place and render
+   on top of each other. "Scheduled Publications" is the first label in this
+   menu long enough to reach that. Non-compact rows have no fixed height, so
+   the row simply grows to fit a second line. */
 .nav ul :global(li.menu-item .label),
 :global(.byline-admin-menu-drawer) ul :global(li.menu-item .label) {
-  line-height: 0;
+  line-height: 1.2;
 }
 
 .nav ul :global(li.menu-item.compact .label),

package/src/admin-shell/chrome/admin-menu-drawer.tsx

@@ -13,9 +13,11 @@ import { ADMIN_ACTIVITY_ABILITIES } from '@byline/admin/admin-activity'
 import { ADMIN_PERMISSIONS_ABILITIES } from '@byline/admin/admin-permissions'
 import { ADMIN_ROLES_ABILITIES } from '@byline/admin/admin-roles'
 import { ADMIN_USERS_ABILITIES } from '@byline/admin/admin-users'
+import { collectionAbilityKey, getAdminConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import {
   ActivityIcon,
+  CalendarIcon,
   HomeIcon,
   RolesIcon,
   SettingsSlidersIcon,
@@ -75,7 +77,11 @@ function MenuItem({ to, label, icon, pathname, compact }: MenuItemProps) {
   )
 }
 
-export function AdminMenuDrawer(): React.JSX.Element | null {
+export function AdminMenuDrawer({
+  scheduledPublicationEnabled = false,
+}: {
+  scheduledPublicationEnabled?: boolean
+}): React.JSX.Element | null {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const { mobile, drawerOpen, closeDrawer } = useAdminMenu()
   const { t } = useTranslation('byline-admin')
@@ -90,6 +96,13 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
   const canReadRoles = has(ADMIN_ROLES_ABILITIES.read)
   const canReadPermissions = has(ADMIN_PERMISSIONS_ABILITIES.read)
   const canReadActivity = has(ADMIN_ACTIVITY_ABILITIES.read)
+  const canSeeScheduledPublications =
+    scheduledPublicationEnabled &&
+    getAdminConfig().collections.some(
+      (collection) =>
+        has(collectionAbilityKey(collection.path, 'changeStatus')) &&
+        has(collectionAbilityKey(collection.path, 'publish'))
+    )
   const showAdminSection = canReadUsers || canReadRoles || canReadPermissions || canReadActivity
 
   const handlers = useSwipeable({
@@ -130,6 +143,15 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
             pathname={pathname}
             compact={compact}
           />
+          {canSeeScheduledPublications && (
+            <MenuItem
+              to={getAdminRoutePath('scheduled-publications')}
+              label={t('chrome.menu.scheduledPublications')}
+              icon={<CalendarIcon width="18px" height="18px" />}
+              pathname={pathname}
+              compact={compact}
+            />
+          )}
           {showAdminSection && (
             <>
               <li className="menu-separator" />

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

@@ -72,7 +72,12 @@ function CollectionCard({
   stats: CollectionStatusCount[] | undefined
 }) {
   const { t } = useTranslation('byline-admin')
-  const total = stats?.reduce((sum, s) => sum + s.count, 0) ?? 0
+  // `stats` is undefined when the collection opted out of counts (no
+  // `showStats: true` on the definition) — the dashboard loader only fetches
+  // them for collections that opted in. Falling back to a total of zero there
+  // would read as "this collection is empty", so the count is omitted along
+  // with the status tiles.
+  const total = stats !== undefined ? stats.reduce((sum, s) => sum + s.count, 0) : undefined
   const workflowStatuses = getWorkflowStatuses(collection)
 
   return (
@@ -88,9 +93,11 @@ function CollectionCard({
               <span className={cx('byline-dashboard-title-text', styles.titleText)}>
                 {collection.labels.plural}
               </span>
-              <span className={cx('muted byline-dashboard-title-meta', styles.titleMeta)}>
-                {t('dashboard.totalCount', { count: total })}
-              </span>
+              {total !== undefined && (
+                <span className={cx('muted byline-dashboard-title-meta', styles.titleMeta)}>
+                  {t('dashboard.totalCount', { count: total })}
+                </span>
+              )}
             </Card.Title>
             <Card.Description className="muted">
               {t('dashboard.collectionDescription', { label: collection.labels.plural })}

package/src/admin-shell/collections/edit.tsx

@@ -10,7 +10,12 @@ import { useState } from 'react'
 
 import { FormRenderer } from '@byline/admin/react'
 import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
-import { getDefaultStatus, getWorkflowStatuses } from '@byline/core'
+import {
+  getDefaultStatus,
+  getWorkflow,
+  getWorkflowStatuses,
+  validateStatusTransition,
+} from '@byline/core'
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
 import { useTranslation } from '@byline/i18n/react'
 import { Container, Section, useToastManager } from '@byline/ui/react'
@@ -18,11 +23,14 @@ import { Container, Section, useToastManager } from '@byline/ui/react'
 import { getAdminRoutePath } from '../../routes/admin-path.js'
 import { clearListReturnState } from '../../routes/list-return-storage.js'
 import {
+  cancelCollectionDocumentScheduledPublish,
+  confirmCollectionDocumentScheduledPublish,
   copyDocumentToLocale,
   deleteDocument,
   deleteDocumentLocale,
   duplicateCollectionDocument,
   hasDeleteSideEffectFailures,
+  scheduleCollectionDocumentPublish,
   unpublishDocument,
   updateCollectionDocumentSystemFields,
   updateCollectionDocumentWithPatches,
@@ -31,6 +39,7 @@ import {
 import { useNavigate } from '../chrome/loose-router.js'
 import { useTanStackNavigationGuard } from './tanstack-navigation-guard.js'
 import { ViewMenu } from './view-menu.js'
+import type { SerializedDocumentPublishSchedule } from '../../server-fns/collections/index.js'
 import type { ContentLocaleOption } from './view-menu.js'
 
 type EditState = {
@@ -76,6 +85,30 @@ export const EditView = ({
     currentIndex !== -1 && currentIndex < workflowStatuses.length - 1
       ? workflowStatuses[currentIndex + 1]
       : undefined
+  const scheduledPublicationEnabled =
+    // biome-ignore lint/suspicious/noExplicitAny: host-only loader metadata
+    (initialData as any)?._scheduledPublicationEnabled === true
+  const canSchedulePublication =
+    // biome-ignore lint/suspicious/noExplicitAny: host-only loader metadata
+    (initialData as any)?._canSchedulePublication === true
+  // biome-ignore lint/suspicious/noExplicitAny: host-only loader metadata
+  const scheduledPublication = ((initialData as any)?._scheduledPublish ??
+    null) as SerializedDocumentPublishSchedule | null
+  const publishTransitionValid =
+    currentStatus !== 'published' &&
+    getWorkflowStatuses(collectionDefinition).length > 1 &&
+    validateStatusTransition(getWorkflow(collectionDefinition), currentStatus, 'published').valid
+  const canArmSchedule =
+    scheduledPublicationEnabled && canSchedulePublication && publishTransitionValid
+
+  const notifyScheduleSuspended = () => {
+    if (scheduledPublication?.state !== 'armed') return
+    toastManager.add({
+      title: t('scheduledPublication.toast.suspendedTitle'),
+      description: t('scheduledPublication.toast.suspendedDescription'),
+      data: { intent: 'warning', iconType: 'warning', icon: true, close: true },
+    })
+  }
 
   const handleLocaleChange = (newLocale: string) => {
     navigate({
@@ -127,6 +160,96 @@ export const EditView = ({
     }
   }
 
+  const reloadDocument = () => {
+    navigate({
+      to: getAdminRoutePath('collections', '$collection', '$id'),
+      params: { collection: path, id: String(initialData.id) },
+      search: (prev: Record<string, unknown>) => ({ ...prev }),
+    })
+  }
+
+  const handleSchedulePublication = async ({ publishAt }: { publishAt: string }) => {
+    try {
+      await scheduleCollectionDocumentPublish({
+        data: {
+          collection: path,
+          id: String(initialData.id),
+          publishAt,
+          expectedVersionId: String(initialData.versionId),
+        },
+      })
+      toastManager.add({
+        title: t('scheduledPublication.toast.scheduledTitle'),
+        description: t('scheduledPublication.toast.scheduledDescription'),
+        data: { intent: 'success', iconType: 'success', icon: true, close: true },
+      })
+      reloadDocument()
+    } catch (err) {
+      toastManager.add({
+        title: t('scheduledPublication.toast.failedTitle'),
+        description: (err as Error).message,
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+      throw err
+    }
+  }
+
+  const handleConfirmScheduledPublication = async () => {
+    try {
+      await confirmCollectionDocumentScheduledPublish({
+        data: {
+          collection: path,
+          id: String(initialData.id),
+          expectedVersionId: String(initialData.versionId),
+        },
+      })
+      toastManager.add({
+        title: t('scheduledPublication.toast.confirmedTitle'),
+        description: t('scheduledPublication.toast.confirmedDescription'),
+        data: { intent: 'success', iconType: 'success', icon: true, close: true },
+      })
+      reloadDocument()
+    } catch (err) {
+      toastManager.add({
+        title: t('scheduledPublication.toast.failedTitle'),
+        description: (err as Error).message,
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+      throw err
+    }
+  }
+
+  const handleCancelScheduledPublication = async () => {
+    try {
+      const result = await cancelCollectionDocumentScheduledPublish({
+        data: { collection: path, id: String(initialData.id) },
+      })
+      const cancelled = result.status === 'cancelled'
+      toastManager.add({
+        title: cancelled
+          ? t('scheduledPublication.toast.cancelledTitle')
+          : t('scheduledPublication.toast.cancelLostTitle'),
+        description: cancelled
+          ? t('scheduledPublication.toast.cancelledDescription')
+          : t('scheduledPublication.toast.cancelLostDescription'),
+        data: {
+          intent: cancelled ? 'success' : 'warning',
+          iconType: cancelled ? 'success' : 'warning',
+          icon: true,
+          close: true,
+        },
+      })
+      reloadDocument()
+    } catch (err) {
+      toastManager.add({
+        title: t('scheduledPublication.toast.failedTitle'),
+        description: (err as Error).message,
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+      throw err
+    }
+  }
+
   // Published version metadata — attached by getCollectionDocument when a
   // published version exists behind the current draft.
   // biome-ignore lint/suspicious/noExplicitAny: storage shape
@@ -269,6 +392,7 @@ export const EditView = ({
           close: true,
         },
       })
+      notifyScheduleSuspended()
       setEditState({
         status: 'success',
         message: t('collections.edit.copiedSuccessMessage', {
@@ -327,6 +451,7 @@ export const EditView = ({
           close: true,
         },
       })
+      notifyScheduleSuspended()
       setEditState({ status: 'success', message: description })
       // The deleted locale may be the one being viewed — land on the default
       // locale (which always survives) so the loader re-fetches a valid view.
@@ -457,6 +582,10 @@ export const EditView = ({
         })
       }
 
+      if (contentDirty && scheduledPublication?.state === 'armed') {
+        notifyScheduleSuspended()
+      }
+
       const description = t('collections.edit.updatedDescription', { label: singularLower })
       toastManager.add({
         title: t('collections.edit.updateTitle', { label: singular }),
@@ -531,6 +660,16 @@ export const EditView = ({
           }
           onStatusChange={handleStatusChange}
           onUnpublish={publishedVersion ? handleUnpublish : undefined}
+          scheduledPublication={scheduledPublication}
+          onSchedulePublication={canArmSchedule ? handleSchedulePublication : undefined}
+          onConfirmScheduledPublication={
+            canArmSchedule && scheduledPublication?.state === 'needs_reconfirm'
+              ? handleConfirmScheduledPublication
+              : undefined
+          }
+          onCancelScheduledPublication={
+            scheduledPublication != null ? handleCancelScheduledPublication : undefined
+          }
           onDelete={handleDelete}
           onDuplicate={handleDuplicate}
           onCopyToLocale={handleCopyToLocale}

package/src/admin-shell/scheduled-publications/list.module.css

@@ -0,0 +1,105 @@
+.head {
+  margin-bottom: var(--spacing-16);
+}
+
+.title {
+  margin-bottom: var(--spacing-4);
+}
+
+.intro {
+  margin: 0;
+  color: var(--gray-500);
+}
+
+.health {
+  margin-bottom: var(--spacing-16);
+}
+
+/* Filters and pagination are separate jobs and used at different moments, so
+   they sit at opposite ends of one row rather than running together — the
+   pager previously read as a third filter control. */
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+  margin-bottom: var(--spacing-4);
+}
+
+.filters-help {
+  margin: 0 0 var(--spacing-16);
+  color: var(--gray-500);
+  font-size: var(--font-size-sm);
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--spacing-12);
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 12rem;
+}
+
+.filter-authorizer :global(.byline-input-wrapper) {
+  min-width: 22rem;
+}
+
+/* Sits on the control baseline, not the label baseline, so the buttons line up
+   with the inputs rather than floating against their labels. */
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding-bottom: 0.1rem;
+}
+
+.tableWrap {
+  margin-top: 0.75rem;
+  overflow-x: auto;
+}
+
+.collection,
+.zone,
+.error {
+  display: block;
+  margin-top: var(--spacing-4);
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+}
+
+.instant {
+  white-space: nowrap;
+}
+
+/* The whole point of this column is offboarding — an operator pastes an
+   account id in and compares. Tabular figures make mismatches visible. */
+.authorizer {
+  font-family: var(--font-family-mono, monospace);
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+}
+
+.error {
+  max-width: 24rem;
+  color: var(--red-600);
+  white-space: normal;
+}
+
+.empty {
+  padding: var(--spacing-32) 0;
+  color: var(--gray-500);
+  text-align: center;
+}
+
+.pagerBottom {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--spacing-16);
+}