fix(templates): show description tagline on template cards

Author: waleedlatif1

apps/sim/app/templates/components/template-card.tsx

@@ -21,6 +21,7 @@ interface TemplateCardProps {
   blocks?: string[]
   className?: string
   state?: WorkflowState
+  description?: string | null
   isStarred?: boolean
   isVerified?: boolean
 }
@@ -124,6 +125,7 @@ function TemplateCardInner({
   blocks = [],
   className,
   state,
+  description,
   isStarred = false,
   isVerified = false,
 }: TemplateCardProps) {
@@ -270,6 +272,12 @@ function TemplateCardInner({
         </div>
       </div>
 
+      {description && (
+        <p className='mt-[4px] truncate pl-[2px] text-[12px] text-[var(--text-muted)]'>
+          {description}
+        </p>
+      )}
+
       <div className='mt-[10px] flex items-center justify-between'>
         <div className='flex min-w-0 items-center gap-[8px]'>
           {authorImageUrl ? (

apps/sim/app/templates/templates.tsx

@@ -196,6 +196,7 @@ export default function Templates({
                   key={template.id}
                   id={template.id}
                   title={template.name}
+                  description={template.details?.tagline}
                   author={template.creator?.name || 'Unknown'}
                   authorImageUrl={template.creator?.profileImageUrl || null}
                   usageCount={template.views.toString()}

apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx

@@ -18,6 +18,7 @@ interface TemplateCardProps {
   blocks?: string[]
   className?: string
   state?: WorkflowState
+  description?: string | null
   isStarred?: boolean
   isVerified?: boolean
 }
@@ -127,6 +128,7 @@ function TemplateCardInner({
   blocks = [],
   className,
   state,
+  description,
   isStarred = false,
   isVerified = false,
 }: TemplateCardProps) {
@@ -277,6 +279,12 @@ function TemplateCardInner({
         </div>
       </div>
 
+      {description && (
+        <p className='mt-[4px] truncate pl-[2px] text-[12px] text-[var(--text-tertiary)]'>
+          {description}
+        </p>
+      )}
+
       <div className='mt-[10px] flex items-center justify-between'>
         <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
           {authorImageUrl ? (

apps/sim/app/workspace/[workspaceId]/templates/templates.tsx

@@ -222,6 +222,7 @@ export default function Templates({
                   key={template.id}
                   id={template.id}
                   title={template.name}
+                  description={template.details?.tagline}
                   author={template.creator?.name || 'Unknown'}
                   authorImageUrl={template.creator?.profileImageUrl || null}
                   usageCount={template.views.toString()}