Disambiguate identically named next framework specific files in VSCode

my.code-workspace

{
    // Next.js App Router: disambiguate identically-named special files in fuzzy finder
    // and editor tabs. Pattern: <parent>/<segment> – <file-type>
    // Covers all Next.js 15+ app-dir special files (page, layout, route, etc.)
    "workbench.editor.customLabels.patterns": {
      "**/app/**/page.tsx": "${dirname(1)}/${dirname} – page",
      "**/app/**/layout.tsx": "${dirname(1)}/${dirname} – layout",
      "**/app/**/loading.tsx": "${dirname(1)}/${dirname} – loading",
      "**/app/**/error.tsx": "${dirname(1)}/${dirname} – error",
      "**/app/**/not-found.tsx": "${dirname(1)}/${dirname} – not-found",
      "**/app/**/global-error.tsx": "${dirname(1)}/${dirname} – global-error",
      "**/app/**/template.tsx": "${dirname(1)}/${dirname} – template",
      "**/app/**/default.tsx": "${dirname(1)}/${dirname} – default",
      "**/app/**/route.ts": "${dirname(1)}/${dirname} – route",
      "**/app/**/route.tsx": "${dirname(1)}/${dirname} – route",
      "**/app/**/opengraph-image.tsx": "${dirname(1)}/${dirname} – og-image",
      "**/app/**/twitter-image.tsx": "${dirname(1)}/${dirname} – twitter-image",
      "**/app/**/icon.tsx": "${dirname(1)}/${dirname} – icon",
      "**/app/**/apple-icon.tsx": "${dirname(1)}/${dirname} – apple-icon",
    }
}