improvement: templates styling

[emir-karabeg]

Summary

Enhanced UI on templates details and logic for rendering on templates.

Type of Change

• New feature

Testing

Solo testing.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 12, 2025 11:55pm

[greptile-apps]

Greptile Overview

Greptile Summary

Refined template UI with improved layout, typography consistency using font-sans, and better visual hierarchy across template cards and detail pages.

Key Changes:

• Refactored template detail page with cleaner header layout and repositioned action buttons
• Removed 45+ unused icon imports from template detail page
• Switched from @/components/ui/button to @/components/emcn Button component for consistency
• Added handleCanvasWheelCapture to fix scroll behavior over workflow preview canvas
• Updated template cards with horizontal layout and inline star/action buttons
• Added intersection observer for lazy-loading workflow previews in workspace context
• Consistent font-sans applied across text elements for typography uniformity
• Condensed stats display with improved spacing and visual separators

Confidence Score: 5/5

• Safe to merge with minimal risk - purely UI improvements
• The changes are purely presentational/UI improvements with no logical errors, security issues, or breaking changes. Code follows established patterns, uses proper imports, includes good documentation (TSDoc for new functions), and maintains backward compatibility
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/templates/[id]/template.tsx	5/5	Refactored template detail page with improved layout, removed unused icon imports, switched to @/components/emcn Button, and added scroll handling for workflow preview
apps/sim/app/templates/components/template-card.tsx	5/5	Updated template card with horizontal layout, inline actions, condensed stats display, and icon mapping preserved for backward compatibility
apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx	5/5	Workspace context template card with vertical layout, workflow preview, intersection observer for performance, and optimized block icon display

Sequence Diagram

sequenceDiagram
    participant User
    participant TemplatesPage
    participant TemplateCard
    participant TemplateDetail
    participant API
    participant WorkflowPreview

    User->>TemplatesPage: Browse templates
    TemplatesPage->>TemplateCard: Render template cards
    TemplateCard->>WorkflowPreview: Display preview (lazy loaded)
    
    User->>TemplateCard: Click star icon
    TemplateCard->>TemplateCard: Optimistic update (local state)
    TemplateCard->>API: POST/DELETE /api/templates/{id}/star
    API-->>TemplateCard: Response
    alt Success
        TemplateCard->>TemplatesPage: Update parent state via callback
    else Failure
        TemplateCard->>TemplateCard: Rollback optimistic update
    end
    
    User->>TemplateCard: Click "Use" button
    TemplateCard->>TemplateDetail: Navigate to template detail
    
    User->>TemplateDetail: View template details
    TemplateDetail->>API: GET /api/templates/{id}
    API-->>TemplateDetail: Template data
    TemplateDetail->>WorkflowPreview: Render workflow preview
    
    User->>TemplateDetail: Scroll over preview
    TemplateDetail->>TemplateDetail: handleCanvasWheelCapture
    Note over TemplateDetail: stopPropagation() allows<br/>page scroll, blocks canvas zoom
    
    User->>TemplateDetail: Click "Use" button
    alt Workspace Context
        TemplateDetail->>API: POST /api/templates/{id}/use
        API-->>TemplateDetail: workflowId
        TemplateDetail->>User: Redirect to workflow
    else Global Context
        TemplateDetail->>User: Show workspace selector
    end

Loading

[greptile-apps]

_{7 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}