improvement(ui/ux): workflow, search modal (#729)

* improvement: workflow colors

* fix: workflow rename styling

* improvement: no API call on no name change workspace after edit

* improvement: added workflow and workspace to search

* improvement: folder path opened for current workflow on load

* improvement: ui/ux workspace selector

* improvement: search modal keyboard use

Author: emir-karabeg

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

@@ -135,43 +135,58 @@ interface TemplateCardProps {
 // Skeleton component for loading states
 export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
-    <div className={cn('rounded-[14px] border bg-card shadow-xs', 'flex h-38', className)}>
+    <div className={cn('rounded-[14px] border bg-card shadow-xs', 'flex h-[142px]', className)}>
       {/* Left side - Info skeleton */}
       <div className='flex min-w-0 flex-1 flex-col justify-between p-4'>
         {/* Top section skeleton */}
-        <div className='space-y-3'>
-          <div className='flex min-w-0 items-center gap-2.5'>
-            {/* Icon skeleton */}
-            <div className='h-5 w-5 flex-shrink-0 animate-pulse rounded bg-gray-200' />
-            {/* Title skeleton */}
-            <div className='h-4 w-24 animate-pulse rounded bg-gray-200' />
+        <div className='space-y-2'>
+          <div className='flex min-w-0 items-center justify-between gap-2.5'>
+            <div className='flex min-w-0 items-center gap-2.5'>
+              {/* Icon skeleton */}
+              <div className='h-5 w-5 flex-shrink-0 animate-pulse rounded-md bg-gray-200' />
+              {/* Title skeleton */}
+              <div className='h-4 w-32 animate-pulse rounded bg-gray-200' />
+            </div>
+
+            {/* Star and Use button skeleton */}
+            <div className='flex flex-shrink-0 items-center gap-3'>
+              <div className='h-4 w-4 animate-pulse rounded bg-gray-200' />
+              <div className='h-6 w-10 animate-pulse rounded-md bg-gray-200' />
+            </div>
           </div>
 
           {/* Description skeleton */}
-          <div className='space-y-2'>
+          <div className='space-y-1.5'>
             <div className='h-3 w-full animate-pulse rounded bg-gray-200' />
-            <div className='h-3 w-3/4 animate-pulse rounded bg-gray-200' />
-            <div className='h-3 w-1/2 animate-pulse rounded bg-gray-200' />
+            <div className='h-3 w-4/5 animate-pulse rounded bg-gray-200' />
+            <div className='h-3 w-3/5 animate-pulse rounded bg-gray-200' />
           </div>
         </div>
 
         {/* Bottom section skeleton */}
-        <div className='flex min-w-0 items-center gap-1.5'>
-          <div className='h-3 w-8 animate-pulse rounded bg-gray-200' />
+        <div className='flex min-w-0 items-center gap-1.5 pt-1.5'>
+          <div className='h-3 w-6 animate-pulse rounded bg-gray-200' />
           <div className='h-3 w-16 animate-pulse rounded bg-gray-200' />
-          <div className='h-3 w-1 animate-pulse rounded bg-gray-200' />
+          <div className='h-2 w-1 animate-pulse rounded bg-gray-200' />
           <div className='h-3 w-3 animate-pulse rounded bg-gray-200' />
           <div className='h-3 w-8 animate-pulse rounded bg-gray-200' />
+          {/* Stars section - hidden on smaller screens */}
+          <div className='hidden flex-shrink-0 items-center gap-1.5 sm:flex'>
+            <div className='h-2 w-1 animate-pulse rounded bg-gray-200' />
+            <div className='h-3 w-3 animate-pulse rounded bg-gray-200' />
+            <div className='h-3 w-6 animate-pulse rounded bg-gray-200' />
+          </div>
         </div>
       </div>
 
-      {/* Right side - Blocks skeleton */}
-      <div className='flex w-16 flex-col gap-1 rounded-r-[14px] border-border border-l bg-secondary p-2'>
-        {Array.from({ length: 4 }).map((_, index) => (
-          <div key={index} className='flex items-center gap-1.5'>
-            <div className='h-3 w-3 animate-pulse rounded bg-gray-200' />
-            <div className='h-3 w-12 animate-pulse rounded bg-gray-200' />
-          </div>
+      {/* Right side - Block Icons skeleton */}
+      <div className='flex w-16 flex-col items-center justify-center gap-2 rounded-r-[14px] border-border border-l bg-secondary p-2'>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <div
+            key={index}
+            className='animate-pulse rounded bg-gray-200'
+            style={{ width: '30px', height: '30px' }}
+          />
         ))}
       </div>
     </div>