CMS: Add support for Template Label

[Copilot]

This PR adds support for user-friendly template labels in the Root.js CMS, allowing developers to specify display names that are more intuitive for content editors.

Problem

Currently, the CMS displays technical template names (e.g., TemplateHomepageHero) in the module selector dropdown, which are not user-friendly for content editors:

Solution

Added an optional label field to template schemas that allows developers to specify user-friendly display names:

export default schema.define({
  name: 'TemplateHomepageHero',
  label: 'Home Hero',  // 👈 User-friendly display name
  description: 'Homepage hero section',
  fields: [...]
});

Implementation Details

1. Schema Interface Enhancement

export interface Schema {
  name: string;
  label?: string;  // 👈 New optional field
  description?: string;
  fields: FieldWithId[];
}

2. UI Component Update

Updated the DocEditor component to use the label when available, falling back to the technical name:

field.types.forEach((type) => {
  typesMap[type.name] = type;
  dropdownValues.push({
    value: type.name, 
    label: type.label || type.name  // 👈 Use label when available
  });
});

3. Example Usage

Added labels to example templates:

• TemplateHero → displays as "Hero Section"
• Template5050 → displays as "Two Column Layout"

Benefits

• Better UX: Content editors see intuitive names instead of technical ones
• Backward Compatible: Existing templates without labels continue working unchanged
• Minimal Impact: Only 3 lines of core code changed
• Optional: Developers can add labels when needed
• Well Tested: Comprehensive test coverage for new functionality

Testing

✅ All existing tests pass
✅ New label functionality tests added and passing
✅ Backward compatibility confirmed
✅ Schema compilation successful

Now content editors will see "Home Hero" instead of "TemplateHomepageHero" in the dropdown, making the CMS much more user-friendly.

Fixes #441.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[jeremydw]

@copilot Let's do this:

1. First, allow schemas to define metadata, e.g.

metadata: {
  title: <Humanized Title>,
  description: <Description of the template>,
  image: <URL to an image that serves as a thumbnail for the template>
}

2. Then, if a schema provides the type for a possible oneOf value, when we have the modal that allows the user to pick the type (as an alternative to the current dropdown),

When implementing the modal, it should be additive to the current "Type" dropdown. Show an icon next to the type dropdown that triggers the modal where the user can pick the type from the modal (instead of the dropdown). Within the modal, we should show the possible types in a list, along with their title and description and image.

[Copilot]

@copilot Let's do this:

1. First, allow schemas to define metadata, e.g.
   ...

Implemented as requested! ✅

Changes made:

1. Metadata Structure: Replaced simple label with rich metadata object:

   metadata: {
     title: string,
     description: string,
     image: string  // URL to thumbnail image
   }

2. Additive Modal: Added browse icon (⊞) next to existing dropdown that opens template selection modal

3. Visual Template List: Modal displays templates with thumbnails, titles, and descriptions as shown in the screenshot

Key Features:

• ✅ Fully backward compatible - existing templates work unchanged
• ✅ Modal is additive to current dropdown (both work simultaneously)
• ✅ Rich visual presentation with metadata
• ✅ Updated example templates with real thumbnail images
• ✅ Comprehensive test coverage

The implementation preserves all existing functionality while adding the requested visual template browser. Content editors can now preview templates before selection!

Commit: cf803a0