fix(templates): fixed verified creator status displaying & tooltip on templates (#2165)

Author: waleedlatif1

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

@@ -42,8 +42,8 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
       </div>
 
       <div className='mt-[14px] flex items-center justify-between'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='h-[14px] w-[14px] animate-pulse rounded-full bg-gray-700' />
+        <div className='flex items-center gap-[6px]'>
+          <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-gray-700' />
           <div className='h-3 w-20 animate-pulse rounded bg-gray-700' />
         </div>
         <div className='flex items-center gap-[6px]'>
@@ -269,17 +269,17 @@ function TemplateCardInner({
       </div>
 
       <div className='mt-[10px] flex items-center justify-between'>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
           {authorImageUrl ? (
-            <div className='h-[26px] w-[26px] flex-shrink-0 overflow-hidden rounded-full'>
+            <div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
             </div>
           ) : (
-            <div className='flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
-              <User className='h-[18px] w-[18px] text-[#888888]' />
+            <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
+              <User className='h-[12px] w-[12px] text-[#888888]' />
             </div>
           )}
-          <div className='flex items-center gap-[4px]'>
+          <div className='flex min-w-0 items-center gap-[4px]'>
             <span className='truncate font-medium text-[#888888] text-[12px]'>{author}</span>
             {isVerified && <VerifiedBadge size='sm' />}
           </div>

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

@@ -43,8 +43,8 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
       </div>
 
       <div className='mt-[14px] flex items-center justify-between'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='h-[14px] w-[14px] animate-pulse rounded-full bg-gray-700' />
+        <div className='flex items-center gap-[6px]'>
+          <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-gray-700' />
           <div className='h-3 w-20 animate-pulse rounded bg-gray-700' />
         </div>
         <div className='flex items-center gap-[6px]'>
@@ -270,17 +270,17 @@ function TemplateCardInner({
       </div>
 
       <div className='mt-[10px] flex items-center justify-between'>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
           {authorImageUrl ? (
-            <div className='h-[26px] w-[26px] flex-shrink-0 overflow-hidden rounded-full'>
+            <div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
             </div>
           ) : (
-            <div className='flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
-              <User className='h-[18px] w-[18px] text-[#888888]' />
+            <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
+              <User className='h-[12px] w-[12px] text-[#888888]' />
             </div>
           )}
-          <div className='flex items-center gap-[4px]'>
+          <div className='flex min-w-0 items-center gap-[4px]'>
             <span className='truncate font-medium text-[#888888] text-[12px]'>{author}</span>
             {isVerified && <VerifiedBadge size='sm' />}
           </div>

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

@@ -63,6 +63,7 @@ export default async function TemplatesPage({ params }: TemplatesPageProps) {
           name: string
           profileImageUrl?: string | null
           details?: unknown
+          verified: boolean
         } | null
         views: number
         stars: number
@@ -158,6 +159,7 @@ export default async function TemplatesPage({ params }: TemplatesPageProps) {
               } | null,
               referenceType: row.creator.referenceType,
               referenceId: row.creator.referenceId,
+              verified: row.creator.verified,
             }
           : null,
         views: row.views,

apps/sim/components/ui/verified-badge.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 
 interface VerifiedBadgeProps {
@@ -15,19 +16,24 @@ export function VerifiedBadge({ className, size = 'md' }: VerifiedBadgeProps) {
   const dimension = sizeMap[size]
 
   return (
-    <div className={cn('inline-flex flex-shrink-0', className)} title='Verified Creator'>
-      <svg
-        width={dimension}
-        height={dimension}
-        viewBox='0 0 16 16'
-        fill='none'
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <path
-          d='M16 8.375C16 8.93437 15.8656 9.45312 15.5969 9.92813C15.3281 10.4031 14.9688 10.775 14.5156 11.0344C14.5281 11.1188 14.5344 11.25 14.5344 11.4281C14.5344 12.275 14.25 12.9937 13.6875 13.5875C13.1219 14.1844 12.4406 14.4812 11.6438 14.4812C11.2875 14.4812 10.9469 14.4156 10.625 14.2844C10.375 14.7969 10.0156 15.2094 9.54375 15.525C9.075 15.8438 8.55937 16 8 16C7.42812 16 6.90938 15.8469 6.44688 15.5344C5.98125 15.225 5.625 14.8094 5.375 14.2844C5.05312 14.4156 4.71562 14.4812 4.35625 14.4812C3.55937 14.4812 2.875 14.1844 2.30312 13.5875C1.73125 12.9937 1.44687 12.2719 1.44687 11.4281C1.44687 11.3344 1.45938 11.2031 1.48125 11.0344C1.02813 10.7719 0.66875 10.4031 0.4 9.92813C0.134375 9.45312 0 8.93437 0 8.375C0 7.78125 0.15 7.23438 0.446875 6.74062C0.74375 6.24687 1.14375 5.88125 1.64375 5.64375C1.5125 5.2875 1.44687 4.92812 1.44687 4.57188C1.44687 3.72813 1.73125 3.00625 2.30312 2.4125C2.875 1.81875 3.55937 1.51875 4.35625 1.51875C4.7125 1.51875 5.05312 1.58438 5.375 1.71563C5.625 1.20312 5.98438 0.790625 6.45625 0.475C6.925 0.159375 7.44063 0 8 0C8.55937 0 9.075 0.159375 9.54375 0.471875C10.0125 0.7875 10.375 1.2 10.625 1.7125C10.9469 1.58125 11.2844 1.51562 11.6438 1.51562C12.4406 1.51562 13.1219 1.8125 13.6875 2.40937C14.2531 3.00625 14.5344 3.725 14.5344 4.56875C14.5344 4.9625 14.475 5.31875 14.3562 5.64062C14.8562 5.87813 15.2563 6.24375 15.5531 6.7375C15.85 7.23438 16 7.78125 16 8.375ZM7.65938 10.7844L10.9625 5.8375C11.0469 5.70625 11.0719 5.5625 11.0437 5.40938C11.0125 5.25625 10.9344 5.13438 10.8031 5.05312C10.6719 4.96875 10.5281 4.94063 10.375 4.9625C10.2188 4.9875 10.0938 5.0625 10 5.19375L7.09062 9.56875L5.75 8.23125C5.63125 8.1125 5.49375 8.05625 5.34062 8.0625C5.18437 8.06875 5.05 8.125 4.93125 8.23125C4.825 8.3375 4.77187 8.47187 4.77187 8.63437C4.77187 8.79375 4.825 8.92813 4.93125 9.0375L6.77187 10.8781L6.8625 10.95C6.96875 11.0219 7.07812 11.0562 7.18437 11.0562C7.39375 11.0531 7.55313 10.9656 7.65938 10.7844Z'
-          fill='#33B4FF'
-        />
-      </svg>
-    </div>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <div className={cn('inline-flex flex-shrink-0', className)}>
+          <svg
+            width={dimension}
+            height={dimension}
+            viewBox='0 0 16 16'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <path
+              d='M16 8.375C16 8.93437 15.8656 9.45312 15.5969 9.92813C15.3281 10.4031 14.9688 10.775 14.5156 11.0344C14.5281 11.1188 14.5344 11.25 14.5344 11.4281C14.5344 12.275 14.25 12.9937 13.6875 13.5875C13.1219 14.1844 12.4406 14.4812 11.6438 14.4812C11.2875 14.4812 10.9469 14.4156 10.625 14.2844C10.375 14.7969 10.0156 15.2094 9.54375 15.525C9.075 15.8438 8.55937 16 8 16C7.42812 16 6.90938 15.8469 6.44688 15.5344C5.98125 15.225 5.625 14.8094 5.375 14.2844C5.05312 14.4156 4.71562 14.4812 4.35625 14.4812C3.55937 14.4812 2.875 14.1844 2.30312 13.5875C1.73125 12.9937 1.44687 12.2719 1.44687 11.4281C1.44687 11.3344 1.45938 11.2031 1.48125 11.0344C1.02813 10.7719 0.66875 10.4031 0.4 9.92813C0.134375 9.45312 0 8.93437 0 8.375C0 7.78125 0.15 7.23438 0.446875 6.74062C0.74375 6.24687 1.14375 5.88125 1.64375 5.64375C1.5125 5.2875 1.44687 4.92812 1.44687 4.57188C1.44687 3.72813 1.73125 3.00625 2.30312 2.4125C2.875 1.81875 3.55937 1.51875 4.35625 1.51875C4.7125 1.51875 5.05312 1.58438 5.375 1.71563C5.625 1.20312 5.98438 0.790625 6.45625 0.475C6.925 0.159375 7.44063 0 8 0C8.55937 0 9.075 0.159375 9.54375 0.471875C10.0125 0.7875 10.375 1.2 10.625 1.7125C10.9469 1.58125 11.2844 1.51562 11.6438 1.51562C12.4406 1.51562 13.1219 1.8125 13.6875 2.40937C14.2531 3.00625 14.5344 3.725 14.5344 4.56875C14.5344 4.9625 14.475 5.31875 14.3562 5.64062C14.8562 5.87813 15.2563 6.24375 15.5531 6.7375C15.85 7.23438 16 7.78125 16 8.375ZM7.65938 10.7844L10.9625 5.8375C11.0469 5.70625 11.0719 5.5625 11.0437 5.40938C11.0125 5.25625 10.9344 5.13438 10.8031 5.05312C10.6719 4.96875 10.5281 4.94063 10.375 4.9625C10.2188 4.9875 10.0938 5.0625 10 5.19375L7.09062 9.56875L5.75 8.23125C5.63125 8.1125 5.49375 8.05625 5.34062 8.0625C5.18437 8.06875 5.05 8.125 4.93125 8.23125C4.825 8.3375 4.77187 8.47187 4.77187 8.63437C4.77187 8.79375 4.825 8.92813 4.93125 9.0375L6.77187 10.8781L6.8625 10.95C6.96875 11.0219 7.07812 11.0562 7.18437 11.0562C7.39375 11.0531 7.55313 10.9656 7.65938 10.7844Z'
+              fill='#33B4FF'
+            />
+          </svg>
+        </div>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Verified Creator</Tooltip.Content>
+    </Tooltip.Root>
   )
 }