improvement(ui): share product page heading recipe

Author: Bill Leoutsakos

apps/sim/app/o/[organizationId]/home/organization-home.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useState, useSyncExternalStore } from 'react'
-import { toast } from '@sim/emcn'
+import { cn, pageHeadingClassName, toast } from '@sim/emcn'
 import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
 import { useQueryStates } from 'nuqs'
@@ -382,7 +382,7 @@ function OrganizationHomeContent({
         <div className='min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
           {/* Asymmetric padding biases the group up so the full cluster (heading + input + steps) sits at the optical center */}
           <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
-            <h1 className='mb-7 max-w-chat text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+            <h1 className={cn(pageHeadingClassName, 'mb-7 max-w-chat')}>
               {requestMode === 'assistant'
                 ? `Search ${organization.name}`
                 : requestMode === 'plan'

apps/sim/app/o/[organizationId]/search/search-results-view.tsx

@@ -1,5 +1,11 @@
 import { type ReactNode, useRef } from 'react'
-import { cn, scrollFadeAttributes, scrollFadeClass, useScrollEdges } from '@sim/emcn'
+import {
+  cn,
+  pageHeadingClassName,
+  scrollFadeAttributes,
+  scrollFadeClass,
+  useScrollEdges,
+} from '@sim/emcn'
 import { HEADER_ACTION_CLUSTER, PAGE_HEADER_BAR } from '@/components/page-header-bar'
 import type { WorkspaceSearchFilters } from '@/lib/api/contracts/knowledge'
 import type { SearchResource } from '@/lib/mothership/generated/resources'
@@ -70,7 +76,7 @@ export function SearchResultsView({
         <div className='min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
           {/* Asymmetric padding biases the group up so heading and field sit at the optical center, as on Home */}
           <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
-            <h1 className='mb-7 max-w-chat text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+            <h1 className={cn(pageHeadingClassName, 'mb-7 max-w-chat')}>
               Search {organization.name}
             </h1>
             <div className='w-full max-w-chat'>{composer}</div>

apps/sim/app/workspace/[workspaceId]/components/error/error.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { type ReactNode, useEffect } from 'react'
-import { Chip } from '@sim/emcn'
+import { Chip, pageHeadingClassName } from '@sim/emcn'
 import { TriangleAlert } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 
@@ -43,9 +43,7 @@ export function ErrorShell({ title, description, icon, children }: ErrorShellPro
           </div>
         </div>
         <div className='flex flex-col items-center gap-2'>
-          <h2 className='text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
-            {title}
-          </h2>
+          <h2 className={pageHeadingClassName}>{title}</h2>
           <p className='max-w-[340px] text-[14px] text-[var(--text-tertiary)] leading-[1.55]'>
             {description}
           </p>

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { cn, toast } from '@sim/emcn'
+import { cn, pageHeadingClassName, toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
@@ -434,7 +434,7 @@ function HomeContent({ chatId, userName, userId }: HomeProps) {
           <div className='h-full overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
             {/* Asymmetric padding biases the group up so the full cluster (heading + input + suggestions) sits at the optical center */}
             <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
-              <h1 className='mb-7 max-w-chat text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+              <h1 className={cn(pageHeadingClassName, 'mb-7 max-w-chat')}>
                 What should we get done{firstName ? `, ${firstName}` : ''}?
               </h1>
               <div ref={initialViewInputRef} className='relative w-full max-w-chat'>

packages/emcn/src/components/index.ts

@@ -197,6 +197,7 @@ export {
   overflowTextClipClass,
   overflowTextFadeClass,
 } from './overflow-text/overflow-text'
+export { pageHeadingClassName } from './page-heading/page-heading'
 export {
   Popover,
   PopoverAnchor,

packages/emcn/src/components/page-heading/page-heading.ts

@@ -0,0 +1,3 @@
+/** Typography shared by the centered product page and error headings. */
+export const pageHeadingClassName =
+  'text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'