@actuate-media/cms-admin 0.38.1 → 0.40.0

package/src/views/settings/BrandingCard.tsx

@@ -5,14 +5,20 @@ import {
   ChevronDown,
   ChevronRight,
   ImageIcon,
+  Library,
   Loader2,
   Trash2,
   Upload,
 } from 'lucide-react'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 
+import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SettingsCard, SettingsControlRow, SettingsSubsection } from './components.js'
-import type { BrandAssetField, UseAppearanceSettings } from './useAppearanceSettings.js'
+import type {
+  BrandAssetField,
+  SelectedBrandAsset,
+  UseAppearanceSettings,
+} from './useAppearanceSettings.js'
 
 const LOGO_ACCEPT = 'image/svg+xml,image/png'
 
@@ -33,6 +39,7 @@ function LogoField({
   canEdit,
   warning,
   onUpload,
+  onSelectFromLibrary,
   onRemove,
 }: {
   label: string
@@ -47,9 +54,11 @@ function LogoField({
   canEdit: boolean
   warning?: string
   onUpload: (field: BrandAssetField, file: File) => void
+  onSelectFromLibrary: (field: BrandAssetField, item: SelectedBrandAsset) => void
   onRemove: (field: BrandAssetField) => void
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
+  const [pickerOpen, setPickerOpen] = useState(false)
   const assetId = brand[field]
   const asset = assetId ? assets[assetId] : undefined
   const uploading = uploadingField === field
@@ -102,6 +111,15 @@ function LogoField({
           <Trash2 size={14} aria-hidden="true" /> Remove
         </button>
       )}
+      <button
+        type="button"
+        onClick={() => setPickerOpen(true)}
+        disabled={!canEdit || uploading}
+        aria-label={`Choose ${label.toLowerCase()} from media library`}
+        className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <Library size={14} aria-hidden="true" /> Media library
+      </button>
       <button
         type="button"
         onClick={() => inputRef.current?.click()}
@@ -116,6 +134,22 @@ function LogoField({
         )}
         {asset ? 'Replace' : 'Upload'}
       </button>
+      <MediaPickerModal
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+        accept={accept}
+        libraryOnly
+        onSelect={() => {}}
+        onSelectItem={(item) => {
+          onSelectFromLibrary(field, {
+            id: item.id,
+            url: item.url,
+            mimeType: item.mimeType,
+            width: item.width,
+            height: item.height,
+          })
+        }}
+      />
     </>
   )
 
@@ -197,6 +231,7 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
     uploadingField: s.uploadingField,
     canEdit,
     onUpload: s.uploadAsset,
+    onSelectFromLibrary: s.selectAsset,
     onRemove: s.removeAsset,
   }
 

package/src/views/settings/useAppearanceSettings.ts

@@ -75,6 +75,15 @@ export interface AssetPreview {
   shape: LogoShape
 }
 
+/** An existing media-library asset chosen for a brand field via the picker. */
+export interface SelectedBrandAsset {
+  id: string
+  url: string
+  mimeType: string
+  width?: number
+  height?: number
+}
+
 const LOGO_MIME = ['image/svg+xml', 'image/png']
 const FAVICON_MIME = ['image/svg+xml', 'image/png']
 const MAX_BYTES = 1024 * 1024 // 1 MB
@@ -103,6 +112,8 @@ export interface UseAppearanceSettings {
   setBrandingMode: (v: AdminBrandingMode) => void
   setAltText: (v: string) => void
   uploadAsset: (field: BrandAssetField, file: File) => Promise<void>
+  /** Point a brand field at an EXISTING media asset (no re-upload, no duplicate). */
+  selectAsset: (field: BrandAssetField, item: SelectedBrandAsset) => void
   removeAsset: (field: BrandAssetField) => void
   save: () => Promise<void>
   reset: () => void
@@ -375,6 +386,33 @@ export function useAppearanceSettings(
     [appearance, brand, assets, update],
   )
 
+  const selectAsset = useCallback(
+    (field: BrandAssetField, item: SelectedBrandAsset) => {
+      // Same allow-list as upload: brand assets must be SVG or PNG, regardless
+      // of what else lives in the media library.
+      const isFavicon = field === 'faviconSourceAssetId'
+      const allowed = isFavicon ? FAVICON_MIME : LOGO_MIME
+      if (!allowed.includes(item.mimeType)) {
+        setSaveError(`Unsupported file type. Brand assets must be ${allowed.join(' or ')}.`)
+        return
+      }
+      setSaveError(null)
+      const nextAssets: Record<string, AssetPreview> = {
+        ...assets,
+        [item.id]: {
+          id: item.id,
+          url: item.url,
+          mimeType: item.mimeType,
+          width: item.width,
+          height: item.height,
+          shape: classifyLogoShape(item.width, item.height),
+        },
+      }
+      update(appearance, { ...brand, [field]: item.id }, nextAssets)
+    },
+    [appearance, brand, assets, update],
+  )
+
   const removeAsset = useCallback(
     (field: BrandAssetField) => {
       const next = { ...brand }
@@ -505,6 +543,7 @@ export function useAppearanceSettings(
     setBrandingMode,
     setAltText,
     uploadAsset,
+    selectAsset,
     removeAsset,
     save,
     reset,