feat(pages): complete reusable page block editor controls

apps/admin/src/components/pages/page-block-editor.tsx

@@ -43,6 +43,25 @@ function updateBlock(blocks: PageBlocks, blockId: string, next: Partial<PageBloc
   )
 }
 
+function moveBlock(blocks: PageBlocks, blockId: string, direction: "up" | "down"): PageBlocks {
+  const index = blocks.findIndex((entry) => entry.id === blockId)
+
+  if (index < 0) {
+    return blocks
+  }
+
+  const nextIndex = direction === "up" ? index - 1 : index + 1
+  if (nextIndex < 0 || nextIndex >= blocks.length) {
+    return blocks
+  }
+
+  const next = [...blocks]
+  const current = next[index]
+  next[index] = next[nextIndex]
+  next[nextIndex] = current
+  return next
+}
+
 export function PageBlockEditor({
   name,
   initialContent,
@@ -156,13 +175,29 @@ export function PageBlockEditor({
               <span>
                 #{index + 1} {block.type}
               </span>
-              <button
-                type="button"
-                className="rounded border px-2 py-1"
-                onClick={() => setBlocks((prev) => prev.filter((entry) => entry.id !== block.id))}
-              >
-                Remove
-              </button>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  className="rounded border px-2 py-1"
+                  onClick={() => setBlocks((prev) => moveBlock(prev, block.id, "up"))}
+                >
+                  Up
+                </button>
+                <button
+                  type="button"
+                  className="rounded border px-2 py-1"
+                  onClick={() => setBlocks((prev) => moveBlock(prev, block.id, "down"))}
+                >
+                  Down
+                </button>
+                <button
+                  type="button"
+                  className="rounded border px-2 py-1"
+                  onClick={() => setBlocks((prev) => prev.filter((entry) => entry.id !== block.id))}
+                >
+                  Remove
+                </button>
+              </div>
             </div>
 
             {block.type === "hero" ? (
@@ -187,6 +222,26 @@ export function PageBlockEditor({
                   placeholder="Subheading"
                   className="rounded border border-neutral-300 px-2 py-1 text-sm"
                 />
+                <input
+                  value={block.ctaLabel ?? ""}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, { ctaLabel: event.target.value || null }),
+                    )
+                  }
+                  placeholder="CTA label"
+                  className="rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
+                <input
+                  value={block.ctaHref ?? ""}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, { ctaHref: event.target.value || null }),
+                    )
+                  }
+                  placeholder="CTA href"
+                  className="rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
               </div>
             ) : null}
 
@@ -203,22 +258,34 @@ export function PageBlockEditor({
             ) : null}
 
             {block.type === "gallery" ? (
-              <textarea
-                rows={3}
-                value={block.imageIds.join(",")}
-                onChange={(event) =>
-                  setBlocks((prev) =>
-                    updateBlock(prev, block.id, {
-                      imageIds: event.target.value
-                        .split(",")
-                        .map((entry) => entry.trim())
-                        .filter((entry) => entry.length > 0),
-                    }),
-                  )
-                }
-                placeholder="Media asset IDs (comma separated UUIDs)"
-                className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
-              />
+              <div className="space-y-2">
+                <input
+                  value={block.title ?? ""}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, { title: event.target.value || null }),
+                    )
+                  }
+                  placeholder="Gallery title"
+                  className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
+                <textarea
+                  rows={3}
+                  value={block.imageIds.join(",")}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, {
+                        imageIds: event.target.value
+                          .split(",")
+                          .map((entry) => entry.trim())
+                          .filter((entry) => entry.length > 0),
+                      }),
+                    )
+                  }
+                  placeholder="Media asset IDs (comma separated UUIDs)"
+                  className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
+              </div>
             ) : null}
 
             {block.type === "cta" ? (
@@ -239,50 +306,101 @@ export function PageBlockEditor({
                   placeholder="Link href"
                   className="rounded border border-neutral-300 px-2 py-1 text-sm"
                 />
+                <select
+                  value={block.variant}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, {
+                        variant: event.target.value as "primary" | "secondary",
+                      }),
+                    )
+                  }
+                  className="rounded border border-neutral-300 px-2 py-1 text-sm"
+                >
+                  <option value="primary">Primary</option>
+                  <option value="secondary">Secondary</option>
+                </select>
               </div>
             ) : null}
 
             {block.type === "form" ? (
-              <input
-                value={block.formKey}
-                onChange={(event) =>
-                  setBlocks((prev) => updateBlock(prev, block.id, { formKey: event.target.value }))
-                }
-                placeholder="Form key (e.g. contact, commission)"
-                className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
-              />
+              <div className="space-y-2">
+                <input
+                  value={block.formKey}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, { formKey: event.target.value }),
+                    )
+                  }
+                  placeholder="Form key (e.g. contact, commission)"
+                  className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
+                <input
+                  value={block.title ?? ""}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, { title: event.target.value || null }),
+                    )
+                  }
+                  placeholder="Form title"
+                  className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
+                <textarea
+                  rows={2}
+                  value={block.description ?? ""}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, { description: event.target.value || null }),
+                    )
+                  }
+                  placeholder="Form description"
+                  className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
+              </div>
             ) : null}
 
             {block.type === "price_cards" ? (
-              <textarea
-                rows={4}
-                value={block.cards
-                  .map((card) => [card.name, card.price ?? "", card.description ?? ""].join("|"))
-                  .join("\n")}
-                onChange={(event) =>
-                  setBlocks((prev) =>
-                    updateBlock(prev, block.id, {
-                      cards: event.target.value
-                        .split("\n")
-                        .map((line) => line.trim())
-                        .filter((line) => line.length > 0)
-                        .map((line, lineIndex) => {
-                          const [name, price, description] = line
-                            .split("|")
-                            .map((entry) => entry.trim())
-                          return {
-                            id: `card-${lineIndex}`,
-                            name: name || `Card ${lineIndex + 1}`,
-                            price: price || null,
-                            description: description || null,
-                          }
-                        }),
-                    }),
-                  )
-                }
-                placeholder="One card per line: Name|Price|Description"
-                className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
-              />
+              <div className="space-y-2">
+                <input
+                  value={block.title ?? ""}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, { title: event.target.value || null }),
+                    )
+                  }
+                  placeholder="Price card section title"
+                  className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
+                <textarea
+                  rows={4}
+                  value={block.cards
+                    .map((card) => [card.name, card.price ?? "", card.description ?? ""].join("|"))
+                    .join("\n")}
+                  onChange={(event) =>
+                    setBlocks((prev) =>
+                      updateBlock(prev, block.id, {
+                        cards: event.target.value
+                          .split("\n")
+                          .map((line) => line.trim())
+                          .filter((line) => line.length > 0)
+                          .map((line, lineIndex) => {
+                            const [name, price, description] = line
+                              .split("|")
+                              .map((entry) => entry.trim())
+                            return {
+                              id: `card-${lineIndex}`,
+                              name: name || `Card ${lineIndex + 1}`,
+                              price: price || null,
+                              description: description || null,
+                            }
+                          }),
+                      }),
+                    )
+                  }
+                  placeholder="One card per line: Name|Price|Description"
+                  className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                />
+              </div>
             ) : null}
           </article>
         ))}

apps/web/src/components/public-page-view.tsx

@@ -12,6 +12,16 @@ type PublicPageViewProps = {
   page: PageEntity
 }
 
+function resolveFormLink(formKey: string): { href: string; label: string } {
+  const normalized = formKey.trim().toLowerCase()
+
+  if (normalized === "commission" || normalized === "commissions") {
+    return { href: "/commissions", label: "Open commission form" }
+  }
+
+  return { href: `/#form-${normalized || "contact"}`, label: "Open contact form" }
+}
+
 export function PublicPageView({ page }: PublicPageViewProps) {
   const blocks = (() => {
     try {
@@ -106,6 +116,7 @@ export function PublicPageView({ page }: PublicPageViewProps) {
           }
 
           if (block.type === "form") {
+            const formLink = resolveFormLink(block.formKey)
             return (
               <section key={block.id} className="space-y-2 rounded border border-neutral-200 p-4">
                 <h3 className="text-lg font-medium">{block.title || "Form block"}</h3>
@@ -113,6 +124,12 @@ export function PublicPageView({ page }: PublicPageViewProps) {
                   {block.description || "Form integration pending."}
                 </p>
                 <p className="text-xs text-neutral-500">formKey: {block.formKey}</p>
+                <a
+                  href={formLink.href}
+                  className="inline-flex rounded border border-neutral-300 px-3 py-1.5 text-sm"
+                >
+                  {formLink.label}
+                </a>
               </section>
             )
           }