@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/PerspectiveSidebar.tsx

@@ -0,0 +1,337 @@
+"use client"
+import * as React from 'react'
+import { Button } from '../primitives/button'
+import { Spinner } from '../primitives/spinner'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type {
+  PerspectiveDto,
+  RolePerspectiveDto,
+} from '@open-mercato/shared/modules/perspectives/types'
+
+type ColumnOption = {
+  id: string
+  label: string
+  visible: boolean
+  canHide: boolean
+}
+
+export type PerspectiveSidebarProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  loading: boolean
+  perspectives: PerspectiveDto[]
+  rolePerspectives: RolePerspectiveDto[]
+  roles: Array<{ id: string; name: string; hasPerspective: boolean; hasDefault: boolean }>
+  activePerspectiveId: string | null
+  onActivatePerspective: (perspective: PerspectiveDto | RolePerspectiveDto, source: 'personal' | 'role') => void
+  onDeletePerspective: (perspectiveId: string) => Promise<void>
+  onClearRole: (roleId: string) => Promise<void>
+  onSave: (input: { name: string; isDefault: boolean; applyToRoles: string[]; setRoleDefault: boolean }) => Promise<void>
+  canApplyToRoles: boolean
+  columnOptions: ColumnOption[]
+  onToggleColumn: (id: string, visible: boolean) => void
+  onMoveColumn: (id: string, direction: 'up' | 'down') => void
+  saving: boolean
+  deletingIds: string[]
+  roleClearingIds: string[]
+  apiWarning?: string | null
+}
+
+const emptyArray: any[] = []
+
+export function PerspectiveSidebar({
+  open,
+  onOpenChange,
+  loading,
+  perspectives,
+  rolePerspectives,
+  roles,
+  activePerspectiveId,
+  onActivatePerspective,
+  onDeletePerspective,
+  onClearRole,
+  onSave,
+  canApplyToRoles,
+  columnOptions,
+  onToggleColumn,
+  onMoveColumn,
+  saving,
+  deletingIds,
+  roleClearingIds,
+  apiWarning,
+}: PerspectiveSidebarProps) {
+  const t = useT()
+  
+  function perspectiveLabel(p: PerspectiveDto | RolePerspectiveDto) {
+    return p.name.trim().length ? p.name : t('ui.perspectives.untitled', 'Untitled perspective')
+  }
+  const [name, setName] = React.useState('')
+  const [isDefault, setIsDefault] = React.useState(false)
+  const [applyToRoles, setApplyToRoles] = React.useState<string[]>([])
+  const [setRoleDefault, setSetRoleDefault] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (!open) {
+      setError(null)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    const active = perspectives.find((p) => p.id === activePerspectiveId)
+      ?? rolePerspectives.find((p) => p.id === activePerspectiveId)
+    if (active) {
+      setName(active.name)
+      setIsDefault(active.isDefault)
+    } else if (!name) {
+      setName('')
+      setIsDefault(false)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, activePerspectiveId])
+
+  const groupedRolePerspectives = React.useMemo(() => {
+    const map = new Map<string, RolePerspectiveDto[]>()
+    for (const rp of rolePerspectives) {
+      if (!map.has(rp.roleId)) map.set(rp.roleId, [])
+      map.get(rp.roleId)!.push(rp)
+    }
+    return map
+  }, [rolePerspectives])
+
+  const toggleRoleSelection = (roleId: string) => {
+    setApplyToRoles((prev) => {
+      const next = new Set(prev)
+      if (next.has(roleId)) next.delete(roleId)
+      else next.add(roleId)
+      return Array.from(next)
+    })
+  }
+
+  const handleSave = async () => {
+    setError(null)
+    try {
+      await onSave({ name: name.trim(), isDefault, applyToRoles, setRoleDefault })
+      if (!isDefault) setIsDefault(false)
+      setApplyToRoles([])
+      setSetRoleDefault(false)
+    } catch (err: any) {
+      setError(err?.message ?? 'Failed to save perspective')
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="absolute inset-0 bg-black/30" onClick={() => onOpenChange(false)} />
+      <div className="absolute left-0 top-0 h-full w-full sm:w-[420px] bg-background shadow-xl border-r flex flex-col">
+        <div className="flex items-center justify-between p-4 border-b">
+          <h2 className="text-base font-semibold">{t('ui.perspectives.title', 'Perspectives')}</h2>
+          <button className="text-sm text-muted-foreground" onClick={() => onOpenChange(false)}>{t('ui.perspectives.close', 'Close')}</button>
+        </div>
+        <div className="flex-1 overflow-auto divide-y">
+          <section className="p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-semibold uppercase text-muted-foreground">{t('ui.perspectives.myPerspectives.title', 'My perspectives')}</h3>
+              {loading ? <Spinner size="sm" /> : null}
+            </div>
+            {(perspectives ?? emptyArray).length === 0 ? (
+              <p className="text-sm text-muted-foreground">{t('ui.perspectives.myPerspectives.empty', 'No saved perspectives yet. Adjust columns or filters and save your first perspective.')}</p>
+            ) : (
+              <div className="space-y-2">
+                {perspectives.map((p) => {
+                  const isActive = activePerspectiveId === p.id
+                  const deleting = deletingIds.includes(p.id)
+                  return (
+                    <div key={p.id} className={`rounded border px-3 py-2 flex items-start justify-between gap-3 ${isActive ? 'border-primary/80 bg-primary/5' : 'border-border bg-card'}`}>
+                      <div className="space-y-1">
+                        <div className="text-sm font-medium">{perspectiveLabel(p)}</div>
+                        <div className="text-xs text-muted-foreground flex items-center gap-2">
+                          {p.isDefault ? <span className="inline-flex items-center gap-1 rounded bg-primary/10 px-2 py-0.5 text-primary text-[11px] uppercase tracking-wide">{t('ui.perspectives.badge.default', 'Default')}</span> : null}
+                          <span>{t('ui.perspectives.updated', 'Updated {date}', { date: new Date(p.updatedAt ?? p.createdAt).toLocaleString() })}</span>
+                        </div>
+                      </div>
+                      <div className="flex flex-col gap-1">
+                        <Button
+                          size="sm"
+                          variant={isActive ? 'secondary' : 'outline'}
+                          onClick={() => onActivatePerspective(p, 'personal')}
+                          disabled={isActive || deleting}
+                        >
+                          {isActive ? t('ui.perspectives.actions.active', 'Active') : t('ui.perspectives.actions.use', 'Use')}
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => void onDeletePerspective(p.id)}
+                          disabled={deleting}
+                        >
+                          {deleting ? t('ui.perspectives.actions.removing', 'Removing…') : t('common.delete', 'Delete')}
+                        </Button>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </section>
+          <section className="p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-semibold uppercase text-muted-foreground">{t('ui.perspectives.rolePerspectives.title', 'Role perspectives')}</h3>
+              {rolePerspectives.length === 0 ? null : <span className="text-xs text-muted-foreground">{rolePerspectives.length}</span>}
+            </div>
+            {rolePerspectives.length === 0 ? (
+              <p className="text-sm text-muted-foreground">{t('ui.perspectives.rolePerspectives.empty', 'No shared role perspectives available.')}</p>
+            ) : (
+              <div className="space-y-3">
+                {Array.from(groupedRolePerspectives.entries()).map(([roleId, items]) => {
+                  const role = roles.find((r) => r.id === roleId)
+                  const clearing = roleClearingIds.includes(roleId)
+                  return (
+                    <div key={roleId} className="rounded border px-3 py-2 space-y-2 bg-muted/40">
+                      <div className="flex items-center justify-between gap-2">
+                        <div>
+                          <div className="text-sm font-semibold">{role?.name ?? t('ui.perspectives.role.fallback', 'Role')}</div>
+                          {role?.hasDefault ? <div className="text-xs text-muted-foreground">{t('ui.perspectives.role.defaultConfigured', 'Default perspective configured')}</div> : null}
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => void onClearRole(roleId)}
+                          disabled={clearing}
+                        >
+                          {clearing ? t('ui.perspectives.role.clearing', 'Clearing…') : t('ui.perspectives.role.clear', 'Clear role')}
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {items.map((item) => {
+                          const isActive = activePerspectiveId === item.id
+                          return (
+                            <div key={item.id} className={`rounded border px-3 py-2 flex items-start justify-between gap-3 ${isActive ? 'border-primary/80 bg-primary/5' : 'border-border bg-background'}`}>
+                              <div className="space-y-1">
+                                <div className="text-sm font-medium">{perspectiveLabel(item)}</div>
+                                <div className="text-xs text-muted-foreground flex items-center gap-2">
+                                  {item.isDefault ? <span className="inline-flex items-center gap-1 rounded bg-primary/10 px-2 py-0.5 text-primary text-[11px] uppercase tracking-wide">{t('ui.perspectives.badge.roleDefault', 'Role default')}</span> : null}
+                                  <span>{t('ui.perspectives.updated', 'Updated {date}', { date: new Date(item.updatedAt ?? item.createdAt).toLocaleString() })}</span>
+                                </div>
+                              </div>
+                              <Button
+                                size="sm"
+                                variant={isActive ? 'secondary' : 'outline'}
+                                onClick={() => onActivatePerspective(item, 'role')}
+                                disabled={isActive}
+                              >
+                                {isActive ? t('ui.perspectives.actions.active', 'Active') : t('ui.perspectives.actions.use', 'Use')}
+                              </Button>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </section>
+          <section className="p-4 space-y-3">
+            <h3 className="text-sm font-semibold uppercase text-muted-foreground">{t('ui.perspectives.saveCurrentView.title', 'Save current view')}</h3>
+            {apiWarning ? (
+              <div className="rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
+                {apiWarning}
+              </div>
+            ) : null}
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-muted-foreground uppercase">{t('ui.perspectives.form.nameLabel', 'Name')}</label>
+              <input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder={t('ui.perspectives.form.namePlaceholder', 'e.g. My condensed view')}
+                className="w-full h-9 rounded border px-2 text-sm"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="inline-flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={isDefault}
+                  onChange={(e) => setIsDefault(e.target.checked)}
+                />
+                {t('ui.perspectives.form.makeDefault', 'Make this my default perspective')}
+              </label>
+            </div>
+            {canApplyToRoles ? (
+              <div className="space-y-2">
+                <div className="text-xs font-medium text-muted-foreground uppercase">{t('ui.perspectives.form.shareWithRoles', 'Share with roles')}</div>
+                <div className="max-h-32 overflow-auto border rounded p-2 space-y-1">
+                  {roles.length === 0 ? (
+                    <div className="text-xs text-muted-foreground">{t('ui.perspectives.form.noRolesAvailable', 'No roles available.')}</div>
+                  ) : roles.map((role) => (
+                    <label key={role.id} className="flex items-center gap-2 text-sm">
+                      <input
+                        type="checkbox"
+                        checked={applyToRoles.includes(role.id)}
+                        onChange={() => toggleRoleSelection(role.id)}
+                      />
+                      <span>{role.name}</span>
+                    </label>
+                  ))}
+                </div>
+                <label className="inline-flex items-center gap-2 text-sm">
+                  <input
+                    type="checkbox"
+                    checked={setRoleDefault}
+                    onChange={(e) => setSetRoleDefault(e.target.checked)}
+                    disabled={applyToRoles.length === 0}
+                  />
+                  {t('ui.perspectives.form.setRoleDefault', 'Set as default for selected roles')}
+                </label>
+              </div>
+            ) : null}
+            {error ? <div className="text-sm text-red-600">{error}</div> : null}
+            <Button size="sm" onClick={() => void handleSave()} disabled={saving || !name.trim() || Boolean(apiWarning)}>
+              {saving ? t('ui.perspectives.form.saving', 'Saving…') : t('ui.perspectives.form.save', 'Save perspective')}
+            </Button>
+          </section>
+          <section className="p-4 space-y-3">
+            <h3 className="text-sm font-semibold uppercase text-muted-foreground">{t('ui.perspectives.form.columns', 'Columns')}</h3>
+            <div className="space-y-2">
+              {columnOptions.map((col, index) => (
+                <div key={col.id} className="flex items-center justify-between gap-2 rounded border px-3 py-2 bg-card">
+                  <label className="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={col.visible}
+                      onChange={(e) => onToggleColumn(col.id, e.target.checked)}
+                      disabled={!col.canHide}
+                    />
+                    <span>{col.label}</span>
+                  </label>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => onMoveColumn(col.id, 'up')}
+                      disabled={index === 0}
+                    >
+                      ↑
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => onMoveColumn(col.id, 'down')}
+                      disabled={index === columnOptions.length - 1}
+                    >
+                      ↓
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/backend/RowActions.tsx

@@ -0,0 +1,151 @@
+"use client"
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type RowActionItem = {
+  id?: string
+  label: string
+  onSelect?: () => void
+  href?: string
+  destructive?: boolean
+}
+
+export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
+  if (items.length === 0) return null
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const btnRef = React.useRef<HTMLButtonElement>(null)
+  const menuRef = React.useRef<HTMLDivElement>(null)
+  const hoverTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  const [anchorRect, setAnchorRect] = React.useState<DOMRect | null>(null)
+  const [direction, setDirection] = React.useState<'down' | 'up'>('down')
+
+  const updatePosition = React.useCallback(() => {
+    if (!btnRef.current) return
+    const rect = btnRef.current.getBoundingClientRect()
+    setAnchorRect(rect)
+    // Decide whether to open up or down based on available viewport space
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+    setDirection(spaceBelow < 180 && spaceAbove > spaceBelow ? 'up' : 'down')
+  }, [])
+
+  React.useEffect(() => {
+    if (!open) return
+    updatePosition()
+    function onDocClick(e: MouseEvent) {
+      const t = e.target as Node
+      if (menuRef.current && !menuRef.current.contains(t) && btnRef.current && !btnRef.current.contains(t)) {
+        setOpen(false)
+      }
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false)
+        btnRef.current?.focus()
+      }
+    }
+    function onScrollOrResize() {
+      updatePosition()
+    }
+    document.addEventListener('mousedown', onDocClick)
+    document.addEventListener('keydown', onKey)
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+    return () => {
+      document.removeEventListener('mousedown', onDocClick)
+      document.removeEventListener('keydown', onKey)
+      window.removeEventListener('scroll', onScrollOrResize, true)
+      window.removeEventListener('resize', onScrollOrResize)
+    }
+  }, [open, updatePosition])
+
+  // Cleanup timeout on unmount
+  React.useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const handleMouseEnter = () => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current)
+    }
+    setOpen(true)
+  }
+
+  const handleMouseLeave = () => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setOpen(false)
+    }, 150) // Small delay to prevent flickering when moving to menu
+  }
+
+  return (
+    <div
+      className="relative inline-block text-left"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <button
+        ref={btnRef}
+        type="button"
+        className="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-accent"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => { setOpen((v) => !v); requestAnimationFrame(updatePosition) }}
+      >
+        <span aria-hidden="true">⋯</span>
+        <span className="sr-only">{t('ui.rowActions.openActions', 'Open actions')}</span>
+      </button>
+      {open && anchorRect && createPortal(
+        <div
+          ref={menuRef}
+          role="menu"
+          className="fixed w-44 rounded-md border bg-background p-1 shadow focus:outline-none z-[1000]"
+          style={{
+            top: direction === 'down' ? anchorRect.bottom + 8 : anchorRect.top - 8,
+            left: anchorRect.right,
+            transform: `translate(-100%, ${direction === 'down' ? '0' : '-100%'})`,
+          }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {items.map((it, idx) => (
+            it.href ? (
+              <a
+                key={idx}
+                href={it.href}
+                className={`block w-full text-left px-2 py-1 text-sm rounded hover:bg-accent ${it.destructive ? 'text-red-600' : ''}`}
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  setOpen(false)
+                }}
+              >
+                {it.label}
+              </a>
+            ) : (
+              <button
+                key={idx}
+                type="button"
+                className={`block w-full text-left px-2 py-1 text-sm rounded hover:bg-accent ${it.destructive ? 'text-red-600' : ''}`}
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  setOpen(false)
+                  it.onSelect?.()
+                }}
+              >
+                {it.label}
+              </button>
+            )
+          ))}
+        </div>,
+        document.body
+      )}
+    </div>
+  )
+}

package/src/backend/TruncatedCell.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from 'react'
+import { SimpleTooltip } from '../primitives/tooltip'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type TruncatedCellProps = {
+  children: React.ReactNode
+  /** Maximum width for the cell content. Can be a Tailwind class (e.g., 'max-w-[200px]') or CSS value */
+  maxWidth?: string
+  /** Custom class name for the wrapper */
+  className?: string
+  /** Tooltip content - if not provided, will try to extract text from children */
+  tooltipContent?: React.ReactNode
+  /** Disable truncation and tooltip */
+  disabled?: boolean
+}
+
+/**
+ * Extracts text content from React nodes for tooltip display
+ */
+function extractTextContent(node: React.ReactNode): string {
+  if (node == null) return ''
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  if (typeof node === 'boolean') return ''
+  if (Array.isArray(node)) {
+    return node.map(extractTextContent).join('')
+  }
+  if (React.isValidElement(node)) {
+    // Handle React elements - extract text from props.children
+    const props = node.props as Record<string, unknown>
+    if (props) {
+      // First try children
+      if (props.children != null) {
+        const childText = extractTextContent(props.children as React.ReactNode)
+        if (childText) return childText
+      }
+      // Try common text props
+      if (typeof props.value === 'string') return props.value
+      if (typeof props.label === 'string') return props.label
+      if (typeof props.title === 'string') return props.title
+    }
+  }
+  // Try to convert to string as last resort
+  if (node && typeof node === 'object' && 'toString' in node) {
+    const str = String(node)
+    if (str !== '[object Object]') return str
+  }
+  return ''
+}
+
+/**
+ * A cell wrapper that truncates content and shows a tooltip on hover
+ * only when the content is wider than the available space.
+ *
+ * @example
+ * <TruncatedCell maxWidth="max-w-[200px]">
+ *   <span>This is a very long text that will be truncated</span>
+ * </TruncatedCell>
+ */
+export function TruncatedCell({
+  children,
+  maxWidth = 'max-w-[150px]',
+  className,
+  tooltipContent,
+  disabled = false,
+}: TruncatedCellProps) {
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const [isTruncated, setIsTruncated] = React.useState(false)
+
+  // Get tooltip content - prefer explicit tooltipContent, fall back to extracting from children
+  const resolvedTooltipContent = tooltipContent ?? extractTextContent(children)
+
+  // Check if content is truncated after render and on resize
+  React.useEffect(() => {
+    const checkTruncation = () => {
+      const el = contentRef.current
+      if (el) {
+        setIsTruncated(el.scrollWidth > el.clientWidth)
+      }
+    }
+
+    // Check on mount
+    checkTruncation()
+
+    // Use ResizeObserver to detect size changes
+    const el = contentRef.current
+    if (el) {
+      const observer = new ResizeObserver(checkTruncation)
+      observer.observe(el)
+      return () => observer.disconnect()
+    }
+  }, [children, maxWidth])
+
+  if (disabled) {
+    return <>{children}</>
+  }
+
+  // Determine if maxWidth is a Tailwind class or a CSS value
+  const isTailwindClass = maxWidth.startsWith('max-w-')
+  const styleMaxWidth = isTailwindClass ? undefined : maxWidth
+  const classMaxWidth = isTailwindClass ? maxWidth : ''
+
+  const content = (
+    <div
+      ref={contentRef}
+      className={cn(
+        'overflow-hidden text-ellipsis whitespace-nowrap',
+        classMaxWidth,
+        className
+      )}
+      style={styleMaxWidth ? { maxWidth: styleMaxWidth } : undefined}
+    >
+      {children}
+    </div>
+  )
+
+  // Only show tooltip when content is actually truncated
+  if (!resolvedTooltipContent || !isTruncated) {
+    return content
+  }
+
+  return (
+    <SimpleTooltip
+      content={resolvedTooltipContent}
+      side="top"
+      delayDuration={300}
+    >
+      {content}
+    </SimpleTooltip>
+  )
+}