@handled-ai/design-system 0.18.11 → 0.18.13

package/src/prototype/prototype-inbox-view.tsx

@@ -141,10 +141,16 @@ export interface DetailViewProps {
   lastActivityTime?: string
   /** Render extra content inline with the detail title. */
   renderTitleExtra?: (item: QueueItem) => React.ReactNode
+  /** Render a full-width action row below the detail title row. */
+  renderTitleActionRow?: (item: QueueItem) => React.ReactNode
   /** Render supporting content below the detail title. */
   renderTitleSubtext?: (item: QueueItem) => React.ReactNode
   /** Render extra metadata chips (e.g. assignee) inside the chips row below the title. */
   renderMetadataExtra?: (item: QueueItem) => React.ReactNode
+  /** Override the built-in account details metadata button label. */
+  accountDetailsButtonLabel?: (item: QueueItem) => React.ReactNode
+  /** Accessible label for the built-in account details metadata button. */
+  getAccountDetailsButtonAriaLabel?: (item: QueueItem) => string
   onOpenSignalBucket?: (args: { item: QueueItem; bucketKey: string; signalId: string }) => void
   approveButtonIconUrl?: string
   opportunityPreview?: OpportunityPreview
@@ -321,8 +327,11 @@ export function DetailView({
   renderAfterScore,
   lastActivityTime,
   renderTitleExtra,
+  renderTitleActionRow,
   renderTitleSubtext,
   renderMetadataExtra,
+  accountDetailsButtonLabel,
+  getAccountDetailsButtonAriaLabel,
   onOpenSignalBucket,
   approveButtonIconUrl,
   opportunityPreview,
@@ -468,12 +477,19 @@ export function DetailView({
             <span className="text-xs text-muted-foreground">{item.company}</span>
           </div>
 
-          <div className="mb-3 flex flex-wrap items-start gap-x-3 gap-y-2">
-            <div className="min-w-0 flex-1">
-              <h1 className="text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
-              {renderTitleSubtext?.(item)}
+          <div className="mb-3 space-y-3">
+            <div className="flex flex-wrap items-start gap-x-3 gap-y-2">
+              <div className="min-w-0 flex-1">
+                <h1 className="text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
+                {renderTitleSubtext?.(item)}
+              </div>
+              {renderTitleExtra?.(item)}
             </div>
-            {renderTitleExtra?.(item)}
+            {renderTitleActionRow ? (
+              <div className="flex w-full flex-wrap items-center gap-2">
+                {renderTitleActionRow(item)}
+              </div>
+            ) : null}
           </div>
 
           <div className="mb-6 flex flex-wrap items-center gap-2">
@@ -498,11 +514,18 @@ export function DetailView({
               type="button"
               onClick={onOpenEntityPanel}
               className="ml-1 inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-muted/30 px-2 py-1 transition-colors hover:bg-muted/50"
+              aria-label={getAccountDetailsButtonAriaLabel?.(item)}
             >
               <div className="flex h-4 w-4 items-center justify-center rounded bg-muted-foreground/10 text-[9px] font-semibold text-muted-foreground">
                 {item.company.substring(0, 1)}
               </div>
-              <span className="text-xs font-medium text-foreground">{item.company}</span>
+              {accountDetailsButtonLabel ? (
+                <span className="inline-flex min-w-0 items-center gap-1.5 text-xs font-medium text-foreground">
+                  {accountDetailsButtonLabel(item)}
+                </span>
+              ) : (
+                <span className="text-xs font-medium text-foreground">{item.company}</span>
+              )}
               <ChevronRight className="h-3 w-3 text-muted-foreground/50" />
             </button>
             {renderMetadataExtra?.(item)}
@@ -649,7 +672,10 @@ export function PrototypeInboxView({
   timelineSystemEventsConfig,
   attentionCount,
   renderTitleExtra,
+  renderTitleActionRow,
   renderTitleSubtext,
+  accountDetailsButtonLabel,
+  getAccountDetailsButtonAriaLabel,
   sortOptions,
   activeSortId,
   onSortChange,
@@ -891,7 +917,10 @@ export function PrototypeInboxView({
     timelineSystemEventsConfig,
     attentionCount,
     renderTitleExtra,
+    renderTitleActionRow,
     renderTitleSubtext,
+    accountDetailsButtonLabel,
+    getAccountDetailsButtonAriaLabel,
     onOpenSignalBucket,
   }