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{
 constkind=route.kind==='page'
  ? styleText('cyan','page ')
- : styleText('magenta',(route.method?.toUpperCase()??'all').padEnd(6))
+ : styleText('magenta',(route.method?.toUpperCase()??'any').padEnd(6))
 constpath=route.route.padEnd(width)
 constfile=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 {
 returnthis.#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()
+constframe=lastFrame()
+constorder=['/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 })