feat: combine next steps prompt for create (#637)

* feat: combine next steps prompt for `create`

* tweak `create`

* nit

* italics 🙅‍♂️  emojis 👌

---------

Co-authored-by: AdrianGonz97 <[email protected]>

Author: jycouet

.changeset/blue-islands-eat.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat: combine next steps prompt for `create`

packages/cli/commands/add/index.ts

@@ -202,15 +202,17 @@ export const add = new Command('add')
 		common.runCommand(async () => {
 			const selectedAddonIds = selectedAddons.map(({ id }) => id);
 			const { nextSteps } = await runAddCommand(options, selectedAddonIds);
-			if (nextSteps) p.note(nextSteps, 'Next steps', { format: (line: string) => line });
+			if (nextSteps.length > 0) {
+				p.note(nextSteps.join('\n'), 'Next steps', { format: (line) => line });
+			}
 		});
 	});
 
 type SelectedAddon = { type: 'official' | 'community'; addon: AddonWithoutExplicitArgs };
 export async function runAddCommand(
 	options: Options,
 	selectedAddonIds: string[]
-): Promise<{ nextSteps?: string; packageManager?: AgentName | null }> {
+): Promise<{ nextSteps: string[]; packageManager?: AgentName | null }> {
 	const selectedAddons: SelectedAddon[] = selectedAddonIds.map((id) => ({
 		type: 'official',
 		addon: getAddonDetails(id)
@@ -534,7 +536,7 @@ export async function runAddCommand(
 
 	// we'll return early when no addons are selected,
 	// indicating that installing deps was skipped and no PM was selected
-	if (selectedAddons.length === 0) return { packageManager: null };
+	if (selectedAddons.length === 0) return { packageManager: null, nextSteps: [] };
 
 	// apply addons
 	const officialDetails = Object.keys(official).map((id) => getAddonDetails(id));
@@ -588,25 +590,17 @@ export async function runAddCommand(
 	const highlighter = getHighlighter();
 
 	// print next steps
-	const nextSteps =
-		selectedAddons
-			.filter(({ addon }) => addon.nextSteps)
-			.map(({ addon }) => {
-				let addonMessage = '';
-				if (selectedAddons.length > 1) {
-					addonMessage = `${pc.green(addon.id)}:\n`;
-				}
-
-				const addonNextSteps = addon.nextSteps!({
-					...workspace,
-					options: official[addon.id]!,
-					highlighter
-				});
-				addonMessage += `- ${addonNextSteps.join('\n- ')}`;
-				return addonMessage;
-			})
-			// instead of returning an empty string, we'll return `undefined`
-			.join('\n\n') || undefined;
+	const nextSteps = selectedAddons
+		.map(({ addon }) => {
+			if (!addon.nextSteps) return;
+			let addonMessage = `${pc.green(addon.id)}:\n`;
+
+			const options = official[addon.id];
+			const addonNextSteps = addon.nextSteps({ ...workspace, options, highlighter });
+			addonMessage += `  - ${addonNextSteps.join('\n  - ')}`;
+			return addonMessage;
+		})
+		.filter((msg) => msg !== undefined);
 
 	return { nextSteps, packageManager };
 }

packages/cli/commands/create.ts

@@ -66,14 +66,14 @@ export const create = new Command('create')
 			const highlight = (str: string) => pc.bold(pc.cyan(str));
 
 			let i = 1;
-			const initialSteps: string[] = [];
+			const initialSteps: string[] = ['📁 Project steps', ''];
 			const relative = path.relative(process.cwd(), directory);
 			const pm =
 				packageManager ?? (await detect({ cwd: directory }))?.name ?? getUserAgent() ?? 'npm';
 			if (relative !== '') {
 				const pathHasSpaces = relative.includes(' ');
 				initialSteps.push(
-					`${i++}: ${highlight(`cd ${pathHasSpaces ? `"${relative}"` : relative}`)}`
+					`  ${i++}: ${highlight(`cd ${pathHasSpaces ? `"${relative}"` : relative}`)}`
 				);
 			}
 			if (!packageManager) {
@@ -85,16 +85,23 @@ export const create = new Command('create')
 			const pmRunCmd = `${command} ${args.join(' ')}`;
 			const steps = [
 				...initialSteps,
-				`${i++}: ${highlight('git init && git add -A && git commit -m "Initial commit"')} (optional)`,
-				`${i++}: ${highlight(pmRunCmd)}`,
+				`  ${i++}: ${highlight('git init && git add -A && git commit -m "Initial commit"')} (optional)`,
+				`  ${i++}: ${highlight(pmRunCmd)}`,
 				'',
-				`To close the dev server, hit ${highlight('Ctrl-C')}`,
-				'',
-				`Stuck? Visit us at ${pc.cyan('https://svelte.dev/chat')}`
+				`To close the dev server, hit ${highlight('Ctrl-C')}`
 			];
 
-			p.note(steps.join('\n'), 'Project next steps', { format: (line) => line });
-			if (addOnNextSteps) p.note(addOnNextSteps, 'Add-on next steps', { format: (line) => line });
+			if (addOnNextSteps.length > 0) {
+				steps.push('', '🧩 Add-on steps', '');
+				for (const step of addOnNextSteps) {
+					const indented = step.replaceAll('  -', '    -');
+					steps.push(`  ${indented}`);
+				}
+			}
+
+			steps.push('', `Stuck? Visit us at ${pc.cyan('https://svelte.dev/chat')}`);
+
+			p.note(steps.join('\n'), "What's next?", { format: (line) => line });
 		});
 	});
 
@@ -166,7 +173,7 @@ async function createProject(cwd: ProjectPath, options: Options) {
 	p.log.success('Project created');
 
 	let packageManager: AgentName | undefined | null;
-	let addOnNextSteps: string | undefined;
+	let addOnNextSteps: string[] = [];
 
 	const installDeps = async (install: true | AgentName) => {
 		packageManager = install === true ? await packageManagerPrompt(projectPath) : install;