feat(spx-gui): add project displayName with inline editing and project renaming

[aofei]

Add displayName field across the frontend to allow projects to have a human-friendly display name separate from the URL-safe name.

• Add displayName to ProjectData API type, SpxProject model, and xbp metadata for save/load round-tripping
• Validate displayName presence in cloud save logic
• Update all UI components to show displayName instead of name, including project items, editor navbar, publish modals, runner surface, community project page, and page titles
• Provide displayName context to copilot for better AI awareness

Add inline display name editing in the editor navbar, and add project name editing via a warning modal and input modal accessible from the file menu.

• Add ProjectModifyNameWarningModal and ProjectModifyNameModal using UIForm, UIFormItem, and UITextInput for consistent form handling and validation
• Validate project names to allow letters, numbers, hyphens, and underscores, with a 100-character length limit
• Rename projects by calling PATCH /project/{owner}/{name} directly from ProjectModifyNameModal
• Update updateProject to use PATCH and allow partial UpdateProjectParams
• Remove rename-specific SaveOptions.oldName logic from cloud save
• Navigate to the new project URL after a successful rename

[gemini-code-assist]

Summary of Changes

This pull request significantly enhances the user experience by introducing a 'displayName' for projects, allowing for more intuitive identification across the application. It provides users with the flexibility to manage both a human-friendly display name and a technical, URL-safe project name, improving clarity and usability in various interfaces, from project creation to editing and sharing.

Highlights

• User-Friendly Project Identification: Introduced a 'displayName' field to allow projects to have a human-readable name, distinct from the URL-safe 'name', enhancing clarity across the application.
• Comprehensive UI Integration: Updated all relevant UI components, including project items, editor navbar, publish modals, runner surface, community project page, and page titles, to display the new 'displayName'.
• Inline Editing & Renaming Functionality: Implemented inline editing for 'displayName' directly in the editor navbar and added a full project renaming flow via new modals, complete with validation and navigation to the updated project URL.
• API & Persistence Support: Integrated 'displayName' into 'ProjectData' API types, the 'SpxProject' model, and xbp metadata for robust save/load operations, including validation for its presence during cloud saves.
• Enhanced AI Context: Provided 'displayName' context to the Copilot feature, improving AI awareness and interaction with project details.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• docs/develop/project-loading/index.md
  • Updated project data example to include 'displayName'.
• spx-gui/src/apis/project.ts
  • Extended project API types with 'displayName'.
  • Updated keyword search description to include 'display name'.
• spx-gui/src/components/agent-copilot/index.ts
  • Corrected a typo in an error message.
• spx-gui/src/components/copilot/CopilotRoot.vue
  • Modified project search keyword description to include 'display name'.
  • Updated the current project context to show 'displayName' alongside 'owner/name'.
• spx-gui/src/components/editor/ProjectEditor.vue
  • Updated success messages for listing monitors, adding monitors, adding sprites, and adding backdrops to reference 'project.value.displayName'.
• spx-gui/src/components/editor/navbar/EditorNavbar.vue
  • Implemented inline editing for project 'displayName'.
  • Added a 'Modify project name' menu item.
  • Refined styling for project name display and editing states.
  • Updated 'removeProject' call to pass 'displayName'.
• spx-gui/src/components/editor/navbar/icons/modify-project-name.svg
  • Added a new SVG icon for modifying project names.
• spx-gui/src/components/project/ProjectCreateModal.vue
  • Initialized 'displayName' with 'projectName' when creating a project.
  • Updated project name validation message for clarity.
• spx-gui/src/components/project/ProjectItem.vue
  • Changed project title display from 'project.name' to 'project.displayName'.
  • Passed 'displayName' to the 'removeProject' function.
  • Updated CSS class from '.name' to '.display-name'.
• spx-gui/src/components/project/ProjectModifyNameModal.vue
  • Added a new modal component for modifying project names, including form handling and validation.
• spx-gui/src/components/project/ProjectModifyNameWarningModal.vue
  • Added a new warning modal component displayed before project name modification, outlining potential impacts.
• spx-gui/src/components/project/ProjectPublishModal.vue
  • Updated the modal title to display 'project.displayName'.
• spx-gui/src/components/project/ProjectPublishedModal.vue
  • Updated the modal title to display 'project.displayName'.
• spx-gui/src/components/project/index.ts
  • Introduced 'useModifyProjectName' hook to manage project renaming modals.
  • Updated 'useRemoveProject' function signature and confirmation dialogs to accept and display 'displayName'.
• spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
  • Changed the displayed project name in the runner surface from 'project.name' to 'project.displayName'.
  • Updated CSS class from '.project-name' to '.display-name'.
• spx-gui/src/models/common/cloud.ts
  • Integrated 'displayName' into cloud save logic, destructuring it from metadata.
  • Added validation to ensure 'displayName' is not null or empty before saving.
  • Enabled project name updates via the 'SaveOptions' parameter.
• spx-gui/src/models/common/xbp.test.ts
  • Added test cases to verify 'displayName' persistence during save and load operations.
• spx-gui/src/models/common/xbp.ts
  • Included 'displayName' in the XBP metadata serialization.
• spx-gui/src/models/spx/project.ts
  • Added 'displayName' property to the 'SpxProject' class, defaulting to an empty string.
  • Added a 'setDisplayName' method.
  • Ensured 'displayName' is initialized with 'name' during 'SpxProject' construction if 'name' is provided.
  • Included 'displayName' in the 'toProjectData' method.
• spx-gui/src/pages/community/project.vue
  • Modified 'usePageTitle' to display 'project.value.displayName'.
  • Updated project removal logic to use 'displayName'.
  • Changed project title display from 'project.name' to 'project.displayName'.
• spx-gui/src/pages/editor/index.vue
  • Updated the editor page title to reflect the project's 'displayName'.
• spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
  • Updated the runner widget to display the project's 'displayName' alongside the full name.

Activity

• An initial summary and changelog were provided by 'gemini-code-assist[bot]'.
• A code review summary from 'xgopilot[bot]' highlighted a critical backward compatibility issue with older XBP files lacking 'displayName' and suggested improvements for 'displayName' validation, 'useRemoveProject' fallback, and simplifying async logic.
• Inline review comments from 'Copilot' and 'xgopilot[bot]' raised concerns about 'displayName' initialization in 'SpxProject' and 'setMetadata' for backward compatibility, recommending backfilling 'displayName' from 'name'.
• Reviewers pointed out that 'cloud.ts' hard-requires 'displayName' to be non-empty, which could block users with older projects, suggesting defaulting 'displayName' to 'name' if missing.
• 'Copilot' suggested a grammatical correction from 'can not' to 'cannot' in a confirmation message.
• 'xgopilot[bot]' recommended adding input validation to 'setDisplayName' for empty strings, length, and problematic characters.
• 'xgopilot[bot]' suggested adding a fallback to 'name' in 'useRemoveProject' if 'displayName' is empty for better user experience.
• 'xgopilot[bot]' identified an unnecessary 'await untilNotNull(project)' in a delete handler, suggesting simplification.
• The author 'aofei' requested a summary and review from 'gemini'.

[gemini-code-assist]

Code Review

This pull request introduces a displayName for projects, enhancing user experience by separating the human-friendly name from the URL-safe name. The changes are comprehensive, spanning API definitions, UI components, and data models to support this new field. The implementation includes inline editing for the displayName and a modal-based flow for renaming the project name, which are well-executed. Overall, the code quality is high, and the new features are consistently integrated. I have one suggestion to improve validation for the new displayName field.

_{Note: Security Review did not run due to the size of the PR.}

[fennoai]

A well-structured feature that cleanly separates name (URL identity) from displayName (human-readable label), with consistent propagation across the UI, copilot context, and xbp serialization. A few issues warrant attention before merge: a backward-compatibility break when saving legacy projects without displayName, a missing length limit on the inline displayName editor (with a knock-on prompt-injection surface in the copilot context), a potential memory leak when the component unmounts while editing, and a stale-form bug in ProjectModifyNameModal when the project name changes concurrently.