@actuate-media/cms-admin 0.52.1 → 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/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/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])