fix(dev): group routes by kind and label method-less handlers

Author: danielroe

packages/nuxt-cli/src/dev/tui/route-overlay.ts

@@ -116,7 +116,7 @@ export class RouteOverlay extends ScreenOverlay {
   #formatRoute(route: DevRoute, width: number, columns: number): string {
     const kind = route.kind === 'page'
       ? styleText('cyan', 'page  ')
-      : styleText('magenta', (route.method?.toUpperCase() ?? 'all').padEnd(6))
+      : styleText('magenta', (route.method?.toUpperCase() ?? 'any').padEnd(6))
     const path = route.route.padEnd(width)
     const file = route.file ? relative(this.#cwd, route.file) : ''
     // The tail of a path identifies it; the head is the part every row shares.
@@ -131,7 +131,7 @@ export class RouteOverlay extends ScreenOverlay {
     return this.#routes
       .filter(route => this.#filter === 'all' || route.kind === this.#filter)
       .filter(route => !query || `${route.route} ${route.file ?? ''}`.toLowerCase().includes(query))
-      .sort((a, b) => a.route.localeCompare(b.route))
+      .sort((a, b) => (a.kind === b.kind ? 0 : a.kind === 'page' ? -1 : 1) || a.route.localeCompare(b.route))
   }
 
   #setFilter(filter: RouteFilter): boolean {

packages/nuxt-cli/test/unit/dev-tui.spec.ts

@@ -1554,6 +1554,27 @@ describe('route overlay', () => {
     }
   })
 
+  it('groups pages before server routes, each sorted by path', () => {
+    const { overlay, lastFrame } = create()
+    overlay.setRoutes({ routes: [
+      { kind: 'server', route: '/api/zebra', method: 'get', file: '/project/server/api/zebra.ts' },
+      { kind: 'page', route: '/zoo', file: '/project/app/pages/zoo.vue' },
+      { kind: 'server', route: '/api/apple', method: 'get', file: '/project/server/api/apple.ts' },
+      { kind: 'page', route: '/about', file: '/project/app/pages/about.vue' },
+    ] })
+    overlay.open()
+    const frame = lastFrame()
+    const order = ['/about', '/zoo', '/api/apple', '/api/zebra'].map(route => frame.indexOf(route))
+    expect(order).toEqual([...order].sort((a, b) => a - b))
+  })
+
+  it('labels a method-less server route as any rather than all', () => {
+    const { overlay, lastFrame } = create()
+    overlay.setRoutes({ routes: [{ kind: 'server', route: '/api/catch', file: '/project/server/api/catch.ts' }] })
+    overlay.open()
+    expect(lastFrame()).toContain('any')
+  })
+
   it('sorts routes by path and filters by kind', () => {
     const { overlay, lastFrame } = create()
     overlay.setRoutes({ routes })