@flamingo-stack/openframe-frontend-core 0.0.438 → 0.0.439

package/src/components/chat/chat-archive-page.tsx

@@ -4,75 +4,102 @@ import * as React from 'react'
 import { Chevron02LeftIcon, BoxArchiveIcon } from '../icons-v2-generated'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import { ChatHeaderIconButton } from './chat-header-icon-button'
-import { COMPACT_HEADER_BUTTON } from './chat-panel-header'
 import { ChatPanelHeaderMobile } from './chat-panel-header-mobile'
-import { MingoChatHistory } from './mingo-chat-history'
+import { MingoChatHistory, MingoChatHistorySkeleton } from './mingo-chat-history'
+import { ChatListEmptyState } from './chat-list-empty-state'
 import type { DialogItem } from './types/component.types'
 
-export interface ChatArchivePageProps {
+interface ChatArchivePageBaseProps {
   /** Archived dialogs, grouped (Today / Yesterday / Older) by the list. */
   dialogs: ReadonlyArray<DialogItem>
   /** Open an archived dialog. */
   onSelectDialog: (id: string) => void
-  /** Back chevron — returns to the previous (list) view. */
-  onBack: () => void
-  /** Close the whole chat panel. */
-  onClose: () => void
-  /** True while a page is loading (drives the empty/loading copy + spinner). */
+  /** The delayed skeleton is visible (a slow first page is loading). */
   isLoading?: boolean
+  /** A first-page load is in flight but the delayed skeleton hasn't appeared
+   *  yet — keeps the empty state suppressed so it never flashes before the
+   *  skeleton/data arrives. */
+  isFetching?: boolean
   /** Whether another page of archived dialogs remains. */
   hasMore?: boolean
   /** Fetch the next page. */
   onLoadMore?: () => void
 }
 
+/** Standalone (default): renders its own back/close header, so BOTH handlers
+ *  are required. */
+export interface ChatArchivePageStandaloneProps extends ChatArchivePageBaseProps {
+  embedded?: false
+  /** Back chevron — returns to the previous (list) view. */
+  onBack: () => void
+  /** Close the whole chat panel. */
+  onClose: () => void
+}
+
+/** Embedded (wide split layout): the archive lives in the left rail and the
+ *  host header already provides the "Chat Archive" back + close controls, so
+ *  the built-in header — and its handlers — are dropped. */
+export interface ChatArchivePageEmbeddedProps extends ChatArchivePageBaseProps {
+  embedded: true
+  onBack?: never
+  onClose?: never
+}
+
+export type ChatArchivePageProps =
+  | ChatArchivePageStandaloneProps
+  | ChatArchivePageEmbeddedProps
+
 /**
  * Chat Archive page — Figma node `7361:427312`. Back + title + close header
  * over the date-grouped archived-dialog list (reuses `MingoChatHistory`
- * without the row action menus).
+ * without the row action menus). In `embedded` mode the header is dropped so
+ * the list can slot into the split layout's left rail.
  */
-export function ChatArchivePage({
-  dialogs,
-  onSelectDialog,
-  onBack,
-  onClose,
-  isLoading = false,
-  hasMore = false,
-  onLoadMore,
-}: ChatArchivePageProps) {
+export function ChatArchivePage(props: ChatArchivePageProps) {
+  const {
+    dialogs,
+    onSelectDialog,
+    isLoading = false,
+    isFetching = false,
+    hasMore = false,
+    onLoadMore,
+  } = props
   return (
     <>
       {/* Mobile (<md): the shared mobile header — back to the list + a ⋯ menu
-          (Close only here, since the archive list has no per-chat actions). */}
-      <ChatPanelHeaderMobile
-        className="flex md:hidden"
-        showBack
-        title="Chat Archive"
-        backAriaLabel="Back"
-        onBack={onBack}
-        onClose={onClose}
-      />
+          (Close only here, since the archive list has no per-chat actions).
+          `!props.embedded` narrows the union so `onBack` / `onClose` are the
+          required standalone handlers (no no-op fallbacks). */}
+      {!props.embedded && (
+        <ChatPanelHeaderMobile
+          className="flex md:hidden"
+          showBack
+          title="Chat Archive"
+          backAriaLabel="Back"
+          onBack={props.onBack}
+          onClose={props.onClose}
+        />
+      )}
 
-      {/* Desktop (md+): fixed-height bar with back + full-height close cell. */}
-      <div className="hidden md:flex flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
-        <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
-          <button
-            type="button"
-            onClick={onBack}
-            aria-label="Back"
-            className={`${COMPACT_HEADER_BUTTON} -ml-1`}
-          >
-            <Chevron02LeftIcon size={20} />
-          </button>
-          <span className="truncate text-h3 text-ods-text-primary">
-            Chat Archive
-          </span>
-        </div>
+      {/* Desktop (md+): fixed-height bar with full-height divider action cells —
+          the back chevron is a leading `ChatHeaderIconButton` cell matching the
+          trailing close cell (not a small inline chevron). */}
+      {!props.embedded && (
+        <div className="hidden md:flex flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
+          <ChatHeaderIconButton divider="right" onClick={props.onBack} aria-label="Back">
+            <Chevron02LeftIcon size={24} />
+          </ChatHeaderIconButton>
+          <div className="flex flex-1 min-w-0 items-center px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)]">
+            <span className="truncate text-h3 text-ods-text-primary">
+              Chat Archive
+            </span>
+          </div>
 
-        <ChatHeaderIconButton onClick={onClose} aria-label="Close">
-          <XmarkIcon size={24} />
-        </ChatHeaderIconButton>
-      </div>
+          <ChatHeaderIconButton onClick={props.onClose} aria-label="Close">
+            <XmarkIcon size={24} />
+          </ChatHeaderIconButton>
+        </div>
+      )}
       <div className="flex flex-1 min-h-0 flex-col p-[var(--spacing-system-m)]">
         {dialogs.length > 0 ? (
           <MingoChatHistory
@@ -83,34 +110,23 @@ export function ChatArchivePage({
             onLoadMore={onLoadMore}
           />
         ) : isLoading ? (
-          // First-load skeleton — `h-12` rows matching the dialog-list layout
-          // so results land without a shift (auth → data → empty → content).
-          <div className="flex flex-col" aria-hidden>
-            {[...Array(6)].map((_, i) => (
-              <div
-                key={i}
-                className="flex h-12 items-center gap-[var(--spacing-system-xsf)] border-b border-ods-border px-[var(--spacing-system-s)] last:border-b-0"
-              >
-                <div className="h-4 w-full max-w-[60%] animate-pulse rounded bg-ods-bg-secondary" />
-              </div>
-            ))}
-          </div>
+          // First-load skeleton — the SAME grouped/bordered placeholder the
+          // active list uses, so the archive loads and lands without a layout
+          // shift or a mismatched flat-list skeleton.
+          <MingoChatHistorySkeleton />
+        ) : isFetching ? (
+          // A first, uncached load is in flight but the delayed skeleton hasn't
+          // appeared yet (the 120ms window). Render nothing rather than flashing
+          // the empty state before the skeleton / data arrives.
+          null
         ) : (
-          // Empty state — no archived chats. Centred icon + title + hint,
-          // mirroring the panel's other empty surfaces (icon in a muted token,
-          // h-scale title, secondary body copy). Pure ODS tokens.
-          <div className="flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-s)] px-[var(--spacing-system-l)] text-center">
-            <div className="flex size-14 items-center justify-center rounded-full bg-ods-bg-secondary text-ods-text-secondary">
-              <BoxArchiveIcon size={28} />
-            </div>
-            <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
-              <p className="text-h3 text-ods-text-primary">No archived chats</p>
-              <p className="max-w-xs text-h5 text-ods-text-secondary">
-                Chats you archive will appear here. Archive a chat from its
-                actions menu to tuck it away without deleting it.
-              </p>
-            </div>
-          </div>
+          // Empty state — mirrors the "Current Chats" rail empty state
+          // (Figma 113:60939): centred 24px muted glyph + h4 title + h6 caption.
+          <ChatListEmptyState
+            icon={<BoxArchiveIcon size={24} />}
+            title="No Archived Chats"
+            description="Archived Mingo sessions will show here"
+          />
         )}
       </div>
     </>

package/src/components/chat/chat-header-icon-button.tsx

@@ -4,12 +4,17 @@ import * as React from 'react'
 import { cn } from '../../utils/cn'
 
 export interface ChatHeaderIconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Which side carries the 1px cell divider. Trailing cells (close, ⋯,
+   *  archive) use the default `'left'`; a leading cell (the back chevron) uses
+   *  `'right'`; `'none'` drops it. */
+  divider?: 'left' | 'right' | 'none'
+}
 
 /**
  * Square 56×56 icon cell used in the chat panel's top-navigation
- * (archive / restore / close, and the `⋯` menu trigger). A left border acts
- * as the 1px divider between cells.
+ * (archive / restore / close, the `⋯` menu trigger, and the leading back
+ * chevron). A border on one side acts as the 1px divider between cells.
  *
  * On hover only the background changes (`ods-bg-hover`) — the icon keeps its
  * `ods-text-secondary` colour. `forwardRef` + prop spread so it works as a
@@ -18,12 +23,14 @@ export interface ChatHeaderIconButtonProps
 export const ChatHeaderIconButton = React.forwardRef<
   HTMLButtonElement,
   ChatHeaderIconButtonProps
->(({ className, children, type = 'button', ...props }, ref) => (
+>(({ className, children, type = 'button', divider = 'left', ...props }, ref) => (
   <button
     ref={ref}
     type={type}
     className={cn(
-      'flex size-14 shrink-0 items-center justify-center border-l border-ods-border',
+      'flex size-14 shrink-0 items-center justify-center border-ods-border',
+      divider === 'left' && 'border-l',
+      divider === 'right' && 'border-r',
       'text-ods-text-secondary transition-colors hover:bg-ods-bg-hover',
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
       className,

package/src/components/chat/chat-header-search-field.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { useDebounce } from '../../hooks/ui/use-debounce'
+import { SearchIcon } from '../icons-v2-generated'
+
+export interface ChatHeaderSearchFieldProps {
+  /** Seeds the field on mount (the current server-side search term). */
+  initialValue?: string
+  /** Emits the DEBOUNCED term. The host owns the query and refetches the
+   *  dialog list server-side — the field never filters locally. */
+  onSearchChange: (query: string) => void
+  /** Collapse the field back to the title. Fired on Escape and on blur while
+   *  the field is empty (an accidental open closes itself). */
+  onCollapse?: () => void
+  /** Focus the input on mount (default true — the field only mounts when the
+   *  user opens search, so we drop them straight into typing). */
+  autoFocus?: boolean
+  /** Appended to the root element (e.g. to tweak the open animation). */
+  className?: string
+}
+
+/**
+ * Inline chat-header search field (Figma node 116:51217). When search is
+ * toggled on, the panel header's title area is REPLACED in place by this
+ * full-height field — a leading magnifier + a bare, borderless input — instead
+ * of dropping a separate search bar into the list body. Holds its own text for
+ * snappy typing and emits the debounced term via `onSearchChange`.
+ */
+export function ChatHeaderSearchField({
+  initialValue,
+  onSearchChange,
+  onCollapse,
+  autoFocus = true,
+  className,
+}: ChatHeaderSearchFieldProps) {
+  const [value, setValue] = React.useState(initialValue ?? '')
+  const debounced = useDebounce(value, 300)
+  const lastEmitted = React.useRef(initialValue ?? '')
+
+  // Exit animation: collapsing plays `animate-out` (slide/fade back toward the
+  // right) BEFORE the parent unmounts us. We stay mounted through the leave —
+  // the parent only drops the field once we call `onCollapse`, which we defer
+  // to the animation's end.
+  const [exiting, setExiting] = React.useState(false)
+  const collapsedRef = React.useRef(false)
+
+  React.useEffect(() => {
+    // Once the collapse starts, no further emits: Escape already flushed the
+    // cleared term synchronously, and a still-pending debounce of the typed
+    // text ("abc" → Escape before 300ms) must not resurrect a stale query
+    // while the field animates out.
+    if (exiting) return
+    if (debounced === lastEmitted.current) return
+    lastEmitted.current = debounced
+    onSearchChange(debounced)
+  }, [debounced, exiting, onSearchChange])
+
+  const finishCollapse = React.useCallback(() => {
+    if (collapsedRef.current) return
+    collapsedRef.current = true
+    onCollapse?.()
+  }, [onCollapse])
+
+  const beginCollapse = React.useCallback(() => {
+    setExiting(true)
+  }, [])
+
+  // Fallback for when `animationend` never fires (reduced motion, or the
+  // animation utilities are disabled) — otherwise the field would hang open.
+  React.useEffect(() => {
+    if (!exiting) return
+    const t = setTimeout(finishCollapse, 240)
+    return () => clearTimeout(t)
+  }, [exiting, finishCollapse])
+
+  return (
+    <div
+      onAnimationEnd={(e) => {
+        // Only the root's OWN leave animation collapses — ignore the child
+        // icon's animations bubbling up, and the enter animation.
+        if (e.target === e.currentTarget && exiting) finishCollapse()
+      }}
+      className={cn(
+        'flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)]',
+        exiting
+          ? // Elegant leave: sweep back out to the right + fade, holding the end
+            // frame (`fill-mode-forwards`) so it stays hidden until unmount.
+            'animate-out fade-out-0 slide-out-to-right-4 duration-200 ease-in fill-mode-forwards pointer-events-none'
+          : // Elegant open: sweep in from the right (where the magnifier toggle
+            // sat) and fade up as it takes over the title area.
+            'animate-in fade-in-0 slide-in-from-right-4 duration-200 ease-out',
+        className,
+      )}
+    >
+      {/* The magnifier eases in a touch later + scales up, so the icon reads as
+          "growing" into the field rather than hard-cutting in. */}
+      <SearchIcon
+        size={24}
+        className="shrink-0 text-ods-text-secondary animate-in fade-in-0 zoom-in-75 duration-300 ease-out"
+      />
+      {/* biome-ignore lint/a11y/noAutofocus: the field only mounts on an
+          explicit search toggle, so focusing it is the intended behaviour. */}
+      <input
+        autoFocus={autoFocus}
+        type="text"
+        value={value}
+        disabled={exiting}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            e.preventDefault()
+            setValue('')
+            // Emit the cleared term immediately AND record it as the last emit,
+            // so the 300ms debounce effect doesn't fire a second, redundant
+            // `onSearchChange('')` (extra server round-trip) before we unmount.
+            lastEmitted.current = ''
+            onSearchChange('')
+            beginCollapse()
+          }
+        }}
+        onBlur={() => {
+          // An accidental open (no query typed) collapses itself; a field with
+          // an active query stays open so the filtered state stays visible.
+          if (!value.trim()) {
+            // Flush the cleared term synchronously (mirrors Escape) — the
+            // debounce effect is muted once `exiting` flips, so a just-deleted
+            // query ("abc" → "" → immediate blur) must emit its reset here or
+            // the host would keep filtering by the stale term.
+            if (lastEmitted.current !== '') {
+              lastEmitted.current = ''
+              onSearchChange('')
+            }
+            beginCollapse()
+          }
+        }}
+        placeholder="Search for Chats"
+        aria-label="Search chats"
+        className="min-w-0 flex-1 bg-transparent text-h4 text-ods-text-primary placeholder:text-ods-text-secondary focus:outline-none"
+      />
+    </div>
+  )
+}

package/src/components/chat/chat-list-empty-state.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+
+export interface ChatListEmptyStateProps {
+  /** Centred 24px glyph — rendered muted (`ods-text-secondary`). Pass the icon
+   *  already sized (e.g. `<ChatsIcon size={24} />`). */
+  icon: React.ReactNode
+  /** Title line (`h4`). */
+  title: React.ReactNode
+  /** Caption line under the title (`h6`). Omitted → title alone. */
+  description?: React.ReactNode
+  /** Appended to the root element. */
+  className?: string
+}
+
+/**
+ * Shared empty state for the chat-list surfaces — the "Current Chats" rail and
+ * the Chat Archive page (Figma node 113:60939). A centred 24px muted glyph over
+ * a title (`h4`) + caption (`h6`), both in `ods-text-secondary`. Kept in one
+ * place so the two lists can't drift apart.
+ */
+export function ChatListEmptyState({
+  icon,
+  title,
+  description,
+  className,
+}: ChatListEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-1 min-h-0 flex-col items-center justify-center gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)] text-center text-ods-text-secondary',
+        className,
+      )}
+    >
+      <span className="flex size-6 shrink-0 items-center justify-center">{icon}</span>
+      <div className="flex flex-col">
+        <p className="text-h4">{title}</p>
+        {description && <p className="text-h6">{description}</p>}
+      </div>
+    </div>
+  )
+}

package/src/components/chat/chat-panel-header.tsx

@@ -2,37 +2,35 @@
 
 import * as React from 'react'
 import { cn } from '../../utils/cn'
-import { Chevron01LeftIcon } from '../icons-v2-generated/arrows/chevron-01-left-icon'
 import {
+  Chevron02LeftIcon,
   Ellipsis01Icon,
   ClockHistoryIcon,
   Refresh01LeftIcon,
+  SearchIcon,
 } from '../icons-v2-generated'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import { ChatHeaderIconButton } from './chat-header-icon-button'
+import { ChatHeaderSearchField } from './chat-header-search-field'
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
 import { ChatPanelHeaderMobile } from './chat-panel-header-mobile'
 
-/**
- * Compact rounded header button used for the desktop back chevron. Borderless
- * square with a hover background. (Mobile uses its own header component —
- * `ChatPanelHeaderMobile`.)
- */
-export const COMPACT_HEADER_BUTTON =
-  'inline-flex shrink-0 items-center justify-center size-8 rounded-md text-ods-text-secondary transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent'
-
 export interface ChatPanelHeaderProps {
   /** Show the back-chevron + bold (h3) title. When false, the static list
    *  title (h4) is shown with no back affordance. */
   showBack?: boolean
   /** Title text (next to the back chevron, or the static list title). */
   title: string
+  /** Optional sub-line under the title (e.g. the signed-in user's name).
+   *  Rendered muted (`h6`) beneath the title in every view that has one. */
+  subtitle?: React.ReactNode
   /** Accessible label for the back chevron. */
   backAriaLabel?: string
   /** The open conversation is an archived chat (read-only). */
   isArchivedView?: boolean
-  /** Back-chevron handler. */
-  onBack: () => void
+  /** Back-chevron handler. Required only when `showBack` — the list view has no
+   *  back affordance. */
+  onBack?: () => void
   /** Close the panel. */
   onClose: () => void
   /** Restore/unarchive — renders the refresh button (archived view only). */
@@ -48,6 +46,18 @@ export interface ChatPanelHeaderProps {
    *  panel) where the phone-sized full-bleed header (large `text-h2` title) is
    *  wrong regardless of viewport. Default false = viewport-responsive. */
   compact?: boolean
+  /** Toggle the dialog-list search field — renders a magnifier button (list
+   *  view only), before the archive clock. */
+  onToggleSearch?: () => void
+  /** Whether the search field is currently open. When true (and `onSearchChange`
+   *  is wired) the title area is REPLACED in place by the inline search field
+   *  and the magnifier toggle is hidden. */
+  searchActive?: boolean
+  /** Seeds the inline search field when it opens (current search term). */
+  searchQuery?: string
+  /** Emits the debounced search term from the inline field. Enables the
+   *  in-header search experience (list view only). */
+  onSearchChange?: (query: string) => void
 }
 
 /**
@@ -59,6 +69,7 @@ export interface ChatPanelHeaderProps {
 export function ChatPanelHeader({
   showBack = false,
   title,
+  subtitle,
   backAriaLabel = 'Back',
   isArchivedView = false,
   onBack,
@@ -68,7 +79,13 @@ export function ChatPanelHeader({
   onArchive,
   onOpenArchive,
   compact = false,
+  onToggleSearch,
+  searchActive = false,
+  searchQuery,
+  onSearchChange,
 }: ChatPanelHeaderProps) {
+  // Search open (with a wired handler) swaps the title for the inline field.
+  const searchInline = searchActive && !!onSearchChange
   // Desktop ⋯ menu (active, non-archived conversation only) — rename / archive.
   const menuItems = [
     onRename && { id: 'rename', label: 'Rename chat', onClick: onRename },
@@ -85,6 +102,7 @@ export function ChatPanelHeader({
           className="flex md:hidden"
           showBack={showBack}
           title={title}
+          subtitle={subtitle}
           backAriaLabel={backAriaLabel}
           isArchivedView={isArchivedView}
           onBack={onBack}
@@ -98,24 +116,41 @@ export function ChatPanelHeader({
 
       {/* Compact bar: `md+` normally, or ALL widths when `compact`. Fixed-height
           bar with full-height divider action cells. */}
-      <div className={cn('flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card', compact ? 'flex' : 'hidden md:flex')}>
-        <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
-          {showBack ? (
-            <>
-              <button
-                type="button"
-                onClick={onBack}
-                aria-label={backAriaLabel}
-                className={`${COMPACT_HEADER_BUTTON} -ml-1`}
-              >
-                <Chevron01LeftIcon size={20} />
-              </button>
-              <span className="truncate text-h3 text-ods-text-primary">{title}</span>
-            </>
-          ) : (
-            <p className="truncate text-h3 text-ods-text-primary">{title}</p>
-          )}
-        </div>
+      <div
+        className={cn(
+          'flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card',
+          compact ? 'flex' : 'hidden md:flex',
+        )}
+      >
+        {/* Back — a full-height leading cell (right divider), the same
+            `ChatHeaderIconButton` primitive as the trailing ⋯ / close cells. */}
+        {showBack && (
+          <ChatHeaderIconButton
+            divider="right"
+            onClick={onBack}
+            aria-label={backAriaLabel}
+          >
+            <Chevron02LeftIcon size={24} />
+          </ChatHeaderIconButton>
+        )}
+        {searchInline ? (
+          // Search open — the inline field takes over the title area in place
+          // (Figma 116:51217); the magnifier toggle below is hidden.
+          <ChatHeaderSearchField
+            initialValue={searchQuery}
+            onSearchChange={onSearchChange}
+            onCollapse={onToggleSearch}
+          />
+        ) : (
+          <div className="flex flex-1 min-w-0 items-center px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)]">
+            <div className="flex min-w-0 flex-col">
+              <p className="truncate text-h3 leading-tight text-ods-text-primary">{title}</p>
+              {subtitle && (
+                <p className="truncate text-h6 leading-tight text-ods-text-secondary">{subtitle}</p>
+              )}
+            </div>
+          </div>
+        )}
 
         {/* Restore (refresh) — archived chat header (Figma node 7361:425441). */}
         {isArchivedView && onRestore && (
@@ -138,6 +173,18 @@ export function ChatPanelHeader({
           />
         )}
 
+        {/* Dialog search toggle — list view only, before the archive entry.
+            Hidden while search is open (the inline field owns the magnifier). */}
+        {!showBack && !searchInline && onToggleSearch && (
+          <ChatHeaderIconButton
+            onClick={onToggleSearch}
+            aria-label="Search chats"
+            aria-pressed={searchActive}
+          >
+            <SearchIcon size={24} />
+          </ChatHeaderIconButton>
+        )}
+
         {/* Chat Archive entry (Figma node 7532:225034) — list view only. */}
         {!showBack && onOpenArchive && (
           <ChatHeaderIconButton onClick={onOpenArchive} aria-label="Chat archive">