@rimelight/cms 0.0.1 → 0.0.3

package/src/client/components/RimelightPropertiesPanel.tsx

@@ -3,7 +3,7 @@ import {
   getPageDefinition,
   type PageDefinition,
   type FieldDefinition
-} from "../../core/page-definitions"
+} from "../../core/page-definitions.ts"
 import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
 import RLSSelect from "@rimelight/ui/components/select/RLSSelect.tsx"
 import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
@@ -18,6 +18,13 @@ function getTextValue(value: any): string {
   return ""
 }
 
+export interface BylineItem {
+  name: string
+  avatar?: string
+  role?: string
+  url?: string
+}
+
 export interface RimelightPropertiesPanelProps {
   pageType?: string
   initialProperties?: Record<string, any>
@@ -25,6 +32,7 @@ export interface RimelightPropertiesPanelProps {
   slug?: string
   icon?: string
   tags?: string[]
+  bylines?: BylineItem[]
   onPropertiesChange?: (props: Record<string, any>) => void
   class?: string
 }
@@ -44,11 +52,37 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
     componentProps.initialProperties?.links || []
   )
 
+  // Bylines state
+  const [availableBylines, setAvailableBylines] = createSignal<BylineItem[]>([])
+  const [bylines, setBylines] = createSignal<BylineItem[]>(
+    componentProps.bylines || componentProps.initialProperties?.bylines || []
+  )
+  const [isBylineModalOpen, setIsBylineModalOpen] = createSignal(false)
+  const [editingBylineIndex, setEditingBylineIndex] = createSignal<number | null>(null)
+  const [bylineDraft, setBylineDraft] = createSignal<BylineItem>({
+    name: "",
+    avatar: "",
+    role: "",
+    url: ""
+  })
+
+  // Taxonomies state
+  const [categoriesList, setCategoriesList] = createSignal<
+    Array<{ id: string; name: string; slug: string }>
+  >([])
+  const [selectedCategory, setSelectedCategory] = createSignal<string>(
+    componentProps.initialProperties?.category || ""
+  )
+  const [tagsList, setTagsList] = createSignal<string[]>(
+    componentProps.tags || componentProps.initialProperties?.tags || []
+  )
+  const [newTagInput, setNewTagInput] = createSignal("")
+
   const [isLinkModalOpen, setIsLinkModalOpen] = createSignal(false)
   const [editingLinkIndex, setEditingLinkIndex] = createSignal<number | null>(null)
   const [linkDraft, setLinkDraft] = createSignal({ label: "", to: "", icon: "" })
 
-  onMount(() => {
+  onMount(async () => {
     const def = definition()
     if (def?.properties) {
       const initialExpanded: Record<string, boolean> = {}
@@ -61,9 +95,45 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
     const handlePropsChange = (e: Event) => {
       if (e instanceof CustomEvent && e.detail?.properties) {
         setProperties(e.detail.properties)
+        if (e.detail.properties.bylines) setBylines(e.detail.properties.bylines)
+        if (e.detail.properties.tags) setTagsList(e.detail.properties.tags)
+        if (e.detail.properties.category) setSelectedCategory(e.detail.properties.category)
       }
     }
     document.addEventListener("properties-change", handlePropsChange)
+
+    // Load available taxonomy categories
+    try {
+      const res = await fetch("/api/cms/taxonomies/category/terms")
+      if (res.ok) {
+        const data = await res.json()
+        if (Array.isArray(data)) {
+          setCategoriesList(data.map((t: any) => ({ id: t.id, name: t.name, slug: t.slug })))
+        }
+      }
+    } catch {
+      // ignore
+    }
+
+    // Load available global bylines
+    try {
+      const res = await fetch("/api/cms/bylines")
+      if (res.ok) {
+        const data = await res.json()
+        if (Array.isArray(data)) {
+          setAvailableBylines(
+            data.map((b: any) => ({
+              name: b.name,
+              avatar: b.avatar || "",
+              role: b.bio || "",
+              url: b.websiteUrl || ""
+            }))
+          )
+        }
+      }
+    } catch {
+      // ignore
+    }
   })
 
   const handlePropertyChange = (key: string, value: any) => {
@@ -84,6 +154,63 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
     setExpandedGroups((prev) => ({ ...prev, [groupId]: !prev[groupId] }))
   }
 
+  // Bylines Handlers
+  const openBylineModal = (index: number | null = null) => {
+    setEditingBylineIndex(index)
+    if (index !== null && bylines()[index]) {
+      const b = bylines()[index]!
+      setBylineDraft({ name: b.name, avatar: b.avatar || "", role: b.role || "", url: b.url || "" })
+    } else {
+      setBylineDraft({ name: "", avatar: "", role: "", url: "" })
+    }
+    setIsBylineModalOpen(true)
+  }
+
+  const saveByline = () => {
+    const draft = bylineDraft()
+    if (!draft.name) return
+    const current = [...bylines()]
+    const idx = editingBylineIndex()
+    if (idx !== null) {
+      current[idx] = draft
+    } else {
+      current.push(draft)
+    }
+    setBylines(current)
+    handlePropertyChange("bylines", current)
+    setIsBylineModalOpen(false)
+  }
+
+  const removeByline = (index: number) => {
+    const current = [...bylines()]
+    current.splice(index, 1)
+    setBylines(current)
+    handlePropertyChange("bylines", current)
+  }
+
+  // Taxonomies Handlers
+  const handleCategoryChange = (slug: string) => {
+    setSelectedCategory(slug)
+    handlePropertyChange("category", slug)
+  }
+
+  const addTag = () => {
+    const tag = newTagInput().trim().toLowerCase()
+    if (tag && !tagsList().includes(tag)) {
+      const updated = [...tagsList(), tag]
+      setTagsList(updated)
+      handlePropertyChange("tags", updated)
+      setNewTagInput("")
+    }
+  }
+
+  const removeTag = (tagToRemove: string) => {
+    const updated = tagsList().filter((t) => t !== tagToRemove)
+    setTagsList(updated)
+    handlePropertyChange("tags", updated)
+  }
+
+  // Links Handlers
   const openLinkModal = (index: number | null = null) => {
     setEditingLinkIndex(index)
     if (index !== null && links()[index]) {
@@ -124,9 +251,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
     if (field.type === "text") {
       return (
         <div class="flex flex-col gap-1 w-full">
-          <span class="text-xs font-semibold text-neutral-600 dark:text-neutral-400 block">
-            {label}
-          </span>
+          <span class="text-xs font-semibold text-neutral-600 block">{label}</span>
           <RLSInput
             value={getTextValue(value)}
             onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
@@ -142,9 +267,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
     if (field.type === "number") {
       return (
         <div class="flex flex-col gap-1 w-full">
-          <span class="text-xs font-semibold text-neutral-600 dark:text-neutral-400 block">
-            {label}
-          </span>
+          <span class="text-xs font-semibold text-neutral-600 block">{label}</span>
           <RLSInput
             type="number"
             value={value !== undefined ? String(value) : ""}
@@ -162,9 +285,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
       const selectItems = (field.options || []).map((opt) => getTextValue(opt))
       return (
         <div class="flex flex-col gap-1 w-full">
-          <span class="text-xs font-semibold text-neutral-600 dark:text-neutral-400 block">
-            {label}
-          </span>
+          <span class="text-xs font-semibold text-neutral-600 block">{label}</span>
           <RLSSelect
             items={selectItems}
             value={getTextValue(value)}
@@ -196,9 +317,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
 
       return (
         <div class="flex flex-col gap-1 w-full">
-          <span class="text-xs font-semibold text-neutral-600 dark:text-neutral-400 block">
-            {label}
-          </span>
+          <span class="text-xs font-semibold text-neutral-600 block">{label}</span>
           <div class="flex flex-wrap gap-1 mb-1">
             <For each={arr}>
               {(item, idx) => (
@@ -207,7 +326,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
                   <button
                     type="button"
                     onClick={() => removeArrayItem(idx())}
-                    class="ml-1 text-muted-foreground hover:text-red-500 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center"
+                    class="ml-1 text-muted hover:text-error-500 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center"
                   >
                     ×
                   </button>
@@ -253,16 +372,168 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
         {/* Top header content */}
         <div class="flex flex-col gap-2 items-center text-center">
           <div class="relative group/icon mb-1">
-            <div class="w-10 h-10 rounded-full flex items-center justify-center border border-default text-muted-foreground">
+            <div class="w-10 h-10 rounded-full flex items-center justify-center border border-default text-muted">
               <RLSIcon name="fileText" size="md" />
             </div>
           </div>
 
-          <span class="text-xs text-dimmed uppercase tracking-wider text-center block font-semibold text-muted-foreground">
+          <span class="text-xs uppercase tracking-wider text-center block font-semibold text-muted">
             {pageType()} Properties
           </span>
         </div>
 
+        {/* Taxonomies Section */}
+        <div class="mt-4 p-3 rounded-lg border border-default/70 bg-elevated/30 flex flex-col gap-3">
+          <h6 class="text-xs font-bold uppercase tracking-wider text-muted">Taxonomies</h6>
+
+          {/* Category */}
+          <div class="flex flex-col gap-1 w-full">
+            <span class="text-xs font-semibold text-neutral-600 block">Category</span>
+            <select
+              value={selectedCategory()}
+              onChange={(e) => handleCategoryChange(e.currentTarget.value)}
+              class="w-full text-xs py-1.5 px-2.5 rounded-md border border-default bg-background text-highlighted focus:outline-none focus:ring-1 focus:ring-primary"
+            >
+              <option value="">(None)</option>
+              <For each={categoriesList()}>
+                {(cat) => (
+                  <option value={cat.slug} selected={selectedCategory() === cat.slug}>
+                    {cat.name}
+                  </option>
+                )}
+              </For>
+            </select>
+          </div>
+
+          {/* Tags */}
+          <div class="flex flex-col gap-1 w-full">
+            <span class="text-xs font-semibold text-neutral-600 block">Tags</span>
+            <div class="flex flex-wrap gap-1 mb-1">
+              <For each={tagsList()}>
+                {(tag) => (
+                  <RLSBadge variant="soft" color="primary" size="sm">
+                    <span>#{tag}</span>
+                    <button
+                      type="button"
+                      onClick={() => removeTag(tag)}
+                      class="ml-1 text-muted hover:text-error-500 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center"
+                    >
+                      ×
+                    </button>
+                  </RLSBadge>
+                )}
+              </For>
+            </div>
+            <div class="flex gap-1 mt-1">
+              <div class="flex-1">
+                <RLSInput
+                  value={newTagInput()}
+                  onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                    setNewTagInput(e.currentTarget.value)
+                  }
+                  onKeyDown={(e: KeyboardEvent) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault()
+                      addTag()
+                    }
+                  }}
+                  size="sm"
+                  placeholder="Add tag..."
+                />
+              </div>
+              <RLSButton variant="outline" color="neutral" size="sm" onClick={addTag} label="+" />
+            </div>
+          </div>
+        </div>
+
+        {/* Bylines / Authors Section */}
+        <div class="mt-3 p-3 rounded-lg border border-default/70 bg-elevated/30 flex flex-col gap-2">
+          <div class="flex items-center justify-between mb-1">
+            <h6 class="text-xs font-bold uppercase tracking-wider text-muted">Bylines / Authors</h6>
+            <RLSButton
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              onClick={() => openBylineModal()}
+              leadingIcon="plus"
+              label="Add Custom"
+            />
+          </div>
+
+          <Show when={availableBylines().length > 0}>
+            <select
+              onChange={(e) => {
+                const authorName = e.currentTarget.value
+                if (!authorName) return
+                const found = availableBylines().find((b) => b.name === authorName)
+                if (found && !bylines().some((b) => b.name === found.name)) {
+                  const updated = [...bylines(), found]
+                  setBylines(updated)
+                  handlePropertyChange("bylines", updated)
+                }
+                e.currentTarget.value = ""
+              }}
+              class="w-full text-xs py-1.5 px-2 rounded-md border border-default bg-background text-highlighted focus:outline-none focus:ring-1 focus:ring-primary mb-1"
+            >
+              <option value="">+ Select from global bylines...</option>
+              <For each={availableBylines()}>
+                {(author) => <option value={author.name}>{author.name}</option>}
+              </For>
+            </select>
+          </Show>
+
+          <Show
+            when={bylines().length > 0}
+            fallback={<p class="text-xs text-muted italic">No authors attached</p>}
+          >
+            <div class="flex flex-col gap-2">
+              <For each={bylines()}>
+                {(byline, idx) => (
+                  <div class="flex items-center justify-between p-2 rounded-lg border border-default/50 text-xs bg-background/50">
+                    <div class="flex items-center gap-2 truncate">
+                      {byline.avatar ? (
+                        <img
+                          src={byline.avatar}
+                          alt={byline.name}
+                          class="w-6 h-6 rounded-full object-cover shrink-0"
+                        />
+                      ) : (
+                        <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-[10px] shrink-0">
+                          {byline.name.charAt(0).toUpperCase()}
+                        </div>
+                      )}
+                      <div class="flex flex-col truncate">
+                        <span class="font-semibold text-highlighted truncate">{byline.name}</span>
+                        {byline.role && (
+                          <span class="text-[10px] text-muted truncate">{byline.role}</span>
+                        )}
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-1 shrink-0">
+                      <button
+                        type="button"
+                        onClick={() => openBylineModal(idx())}
+                        class="text-muted hover:text-primary cursor-pointer p-1"
+                        title="Edit"
+                      >
+                        <RLSIcon name="edit" size="xs" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => removeByline(idx())}
+                        class="text-muted hover:text-error-500 cursor-pointer p-1"
+                        title="Delete"
+                      >
+                        <RLSIcon name="trash" size="xs" />
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Show>
+        </div>
+
         {/* Property Groups Accordion */}
         <div class="mt-4 space-y-2 w-full">
           <For each={Object.entries(definition()?.properties || {})}>
@@ -273,13 +544,13 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
                   <button
                     type="button"
                     onClick={() => toggleGroup(groupId)}
-                    class="flex justify-between items-center w-full p-2 rounded-lg text-left font-medium text-sm text-foreground hover:bg-elevated transition cursor-pointer mt-2 bg-transparent border-0"
+                    class="flex justify-between items-center w-full p-2 rounded-lg text-left font-medium text-sm text-highlighted hover:bg-elevated transition cursor-pointer mt-2 bg-transparent border-0"
                   >
                     <span>{getTextValue(group.label)}</span>
                     <RLSIcon
                       name="chevronDown"
                       size="sm"
-                      class={`transition-transform duration-150 text-muted-foreground ${
+                      class={`transition-transform duration-150 text-muted ${
                         isExpanded() ? "rotate-180" : ""
                       }`}
                     />
@@ -302,7 +573,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
       {/* Links section */}
       <div class="flex flex-col gap-2 pt-2 border-t border-default">
         <div class="flex items-center justify-between mb-1">
-          <h6 class="text-xs font-bold uppercase tracking-wider text-muted-foreground">Links</h6>
+          <h6 class="text-xs font-bold uppercase tracking-wider text-muted">Links</h6>
           <RLSButton
             variant="ghost"
             color="neutral"
@@ -315,15 +586,15 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
 
         <Show
           when={links().length > 0}
-          fallback={<p class="text-xs text-muted-foreground italic">No links added</p>}
+          fallback={<p class="text-xs text-muted italic">No links added</p>}
         >
           <div class="flex flex-col gap-2">
             <For each={links()}>
               {(item, index) => (
                 <div class="flex items-center justify-between p-2 rounded-lg border border-default text-sm">
                   <div class="flex items-center gap-2 truncate">
-                    <RLSIcon name="link" size="xs" class="text-muted-foreground shrink-0" />
-                    <span class="font-medium text-foreground truncate">{item.label}</span>
+                    <RLSIcon name="link" size="xs" class="text-muted shrink-0" />
+                    <span class="font-medium text-highlighted truncate">{item.label}</span>
                   </div>
                   <div class="flex items-center gap-1 shrink-0">
                     <RLSButton
@@ -344,7 +615,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
                       onClick={() => removeLink(index())}
                       aria-label="Delete"
                       title="Delete"
-                      class="!text-red-500 hover:!text-red-600"
+                      class="!text-error-500 hover:!text-error-600"
                       leading={<RLSIcon name="trash" size="xs" />}
                     />
                   </div>
@@ -355,6 +626,77 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
         </Show>
       </div>
 
+      {/* Byline Modal */}
+      <RLSModal
+        open={isBylineModalOpen()}
+        onClose={() => setIsBylineModalOpen(false)}
+        title={editingBylineIndex() !== null ? "Edit Author Byline" : "Add Author Byline"}
+        footerSlot={
+          <>
+            <RLSButton
+              variant="outline"
+              color="neutral"
+              size="sm"
+              onClick={() => setIsBylineModalOpen(false)}
+              label="Cancel"
+            />
+            <RLSButton
+              variant="solid"
+              color="primary"
+              size="sm"
+              onClick={saveByline}
+              label={editingBylineIndex() !== null ? "Update" : "Add"}
+            />
+          </>
+        }
+      >
+        <div class="flex flex-col gap-4 py-2">
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-semibold text-muted">Author Name *</span>
+            <RLSInput
+              value={bylineDraft().name}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                setBylineDraft({ ...bylineDraft(), name: e.currentTarget.value })
+              }
+              placeholder="e.g. Idan"
+            />
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-semibold text-muted">Role / Title</span>
+            <RLSInput
+              value={bylineDraft().role || ""}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                setBylineDraft({ ...bylineDraft(), role: e.currentTarget.value })
+              }
+              placeholder="e.g. Lead Producer"
+            />
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-semibold text-muted">Avatar URL</span>
+            <RLSInput
+              value={bylineDraft().avatar || ""}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                setBylineDraft({ ...bylineDraft(), avatar: e.currentTarget.value })
+              }
+              placeholder="https://..."
+            />
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-semibold text-muted">Profile / Website URL</span>
+            <RLSInput
+              value={bylineDraft().url || ""}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                setBylineDraft({ ...bylineDraft(), url: e.currentTarget.value })
+              }
+              placeholder="https://rimelight.com/authors/..."
+            />
+          </div>
+        </div>
+      </RLSModal>
+
       {/* Link Add/Edit Modal */}
       <RLSModal
         open={isLinkModalOpen()}
@@ -381,7 +723,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
       >
         <div class="flex flex-col gap-4 py-2">
           <div class="flex flex-col gap-1">
-            <span class="text-xs font-semibold text-muted-foreground">Label</span>
+            <span class="text-xs font-semibold text-muted">Label</span>
             <RLSInput
               value={linkDraft().label}
               onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
@@ -392,7 +734,7 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
           </div>
 
           <div class="flex flex-col gap-1">
-            <span class="text-xs font-semibold text-muted-foreground">URL</span>
+            <span class="text-xs font-semibold text-muted">URL</span>
             <RLSInput
               value={linkDraft().to}
               onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>