@actuate-media/cms-admin 0.45.0 → 0.47.0

package/src/components/TagInput.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+/**
+ * Chip-style tag editor with autocomplete from values already in use.
+ *
+ * Suggestions come from `GET /collections/:collection/field-values?field=...`
+ * (distinct values across the collection, most-used first) and are fetched
+ * once on first focus, then filtered client-side as the user types.
+ *
+ * Deduplication is case-insensitive and resolves to the existing canonical
+ * casing: typing "ai" when the collection already uses "AI" adds "AI", so a
+ * vocabulary never splinters into `AI` / `ai` / `Ai` variants.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { X } from 'lucide-react'
+import { cmsApi } from '../lib/api.js'
+
+interface TagInputProps {
+  id: string
+  value: string[]
+  onChange: (tags: string[]) => void
+  /** Collection slug used to fetch suggestions. Omit to disable autocomplete. */
+  collection?: string
+  /** Field to aggregate for suggestions (default `tags`). */
+  field?: string
+  disabled?: boolean
+  placeholder?: string
+  /** Hard cap on the number of tags (mirrors the field's `maxRows`). */
+  maxTags?: number
+}
+
+interface FieldValuesResponse {
+  field: string
+  values: Array<{ value: string; count: number }>
+}
+
+const INPUT =
+  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export function TagInput({
+  id,
+  value,
+  onChange,
+  collection,
+  field = 'tags',
+  disabled,
+  placeholder,
+  maxTags,
+}: TagInputProps) {
+  const [draft, setDraft] = useState('')
+  const [known, setKnown] = useState<string[] | null>(null)
+  const [open, setOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  const atCap = typeof maxTags === 'number' && value.length >= maxTags
+
+  // Fetch the in-use vocabulary once, on first focus.
+  const ensureSuggestions = useCallback(() => {
+    if (known !== null || !collection) return
+    setKnown([]) // sentinel: fetch in flight, don't refetch
+    cmsApi<FieldValuesResponse>(
+      `/collections/${encodeURIComponent(collection)}/field-values?field=${encodeURIComponent(field)}`,
+    ).then((res) => {
+      if (res.data?.values) setKnown(res.data.values.map((v) => v.value))
+    })
+  }, [known, collection, field])
+
+  // Close the suggestion list on outside click.
+  useEffect(() => {
+    if (!open) return
+    function onPointerDown(e: PointerEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open])
+
+  const lowerExisting = new Set(value.map((t) => t.toLowerCase()))
+  const matches = (known ?? [])
+    .filter((s) => !lowerExisting.has(s.toLowerCase()))
+    .filter((s) => !draft.trim() || s.toLowerCase().includes(draft.trim().toLowerCase()))
+    .slice(0, 8)
+
+  function addTag(raw: string) {
+    const tag = raw.trim()
+    if (!tag || atCap) return
+    const lower = tag.toLowerCase()
+    if (lowerExisting.has(lower)) {
+      setDraft('')
+      return
+    }
+    // Prefer the canonical casing already used elsewhere in the collection.
+    const canonical = (known ?? []).find((s) => s.toLowerCase() === lower) ?? tag
+    onChange([...value, canonical])
+    setDraft('')
+    setActiveIndex(-1)
+  }
+
+  function removeTag(index: number) {
+    onChange(value.filter((_, i) => i !== index))
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault()
+      if (activeIndex >= 0 && activeIndex < matches.length) addTag(matches[activeIndex]!)
+      else addTag(draft)
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setOpen(true)
+      setActiveIndex((i) => Math.min(i + 1, matches.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.max(i - 1, -1))
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+      setActiveIndex(-1)
+    } else if (e.key === 'Backspace' && !draft && value.length > 0) {
+      removeTag(value.length - 1)
+    }
+  }
+
+  return (
+    <div ref={rootRef} className="relative">
+      {value.length > 0 && (
+        <div className="mb-1.5 flex flex-wrap gap-1.5">
+          {value.map((tag, i) => (
+            <span
+              key={`${tag}-${i}`}
+              className="bg-accent text-foreground inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs"
+            >
+              {tag}
+              {!disabled && (
+                <button
+                  type="button"
+                  aria-label={`Remove tag ${tag}`}
+                  onClick={() => removeTag(i)}
+                  className="text-muted-foreground hover:text-destructive rounded p-0.5"
+                >
+                  <X className="h-3 w-3" aria-hidden />
+                </button>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+      <input
+        id={id}
+        className={INPUT}
+        role="combobox"
+        aria-expanded={open && matches.length > 0}
+        aria-autocomplete="list"
+        aria-controls={`${id}-listbox`}
+        value={draft}
+        disabled={disabled || atCap}
+        placeholder={atCap ? `Maximum of ${maxTags} tags` : (placeholder ?? 'Add a tag…')}
+        onFocus={() => {
+          ensureSuggestions()
+          setOpen(true)
+        }}
+        onChange={(e) => {
+          setDraft(e.target.value)
+          setOpen(true)
+          setActiveIndex(-1)
+        }}
+        onKeyDown={handleKeyDown}
+      />
+      {open && matches.length > 0 && !disabled && (
+        <ul
+          id={`${id}-listbox`}
+          role="listbox"
+          aria-label="Tag suggestions"
+          className="border-border bg-card absolute z-20 mt-1 max-h-44 w-full overflow-y-auto rounded-md border py-1 shadow-md"
+        >
+          {matches.map((s, i) => (
+            <li key={s} role="option" aria-selected={i === activeIndex}>
+              <button
+                type="button"
+                className={`w-full px-2.5 py-1.5 text-left text-sm ${
+                  i === activeIndex
+                    ? 'bg-accent text-foreground'
+                    : 'text-foreground hover:bg-accent'
+                }`}
+                onMouseEnter={() => setActiveIndex(i)}
+                onClick={() => addTag(s)}
+              >
+                {s}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/lib/post-editor-service.ts

@@ -73,6 +73,8 @@ export interface EditorPost {
   featuredImage: string
   body: string
   category: string
+  /** Editorial tags as plain strings (stored as `[{ tag }]` rows, see {@link parseTags}). */
+  tags: string[]
   status: PostStatus
   publishDate: string | null
   sections: PageSection[]
@@ -190,6 +192,26 @@ function dataStr(data: Record<string, unknown>, key: string): string {
   return typeof v === 'string' ? v : ''
 }
 
+/**
+ * Read stored tags into plain strings. The `tagsField` preset stores
+ * `[{ tag: 'AI' }]` rows; older/hand-rolled configs may store `['AI']`
+ * directly — accept both so no site loses tags in the editor.
+ */
+export function parseTags(raw: unknown): string[] {
+  if (!Array.isArray(raw)) return []
+  const out: string[] = []
+  for (const item of raw) {
+    const value =
+      typeof item === 'string'
+        ? item
+        : item && typeof item === 'object'
+          ? (item as { tag?: unknown }).tag
+          : undefined
+    if (typeof value === 'string' && value.trim()) out.push(value.trim())
+  }
+  return out
+}
+
 function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
   const data = doc.data ?? {}
   return {
@@ -201,6 +223,7 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     featuredImage: dataStr(data, 'featuredImage'),
     body: dataStr(data, 'body'),
     category: dataStr(data, 'category'),
+    tags: parseTags(data.tags),
     status: doc.status ?? 'DRAFT',
     publishDate: (data.publishDate as string) ?? doc.scheduledAt ?? null,
     // Preserve unknown (externally-managed) sections so the editor can show
@@ -290,6 +313,7 @@ interface PostWritePayload {
   featuredImage: string
   body: string
   category: string
+  tags: Array<{ tag: string }>
   publishDate: string | null
   sections: PageSection[]
   metaTitle: string
@@ -313,6 +337,9 @@ function toWriteBody(post: EditorPost, extra?: Record<string, unknown>): string
     featuredImage: post.featuredImage,
     body: post.body,
     category: post.category,
+    // Store the canonical `tagsField` row shape so server-side array-field
+    // validation and the public renderer see the schema they expect.
+    tags: post.tags.map((tag) => ({ tag })),
     publishDate: post.publishDate,
     // Unmanaged sections are part of `post.sections`, so they round-trip on
     // every save (no data loss).
@@ -378,6 +405,7 @@ export async function emptyPostFromTemplate(postType: string): Promise<EditorPos
     featuredImage: '',
     body: '',
     category: '',
+    tags: [],
     status: 'DRAFT',
     publishDate: null,
     sections,

package/src/views/CollectionList.tsx

@@ -24,14 +24,79 @@ export interface CollectionListProps {
 type SortField = 'title' | 'status' | 'updatedAt'
 type SortOrder = 'asc' | 'desc'
 
-function resolveLabel(config: any, slug: string): { singular: string; plural: string } {
-  const fallback = { singular: slug, plural: slug }
-  if (!config?.collections) return fallback
+function resolveCollection(config: any, slug: string): any | undefined {
+  if (!config?.collections) return undefined
   const list = Array.isArray(config.collections)
     ? config.collections
     : Object.values(config.collections)
-  const match = (list as any[]).find((c: any) => c.slug === slug)
-  return match?.labels ?? fallback
+  return (list as any[]).find((c: any) => c.slug === slug)
+}
+
+function resolveLabel(config: any, slug: string): { singular: string; plural: string } {
+  return resolveCollection(config, slug)?.labels ?? { singular: slug, plural: slug }
+}
+
+/** One facet dropdown in the filter bar. */
+interface FacetDef {
+  name: string
+  label: string
+  /** `options` = fixed list from the config; `values` = in-use values from the field-values API. */
+  source: 'options' | 'values'
+  options?: Array<{ label: string; value: string }>
+}
+
+/** True for array fields shaped like tags: a single required text sub-field. */
+function isTagShapedArray(field: any): boolean {
+  if (field?.type !== 'array' || !field.fields) return false
+  const subs = Object.values(field.fields) as any[]
+  return subs.length === 1 && subs[0]?.type === 'text'
+}
+
+/**
+ * Facetable fields for the filter bar (taxonomy Phase B): structured selects
+ * use their config options; free-text `category` and tag-shaped arrays load
+ * the collection's in-use values. Capped so the bar stays scannable.
+ */
+function facetFieldsFor(config: any, slug: string): FacetDef[] {
+  const fields = resolveCollection(config, slug)?.fields
+  if (!fields || typeof fields !== 'object') return []
+  const out: FacetDef[] = []
+  for (const [name, field] of Object.entries(fields) as Array<[string, any]>) {
+    if (field?.hidden) continue
+    if (field?.type === 'select' && Array.isArray(field.options)) {
+      out.push({ name, label: field.label ?? name, source: 'options', options: field.options })
+    } else if (field?.type === 'text' && name === 'category') {
+      out.push({ name, label: field.label ?? 'Category', source: 'values' })
+    } else if (isTagShapedArray(field)) {
+      out.push({ name, label: field.label ?? name, source: 'values' })
+    }
+    if (out.length >= 3) break
+  }
+  return out
+}
+
+/** Read a doc's display value for a facet column (select values map to labels). */
+function facetCellValue(doc: any, facet: FacetDef): string {
+  const raw = doc?.data?.[facet.name]
+  if (typeof raw === 'string') {
+    if (!raw) return ''
+    const opt = facet.options?.find((o) => o.value === raw)
+    return opt?.label ?? raw
+  }
+  if (Array.isArray(raw)) {
+    const tags = raw
+      .map((item) =>
+        typeof item === 'string'
+          ? item
+          : item && typeof item === 'object'
+            ? Object.values(item).find((v) => typeof v === 'string')
+            : undefined,
+      )
+      .filter((v): v is string => Boolean(v))
+    if (tags.length === 0) return ''
+    return tags.length > 3 ? `${tags.slice(0, 3).join(', ')} +${tags.length - 3}` : tags.join(', ')
+  }
+  return ''
 }
 
 function statusColor(status: string): string {
@@ -75,6 +140,7 @@ 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])
 
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
@@ -82,6 +148,9 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   const [sort, setSort] = useState<SortField | null>(null)
   const [order, setOrder] = useState<SortOrder>('asc')
   const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [filters, setFilters] = useState<Record<string, string>>({})
+  // In-use values per `values`-sourced facet, fetched once per collection.
+  const [facetValues, setFacetValues] = useState<Record<string, string[]>>({})
   const searchTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
 
   useEffect(() => {
@@ -97,8 +166,11 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
     let url = `/collections/${collectionSlug}?page=${page}&pageSize=25`
     if (debouncedSearch) url += `&search=${encodeURIComponent(debouncedSearch)}`
     if (sort) url += `&sort=${sort}&order=${order}`
+    for (const [field, value] of Object.entries(filters)) {
+      if (value) url += `&filter.${encodeURIComponent(field)}=${encodeURIComponent(value)}`
+    }
     return url
-  }, [collectionSlug, page, debouncedSearch, sort, order])
+  }, [collectionSlug, page, debouncedSearch, sort, order, filters])
 
   const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(endpoint)
   const docs = data?.docs ?? []
@@ -109,8 +181,40 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
     setPage(1)
     setSelected(new Set())
     setSearch('')
+    setFilters({})
+    setFacetValues({})
   }, [collectionSlug])
 
+  // Load in-use values for facets that aren't config-defined selects.
+  useEffect(() => {
+    let cancelled = false
+    for (const facet of facets) {
+      if (facet.source !== 'values') continue
+      cmsApi<{ field: string; values: Array<{ value: string; count: number }> }>(
+        `/collections/${collectionSlug}/field-values?field=${encodeURIComponent(facet.name)}`,
+      ).then((res) => {
+        if (cancelled || !res.data?.values) return
+        setFacetValues((prev) => ({
+          ...prev,
+          [facet.name]: res.data!.values.map((v) => v.value),
+        }))
+      })
+    }
+    return () => {
+      cancelled = true
+    }
+  }, [collectionSlug, facets])
+
+  const setFilter = useCallback((field: string, value: string) => {
+    setFilters((prev) => {
+      const next = { ...prev }
+      if (value) next[field] = value
+      else delete next[field]
+      return next
+    })
+    setPage(1)
+  }, [])
+
   const toggleSort = useCallback((field: SortField) => {
     setSort((prev) => {
       if (prev === field) {
@@ -198,23 +302,64 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         </button>
       </div>
 
-      {/* Search */}
-      <div className="relative mb-4">
-        <Search
-          className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
-          style={{ color: 'var(--actuate-text-muted, #9ca3af)' }}
-        />
-        <input
-          type="text"
-          placeholder={`Search ${labels.plural.toLowerCase()}...`}
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
-          style={{
-            borderColor: 'var(--actuate-border, #d1d5db)',
-            color: 'var(--actuate-text, #111827)',
-          }}
-        />
+      {/* Search + facet filters */}
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <div className="relative min-w-[200px] flex-1">
+          <Search
+            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            style={{ color: 'var(--actuate-text-muted, #9ca3af)' }}
+          />
+          <input
+            type="text"
+            placeholder={`Search ${labels.plural.toLowerCase()}...`}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
+            style={{
+              borderColor: 'var(--actuate-border, #d1d5db)',
+              color: 'var(--actuate-text, #111827)',
+            }}
+          />
+        </div>
+        {facets.map((facet) => {
+          const values =
+            facet.source === 'options'
+              ? (facet.options ?? [])
+              : (facetValues[facet.name] ?? []).map((v) => ({ label: v, value: v }))
+          if (values.length === 0) return null
+          return (
+            <select
+              key={facet.name}
+              aria-label={`Filter by ${facet.label}`}
+              value={filters[facet.name] ?? ''}
+              onChange={(e) => setFilter(facet.name, e.target.value)}
+              className="rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+              style={{
+                borderColor: 'var(--actuate-border, #d1d5db)',
+                color: filters[facet.name]
+                  ? 'var(--actuate-text, #111827)'
+                  : 'var(--actuate-text-secondary, #6b7280)',
+              }}
+            >
+              <option value="">All {facet.label.toLowerCase()}</option>
+              {values.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          )
+        })}
+        {Object.keys(filters).length > 0 && (
+          <button
+            type="button"
+            onClick={() => setFilters({})}
+            className="rounded-lg px-2 py-2 text-sm underline transition-opacity hover:opacity-75"
+            style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+          >
+            Clear filters
+          </button>
+        )}
       </div>
 
       {/* Bulk actions */}
@@ -317,6 +462,15 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                 <th className="px-3 py-2 text-left">
                   <SortCol field="title">Title</SortCol>
                 </th>
+                {facets.map((facet) => (
+                  <th
+                    key={facet.name}
+                    className="px-3 py-2 text-left text-xs font-medium"
+                    style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+                  >
+                    {facet.label}
+                  </th>
+                ))}
                 <th className="px-3 py-2 text-left">
                   <SortCol field="status">Status</SortCol>
                 </th>
@@ -356,6 +510,16 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                       {doc.title || doc.name || `#${doc.id}`}
                     </button>
                   </td>
+                  {facets.map((facet) => (
+                    <td
+                      key={facet.name}
+                      className="max-w-[200px] truncate px-3 py-2"
+                      style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+                      title={facetCellValue(doc, facet) || undefined}
+                    >
+                      {facetCellValue(doc, facet) || '—'}
+                    </td>
+                  ))}
                   <td className="px-3 py-2">
                     <span
                       className="inline-block rounded-full px-2 py-0.5 text-xs font-medium"

package/src/views/post-editor/PostFieldsModal.tsx

@@ -4,13 +4,27 @@ import { useEffect, useState } from 'react'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { TagInput } from '../../components/TagInput.js'
 import { RichTextField } from '../../fields/RichTextField.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
+/**
+ * The slice of a collection's field config the modal reads to pick controls:
+ * a `select` category renders a dropdown (structured vocabulary), an `array`
+ * tags field renders the chip input with autocomplete.
+ */
+export interface PostFieldConfig {
+  type?: string
+  options?: Array<{ label: string; value: string }>
+  maxRows?: number
+}
+
 interface PostFieldsModalProps {
   open: boolean
   post: EditorPost
   canEdit: boolean
+  /** Field definitions from the post type's collection config. */
+  fields?: Record<string, PostFieldConfig | undefined>
   onClose: () => void
   onSave: (patch: Partial<EditorPost>) => void
 }
@@ -27,19 +41,35 @@ function slugify(value: string): string {
     .replace(/^-+|-+$/g, '')
 }
 
-/** Edits post-level fields: title, slug, excerpt, featured image, category, body, SEO. */
-export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFieldsModalProps) {
+/** Edits post-level fields: title, slug, excerpt, featured image, category, tags, body, SEO. */
+export function PostFieldsModal({
+  open,
+  post,
+  canEdit,
+  fields,
+  onClose,
+  onSave,
+}: PostFieldsModalProps) {
   const [title, setTitle] = useState(post.title)
   const [slug, setSlug] = useState(post.slug)
   const [excerpt, setExcerpt] = useState(post.excerpt)
   const [featuredImage, setFeaturedImage] = useState(post.featuredImage)
   const [category, setCategory] = useState(post.category)
+  const [tags, setTags] = useState<string[]>(post.tags)
   const [body, setBody] = useState(post.body)
   const [seoTitle, setSeoTitle] = useState(post.seoTitle)
   const [seoDescription, setSeoDescription] = useState(post.seoDescription)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
   const [mediaOpen, setMediaOpen] = useState(false)
 
+  const categoryField = fields?.category
+  const categoryOptions =
+    categoryField?.type === 'select' && Array.isArray(categoryField.options)
+      ? categoryField.options
+      : null
+  const tagsField = fields?.tags
+  const hasTags = tagsField?.type === 'array'
+
   useEffect(() => {
     if (!open) return
     setTitle(post.title)
@@ -47,6 +77,7 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
     setExcerpt(post.excerpt)
     setFeaturedImage(post.featuredImage)
     setCategory(post.category)
+    setTags(post.tags)
     setBody(post.body)
     setSeoTitle(post.seoTitle)
     setSeoDescription(post.seoDescription)
@@ -59,7 +90,7 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
   }
 
   function handleSave() {
-    onSave({ title, slug, excerpt, featuredImage, category, body, seoTitle, seoDescription })
+    onSave({ title, slug, excerpt, featuredImage, category, tags, body, seoTitle, seoDescription })
     onClose()
   }
 
@@ -112,16 +143,54 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
             <label className={LABEL} htmlFor="pf-category">
               Category
             </label>
-            <input
-              id="pf-category"
-              className={INPUT}
-              value={category}
+            {categoryOptions ? (
+              <select
+                id="pf-category"
+                className={INPUT}
+                value={category}
+                disabled={!canEdit}
+                onChange={(e) => setCategory(e.target.value)}
+              >
+                <option value="">No category</option>
+                {categoryOptions.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+                {/* Keep a legacy free-text value selectable so opening the
+                    modal never silently discards it. */}
+                {category && !categoryOptions.some((o) => o.value === category) && (
+                  <option value={category}>{category}</option>
+                )}
+              </select>
+            ) : (
+              <input
+                id="pf-category"
+                className={INPUT}
+                value={category}
+                disabled={!canEdit}
+                placeholder="e.g. Product"
+                onChange={(e) => setCategory(e.target.value)}
+              />
+            )}
+          </div>
+        </div>
+        {hasTags && (
+          <div>
+            <label className={LABEL} htmlFor="pf-tags">
+              Tags
+            </label>
+            <TagInput
+              id="pf-tags"
+              value={tags}
+              onChange={setTags}
+              collection={post.postType}
+              field="tags"
               disabled={!canEdit}
-              placeholder="e.g. Product"
-              onChange={(e) => setCategory(e.target.value)}
+              maxTags={tagsField?.maxRows}
             />
           </div>
-        </div>
+        )}
         <div>
           <label className={LABEL} htmlFor="pf-excerpt">
             Excerpt