feat: show App/Node Graph type indicator on template cards (#9695)

Show a type label (App or Node Graph) below the description on each
template card in the workflow templates modal. Templates with
`.app.json` suffix display an app icon with "App", all others show a
workflow icon with "Node Graph". Card size changed from compact to tall
to fit the extra row.


https://github.com/user-attachments/assets/dc14d7f5-2994-4764-aa96-c5fc5b634e7e

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9695-feat-show-App-Node-Graph-type-indicator-on-template-cards-31f6d73d3650813f8310c850f6107cf6)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Robin Huang
2026-03-09 22:17:45 -07:00
committed by GitHub
parent 245f840e7c
commit e594164b71
2 changed files with 17 additions and 1 deletions

View File

@@ -178,7 +178,7 @@
v-show="isTemplateVisibleOnDistribution(template)"
:key="template.name"
ref="cardRefs"
size="compact"
size="tall"
variant="ghost"
rounded="lg"
:data-testid="`template-workflow-${template.name}`"
@@ -318,6 +318,20 @@
</Button>
</div>
</div>
<div class="flex">
<span
class="text-neutral flex items-center gap-1.5 text-xs font-bold"
>
<template v-if="isAppTemplate(template)">
<i class="icon-[lucide--panels-top-left]" />
{{ $t('builderToolbar.app', 'App') }}
</template>
<template v-else>
<i class="icon-[lucide--workflow]" />
{{ $t('builderToolbar.nodeGraph', 'Node Graph') }}
</template>
</span>
</div>
</div>
</CardBottom>
</template>
@@ -483,6 +497,8 @@ const {
const getEffectiveSourceModule = (template: TemplateInfo) =>
template.sourceModule || 'default'
const isAppTemplate = (template: TemplateInfo) => template.name.endsWith('.app')
const getBaseThumbnailSrc = (template: TemplateInfo) => {
const sm = getEffectiveSourceModule(template)
return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')