@actuate-media/cms-admin 0.52.0 → 0.53.0

package/src/layout/Sidebar.tsx

@@ -98,16 +98,39 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
   const initials = adminBrand.initials
   const hasInitials = Boolean(initials) && initials !== 'A'
 
-  // Prefer the dark logo on dark backgrounds when supplied.
-  const primary =
-    resolvedTheme === 'dark' && adminBrand.darkUrl ? adminBrand.darkUrl : adminBrand.primaryUrl
-  const mark = adminBrand.markUrl
+  // Track image URLs that fail to load (broken/expired/deleted asset) so the
+  // resolution falls through to the next option instead of showing the browser's
+  // broken-image icon in the sidebar header.
+  const [failedSrcs, setFailedSrcs] = useState<Set<string>>(new Set())
+  const markFailed = (src: string) =>
+    setFailedSrcs((prev) => (prev.has(src) ? prev : new Set(prev).add(src)))
+  const usable = (url: string | null | undefined): string | null =>
+    url && !failedSrcs.has(url) ? url : null
+  const onErr = (src: string) => () => markFailed(src)
+
+  // The admin brand is ALWAYS the logo — the favicon is only for the browser tab
+  // and is never used here (see resolveAdminBrand). Prefer the dark logo on dark
+  // backgrounds when supplied, falling back to the primary if the dark asset is
+  // missing or broken.
+  const darkPref = resolvedTheme === 'dark' ? adminBrand.darkUrl : null
+  const primary = usable(darkPref) ?? usable(adminBrand.primaryUrl)
+  const mark = usable(adminBrand.markUrl)
+  const cfg = usable(configLogo)
   const alt = brandName ?? 'Admin'
 
+  // Wide horizontal logos must scale down to fit the narrow rail / sidebar
+  // header instead of overflowing — height-capped, width auto, never wider than
+  // the available space.
+  const logoClass = 'h-8 w-auto max-w-full object-contain'
+
   if (collapsed) {
-    if (mark) return <img src={mark} alt={alt} className="h-8 w-8 object-contain" />
-    if (primary) return <img src={primary} alt={alt} className="h-8 w-8 object-contain" />
-    if (configLogo) return <img src={configLogo} alt={alt} className="h-8 w-8 object-contain" />
+    // Collapsed rail prefers a dedicated square mark; otherwise it shows the
+    // logo (scaled to fit) — never the favicon.
+    if (mark)
+      return <img src={mark} alt={alt} className="h-8 w-8 object-contain" onError={onErr(mark)} />
+    if (primary)
+      return <img src={primary} alt={alt} className={logoClass} onError={onErr(primary)} />
+    if (cfg) return <img src={cfg} alt={alt} className={logoClass} onError={onErr(cfg)} />
     if (hasInitials) return <LogoPlaceholder tone="sidebar" />
     return <ActuateMark className="h-8 w-8" />
   }
@@ -115,7 +138,7 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
   if (primary) {
     return (
       <div className="flex min-w-0 items-center gap-2.5">
-        <img src={primary} alt={alt} className="h-8 w-auto shrink-0 object-contain" />
+        <img src={primary} alt={alt} className={logoClass} onError={onErr(primary)} />
         {brandName && (
           <span className="text-sidebar-foreground truncate text-sm font-medium">{brandName}</span>
         )}
@@ -123,10 +146,10 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
     )
   }
 
-  if (configLogo) {
+  if (cfg) {
     return (
       <div className="flex min-w-0 items-center gap-2.5">
-        <img src={configLogo} alt={alt} className="h-8 w-auto shrink-0 object-contain" />
+        <img src={cfg} alt={alt} className={logoClass} onError={onErr(cfg)} />
         {brandName && (
           <span className="text-sidebar-foreground truncate text-sm font-medium">{brandName}</span>
         )}
@@ -137,7 +160,12 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
   if (mark) {
     return (
       <div className="flex min-w-0 items-center gap-2.5">
-        <img src={mark} alt={alt} className="h-8 w-8 shrink-0 object-contain" />
+        <img
+          src={mark}
+          alt={alt}
+          className="h-8 w-8 shrink-0 object-contain"
+          onError={onErr(mark)}
+        />
         <span className="text-sidebar-foreground truncate text-sm font-medium">
           {brandName ?? alt}
         </span>

package/src/lib/collection-routes.ts

@@ -0,0 +1,35 @@
+/**
+ * Canonical admin routes for opening / creating documents.
+ *
+ * Post-type and Pages collections have dedicated section-based editors that the
+ * generic `/:collection/:id` route does NOT reach — routing a post through the
+ * generic editor silently strips its `sections` data, and a post collection
+ * whose slug is `posts` 404s under `/:collection/:id` entirely. Centralizing the
+ * mapping here keeps `Dashboard`, `CollectionList`, and any future caller in
+ * agreement instead of each re-deriving (and getting it wrong).
+ */
+
+export interface CollectionRouteMeta {
+  type?: string
+}
+
+/** The route that opens an existing document in its correct editor. */
+export function editPathForDoc(
+  col: CollectionRouteMeta | undefined,
+  collection: string,
+  id: string,
+): string {
+  if (col?.type === 'post') return `/posts/${collection}/${id}/edit`
+  if (collection === 'pages') return `/pages/${id}/edit`
+  return `/${collection}/${id}`
+}
+
+/** The route that starts a new document in the correct editor. */
+export function newPathForCollection(
+  col: CollectionRouteMeta | undefined,
+  collection: string,
+): string {
+  if (col?.type === 'post') return `/posts/${collection}/new`
+  if (collection === 'pages') return `/pages/new`
+  return `/${collection}/new`
+}

package/src/lib/favicon.ts

@@ -0,0 +1,44 @@
+/**
+ * Browser-tab favicon helpers for the admin SPA.
+ *
+ * The admin runs as a client app, so the favicon shown in the browser tab is
+ * whatever `<link rel="icon">` the document currently has. The Settings →
+ * Appearance favicon (stored in the CMS) is the source of truth, so the admin
+ * applies it at runtime instead of relying on the host app's `<head>` wiring.
+ */
+
+/**
+ * Window event the admin dispatches after the brand (logo/favicon) is saved so
+ * live surfaces — the browser tab favicon — refresh without a full reload.
+ */
+export const BRAND_UPDATED_EVENT = 'actuate:brand-updated'
+
+export interface FaviconUpdate {
+  /** The `<link rel="icon">` element that is now active. */
+  link: HTMLLinkElement
+  /** True when we created the link (so callers can remove it on cleanup). */
+  created: boolean
+  /** The href the link had before this update — for restore on cleanup. */
+  previousHref: string | null
+}
+
+/**
+ * Point the browser tab favicon at `href`, creating the `<link rel="icon">` when
+ * the document doesn't already have one. Returns enough state for the caller to
+ * restore/remove it on cleanup. Client-only — call inside an effect.
+ */
+export function setDocumentFavicon(href: string, type?: string | null): FaviconUpdate {
+  const existing = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+  if (existing) {
+    const previousHref = existing.href || null
+    existing.href = href
+    if (type) existing.type = type
+    return { link: existing, created: false, previousHref }
+  }
+  const link = document.createElement('link')
+  link.rel = 'icon'
+  link.href = href
+  if (type) link.type = type
+  document.head.appendChild(link)
+  return { link, created: true, previousHref: null }
+}

package/src/views/CollectionList.tsx

@@ -14,6 +14,7 @@ import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
 import { useApiData } from '../lib/useApiData.js'
+import { editPathForDoc, newPathForCollection } from '../lib/collection-routes.js'
 
 export interface CollectionListProps {
   collectionSlug: string
@@ -141,6 +142,21 @@ function formatDate(d: string | undefined): string {
 export function CollectionList({ collectionSlug, config, onNavigate }: CollectionListProps) {
   const labels = useMemo(() => resolveLabel(config, collectionSlug), [config, collectionSlug])
   const facets = useMemo(() => facetFieldsFor(config, collectionSlug), [config, collectionSlug])
+  // Post-type and Pages collections open in dedicated editors — never the
+  // generic `/:collection/:id` route (which 404s for a `posts`-slugged post
+  // collection and strips section data for any post type).
+  const collectionDef = useMemo(
+    () => resolveCollection(config, collectionSlug),
+    [config, collectionSlug],
+  )
+  const editPath = useCallback(
+    (id: string | number) => editPathForDoc(collectionDef, collectionSlug, String(id)),
+    [collectionDef, collectionSlug],
+  )
+  const newPath = useCallback(
+    () => newPathForCollection(collectionDef, collectionSlug),
+    [collectionDef, collectionSlug],
+  )
 
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
@@ -294,7 +310,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
           </p>
         </div>
         <button
-          onClick={() => onNavigate(`/${collectionSlug}/new`)}
+          onClick={() => onNavigate(newPath())}
           className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
           style={{ background: 'var(--actuate-primary, #2563eb)' }}
         >
@@ -430,7 +446,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
           <FileText className="mb-3 h-10 w-10 opacity-40" />
           <p className="mb-3 text-sm">No {labels.plural.toLowerCase()} found</p>
           <button
-            onClick={() => onNavigate(`/${collectionSlug}/new`)}
+            onClick={() => onNavigate(newPath())}
             className="rounded-lg px-4 py-2 text-sm text-white"
             style={{ background: 'var(--actuate-primary, #2563eb)' }}
           >
@@ -503,7 +519,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                   <td className="px-3 py-2">
                     <button
                       type="button"
-                      onClick={() => onNavigate(`/${collectionSlug}/${doc.id}`)}
+                      onClick={() => onNavigate(editPath(doc.id))}
                       className="text-left font-medium hover:underline"
                       style={{ color: 'var(--actuate-text, #111827)' }}
                     >
@@ -537,7 +553,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                   <td className="px-3 py-2">
                     <button
                       type="button"
-                      onClick={() => onNavigate(`/${collectionSlug}/${doc.id}`)}
+                      onClick={() => onNavigate(editPath(doc.id))}
                       className="rounded p-1.5 transition-opacity hover:opacity-75"
                       title="Edit"
                     >

package/src/views/Dashboard.tsx

@@ -40,6 +40,7 @@ import {
   type LucideIcon,
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
+import { editPathForDoc } from '../lib/collection-routes.js'
 
 interface DashboardStats {
   totalDocuments: number
@@ -119,24 +120,6 @@ function collectionLabel(col: CollectionMeta, plural = true): string {
   return col.labels?.singular ?? fallback
 }
 
-/**
- * Resolve the correct editor route for a recent/queued document.
- *
- * Post-type documents MUST open in the section-based post editor
- * (`/posts/:type/:id/edit`). Routing them through the generic
- * `/:collection/:id` handler lands them in the legacy `DocumentEdit`
- * view, which has no concept of the section model — opening + saving
- * there silently strips a post's `sections` data. The canonical Pages
- * collection opens in the full page editor (which wires up preview).
- * Everything else falls through to the existing generic collection
- * route, which already resolves correctly.
- */
-function editPathForDoc(col: CollectionMeta | undefined, collection: string, id: string): string {
-  if (col?.type === 'post') return `/posts/${collection}/${id}/edit`
-  if (collection === 'pages') return `/pages/${id}/edit`
-  return `/${collection}/${id}`
-}
-
 function relativeTime(dateStr: string): string {
   const then = new Date(dateStr).getTime()
   const diff = Date.now() - then

package/src/views/settings/BrandingCard.tsx

@@ -64,10 +64,14 @@ function LogoField({
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
   const [pickerOpen, setPickerOpen] = useState(false)
+  // Remember a preview URL that failed to load so a broken/expired asset shows
+  // the neutral placeholder icon instead of the browser's broken-image glyph.
+  const [thumbErrorUrl, setThumbErrorUrl] = useState<string | null>(null)
   const assetId = brand[field]
   const asset = assetId ? assets[assetId] : undefined
   const uploading = uploadingField === field
   const inputId = `brand-${field}`
+  const showPreview = Boolean(asset?.url) && asset?.url !== thumbErrorUrl
 
   const thumbnail = (
     <div
@@ -76,12 +80,13 @@ function LogoField({
       )} ${square ? 'h-12 w-12' : 'h-12 w-20'}`}
       aria-hidden={!asset}
     >
-      {asset?.url ? (
+      {showPreview ? (
         // Never stretch/crop — contain preserves aspect ratio + transparency.
         <img
-          src={asset.url}
+          src={asset!.url}
           alt={`${label} preview`}
           className="max-h-full max-w-full object-contain"
+          onError={() => setThumbErrorUrl(asset!.url)}
         />
       ) : (
         <ImageIcon size={18} className="text-muted-foreground" aria-hidden="true" />

package/src/views/settings/useAppearanceSettings.ts

@@ -20,6 +20,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useTheme, type AdminBrandCache } from '../../components/ThemeProvider.js'
 import { cmsApi } from '../../lib/api.js'
+import { BRAND_UPDATED_EVENT } from '../../lib/favicon.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
 
 export type SaveState = 'idle' | 'saving' | 'success' | 'error'
@@ -548,6 +549,11 @@ export function useAppearanceSettings(
     }
     baselineRef.current = snapshot(appearance, brand)
     setAdminBrand(assetToCache(brand, assets, siteTitleRef.current))
+    // Notify live surfaces (browser-tab favicon) to refresh from the saved
+    // brand without a full reload.
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent(BRAND_UPDATED_EVENT))
+    }
     setSaveState('success')
   }, [canEdit, issues, appearance, brand, assets, setAdminBrand])