more responsive inventory tables

extensions/src/platform-scripture/src/checks/inventories/character-inventory.component.tsx

@@ -1,18 +1,19 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { SerializedVerseRef } from '@sillsdev/scripture';
 import {
-  Button,
   ColumnDef,
   Inventory,
   InventorySummaryItem,
   InventoryTableData,
   Scope,
+  getInventoryHeader,
   inventoryCountColumn,
   inventoryItemColumn,
   inventoryStatusColumn,
 } from 'platform-bible-react';
 import { LanguageStrings, LocalizeKey } from 'platform-bible-utils';
 import { useMemo } from 'react';
+import { getUnicodeValue } from './inventory-utils';
 
 const CHARACTER_INVENTORY_STRING_KEYS: LocalizeKey[] = [
   '%webView_inventory_table_header_character%',
@@ -47,10 +48,11 @@ const createColumns = (
   inventoryItemColumn(itemLabel),
   {
     accessorKey: 'unicodeValue',
-    header: () => <Button variant="ghost">{unicodeValueLabel}</Button>,
+    accessorFn: (row) => getUnicodeValue(row.items[0]),
+    header: ({ column }) => getInventoryHeader(column, unicodeValueLabel),
     cell: ({ row }) => {
       const item: string = row.getValue('item');
-      return item.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0');
+      return getUnicodeValue(item);
     },
   },
   inventoryCountColumn(countLabel),

extensions/src/platform-scripture/src/checks/inventories/inventory-utils.ts

@@ -0,0 +1,15 @@
+import { codePointAt } from 'platform-bible-utils';
+
+/**
+ * Converts a character to its Unicode hexadecimal representation
+ *
+ * @param char The character to convert
+ * @returns The Unicode value as a 4+ digit uppercase hexadecimal string (e.g., "0041" for 'A',
+ *   "1F600" for 😀)
+ */
+export function getUnicodeValue(char: string): string {
+  if (!char || char.length === 0) return '0000';
+  const codePoint = codePointAt(char, 0);
+  if (codePoint === undefined) return '0000';
+  return codePoint.toString(16).toUpperCase().padStart(4, '0');
+}

extensions/src/platform-scripture/src/checks/inventories/marker-inventory.component.tsx

@@ -2,8 +2,8 @@ import { logger } from '@papi/frontend';
 import { useLocalizedStrings, useProjectData } from '@papi/frontend/react';
 import { Canon, SerializedVerseRef } from '@sillsdev/scripture';
 import {
-  Button,
   ColumnDef,
+  getInventoryHeader,
   Inventory,
   inventoryCountColumn,
   InventorySummaryItem,
@@ -69,7 +69,8 @@ const createColumns = (
   inventoryCountColumn(countLabel),
   {
     accessorKey: 'styleName',
-    header: () => <Button variant="ghost">{styleNameLabel}</Button>,
+    accessorFn: (row) => getDescription(markerNames, row.items[0]) || unknownMarkerLabel,
+    header: ({ column }) => getInventoryHeader(column, styleNameLabel),
     cell: ({ row }) => {
       const marker: string = row.getValue('item');
       return getDescription(markerNames, marker) || unknownMarkerLabel;

extensions/src/platform-scripture/src/checks/inventories/punctuation-inventory.component.tsx

@@ -1,18 +1,19 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { SerializedVerseRef } from '@sillsdev/scripture';
 import {
-  Button,
   ColumnDef,
   Inventory,
   InventorySummaryItem,
   InventoryTableData,
   Scope,
+  getInventoryHeader,
   inventoryCountColumn,
   inventoryItemColumn,
   inventoryStatusColumn,
 } from 'platform-bible-react';
 import { LanguageStrings, LocalizeKey } from 'platform-bible-utils';
 import { useMemo } from 'react';
+import { getUnicodeValue } from './inventory-utils';
 
 const PUNCTUATION_INVENTORY_STRING_KEYS: LocalizeKey[] = [
   '%webView_inventory_table_header_count%',
@@ -55,11 +56,12 @@ const createColumns = (
     },
     {
       accessorKey: 'unicodeValue',
-      header: () => <Button variant="ghost">{unicodeValueLabel}</Button>,
+      accessorFn: (row) => getUnicodeValue(row.items[0]),
+      header: ({ column }) => getInventoryHeader(column, unicodeValueLabel),
       //  Q: How to style the <td> and <th> directly?
       cell: ({ row }) => (
         <div className="tw-font-mono tw-flex tw-justify-center">
-          {String(row.getValue('item')).charCodeAt(0).toString(16).toUpperCase().padStart(4, '0')}
+          {getUnicodeValue(row.getValue('item'))}
         </div>
       ),
     },

lib/platform-bible-react/dist/index.d.ts

@@ -19,7 +19,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { SerializedVerseRef } from '@sillsdev/scripture';
-import { ColumnDef as TSColumnDef, Row as TSRow, SortDirection as TSSortDirection, Table as TSTable } from '@tanstack/react-table';
+import { Column, ColumnDef as TSColumnDef, Row as TSRow, SortDirection as TSSortDirection, Table as TSTable } from '@tanstack/react-table';
 import { ClassValue } from 'clsx';
 import { LucideProps } from 'lucide-react';
 import { CommentStatus, LanguageStrings, LegacyCommentThread, LocalizeKey, Localized, LocalizedStringValue, MenuItemContainingCommand, MultiColumnMenu, PlatformEvent, PlatformEventAsync, PlatformEventHandler, ScriptureSelection, ScrollGroupId } from 'platform-bible-utils';
@@ -904,6 +904,14 @@ type InventoryProps = {
 };
 /** Inventory component that is used to view and control the status of provided project settings */
 export declare function Inventory({ inventoryItems, setVerseRef, localizedStrings, additionalItemsLabels, approvedItems, unapprovedItems, scope, onScopeChange, columns, id, areInventoryItemsLoading, classNameForVerseText, onItemSelected, }: InventoryProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Generates a responsive column header for inventory columns with tooltip and sorting functionality
+ *
+ * @param column The column received from ColumnDef.header
+ * @param label The label field to display in the header and tooltip
+ * @returns A ReactNode representing the header
+ */
+export declare const getInventoryHeader: (column: Column<InventoryTableData, unknown>, label: string, buttonClassName?: string) => React$1.ReactNode;
 /**
  * Function that creates the item column for inventories
  *
@@ -2265,7 +2273,7 @@ export declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProvide
  */
 export declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
 /** @inheritdoc Tooltip */
-export declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+export declare const TooltipTrigger: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** @inheritdoc Tooltip */
 export declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 type Side = "primary" | "secondary";