@bygghammar/cms-platform 0.80.1 → 0.90.0-m7.10

package/src/backoffice/SectionEditorView.tsx

@@ -7,6 +7,9 @@
  */
 
 import { useEffect, useState, type ReactNode } from "react";
+
+import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
 import { ChevronLeft, Code2, FormInput, RotateCcw, Save } from "lucide-react";
 
 /** Metadata for one editable shared section. */
@@ -20,7 +23,8 @@ export type SectionEditorDeps = {
   value: unknown;
   /** Code default for this section, used by "Reset to default". */
   codeDefault: unknown;
-  save: (value: unknown) => Promise<unknown>;
+  /** `editSessionId` identifies the tab holding the lock; the server checks it. */
+  save: (value: unknown, editSessionId?: string) => Promise<unknown>;
   goToList: () => void;
   renderForm: (args: { value: unknown; onChange: (next: unknown) => void }) => ReactNode;
   notify: {
@@ -40,6 +44,11 @@ export function SectionEditorView({ deps }: { deps: SectionEditorDeps }) {
   const [busy, setBusy] = useState(false);
   const [dirty, setDirty] = useState(false);
 
+  const lock = useEditLock({
+    resourceType: EDIT_LOCK_TYPES.contentSection,
+    resourceId: sectionKey,
+  });
+
   useEffect(() => {
     setDraft(value);
     setJsonText(JSON.stringify(value, null, 2));
@@ -85,7 +94,7 @@ export function SectionEditorView({ deps }: { deps: SectionEditorDeps }) {
     }
     setBusy(true);
     try {
-      await deps.save(payload);
+      await deps.save(payload, lock.sessionId);
       notify.success("Saved");
       setDirty(false);
     } catch (err) {
@@ -144,7 +153,9 @@ export function SectionEditorView({ deps }: { deps: SectionEditorDeps }) {
         )}
       </div>
 
-      <div className="mt-6">
+      <EditLockBanner lock={lock} className="mt-6" />
+
+      <EditLockFence lock={lock} className="mt-6 block">
         {mode === "form" ? (
           deps.renderForm({
             value: draft,
@@ -166,12 +177,12 @@ export function SectionEditorView({ deps }: { deps: SectionEditorDeps }) {
             />
           </div>
         )}
-      </div>
+      </EditLockFence>
 
       <div className="mt-6 flex flex-wrap items-center gap-3">
         <button
           onClick={onSave}
-          disabled={busy || !dirty}
+          disabled={busy || !dirty || lock.blocked}
           className="inline-flex items-center gap-2 bg-ink text-paper px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-ink/85 disabled:opacity-50"
         >
           <Save className="size-4" />
@@ -179,7 +190,8 @@ export function SectionEditorView({ deps }: { deps: SectionEditorDeps }) {
         </button>
         <button
           onClick={onReset}
-          className="inline-flex items-center gap-2 border border-ink/20 px-6 py-3 text-xs uppercase tracking-[0.22em] hover:border-ink"
+          disabled={lock.blocked}
+          className="inline-flex items-center gap-2 border border-ink/20 px-6 py-3 text-xs uppercase tracking-[0.22em] hover:border-ink disabled:opacity-50"
         >
           <RotateCcw className="size-4" />
           Reset to default

package/src/backoffice/SectionFormView.tsx

@@ -1,6 +1,7 @@
 import {
   createContext,
   useContext,
+  useRef,
   useState,
   type ComponentType,
   type CSSProperties,
@@ -48,6 +49,14 @@ import { MediaPickerDialog } from "./inspectors/fields";
  *  - Plain object       → recurse into fields.
  *  - string/number/bool → primitive input.
  *
+ * Sibling items teach the form what a list holds. An array's entries are
+ * merged into one example — a "shape" — which is handed to each row and down
+ * through its fields. That example is what lets the form render a field an
+ * individual item happens to be missing, and lets "Add item" build a real
+ * entry for a list that is currently empty. Without it a nested menu is
+ * uneditable: an item with no `children` key offers no way to add one, and
+ * adding to an empty `children: []` appends a bare string.
+ *
  * Everything site-specific (locale list, image renderer, focus editor, the
  * managed-forms list) is injected by the host.
  * Backoffice copy is English by project rule.
@@ -116,6 +125,10 @@ function isLocalizedImage(
   return isPlainObject(v) && typeof v.src === "string" && isPlainObject(v.alt);
 }
 
+function newRowId(): string {
+  return `row_${Math.random().toString(36).slice(2, 10)}`;
+}
+
 function labelize(key: string): string {
   return key
     .replace(/([A-Z])/g, " $1")
@@ -130,6 +143,65 @@ function useIsLocalizedString() {
   return makeIsLocalizedString(locales);
 }
 
+/**
+ * One example object describing everything the items of a list can hold.
+ *
+ * Menu data is ragged: the first item is `{ label, href }` and the third also
+ * has `children`. Merging the entries gives every row the same set of fields
+ * to offer, so a submenu can be added to an item that has none yet. The first
+ * non-empty value for a key wins, because that is the one that shows what the
+ * key actually contains.
+ */
+function mergedShape(items: readonly unknown[]): Record<string, unknown> | undefined {
+  let out: Record<string, unknown> | undefined;
+  for (const item of items) {
+    if (!isPlainObject(item)) continue;
+    out ??= {};
+    for (const [k, v] of Object.entries(item)) {
+      const known = out[k];
+      const knownIsEmpty =
+        known === undefined ||
+        known === "" ||
+        (Array.isArray(known) && known.length === 0) ||
+        (isPlainObject(known) && Object.keys(known).length === 0);
+      if (knownIsEmpty) out[k] = v;
+    }
+  }
+  return out;
+}
+
+/** The first entry of a list that can serve as an example of its items. */
+function elementShape(...lists: (readonly unknown[] | undefined)[]): unknown {
+  for (const list of lists) {
+    if (!list?.length) continue;
+    const merged = mergedShape(list);
+    if (merged) return merged;
+    const first = list.find((v) => v !== undefined && v !== null);
+    if (first !== undefined) return first;
+  }
+  return undefined;
+}
+
+/** Keys under which a nested list holds items of the parent's own shape. */
+const TREE_KEYS = ["children", "items", "links"] as const;
+
+/**
+ * Whether an object is a menu entry rather than a content row.
+ *
+ * Used only to decide whether to offer a submenu on a list item whose siblings
+ * do not have one either — the cold start, where no data exists to learn from.
+ * A link has somewhere to go and something to call it; a gallery slide or a
+ * price row has neither, and is left alone.
+ */
+function isLinkNode(value: Record<string, unknown>, deps: SectionFormDeps): boolean {
+  const isLocalizedString = makeIsLocalizedString(deps.locales);
+  const hasTarget = ["href", "url", "to", "path"].some((k) => typeof value[k] === "string");
+  const hasName = ["label", "title", "name", "text"].some(
+    (k) => isLocalizedString(value[k]) || typeof value[k] === "string",
+  );
+  return hasTarget && hasName;
+}
+
 function blankLike(template: unknown, deps: SectionFormDeps): unknown {
   const isLocalizedString = makeIsLocalizedString(deps.locales);
   if (isLocalizedString(template)) return { [deps.defaultLocale]: "" };
@@ -169,34 +241,68 @@ function Node({
   path,
   depth,
   fieldLabel,
+  shape,
+  inList,
 }: {
   value: AnyVal;
   onChange: (v: AnyVal) => void;
   path: string;
   depth: number;
   fieldLabel?: string;
+  /** An example of this field taken from sibling items, when one exists. */
+  shape?: unknown;
+  /** True when this value is an entry in a list rather than a named field. */
+  inList?: boolean;
 }) {
+  const deps = useDeps();
   const isLocalizedString = useIsLocalizedString();
-  if (isLocalizedString(value)) {
-    return <LocalizedStringField value={value} onChange={onChange} label={fieldLabel} />;
+
+  // A field a particular item is missing, or that was saved as an empty
+  // object, still has to be editable — and has to be edited with the right
+  // control. The sibling example says which one, without writing anything:
+  // nothing reaches the data until the editor changes something.
+  const isBlank =
+    value === undefined ||
+    value === null ||
+    (isPlainObject(value) && Object.keys(value).length === 0 && !isPlainObject(shape));
+  const resolved = isBlank && shape !== undefined ? blankLike(shape, deps) : value;
+
+  if (isLocalizedString(resolved)) {
+    return <LocalizedStringField value={resolved} onChange={onChange} label={fieldLabel} />;
   }
-  if (isLocalizedImage(value)) {
-    return <ImageField value={value} onChange={onChange} label={fieldLabel} />;
+  if (isLocalizedImage(resolved)) {
+    return <ImageField value={resolved} onChange={onChange} label={fieldLabel} />;
   }
-  if (Array.isArray(value)) {
+  if (Array.isArray(resolved)) {
     return (
-      <ArrayField value={value} onChange={onChange} path={path} depth={depth} label={fieldLabel} />
+      <ArrayField
+        value={resolved}
+        onChange={onChange}
+        path={path}
+        depth={depth}
+        label={fieldLabel}
+        shape={shape}
+      />
     );
   }
-  if (isPlainObject(value)) {
+  if (isPlainObject(resolved)) {
     return (
-      <ObjectField value={value} onChange={onChange} path={path} depth={depth} label={fieldLabel} />
+      <ObjectField
+        value={resolved}
+        onChange={onChange}
+        path={path}
+        depth={depth}
+        label={fieldLabel}
+        shape={shape}
+        inList={inList}
+      />
     );
   }
-  if (path.endsWith("formKey") && (typeof value === "string" || value == null)) {
+  const value_ = resolved;
+  if (path.endsWith("formKey") && (typeof value_ === "string" || value_ == null)) {
     return (
       <FormKeyField
-        value={(value as string) ?? ""}
+        value={(value_ as string) ?? ""}
         onChange={onChange}
         label={fieldLabel ?? "Form"}
       />
@@ -204,7 +310,7 @@ function Node({
   }
   return (
     <PrimitiveField
-      value={value}
+      value={value_}
       onChange={onChange}
       label={fieldLabel}
       hint={
@@ -452,23 +558,42 @@ function ArrayField({
   path,
   depth,
   label,
+  shape,
 }: {
   value: unknown[];
   onChange: (v: unknown[]) => void;
   path: string;
   depth: number;
   label?: string;
+  /** An example list from sibling items, used when this one is empty. */
+  shape?: unknown;
 }) {
   const deps = useDeps();
   const [openIdx, setOpenIdx] = useState<number | null>(value.length <= 3 ? 0 : null);
-  // Stable per-position ids so dnd-kit can reorder items whose original data has no id.
-  const [ids, setIds] = useState<string[]>(() =>
-    value.map((_, i) => `row_${i}_${Math.random().toString(36).slice(2, 8)}`),
-  );
-  if (ids.length !== value.length) {
-    // Rebuild when items are added/removed externally (add/remove below always keeps ids in sync).
-    setIds(value.map((_, i) => `row_${i}_${Math.random().toString(36).slice(2, 8)}`));
+
+  // Stable row identity for dnd-kit and for React keys. Ids used to be minted
+  // for every position whenever the list's length changed, which remounted
+  // every row — collapsing open items and dropping the caret out of whatever
+  // field was being typed in. They are now minted only for positions that are
+  // genuinely new, and follow their item through a reorder.
+  const minted = useRef<string[]>([]);
+  if (minted.current.length !== value.length) {
+    const next = minted.current.slice(0, value.length);
+    while (next.length < value.length) next.push(newRowId());
+    minted.current = next;
   }
+  // An item carrying its own id keeps it, so it survives the whole value being
+  // replaced after a save. Duplicates would break dnd-kit, so they are ignored.
+  const own = value.map((item) =>
+    isPlainObject(item) && typeof item.id === "string" && item.id ? item.id : null,
+  );
+  const ownAreUsable =
+    own.every((id) => id !== null) && new Set(own as string[]).size === own.length;
+  const ids = ownAreUsable ? (own as string[]) : minted.current;
+
+  // What "Add item" should build. Sibling entries describe it exactly; an
+  // empty list borrows the example handed down from the items around it.
+  const template = elementShape(value, Array.isArray(shape) ? shape : undefined);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
@@ -484,25 +609,24 @@ function ArrayField({
     const j = i + dir;
     if (j < 0 || j >= value.length) return;
     onChange(arrayMove(value.slice(), i, j));
-    setIds((prev) => arrayMove(prev, i, j));
+    minted.current = arrayMove(minted.current, i, j);
     setOpenIdx(j);
   };
   const remove = (i: number) => {
     const copy = value.slice();
     copy.splice(i, 1);
     onChange(copy);
-    setIds((prev) => {
-      const nx = prev.slice();
-      nx.splice(i, 1);
-      return nx;
-    });
+    const nx = minted.current.slice();
+    nx.splice(i, 1);
+    minted.current = nx;
     setOpenIdx(null);
   };
   const add = () => {
-    const template = value[0] ?? "";
-    const next = value.concat([blankLike(template, deps)]);
+    // `template` is undefined only for a list nothing has ever described — a
+    // list of plain strings, which is what an empty string produces.
+    const next = value.concat([blankLike(template ?? "", deps)]);
     onChange(next);
-    setIds((prev) => [...prev, `row_${prev.length}_${Math.random().toString(36).slice(2, 8)}`]);
+    minted.current = [...minted.current, newRowId()];
     setOpenIdx(next.length - 1);
   };
 
@@ -513,7 +637,7 @@ function ArrayField({
     const ni = ids.indexOf(String(over.id));
     if (oi < 0 || ni < 0) return;
     onChange(arrayMove(value.slice(), oi, ni));
-    setIds((prev) => arrayMove(prev, oi, ni));
+    minted.current = arrayMove(minted.current, oi, ni);
     if (openIdx === oi) setOpenIdx(ni);
     else if (openIdx === ni) setOpenIdx(oi);
   };
@@ -547,6 +671,8 @@ function ArrayField({
                         onChange={(next) => update(i, next)}
                         path={`${path}[${i}]`}
                         depth={depth + 1}
+                        shape={template}
+                        inList
                       />
                     </div>
                   )}
@@ -696,24 +822,51 @@ function ObjectField({
   path,
   depth,
   label,
+  shape,
+  inList,
 }: {
   value: Record<string, unknown>;
   onChange: (v: Record<string, unknown>) => void;
   path: string;
   depth: number;
   label?: string;
+  /** An example of this object taken from its sibling items in a list. */
+  shape?: unknown;
+  /** True when this object is an entry in a list rather than a named field. */
+  inList?: boolean;
 }) {
-  const entries = Object.entries(value);
+  const deps = useDeps();
+  const example = isPlainObject(shape) ? shape : undefined;
+
+  // Fields this item is missing but its siblings have. A menu item saved
+  // without a `children` key is not an item without a submenu, it is an item
+  // whose submenu nobody has written yet — and it must be possible to write
+  // one. Nothing is added to the data by showing the field.
+  const keys = [...Object.keys(value)];
+  for (const k of Object.keys(example ?? {})) if (!keys.includes(k)) keys.push(k);
+
+  // The cold start: no sibling has a submenu either, so there is nothing to
+  // learn the shape from. Offer one on entries that are plainly links, and
+  // leave gallery slides, price rows and the like untouched.
+  // Only entries of a list can be menu items; a named `cta` field is a button,
+  // and giving it a submenu would be noise.
+  const isTreeKey = (k: string) => (TREE_KEYS as readonly string[]).includes(k);
+  const isLink = Boolean(inList) && isLinkNode(value, deps);
+  if (isLink && !keys.some(isTreeKey)) keys.push(TREE_KEYS[0]);
+
   const content = (
     <div className={depth === 0 ? "space-y-5" : "space-y-4"}>
-      {entries.map(([k, v]) => (
+      {keys.map((k) => (
         <Node
           key={k}
-          value={v}
+          value={value[k]}
           onChange={(nv) => onChange({ ...value, [k]: nv })}
           path={path ? `${path}.${k}` : k}
           depth={depth + 1}
           fieldLabel={labelize(k)}
+          // A submenu on a link holds items of the link's own shape, which is
+          // the only thing left to go on once the siblings have said nothing.
+          shape={example?.[k] ?? (isLink && isTreeKey(k) ? [value] : undefined)}
         />
       ))}
     </div>

package/src/backoffice/SiteSettingsView.tsx

@@ -11,6 +11,7 @@ import {
   type SiteFeatureFlags,
   type SiteSettingOverrides,
 } from "../config/site-config";
+import { CMS_MODULE_LIST, CMS_MODULE_LABELS } from "../config/modules";
 import type { IndexingPolicy } from "../site/indexing";
 import { IndexingStatusCard } from "./IndexingStatusCard";
 
@@ -48,16 +49,9 @@ export type SiteSettingsDeps = {
   MediaField?: (props: any) => ReactNode;
 };
 
-const FEATURE_LABELS: Record<keyof SiteFeatureFlags, string> = {
-  trips: "Trips & departures",
-  courses: "Courses",
-  reviews: "Reviews",
-  email: "Transactional email",
-  tracking: "Code & tracking",
-  backup: "Backup & restore",
-  domains: "Custom domains",
-  forms: "Forms",
-};
+// Labels and order come from the module table, so a new module appears here
+// without a second list to keep in step.
+const FEATURE_LABELS = CMS_MODULE_LABELS;
 
 const COMPANY_LABELS: Record<keyof typeof EMPTY_COMPANY, string> = {
   legalName: "Legal name",
@@ -275,14 +269,19 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
           busy={busy === "features"}
         />
         <div className="mt-4 grid gap-3 md:grid-cols-2">
-          {(Object.keys(DEFAULT_FEATURE_FLAGS) as (keyof SiteFeatureFlags)[]).map((flag) => (
-            <label key={flag} className="flex items-center gap-3 text-sm text-ink">
+          {CMS_MODULE_LIST.map((module) => (
+            <label key={module.key} className="flex items-center gap-3 text-sm text-ink">
               <input
                 type="checkbox"
-                checked={features[flag]}
-                onChange={(e) => setFeatures({ ...features, [flag]: e.target.checked })}
+                checked={features[module.key]}
+                onChange={(e) => setFeatures({ ...features, [module.key]: e.target.checked })}
               />
-              {FEATURE_LABELS[flag]}
+              <span>
+                {FEATURE_LABELS[module.key]}
+                {module.description ? (
+                  <span className="block text-xs text-ink/60">{module.description}</span>
+                ) : null}
+              </span>
             </label>
           ))}
         </div>