feat(editor): add Run help hint and rename from project list

Show a help icon when Run is disabled, open the relevant instruction section
on click, and position its tooltip below-left. Add Rename project to the home
screen project card menu.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Ivan Fontosh
2026-07-03 22:45:19 +08:00
parent 10bb7013e6
commit de9190959c
5 changed files with 133 additions and 43 deletions
+23 -15
View File
@@ -4,7 +4,12 @@ import { createPortal } from 'react-dom';
import { APP_DISPLAY_NAME_EN, APP_DISPLAY_NAME_RU } from '../../../shared/appBranding';
import { Button } from '../../shared/ui/controls';
import styles from '../EditorApp.module.css';
import { HELP_SECTION_IDS, helpSectionBodyKey, helpSectionTitleKey } from '../help/helpSections';
import {
HELP_SECTION_IDS,
helpSectionBodyKey,
helpSectionTitleKey,
type HelpSectionId,
} from '../help/helpSections';
import { useEditorI18n } from '../i18n/EditorI18nContext';
type AppAboutModalProps = {
@@ -90,27 +95,26 @@ export function AppAboutModal({ open, onClose, appVersion }: AppAboutModalProps)
type InstructionsModalProps = {
open: boolean;
onClose: () => void;
initialSection?: HelpSectionId;
};
export function InstructionsModal({ open, onClose }: InstructionsModalProps) {
function InstructionsModalBody({
initialSection,
onClose,
}: {
initialSection: HelpSectionId;
onClose: () => void;
}) {
const { t } = useEditorI18n();
const [activeId, setActiveId] = useState<(typeof HELP_SECTION_IDS)[number]>('overview');
const [activeId, setActiveId] = useState<HelpSectionId>(initialSection);
useEffect(() => {
if (!open) return;
setActiveId('overview');
}, [open]);
useEffect(() => {
if (!open) return;
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose, open]);
if (!open) return null;
}, [onClose]);
const body = t(helpSectionBodyKey(activeId));
const paragraphs = body.split('\n\n').filter((p) => p.trim() !== '');
@@ -137,9 +141,7 @@ export function InstructionsModal({ open, onClose }: InstructionsModalProps) {
</div>
<div className={styles.instructionsLayout}>
<div className={styles.instructionsContent}>
<div className={styles.instructionsContentTitle}>
{t(helpSectionTitleKey(activeId))}
</div>
<div className={styles.instructionsContentTitle}>{t(helpSectionTitleKey(activeId))}</div>
{paragraphs.map((p, i) => (
<p key={i} className={styles.instructionsParagraph}>
{p}
@@ -175,3 +177,9 @@ export function InstructionsModal({ open, onClose }: InstructionsModalProps) {
document.body,
);
}
export function InstructionsModal({ open, onClose, initialSection }: InstructionsModalProps) {
if (!open) return null;
const section = initialSection ?? 'overview';
return <InstructionsModalBody key={section} initialSection={section} onClose={onClose} />;
}