refactor(landing): clean up code quality issues in preview components

- Replace widthMultiplier with explicit width on PreviewColumn
- Replace key={i} with key={Icon.name} in connectorIcons
- Scope --c-active CSS variable to sidebar container, eliminating hardcoded #363636 duplication
- Replace '-  -  -' fallback with em dash
- Type onSelectNav as (id: SidebarView) removing the unsafe cast

Author: waleedlatif1

apps/sim/app/(home)/components/landing-preview/components/landing-preview-knowledge/landing-preview-knowledge.tsx

@@ -22,8 +22,8 @@ function connectorIcons(icons: React.ComponentType<{ className?: string }>[]) {
   return {
     content: (
       <div className='flex items-center gap-1'>
-        {icons.map((Icon, i) => (
-          <Icon key={i} className='h-3.5 w-3.5 flex-shrink-0' />
+        {icons.map((Icon) => (
+          <Icon key={Icon.name} className='h-3.5 w-3.5 flex-shrink-0' />
         ))}
       </div>
     ),

apps/sim/app/(home)/components/landing-preview/components/landing-preview-resource/landing-preview-resource.tsx

@@ -8,7 +8,7 @@ import { cn } from '@/lib/core/utils/cn'
 export interface PreviewColumn {
   id: string
   header: string
-  widthMultiplier?: number
+  width?: number
 }
 
 export interface PreviewCell {
@@ -135,11 +135,7 @@ export function LandingPreviewResource({
             {columns.map((col, i) => (
               <col
                 key={col.id}
-                style={
-                  i === 0
-                    ? { minWidth: 200 * (col.widthMultiplier ?? 1) }
-                    : { width: 160 * (col.widthMultiplier ?? 1) }
-                }
+                style={i === 0 ? { minWidth: col.width ?? 200 } : { width: col.width ?? 160 }}
               />
             ))}
           </colgroup>
@@ -199,7 +195,7 @@ export function LandingPreviewResource({
                               {cell.icon}
                             </span>
                           )}
-                          <span className='truncate'>{cell?.label ?? '-  -  -'}</span>
+                          <span className='truncate'>{cell?.label ?? '—'}</span>
                         </span>
                       )}
                     </td>

apps/sim/app/(home)/components/landing-preview/components/landing-preview-scheduled-tasks/landing-preview-scheduled-tasks.tsx

@@ -9,7 +9,7 @@ const CAL_ICON = <Calendar className='h-[14px] w-[14px]' />
 
 const COLUMNS: PreviewColumn[] = [
   { id: 'task', header: 'Task' },
-  { id: 'schedule', header: 'Schedule', widthMultiplier: 1.5 },
+  { id: 'schedule', header: 'Schedule', width: 240 },
   { id: 'nextRun', header: 'Next Run' },
   { id: 'lastRun', header: 'Last Run' },
 ]

apps/sim/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx

@@ -28,7 +28,7 @@ interface LandingPreviewSidebarProps {
   activeView: SidebarView
   onSelectWorkflow: (id: string) => void
   onSelectHome: () => void
-  onSelectNav: (id: string) => void
+  onSelectNav: (id: SidebarView) => void
 }
 
 /**
@@ -87,8 +87,8 @@ function NavItem({
       type='button'
       onClick={onClick}
       className={cn(
-        'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[#363636]',
-        isActive && 'bg-[#363636]'
+        'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[var(--c-active)]',
+        isActive && 'bg-[var(--c-active)]'
       )}
     >
       <Icon className='h-[14px] w-[14px] flex-shrink-0' style={{ color: C.TEXT_ICON }} />
@@ -117,7 +117,9 @@ export function LandingPreviewSidebar({
   return (
     <div
       className='flex h-full w-[248px] flex-shrink-0 flex-col pt-3'
-      style={{ backgroundColor: C.SURFACE_1 }}
+      style={
+        { backgroundColor: C.SURFACE_1, '--c-active': C.SURFACE_ACTIVE } as React.CSSProperties
+      }
     >
       {/* Workspace Header */}
       <div className='flex-shrink-0 px-2.5'>
@@ -151,8 +153,8 @@ export function LandingPreviewSidebar({
           type='button'
           onClick={onSelectHome}
           className={cn(
-            'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[#363636]',
-            isHomeActive && 'bg-[#363636]'
+            'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[var(--c-active)]',
+            isHomeActive && 'bg-[var(--c-active)]'
           )}
         >
           <Home className='h-[14px] w-[14px] flex-shrink-0' style={{ color: C.TEXT_ICON }} />

apps/sim/app/(home)/components/landing-preview/landing-preview.tsx

@@ -78,8 +78,8 @@ export function LandingPreview() {
     setActiveView('home')
   }, [])
 
-  const handleSelectNav = useCallback((id: string) => {
-    setActiveView(id as SidebarView)
+  const handleSelectNav = useCallback((id: SidebarView) => {
+    setActiveView(id)
   }, [])
 
   const activeWorkflow =