@flamingo-stack/openframe-frontend-core 0.0.438-snapshot.20260716203356 → 0.0.438

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

@@ -4,102 +4,75 @@ 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, MingoChatHistorySkeleton } from './mingo-chat-history'
-import { ChatListEmptyState } from './chat-list-empty-state'
+import { MingoChatHistory } from './mingo-chat-history'
 import type { DialogItem } from './types/component.types'
 
-interface ChatArchivePageBaseProps {
+export interface ChatArchivePageProps {
   /** Archived dialogs, grouped (Today / Yesterday / Older) by the list. */
   dialogs: ReadonlyArray<DialogItem>
   /** Open an archived dialog. */
   onSelectDialog: (id: string) => void
-  /** The delayed skeleton is visible (a slow first page is loading). */
+  /** 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). */
   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). In `embedded` mode the header is dropped so
- * the list can slot into the split layout's left rail.
+ * without the row action menus).
  */
-export function ChatArchivePage(props: ChatArchivePageProps) {
-  const {
-    dialogs,
-    onSelectDialog,
-    isLoading = false,
-    isFetching = false,
-    hasMore = false,
-    onLoadMore,
-  } = props
+export function ChatArchivePage({
+  dialogs,
+  onSelectDialog,
+  onBack,
+  onClose,
+  isLoading = false,
+  hasMore = false,
+  onLoadMore,
+}: ChatArchivePageProps) {
   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).
-          `!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 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>
+          (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}
+      />
 
-          <ChatHeaderIconButton onClick={props.onClose} aria-label="Close">
-            <XmarkIcon size={24} />
-          </ChatHeaderIconButton>
+      {/* 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>
-      )}
+
+        <ChatHeaderIconButton onClick={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
@@ -110,23 +83,34 @@ export function ChatArchivePage(props: ChatArchivePageProps) {
             onLoadMore={onLoadMore}
           />
         ) : isLoading ? (
-          // 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
+          // 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>
         ) : (
-          // 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"
-          />
+          // 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>
         )}
       </div>
     </>

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

@@ -4,17 +4,12 @@ import * as React from 'react'
 import { cn } from '../../utils/cn'
 
 export interface ChatHeaderIconButtonProps
-  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'
-}
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 /**
  * Square 56×56 icon cell used in the chat panel's top-navigation
- * (archive / restore / close, the `⋯` menu trigger, and the leading back
- * chevron). A border on one side acts as the 1px divider between cells.
+ * (archive / restore / close, and the `⋯` menu trigger). A left border 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
@@ -23,14 +18,12 @@ export interface ChatHeaderIconButtonProps
 export const ChatHeaderIconButton = React.forwardRef<
   HTMLButtonElement,
   ChatHeaderIconButtonProps
->(({ className, children, type = 'button', divider = 'left', ...props }, ref) => (
+>(({ className, children, type = 'button', ...props }, ref) => (
   <button
     ref={ref}
     type={type}
     className={cn(
-      'flex size-14 shrink-0 items-center justify-center border-ods-border',
-      divider === 'left' && 'border-l',
-      divider === 'right' && 'border-r',
+      'flex size-14 shrink-0 items-center justify-center border-l border-ods-border',
       '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-panel-header.tsx

@@ -2,35 +2,37 @@
 
 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. Required only when `showBack` — the list view has no
-   *  back affordance. */
-  onBack?: () => void
+  /** Back-chevron handler. */
+  onBack: () => void
   /** Close the panel. */
   onClose: () => void
   /** Restore/unarchive — renders the refresh button (archived view only). */
@@ -46,18 +48,6 @@ 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
 }
 
 /**
@@ -69,7 +59,6 @@ export interface ChatPanelHeaderProps {
 export function ChatPanelHeader({
   showBack = false,
   title,
-  subtitle,
   backAriaLabel = 'Back',
   isArchivedView = false,
   onBack,
@@ -79,13 +68,7 @@ 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 },
@@ -102,7 +85,6 @@ export function ChatPanelHeader({
           className="flex md:hidden"
           showBack={showBack}
           title={title}
-          subtitle={subtitle}
           backAriaLabel={backAriaLabel}
           isArchivedView={isArchivedView}
           onBack={onBack}
@@ -116,41 +98,24 @@ 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',
-        )}
-      >
-        {/* 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>
-        )}
+      <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>
 
         {/* Restore (refresh) — archived chat header (Figma node 7361:425441). */}
         {isArchivedView && onRestore && (
@@ -173,18 +138,6 @@ 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">