Add shortcut keys to theme dev

This commit adds shortcut keys to the theme dev CLI service. The keys are as follows:
e - open theme editor
t - preview your theme locally
p - preview your theme (share)
g - preview gift cards

packages/theme/src/cli/services/dev.ts

@@ -12,6 +12,8 @@ import {Theme} from '@shopify/cli-kit/node/themes/types'
 import {checkPortAvailability, getAvailableTCPPort} from '@shopify/cli-kit/node/tcp'
 import {AbortError} from '@shopify/cli-kit/node/error'
 import {openURL} from '@shopify/cli-kit/node/system'
+import chalk from '@shopify/cli-kit/node/colors'
+import readline from 'readline'
 
 const DEFAULT_HOST = '127.0.0.1'
 const DEFAULT_PORT = '9292'
@@ -104,6 +106,33 @@ export async function dev(options: DevOptions) {
       renderWarning({headline: 'Failed to open the development server.', body: error.stack ?? error.message})
     })
   }
+
+  readline.emitKeypressEvents(process.stdin)
+  if (process.stdin.isTTY) {
+    process.stdin.setRawMode(true)
+  }
+
+  process.stdin.on('keypress', (_str, key) => {
+    if (key.ctrl && key.name === 'c') {
+      process.exit()
+    } else if (key.name === 't') {
+      openURL(`http://${host}:${port}`).catch((error) => {
+        renderWarning({headline: 'Failed to open localhost.', body: error.stack ?? error.message})
+      })
+    } else if (key.name === 'e') {
+      openURL(`https://${options.store}/admin/themes/${options.theme.id}/editor`).catch((error) => {
+        renderWarning({headline: 'Failed to open theme editor.', body: error.stack ?? error.message})
+      })
+    } else if (key.name === 'p') {
+      openURL(`https://${options.store}/?preview_theme_id=${options.theme.id}`).catch((error) => {
+        renderWarning({headline: 'Failed to open theme preview.', body: error.stack ?? error.message})
+      })
+    } else if (key.name === 'g') {
+      openURL(`http://${host}:${port}/gift_cards/${options.store}/preview`).catch((error) => {
+        renderWarning({headline: 'Failed to open gift card preview.', body: error.stack ?? error.message})
+      })
+    }
+  })
 }
 
 export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST, port = DEFAULT_PORT) {
@@ -113,7 +142,7 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST,
     body: [
       {
         list: {
-          title: {bold: 'Preview your theme'},
+          title: chalk.bold('Preview your theme ') + chalk.cyan('(t)'),
           items: [
             {
               link: {
@@ -128,23 +157,23 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST,
       [
         {
           link: {
-            label: 'Preview your gift cards',
+            label: `Preview your gift cards ${chalk.cyan('(g)')}`,
             url: `${localUrl}/gift_cards/[store_id]/preview`,
           },
         },
       ],
       [
         {
           link: {
-            label: 'Customize your theme at the theme editor',
+            label: `Customize your theme at the theme editor ${chalk.cyan('(e)')}`,
             url: `${remoteUrl}/admin/themes/${themeId}/editor`,
           },
         },
       ],
       [
         {
           link: {
-            label: 'Share your theme preview',
+            label: `Share your theme preview ${chalk.cyan('(p)')}`,
             url: `${remoteUrl}/?preview_theme_id=${themeId}`,
           },
         },