Merge branch 'staging' into improvement/enforce-outside-hooks

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -293,7 +293,7 @@ export function Home({ chatId }: HomeProps = {}) {
     return () => ro.disconnect()
   }, [hasMessages])
 
-  if (!hasMessages && !chatId) {
+  if (!hasMessages && !showChatSkeleton) {
     return (
       <div className='h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable_both-edges]'>
         <div className='flex min-h-full flex-col items-center justify-center px-6 pb-[2vh]'>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -790,8 +790,7 @@ export const Sidebar = memo(function Sidebar() {
     )
   }
 
-  const { data: fetchedTasks } = useTasks(workspaceId)
-  const tasksLoading = fetchedTasks === undefined
+  const { data: fetchedTasks, isLoading: tasksLoading } = useTasks(workspaceId)
 
   useTaskEvents(workspaceId)
 

apps/sim/components/emcn/components/callout/callout.tsx

@@ -0,0 +1,60 @@
+import type * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
+import { cn } from '@/lib/core/utils/cn'
+
+const calloutVariants = cva('flex items-center gap-2 rounded-lg border p-2.5 text-[12px]', {
+  variants: {
+    variant: {
+      default: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
+      info: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
+      success:
+        'border-[color-mix(in_srgb,var(--badge-success-text)_30%,transparent)] bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]',
+      warning:
+        'border-[color-mix(in_srgb,var(--badge-amber-text)_30%,transparent)] bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]',
+      destructive:
+        'border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)]',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+const DEFAULT_ICONS = {
+  default: Info,
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  destructive: AlertTriangle,
+} as const
+
+export interface CalloutProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof calloutVariants> {
+  /** Icon component shown before the content. Pass `null` to hide. Defaults per variant. */
+  icon?: React.ComponentType<{ className?: string }> | null
+}
+
+/**
+ * Inline note used to highlight short pieces of context inside a page or section.
+ *
+ * @example
+ * ```tsx
+ * <Callout>Applies organization-wide</Callout>
+ * <Callout variant='warning'>This action is irreversible</Callout>
+ * ```
+ */
+function Callout({ className, variant, icon, children, role = 'note', ...props }: CalloutProps) {
+  const variantKey = (variant ?? 'default') as keyof typeof DEFAULT_ICONS
+  const Icon = icon === null ? null : (icon ?? DEFAULT_ICONS[variantKey])
+
+  return (
+    <div role={role} className={cn(calloutVariants({ variant }), className)} {...props}>
+      {Icon && <Icon className='h-[14px] w-[14px] shrink-0' />}
+      <span>{children}</span>
+    </div>
+  )
+}
+
+export { Callout, calloutVariants }

apps/sim/components/emcn/components/index.ts

@@ -18,6 +18,7 @@ export {
   buttonGroupItemVariants,
   buttonGroupVariants,
 } from './button-group/button-group'
+export { Callout, type CalloutProps, calloutVariants } from './callout/callout'
 export {
   Checkbox,
   type CheckboxProps,

apps/sim/components/emcn/components/toast/toast.tsx

@@ -169,7 +169,8 @@ function ToastItem({ toast: t, onDismiss }: { toast: ToastData; onDismiss: (id:
       onMouseEnter={hasDuration ? handleMouseEnter : undefined}
       onMouseLeave={hasDuration ? handleMouseLeave : undefined}
       className={cn(
-        'pointer-events-auto flex w-[min(100vw-2rem,320px)] flex-col gap-2 overflow-hidden rounded-lg border px-3 py-2.5 shadow-md transition-[transform,opacity]',
+        'pointer-events-auto flex flex-col gap-2 overflow-hidden rounded-lg border px-3 py-2.5 shadow-md transition-[transform,opacity]',
+        t.variant === 'error' ? 'w-[min(100vw-2rem,400px)]' : 'w-[min(100vw-2rem,320px)]',
         VARIANT_STYLES[t.variant],
         exiting
           ? 'animate-[toast-exit_200ms_ease-in_forwards] motion-reduce:animate-none'
@@ -178,7 +179,12 @@ function ToastItem({ toast: t, onDismiss }: { toast: ToastData; onDismiss: (id:
     >
       <div className='flex items-start gap-2'>
         <div className='min-w-0 flex-1'>
-          <div className='line-clamp-2 font-medium text-[var(--text-body)] text-small leading-[18px]'>
+          <div
+            className={cn(
+              'font-medium text-[var(--text-body)] text-small leading-[18px]',
+              t.variant === 'error' ? 'line-clamp-3' : 'line-clamp-2'
+            )}
+          >
             {t.variant === 'error' && (
               <span className='mr-2 mb-0.5 inline-block h-2 w-2 rounded-[2px] bg-[var(--text-error)] align-middle' />
             )}

apps/sim/ee/data-retention/components/data-retention-settings.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Button, Combobox, toast } from '@/components/emcn'
+import { Button, Callout, Combobox, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
@@ -169,10 +169,8 @@ export function DataRetentionSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
+      <Callout>Applies organization-wide</Callout>
       <section>
-        <h3 className='mb-4 font-medium text-[15px] text-[var(--text-primary)]'>
-          Retention Periods
-        </h3>
         <div className='flex flex-col gap-5'>
           <SettingRow
             label='Log retention'

apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx

@@ -6,7 +6,7 @@ import { toError } from '@sim/utils/errors'
 import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { Button, Input, Label, Loader, Skeleton, toast } from '@/components/emcn'
+import { Button, Callout, Input, Label, Loader, Skeleton, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { HEX_COLOR_REGEX } from '@/lib/branding'
@@ -318,6 +318,7 @@ export function WhitelabelingSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
+      <Callout>Applies organization-wide</Callout>
       <section>
         <SectionTitle>Brand Identity</SectionTitle>
         <div className='flex flex-col gap-5'>

apps/sim/hooks/queries/tasks.ts

@@ -1,4 +1,10 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  keepPreviousData,
+  skipToken,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import {
@@ -212,8 +218,8 @@ export async function fetchTasks(
 export function useTasks(workspaceId?: string) {
   return useQuery({
     queryKey: taskKeys.list(workspaceId),
-    queryFn: ({ signal }) => fetchTasks(workspaceId as string, signal),
-    enabled: Boolean(workspaceId),
+    queryFn: workspaceId ? ({ signal }) => fetchTasks(workspaceId, signal) : skipToken,
+    placeholderData: keepPreviousData,
     staleTime: 60 * 1000,
   })
 }