Design updates: hidden-sidebar chrome, chat-everywhere title bars, panel design pass

apps/sim/.gitignore

@@ -45,4 +45,4 @@ next-env.d.ts
 # Uploads
 /uploads
 
-.trigger
+.trigger.env.local.bak*

apps/sim/app/(auth)/login/login-form.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import {
@@ -17,6 +16,7 @@ import {
   Label,
   Loader,
 } from '@/components/emcn'
+import { Eye, EyeOff } from '@/components/emcn/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { forgetPasswordContract } from '@/lib/api/contracts'
 import { client } from '@/lib/auth/auth-client'

apps/sim/app/(auth)/reset-password/reset-password-form.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
 import { Input, Label, Loader } from '@/components/emcn'
+import { Eye, EyeOff } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -3,11 +3,11 @@
 import { Suspense, useEffect, useMemo, useRef, useState } from 'react'
 import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
 import { createLogger } from '@sim/logger'
-import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { Input, Label, Loader } from '@/components/emcn'
+import { Eye, EyeOff } from '@/components/emcn/icons'
 import { client, useSession } from '@/lib/auth/auth-client'
 import { getEnv, isFalsy, isTruthy } from '@/lib/core/config/env'
 import { validateCallbackUrl } from '@/lib/core/security/input-validation'

apps/sim/app/(landing)/blog/[slug]/share-button.tsx

@@ -1,14 +1,13 @@
 'use client'
 
 import { useState } from 'react'
-import { Share2 } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Duplicate } from '@/components/emcn/icons'
+import { Duplicate, Share2 } from '@/components/emcn/icons'
 import { LinkedInIcon, xIcon as XIcon } from '@/components/icons'
 
 interface ShareButtonProps {

apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import {
@@ -14,6 +13,7 @@ import {
   ModalTitle,
   ModalTrigger,
 } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
 import { GithubIcon, GoogleIcon } from '@/components/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { type AuthProviderStatusResponse, getAuthProvidersContract } from '@/lib/api/contracts/auth'

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

@@ -946,7 +946,7 @@ function MockFullTable({ revealedRows }: { revealedRows: number }) {
                   <div className='flex items-center gap-1.5'>
                     <ColumnTypeIcon />
                     <span className='font-medium text-[#1C1C1C] text-[13px]'>{col}</span>
-                    <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[#CCC]' />
+                    <ChevronDown className='ml-auto size-[14px] shrink-0 text-[#CCC]' />
                   </div>
                 </th>
               ))}

apps/sim/app/(landing)/components/footer/footer-cta.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useCallback, useRef, useState } from 'react'
-import { ArrowUp } from 'lucide-react'
 import dynamic from 'next/dynamic'
+import { ArrowUp } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { captureClientEvent } from '@/lib/posthog/client'

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

@@ -2,9 +2,8 @@
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
-import { ArrowUp, Table } from 'lucide-react'
 import { Blimp, Checkbox, ChevronDown } from '@/components/emcn'
-import { TypeBoolean, TypeNumber, TypeText } from '@/components/emcn/icons'
+import { ArrowUp, Table, TypeBoolean, TypeNumber, TypeText } from '@/components/emcn/icons'
 import { captureClientEvent } from '@/lib/posthog/client'
 import { useLandingSubmit } from '@/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
 import { EASE_OUT } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
@@ -221,7 +220,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
                         Mothership
                       </span>
                       <ChevronDown
-                        className='h-[7px] w-[9px] transition-transform duration-150'
+                        className='size-[14px] transition-transform duration-150'
                         style={{
                           color: C.TEXT_ICON,
                           transform: toolsExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',

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

@@ -2,11 +2,11 @@
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { AnimatePresence, domMax, LazyMotion, m } from 'framer-motion'
-import { ArrowUp } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 import { createPortal } from 'react-dom'
 import { Blimp, BubbleChatPreview, ChevronDown, MoreHorizontal, Play } from '@/components/emcn'
+import { ArrowUp } from '@/components/emcn/icons'
 import { AgentIcon, HubspotIcon, OpenAIIcon, SalesforceIcon } from '@/components/icons'
 import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
 import { captureClientEvent } from '@/lib/posthog/client'
@@ -432,7 +432,7 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
               <div className='flex h-[32px] items-center gap-2 rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-2'>
                 {ModelIcon && <ModelIcon className='h-[14px] w-[14px] text-[#e6e6e6]' />}
                 <span className='flex-1 truncate font-medium text-[#e6e6e6] text-sm'>{model}</span>
-                <ChevronDown className='h-[7px] w-[9px] text-[#636363]' />
+                <ChevronDown className='size-[14px] text-[#636363]' />
               </div>
             </div>
           )}

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

@@ -446,7 +446,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
           <span className='select-none text-[var(--text-icon)] text-sm'>/</span>
           <span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
             {tableName}
-            <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='ml-2 size-[14px] shrink-0 text-[var(--text-muted)]' />
           </span>
         </div>
       </div>
@@ -472,7 +472,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
                       <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
                         {col.label}
                       </span>
-                      <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+                      <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />
                     </div>
                   </th>
                 )

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx

@@ -2,9 +2,9 @@
 
 import { memo } from 'react'
 import { domAnimation, LazyMotion, m } from 'framer-motion'
-import { Database } from 'lucide-react'
 import { Handle, type NodeProps, Position } from 'reactflow'
 import { Blimp } from '@/components/emcn'
+import { Database } from '@/components/emcn/icons'
 import {
   AgentIcon,
   AnthropicIcon,

apps/sim/app/academy/(catalog)/[courseSlug]/components/course-progress.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useMemo, useSyncExternalStore } from 'react'
-import { CheckCircle2, Circle, ExternalLink, GraduationCap } from 'lucide-react'
 import Link from 'next/link'
 import { Loader } from '@/components/emcn'
+import { Circle, CircleCheck, ExternalLink, GraduationCap } from '@/components/emcn/icons'
 import {
   getCompletedLessonsFromSnapshot,
   getCompletedLessonsSnapshot,
@@ -77,7 +77,7 @@ export function CourseProgress({ course, courseSlug }: CourseProgressProps) {
                     className='flex items-center gap-3 rounded-[8px] border border-[#2A2A2A] bg-[#222] px-4 py-3 text-[14px] transition-colors hover:border-[#3A3A3A] hover:bg-[#272727]'
                   >
                     {completedIds.has(lesson.id) ? (
-                      <CheckCircle2 className='size-4 flex-shrink-0 text-[#4CAF50]' />
+                      <CircleCheck className='size-4 flex-shrink-0 text-[#4CAF50]' />
                     ) : (
                       <Circle className='size-4 flex-shrink-0 text-[#444]' />
                     )}

apps/sim/app/academy/(catalog)/[courseSlug]/page.tsx

@@ -1,7 +1,7 @@
-import { Clock, GraduationCap } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
+import { Clock, GraduationCap } from '@/components/emcn/icons'
 import { COURSES, getCourse } from '@/lib/academy/content'
 import { CourseProgress } from './components/course-progress'
 

apps/sim/app/academy/(catalog)/certificate/[certificateNumber]/page.tsx

@@ -2,9 +2,9 @@ import { cache } from 'react'
 import { db } from '@sim/db'
 import { academyCertificate } from '@sim/db/schema'
 import { eq } from 'drizzle-orm'
-import { CheckCircle2, GraduationCap, XCircle } from 'lucide-react'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
+import { CircleCheck, GraduationCap, XCircle } from '@/components/emcn/icons'
 import type { AcademyCertificate } from '@/lib/academy/types'
 import { academyCertificateMetadataSchema } from '@/lib/api/contracts/academy'
 
@@ -84,7 +84,7 @@ export default async function CertificatePage({ params }: CertificatePageProps)
 
           {certificate.status === 'active' ? (
             <div className='flex items-center justify-center gap-2 text-[#4CAF50]'>
-              <CheckCircle2 className='size-4' />
+              <CircleCheck className='size-4' />
               <span className='font-[430] text-[14px]'>Verified</span>
             </div>
           ) : (

apps/sim/app/academy/(catalog)/page.tsx

@@ -1,5 +1,5 @@
-import { BookOpen, Clock } from 'lucide-react'
 import Link from 'next/link'
+import { BookOpen, Clock } from '@/components/emcn/icons'
 import { COURSES } from '@/lib/academy/content'
 
 export default function AcademyCatalogPage() {

apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/exercise-view.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useState } from 'react'
-import { CheckCircle2 } from 'lucide-react'
+import { CircleCheck } from '@/components/emcn/icons'
 import { markLessonComplete } from '@/lib/academy/local-progress'
 import type { ExerciseBlockState, ExerciseDefinition, ExerciseEdgeState } from '@/lib/academy/types'
 import { SandboxCanvasProvider } from '@/app/academy/components/sandbox-canvas-provider'
@@ -56,7 +56,7 @@ export function ExerciseView({
       {completed && (
         <div className='pointer-events-none absolute inset-0 flex items-start justify-center pt-5'>
           <div className='pointer-events-auto flex items-center gap-2 rounded-full border border-[#3A4A3A] bg-[#1F2A1F]/95 px-4 py-2 font-[430] text-[#4CAF50] text-[13px] shadow-lg backdrop-blur-sm'>
-            <CheckCircle2 className='size-4' />
+            <CircleCheck className='size-4' />
             Exercise complete!
           </div>
         </div>

apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/lesson-quiz.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { CheckCircle2, XCircle } from 'lucide-react'
+import { CircleCheck, XCircle } from '@/components/emcn/icons'
 import { markLessonComplete } from '@/lib/academy/local-progress'
 import type { QuizDefinition, QuizQuestion } from '@/lib/academy/types'
 import { cn } from '@/lib/core/utils/cn'
@@ -202,7 +202,7 @@ export function LessonQuiz({ lessonId, quizConfig, onPass }: LessonQuizProps) {
                 )}
               >
                 {isCorrect ? (
-                  <CheckCircle2 className='mt-0.5 size-3.5 flex-shrink-0' />
+                  <CircleCheck className='mt-0.5 size-3.5 flex-shrink-0' />
                 ) : (
                   <XCircle className='mt-0.5 size-3.5 flex-shrink-0' />
                 )}

apps/sim/app/academy/[courseSlug]/[lessonSlug]/page.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { use, useCallback, useEffect, useMemo, useState } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
+import { ChevronLeft, ChevronRight } from '@/components/emcn/icons'
 import { getCourse } from '@/lib/academy/content'
 import { markLessonComplete } from '@/lib/academy/local-progress'
 import type { Lesson } from '@/lib/academy/types'

apps/sim/app/academy/components/validation-checklist.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { CheckCircle2, Circle } from 'lucide-react'
+import { Circle, CircleCheck } from '@/components/emcn/icons'
 import type { ValidationRuleResult } from '@/lib/academy/types'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -30,7 +30,7 @@ export function ValidationChecklist({ results, allPassed }: ValidationChecklistP
         {results.map((result) => (
           <li key={result.message} className='flex items-start gap-2'>
             {result.passed ? (
-              <CheckCircle2 className='mt-0.5 size-3.5 flex-shrink-0 text-[#4CAF50]' />
+              <CircleCheck className='mt-0.5 size-3.5 flex-shrink-0 text-[#4CAF50]' />
             ) : (
               <Circle className='mt-0.5 size-3.5 flex-shrink-0 text-[#444]' />
             )}