@open-mercato/ui 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/src/backend/detail/NotesSection.tsx

@@ -64,6 +64,19 @@ export type NotesUpdatePayload = {
 
 export type NotesDataAdapter<C = unknown> = {
   list: (params: { entityId: string | null; dealId: string | null; context?: C }) => Promise<CommentSummary[]>
+  listPage?: (params: {
+    entityId: string | null
+    dealId: string | null
+    page: number
+    pageSize: number
+    context?: C
+  }) => Promise<{
+    items: CommentSummary[]
+    total: number
+    page: number
+    pageSize: number
+    totalPages: number
+  }>
   create: (params: NotesCreatePayload & { context?: C }) => Promise<Partial<CommentSummary> | void>
   update: (params: { id: string; patch: NotesUpdatePayload; context?: C }) => Promise<void>
   delete: (params: { id: string; context?: C }) => Promise<void>
@@ -446,7 +459,10 @@ function NotesSectionImpl<C = unknown>({
   const [contentError, setContentError] = React.useState<string | null>(null)
   const contentTextareaRef = React.useRef<HTMLTextAreaElement | null>(null)
   const [visibleCount, setVisibleCount] = React.useState(0)
+  const [currentPage, setCurrentPage] = React.useState(1)
+  const [totalPages, setTotalPages] = React.useState(1)
   const [deletingNoteId, setDeletingNoteId] = React.useState<string | null>(null)
+  const pagedMode = typeof dataAdapter.listPage === 'function'
 
   React.useEffect(() => {
     const queryEntityId = typeof entityId === 'string' ? entityId : ''
@@ -455,6 +471,8 @@ function NotesSectionImpl<C = unknown>({
       setNotes([])
       setLoadError(null)
       setIsLoading(false)
+      setCurrentPage(1)
+      setTotalPages(1)
       return
     }
     let cancelled = false
@@ -463,6 +481,20 @@ function NotesSectionImpl<C = unknown>({
     pushLoading()
     async function loadNotes() {
       try {
+        if (dataAdapter.listPage) {
+          const pageResult = await dataAdapter.listPage({
+            entityId: queryEntityId || null,
+            dealId: queryDealId || null,
+            page: 1,
+            pageSize: 20,
+            context: dataContext,
+          })
+          if (cancelled) return
+          setNotes(pageResult.items)
+          setCurrentPage(pageResult.page)
+          setTotalPages(pageResult.totalPages)
+          return
+        }
         const mapped = await dataAdapter.list({
           entityId: queryEntityId || null,
           dealId: queryDealId || null,
@@ -470,12 +502,16 @@ function NotesSectionImpl<C = unknown>({
         })
         if (cancelled) return
         setNotes(mapped)
+        setCurrentPage(1)
+        setTotalPages(1)
       } catch (err) {
         if (cancelled) return
         const message =
           err instanceof Error ? err.message : label('loadError', 'Failed to load notes.')
         setNotes([])
         setLoadError(message)
+        setCurrentPage(1)
+        setTotalPages(1)
         flash(message, 'error')
       } finally {
         if (!cancelled) setIsLoading(false)
@@ -486,7 +522,7 @@ function NotesSectionImpl<C = unknown>({
     return () => {
       cancelled = true
     }
-  }, [dataAdapter, dataContext, dealId, entityId, popLoading, pushLoading, t])
+  }, [dataAdapter, dataContext, dealId, entityId, label, popLoading, pushLoading])
 
   const youLabel = label('you', 'You')
   const viewerLabel = React.useMemo(() => viewerName ?? viewerEmail ?? null, [viewerEmail, viewerName])
@@ -534,6 +570,10 @@ function NotesSectionImpl<C = unknown>({
   }, [readMarkdownPreference])
 
   React.useEffect(() => {
+    if (pagedMode) {
+      setVisibleCount(notes.length)
+      return
+    }
     if (!notes.length) {
       setVisibleCount(0)
       return
@@ -543,7 +583,7 @@ function NotesSectionImpl<C = unknown>({
       if (prev >= notes.length) return prev
       return Math.min(Math.max(prev, baseline), notes.length)
     })
-  }, [notes.length])
+  }, [notes.length, pagedMode])
 
   React.useEffect(() => {
     if (hasEntity) return
@@ -553,8 +593,14 @@ function NotesSectionImpl<C = unknown>({
     setDraftColor(null)
   }, [hasEntity])
 
-  const visibleNotes = React.useMemo(() => notes.slice(0, visibleCount), [notes, visibleCount])
-  const hasVisibleNotes = React.useMemo(() => visibleCount > 0, [visibleCount])
+  const visibleNotes = React.useMemo(
+    () => (pagedMode ? notes : notes.slice(0, visibleCount)),
+    [notes, pagedMode, visibleCount],
+  )
+  const hasVisibleNotes = React.useMemo(
+    () => (pagedMode ? notes.length > 0 : visibleCount > 0),
+    [notes.length, pagedMode, visibleCount],
+  )
 
   const loadMoreLabel = label('loadMore')
 
@@ -618,6 +664,7 @@ function NotesSectionImpl<C = unknown>({
           }
           return [newNote, ...prev]
         })
+        setVisibleCount((prev) => Math.max(prev, 1))
         flash(label('success'), 'success')
         return true
       } catch (err) {
@@ -686,6 +733,9 @@ function NotesSectionImpl<C = unknown>({
       try {
         await dataAdapter.delete({ id: note.id, context: dataContext })
         setNotes((prev) => prev.filter((existing) => existing.id !== note.id))
+        if (pagedMode) {
+          setVisibleCount((prev) => Math.max(0, prev - 1))
+        }
         flash(label('deleteSuccess', 'Note deleted'), 'success')
       } catch (err) {
         const message = err instanceof Error ? err.message : label('deleteError', 'Failed to delete note')
@@ -716,11 +766,40 @@ function NotesSectionImpl<C = unknown>({
   )
 
   const handleLoadMore = React.useCallback(() => {
+    if (pagedMode && dataAdapter.listPage) {
+      if (currentPage >= totalPages || isLoading) return
+      const queryEntityId = typeof entityId === 'string' ? entityId : ''
+      const queryDealId = typeof dealId === 'string' ? dealId : ''
+      setIsLoading(true)
+      pushLoading()
+      void dataAdapter.listPage({
+        entityId: queryEntityId || null,
+        dealId: queryDealId || null,
+        page: currentPage + 1,
+        pageSize: 20,
+        context: dataContext,
+      })
+        .then((pageResult) => {
+          setNotes((prev) => [...prev, ...pageResult.items])
+          setCurrentPage(pageResult.page)
+          setTotalPages(pageResult.totalPages)
+        })
+        .catch((error) => {
+          const message =
+            error instanceof Error ? error.message : label('loadError', 'Failed to load notes.')
+          flash(message, 'error')
+        })
+        .finally(() => {
+          setIsLoading(false)
+          popLoading()
+        })
+      return
+    }
     setVisibleCount((prev) => {
       if (prev >= notes.length) return prev
       return Math.min(prev + 5, notes.length)
     })
-  }, [notes.length])
+  }, [currentPage, dataAdapter, dataContext, dealId, entityId, flash, isLoading, label, notes.length, pagedMode, popLoading, pushLoading, totalPages])
 
   const handleAppearanceDialogSubmit = React.useCallback(async () => {
     if (!appearanceDialogState) return
@@ -1034,6 +1113,20 @@ function NotesSectionImpl<C = unknown>({
       {loadError ? <ErrorMessage label={loadError} className="mt-3" /> : null}
 
       <div className="space-y-3">
+        {!composerOpen && hasVisibleNotes && !onActionChange ? (
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={focusComposer}
+              disabled={isSubmitting || isLoading || !hasEntity}
+            >
+              <Plus className="size-4" />
+              {addActionLabel}
+            </Button>
+          </div>
+        ) : null}
         {isLoading ? (
           <LoadingMessage
             label={label('loading', 'Loading notes…')}
@@ -1206,7 +1299,7 @@ function NotesSectionImpl<C = unknown>({
             }}
           />
         )}
-        {isLoading || visibleCount >= notes.length ? null : (
+        {isLoading || (pagedMode ? currentPage >= totalPages : visibleCount >= notes.length) ? null : (
           <div className="flex justify-center">
             <Button variant="outline" size="sm" onClick={handleLoadMore}>
               {loadMoreLabel}

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -43,15 +43,18 @@ import {
   Coins,
   Copy,
   CreditCard,
+  Crown,
   Database,
   DollarSign,
   Download,
   ExternalLink,
+  Eye,
   FileMinus,
   FilePenLine,
   FileText,
   FilterX,
   Flag,
+  Flame,
   FolderTree,
   Gauge,
   GitBranch,
@@ -61,7 +64,9 @@ import {
   GraduationCap,
   Hand,
   Handshake,
+  Headphones,
   Heart,
+  HelpCircle,
   Hourglass,
   Inbox,
   Key,
@@ -77,7 +82,7 @@ import {
   Mail,
   MailOpen,
   MapPin,
-  Megaphone,
+  MinusCircle,
   Notebook,
   Package,
   PackageCheck,
@@ -106,6 +111,7 @@ import {
   Shuffle,
   Sliders,
   Smartphone,
+  Snowflake,
   Sparkles,
   Star,
   StickyNote,
@@ -127,6 +133,7 @@ import {
   UserPlus,
   UserRound,
   Users,
+  UserX,
   Wallet,
   Webhook,
   Wrench,
@@ -173,15 +180,18 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'coins': Coins,
   'copy': Copy,
   'credit-card': CreditCard,
+  'crown': Crown,
   'database': Database,
   'dollar-sign': DollarSign,
   'download': Download,
   'external-link': ExternalLink,
+  'eye': Eye,
   'file-minus': FileMinus,
   'file-pen-line': FilePenLine,
   'file-text': FileText,
   'filter-x': FilterX,
   'flag': Flag,
+  'flame': Flame,
   'folder-tree': FolderTree,
   'gauge': Gauge,
   'git-branch': GitBranch,
@@ -191,7 +201,9 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'graduation-cap': GraduationCap,
   'hand': Hand,
   'handshake': Handshake,
+  'headphones': Headphones,
   'heart': Heart,
+  'help-circle': HelpCircle,
   'hourglass': Hourglass,
   'inbox': Inbox,
   'key': Key,
@@ -207,7 +219,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'mail': Mail,
   'mail-open': MailOpen,
   'map-pin': MapPin,
-  'megaphone': Megaphone,
+  'minus-circle': MinusCircle,
   'notebook': Notebook,
   'package': Package,
   'package-check': PackageCheck,
@@ -236,6 +248,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'shuffle': Shuffle,
   'sliders': Sliders,
   'smartphone': Smartphone,
+  'snowflake': Snowflake,
   'sparkles': Sparkles,
   'star': Star,
   'sticky-note': StickyNote,
@@ -256,6 +269,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'user-minus': UserMinus,
   'user-plus': UserPlus,
   'user-round': UserRound,
+  'user-x': UserX,
   'users': Users,
   'wallet': Wallet,
   'webhook': Webhook,

package/src/backend/inputs/SwitchableMarkdownInput.tsx

@@ -5,6 +5,7 @@ import dynamic from 'next/dynamic'
 import type { PluggableList } from 'unified'
 import { LoadingMessage } from '../detail/LoadingMessage'
 import { useMarkdownRemarkPlugins } from '../markdown/useMarkdownRemarkPlugins'
+import { useTheme } from '../../theme'
 
 export type SwitchableMarkdownInputProps = {
   value: string
@@ -69,6 +70,7 @@ export function SwitchableMarkdownInput({
   remarkPlugins,
 }: SwitchableMarkdownInputProps) {
   const resolvedPlugins = useMarkdownRemarkPlugins(remarkPlugins)
+  const { resolvedTheme } = useTheme()
   const editorWrapperClasses =
     editorWrapperClassName ?? 'w-full rounded-lg border border-muted-foreground/20 bg-background p-2'
   const editorClasses = editorClassName ?? 'w-full'
@@ -79,7 +81,7 @@ export function SwitchableMarkdownInput({
   if (isMarkdownEnabled && !disableMarkdown) {
     return (
       <div className={editorWrapperClasses}>
-        <div data-color-mode="light" className={editorClasses}>
+        <div data-color-mode={resolvedTheme} className={editorClasses}>
           <UiMarkdownEditor
             value={value}
             height={height}

package/src/primitives/__tests__/avatar.test.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import { Avatar } from '../avatar'
+
+describe('Avatar', () => {
+  it('renders two-character initials for multi-word labels', () => {
+    render(<Avatar label="Jan Kowalski" />)
+    expect(screen.getByText('JK')).toBeInTheDocument()
+  })
+
+  it('renders first two characters for single-word labels', () => {
+    render(<Avatar label="Acme" />)
+    expect(screen.getByText('AC')).toBeInTheDocument()
+  })
+
+  it('renders a question mark when label is empty', () => {
+    render(<Avatar label="  " />)
+    expect(screen.getByText('?')).toBeInTheDocument()
+  })
+
+  it('uses the provided ariaLabel over the label for a11y', () => {
+    render(<Avatar label="Jan Kowalski" ariaLabel="Owner avatar" />)
+    expect(screen.getByRole('img', { name: 'Owner avatar' })).toBeInTheDocument()
+  })
+
+  it('falls back to label for aria when ariaLabel is not provided', () => {
+    render(<Avatar label="Acme Corp" />)
+    expect(screen.getByRole('img', { name: 'Acme Corp' })).toBeInTheDocument()
+  })
+
+  it('applies monochrome classes when variant=monochrome', () => {
+    const { container } = render(<Avatar label="Jan" variant="monochrome" />)
+    const root = container.firstChild as HTMLElement
+    expect(root.className).toContain('bg-muted')
+    expect(root.className).toContain('text-muted-foreground')
+  })
+
+  it('applies default (colored) classes when variant is default', () => {
+    const { container } = render(<Avatar label="Jan" />)
+    const root = container.firstChild as HTMLElement
+    expect(root.className).toContain('bg-primary/10')
+    expect(root.className).toContain('text-primary')
+  })
+
+  it('renders an icon in place of initials when icon is provided', () => {
+    const Icon = () => <svg data-testid="bldg" />
+    render(<Avatar label="Acme" icon={<Icon />} />)
+    expect(screen.getByTestId('bldg')).toBeInTheDocument()
+    expect(screen.queryByText('AC')).not.toBeInTheDocument()
+  })
+
+  it('renders an image when src is provided', () => {
+    const { container } = render(<Avatar label="Jan" src="/avatar.png" />)
+    const img = container.querySelector('img')
+    expect(img).toBeTruthy()
+    expect(img?.getAttribute('src')).toBe('/avatar.png')
+  })
+
+  it('applies size classes from size prop', () => {
+    const { container } = render(<Avatar label="Jan" size="lg" />)
+    const root = container.firstChild as HTMLElement
+    expect(root.className).toContain('size-12')
+  })
+})

package/src/primitives/avatar.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const avatarVariants = cva(
+  'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold select-none',
+  {
+    variants: {
+      size: {
+        xs: 'size-5 text-xs',
+        sm: 'size-7 text-xs',
+        md: 'size-9 text-sm',
+        lg: 'size-12 text-base',
+        xl: 'size-16 text-xl',
+      },
+      variant: {
+        default: 'bg-primary/10 text-primary',
+        monochrome: 'bg-muted text-muted-foreground',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'default',
+    },
+  },
+)
+
+function computeInitials(label: string): string {
+  const trimmed = label.trim()
+  if (!trimmed.length) return '?'
+  const parts = trimmed.split(/\s+/).filter(Boolean)
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase()
+  }
+  const first = parts[0][0] ?? ''
+  const last = parts[parts.length - 1][0] ?? ''
+  return (first + last).toUpperCase()
+}
+
+export type AvatarProps = {
+  label: string
+  src?: string | null
+  icon?: React.ReactNode
+  ariaLabel?: string
+} & VariantProps<typeof avatarVariants> &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'>
+
+export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, label, src, icon, size, variant, ariaLabel, ...rest }, ref) => {
+    const initials = React.useMemo(() => computeInitials(label), [label])
+    return (
+      <div
+        ref={ref}
+        role="img"
+        aria-label={ariaLabel ?? label}
+        className={cn(avatarVariants({ size, variant }), className)}
+        {...rest}
+      >
+        {src ? (
+          <img src={src} alt="" className="size-full object-cover" aria-hidden="true" />
+        ) : icon ? (
+          <span aria-hidden="true" className="flex items-center justify-center [&>svg]:size-[55%]">
+            {icon}
+          </span>
+        ) : (
+          <span aria-hidden="true">{initials}</span>
+        )}
+      </div>
+    )
+  },
+)
+
+Avatar.displayName = 'Avatar'
+
+export { avatarVariants }