DRY up shortcut and link rendering in DevSessionUI

Extract devStatusShortcuts array with shortcutLabel, linkLabel, url,
condition, and action fields. Both the keyboard shortcut hints and the
URL list are now rendered by iterating over the same collection,
eliminating duplicated conditions and labels.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: nickwesselman

packages/app/src/cli/services/dev/ui/components/DevSessionUI.tsx

@@ -1,5 +1,5 @@
 import {Spinner} from './Spinner.js'
-import {TabPanel, Tab} from './TabPanel.js'
+import {TabPanel, Tab, TabShortcut} from './TabPanel.js'
 import metadata from '../../../../metadata.js'
 import {
   DevSessionStatus,
@@ -119,85 +119,78 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
     }
   }
 
+  const devStatusShortcuts: TabShortcut[] = [
+    {
+      key: 'p',
+      shortcutLabel: 'Open app preview',
+      linkLabel: 'Preview',
+      url: status.previewURL,
+      condition: () => Boolean(status.isReady && status.previewURL),
+      action: async () => {
+        await metadata.addPublicMetadata(() => ({
+          cmd_dev_preview_url_opened: true,
+        }))
+        if (status.previewURL) {
+          await openURL(status.previewURL)
+        }
+      },
+    },
+    {
+      key: 'c',
+      shortcutLabel: 'Open Dev Console for extension previews',
+      linkLabel: 'Dev Console',
+      url: buildDevConsoleURL(shopFqdn),
+      condition: () => Boolean(status.isReady && !status.appEmbedded),
+      action: async () => {
+        await metadata.addPublicMetadata(() => ({
+          cmd_dev_preview_url_opened: true,
+        }))
+        await openURL(buildDevConsoleURL(shopFqdn))
+      },
+    },
+    {
+      key: 'g',
+      shortcutLabel: 'Open GraphiQL (Admin API)',
+      linkLabel: 'GraphiQL',
+      url: status.graphiqlURL,
+      condition: () => Boolean(status.isReady && status.graphiqlURL),
+      action: async () => {
+        await metadata.addPublicMetadata(() => ({
+          cmd_dev_graphiql_opened: true,
+        }))
+        if (status.graphiqlURL) {
+          await openURL(status.graphiqlURL)
+        }
+      },
+    },
+  ]
+
+  const activeShortcuts = devStatusShortcuts.filter((shortcut) => shortcut.condition?.() ?? true)
+
   const tabs: {[key: string]: Tab} = {
     // eslint-disable-next-line id-length
     d: {
       label: 'Dev status',
-      shortcuts: [
-        {
-          key: 'p',
-          condition: () => Boolean(status.isReady && status.previewURL),
-          action: async () => {
-            await metadata.addPublicMetadata(() => ({
-              cmd_dev_preview_url_opened: true,
-            }))
-            if (status.previewURL) {
-              await openURL(status.previewURL)
-            }
-          },
-        },
-        {
-          key: 'g',
-          condition: () => Boolean(status.isReady && status.graphiqlURL),
-          action: async () => {
-            await metadata.addPublicMetadata(() => ({
-              cmd_dev_graphiql_opened: true,
-            }))
-            if (status.graphiqlURL) {
-              await openURL(status.graphiqlURL)
-            }
-          },
-        },
-        {
-          key: 'c',
-          condition: () => Boolean(status.isReady && !status.appEmbedded),
-          action: async () => {
-            await metadata.addPublicMetadata(() => ({
-              cmd_dev_preview_url_opened: true,
-            }))
-            await openURL(buildDevConsoleURL(shopFqdn))
-          },
-        },
-      ],
+      shortcuts: devStatusShortcuts,
       content: (
         <>
           {status.statusMessage && (
             <Text>
               {getStatusIndicator(status.statusMessage.type)} {status.statusMessage.message}
             </Text>
           )}
-          {canUseShortcuts && (
+          {canUseShortcuts && activeShortcuts.length > 0 && (
             <Box marginTop={1} flexDirection="column">
-              {status.isReady && status.previewURL ? (
-                <Text>
-                  {figures.pointerSmall} <Text bold>(p)</Text>{' '}
-                  {terminalSupportsHyperlinks() ? (
-                    <Link url={status.previewURL} label="Open app preview" />
-                  ) : (
-                    'Open app preview'
-                  )}
-                </Text>
-              ) : null}
-              {status.isReady && !status.appEmbedded ? (
-                <Text>
-                  {figures.pointerSmall} <Text bold>(c)</Text>{' '}
-                  {terminalSupportsHyperlinks() ? (
-                    <Link url={buildDevConsoleURL(shopFqdn)} label="Open Dev Console for extension previews" />
-                  ) : (
-                    'Open Dev Console for extension previews'
-                  )}
-                </Text>
-              ) : null}
-              {status.isReady && status.graphiqlURL ? (
-                <Text>
-                  {figures.pointerSmall} <Text bold>(g)</Text>{' '}
-                  {terminalSupportsHyperlinks() ? (
-                    <Link url={status.graphiqlURL} label="Open GraphiQL (Admin API)" />
+              {activeShortcuts.map((shortcut) => (
+                <Text key={shortcut.key}>
+                  {figures.pointerSmall} <Text bold>({shortcut.key})</Text>{' '}
+                  {terminalSupportsHyperlinks() && shortcut.url ? (
+                    <Link url={shortcut.url} label={shortcut.shortcutLabel} />
                   ) : (
-                    'Open GraphiQL (Admin API)'
+                    shortcut.shortcutLabel
                   )}
                 </Text>
-              ) : null}
+              ))}
             </Box>
           )}
           <Box marginTop={canUseShortcuts ? 1 : 0} flexDirection="column">
@@ -207,21 +200,13 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
               <>
                 {status.isReady && !(canUseShortcuts && terminalSupportsHyperlinks()) && (
                   <>
-                    {status.previewURL ? (
-                      <Text>
-                        Preview URL: <Link url={status.previewURL} />
-                      </Text>
-                    ) : null}
-                    {status.appEmbedded === false ? (
-                      <Text>
-                        Dev Console URL: <Link url={buildDevConsoleURL(shopFqdn)} />
-                      </Text>
-                    ) : null}
-                    {status.graphiqlURL ? (
-                      <Text>
-                        GraphiQL URL: <Link url={status.graphiqlURL} />
-                      </Text>
-                    ) : null}
+                    {activeShortcuts
+                      .filter((shortcut) => shortcut.url)
+                      .map((shortcut) => (
+                        <Text key={shortcut.key}>
+                          {shortcut.linkLabel} URL: <Link url={shortcut.url!} />
+                        </Text>
+                      ))}
                   </>
                 )}
               </>

packages/app/src/cli/services/dev/ui/components/TabPanel.tsx

@@ -8,8 +8,11 @@ export interface Tab {
   action?: () => Promise<void>
 }
 
-interface TabShortcut {
+export interface TabShortcut {
   key: string
+  shortcutLabel?: string
+  linkLabel?: string
+  url?: string
   condition?: () => boolean
   action: () => Promise<void>
 }