@flamingo-stack/openframe-frontend-core 0.0.218 → 0.0.219

package/src/components/shared/roadmap/roadmap-view.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+/**
+ * `<RoadmapView />` — the SELF-CONTAINED roadmap LIST surface.
+ *
+ * Fetches the roadmap list via the shared `useSelfFetch` hook and renders the
+ * pure controlled `<RoadmapGrid>` (kept controlled so related-content rails can
+ * still pass `items`). The host configures only **api routes**: the list
+ * `endpoint` (default `/api/roadmap`), the per-task `buildRefreshUrl`, and the
+ * vote endpoint via `votingOptions`. Optional `initialItems` hydrates SSR.
+ */
+
+import { useMemo } from 'react'
+
+import { useSearchParams } from '../../../embed-shims'
+import { LoadError } from '../../ui/error-state'
+import { useSelfFetch } from '../../../hooks/use-self-fetch'
+import type { RoadmapItem } from '../../chat/types/entities/roadmap-item'
+import { RoadmapGrid } from './roadmap-grid'
+import { RoadmapGridSkeleton } from './roadmap-grid-skeleton'
+import type { UseRoadmapVotingOptions } from './use-roadmap-voting'
+import { DEV_SECTION_PARAM_KEYS } from '../../../utils/dev-sections/dev-section-param-keys'
+
+const DEFAULT_ENDPOINT = '/api/roadmap'
+// Defaults sourced from the ONE param-key registry the chrome (OPENFRAME_DEV_SECTIONS) also
+// reads, so the chrome's written `?key=` and this view's read can't silently diverge.
+const DEFAULT_SEARCH_PARAM_KEY = DEV_SECTION_PARAM_KEYS.search
+const DEFAULT_STATUS_PARAM_KEY = DEV_SECTION_PARAM_KEYS.status
+
+export interface RoadmapViewProps {
+  /** GET list endpoint (the api route). Returns `{ items }`. Default
+   *  `/api/roadmap`. */
+  endpoint?: string
+  /** Optional SSR hydrate — skips the initial client fetch. */
+  initialItems?: RoadmapItem[]
+  showLeftMargin?: boolean
+  /** Per-task refresh URL builder (after a vote). Default `/api/roadmap/<id>`. */
+  buildRefreshUrl?: (taskId: string) => string
+  /** Voting hook options (vote endpoint + storage key). */
+  votingOptions?: UseRoadmapVotingOptions
+  /** URL param key for the search input — MUST match the section chrome
+   *  (`DevSectionView`) that writes it. Default `'search'`. */
+  searchParamKey?: string
+  /** URL param key for the status filter. Default `'status'` (the roadmap
+   *  section's `filter.paramKey`). `'all'` means no filter. */
+  statusParamKey?: string
+}
+
+export function RoadmapView({
+  endpoint = DEFAULT_ENDPOINT,
+  initialItems,
+  showLeftMargin,
+  buildRefreshUrl,
+  votingOptions,
+  searchParamKey = DEFAULT_SEARCH_PARAM_KEY,
+  statusParamKey = DEFAULT_STATUS_PARAM_KEY,
+}: RoadmapViewProps = {}) {
+  // Read the search + status params the section chrome (`DevSectionView`) writes
+  // and fold them INTO the fetch url so the url IS the cache key — the list
+  // refetches filtered whenever the controls change. Mirrors `ProductReleasesView`.
+  const searchParams = useSearchParams()
+  const search = searchParams.get(searchParamKey) || ''
+  const status = searchParams.get(statusParamKey) || 'all'
+  const listParams = new URLSearchParams()
+  if (search) listParams.set(searchParamKey, search)
+  if (status && status !== 'all') listParams.set(statusParamKey, status)
+  const qs = listParams.toString()
+  const url = qs ? `${endpoint}?${qs}` : endpoint
+
+  // Memoize so the SSR `initialItems` wrapper keeps a STABLE identity — else the
+  // hook's initialData re-sync effect fires every render and clobbers the
+  // optimistic vote patch below.
+  const initialData = useMemo(() => (initialItems ? { items: initialItems } : undefined), [initialItems])
+  const { data, setData, isLoading, error, reload } = useSelfFetch<{ items?: RoadmapItem[] }>(
+    url,
+    { initialData },
+  )
+  const items = data?.items ?? []
+
+  if (error) {
+    return <LoadError message="Failed to load roadmap." onRetry={reload} />
+  }
+  // Skeleton only while the FIRST fetch is in flight (no data yet) — a malformed
+  // body lacking `items` renders the grid (empty), never a stuck skeleton.
+  if (isLoading && !data) {
+    return <RoadmapGridSkeleton showLeftMargin={showLeftMargin} />
+  }
+
+  return (
+    <RoadmapGrid
+      items={items}
+      showLeftMargin={showLeftMargin}
+      buildRefreshUrl={buildRefreshUrl}
+      votingOptions={votingOptions}
+      // Full-page roadmap → collapsible quarter grouping (the shared RoadmapGrid
+      // capability; flat grids stay the RoadmapGrid default). When the chrome's
+      // search / status filter is active, expand every quarter so matches aren't hidden.
+      groupByQuarter
+      hasActiveFilters={search !== '' || status !== 'all'}
+      // After a vote refreshes a single task, patch it into the fetched list so
+      // the displayed counts stay live.
+      onItemUpdate={(updated) =>
+        setData((prev) =>
+          prev
+            ? { ...prev, items: (prev.items ?? []).map((it) => (it.id === updated.id ? updated : it)) }
+            : prev,
+        )
+      }
+    />
+  )
+}

package/src/components/ui/color-preset-select.tsx

@@ -0,0 +1,309 @@
+'use client'
+
+import * as React from 'react'
+import { HexColorPicker } from 'react-colorful'
+import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import { cn } from '../../utils/cn'
+import { HEX_PATTERN, hexToRgb, hslToRgb, rgbToHex, rgbToHsl } from '../../utils/ods-color-utils'
+import { ActionsMenuDropdown, type ActionsMenuGroup } from './actions-menu'
+import { Input } from './input'
+import { InputTrigger } from './input-trigger'
+
+export interface ColorPreset {
+  key: string
+  label: string
+  color: string
+}
+
+// Ticket-status palette.
+export const TICKET_STATUS_COLOR_PRESETS: readonly ColorPreset[] = [
+  { key: 'green', label: 'Green', color: '#5ea62e' },
+  { key: 'lime', label: 'Lime', color: '#8bc34a' },
+  { key: 'teal', label: 'Teal', color: '#4db6ac' },
+  { key: 'sky', label: 'Sky', color: '#4fc3f7' },
+  { key: 'periwinkle', label: 'Periwinkle', color: '#7e9cd8' },
+  { key: 'lavender', label: 'Lavender', color: '#b39ddb' },
+  { key: 'yellow', label: 'Yellow', color: '#e1b32f' },
+  { key: 'sand', label: 'Sand', color: '#f0c674' },
+  { key: 'peach', label: 'Peach', color: '#f39c7a' },
+  { key: 'red', label: 'Red', color: '#f36666' },
+  { key: 'pink', label: 'Pink', color: '#e988a8' },
+  { key: 'neutral', label: 'Neutral', color: '#b0b0b0' },
+]
+
+export const CUSTOM_PRESET_KEY = 'custom'
+export const DEFAULT_CUSTOM_STATUS_COLOR = '#888888'
+
+function ColorSwatch({ color, className }: { color: string; className?: string }) {
+  return (
+    <span
+      aria-hidden
+      className={cn('inline-block size-4 shrink-0 rounded-sm', className)}
+      style={{ backgroundColor: color }}
+    />
+  )
+}
+
+function TriggerChevron() {
+  return (
+    <Chevron02DownIcon
+      size={24}
+      className="transition-transform duration-200 group-data-[state=open]:rotate-180"
+    />
+  )
+}
+
+export interface ColorPresetSelectProps {
+  value: string
+  presetKey?: string
+  onChange: (next: { color: string; preset?: string }) => void
+  presets?: readonly ColorPreset[]
+  disabled?: boolean
+  className?: string
+}
+
+export function ColorPresetSelect({
+  value,
+  presetKey,
+  onChange,
+  presets = TICKET_STATUS_COLOR_PRESETS,
+  disabled,
+  className,
+}: ColorPresetSelectProps) {
+  const selectedPreset = presets.find(p => p.key === presetKey)
+  const isCustom = !selectedPreset
+  const displayLabel = selectedPreset?.label ?? 'Custom'
+  const displayColor = selectedPreset?.color ?? value
+
+  const groups: ActionsMenuGroup[] = [
+    {
+      items: [
+        ...presets.map(p => ({
+          id: p.key,
+          label: p.label,
+          icon: <ColorSwatch color={p.color} />,
+          onClick: () => onChange({ color: p.color, preset: p.key }),
+        })),
+        {
+          id: CUSTOM_PRESET_KEY,
+          label: 'Custom',
+          icon: <ColorSwatch color={isCustom ? value : DEFAULT_CUSTOM_STATUS_COLOR} />,
+          onClick: () => onChange({ color: value, preset: undefined }),
+        },
+      ],
+    },
+  ]
+
+  return (
+    <ActionsMenuDropdown
+      groups={groups}
+      align="start"
+      sideOffset={4}
+      customTrigger={
+        <InputTrigger
+          disabled={disabled}
+          aria-label={`Color: ${displayLabel}`}
+          startIcon={<ColorSwatch color={displayColor} />}
+          selectedLabel={displayLabel}
+          endIcon={<TriggerChevron />}
+          className={cn('group', className)}
+        />
+      }
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ColorPickerInput — saturation/value + hue + HEX/RGB/HSL inputs
+// Public contract: `value` and `onChange` are always hex (#rrggbb).
+// Conversion helpers live in `utils/ods-color-utils`.
+// ---------------------------------------------------------------------------
+
+const FORMATS = ['HEX', 'RGB', 'HSL'] as const
+type ColorFormat = (typeof FORMATS)[number]
+
+// Channel inputs are number-shaped and centered; HEX is text-shaped and left-aligned.
+// Both target the Input component's inner <input> via the descendant selector.
+// `flex-1 min-w-0` lets each input share the row width and shrink below content;
+// without it, Input's `w-full` outer makes siblings overflow the popover.
+const channelInputClass = 'flex-1 min-w-0 [&_input]:text-center [&_input]:tabular-nums'
+const hexInputClass = 'flex-1 min-w-0 [&_input]:uppercase'
+
+function HexInputs({ value, onChange }: { value: string; onChange: (hex: string) => void }) {
+  const [draft, setDraft] = React.useState(value)
+  React.useEffect(() => setDraft(value), [value])
+
+  const commit = () => {
+    const candidate = (draft.startsWith('#') ? draft : `#${draft}`).toLowerCase()
+    if (HEX_PATTERN.test(candidate)) onChange(candidate)
+    else setDraft(value)
+  }
+
+  return (
+    <Input
+      type="text"
+      value={draft}
+      onChange={e => setDraft(e.target.value)}
+      onBlur={commit}
+      onKeyDown={e => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          commit()
+        }
+      }}
+      spellCheck={false}
+      aria-label="Hex color value"
+      className={hexInputClass}
+    />
+  )
+}
+
+function ChannelInput({
+  value,
+  min,
+  max,
+  ariaLabel,
+  onCommit,
+}: {
+  value: number
+  min: number
+  max: number
+  ariaLabel: string
+  onCommit: (next: number) => void
+}) {
+  const [draft, setDraft] = React.useState(String(value))
+  React.useEffect(() => setDraft(String(value)), [value])
+
+  const commit = () => {
+    const parsed = Number.parseInt(draft, 10)
+    if (!Number.isFinite(parsed)) {
+      setDraft(String(value))
+      return
+    }
+    onCommit(Math.max(min, Math.min(max, parsed)))
+  }
+
+  return (
+    <Input
+      type="text"
+      inputMode="numeric"
+      pattern="[0-9]*"
+      value={draft}
+      onChange={e => setDraft(e.target.value.replace(/[^0-9]/g, ''))}
+      onBlur={commit}
+      onKeyDown={e => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          commit()
+        }
+      }}
+      aria-label={ariaLabel}
+      className={channelInputClass}
+    />
+  )
+}
+
+function RgbInputs({ value, onChange }: { value: string; onChange: (hex: string) => void }) {
+  const rgb = hexToRgb(value) ?? { r: 0, g: 0, b: 0 }
+  const update = (next: { r?: number; g?: number; b?: number }) => {
+    const r = next.r ?? rgb.r
+    const g = next.g ?? rgb.g
+    const b = next.b ?? rgb.b
+    onChange(rgbToHex(r, g, b))
+  }
+  return (
+    <>
+      <ChannelInput value={rgb.r} min={0} max={255} ariaLabel="Red" onCommit={r => update({ r })} />
+      <ChannelInput value={rgb.g} min={0} max={255} ariaLabel="Green" onCommit={g => update({ g })} />
+      <ChannelInput value={rgb.b} min={0} max={255} ariaLabel="Blue" onCommit={b => update({ b })} />
+    </>
+  )
+}
+
+function HslInputs({ value, onChange }: { value: string; onChange: (hex: string) => void }) {
+  const rgb = hexToRgb(value) ?? { r: 0, g: 0, b: 0 }
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b)
+  const update = (next: { h?: number; s?: number; l?: number }) => {
+    const h = next.h ?? hsl.h
+    const s = next.s ?? hsl.s
+    const l = next.l ?? hsl.l
+    const out = hslToRgb(h, s, l)
+    onChange(rgbToHex(out.r, out.g, out.b))
+  }
+  return (
+    <>
+      <ChannelInput value={hsl.h} min={0} max={360} ariaLabel="Hue" onCommit={h => update({ h })} />
+      <ChannelInput value={hsl.s} min={0} max={100} ariaLabel="Saturation" onCommit={s => update({ s })} />
+      <ChannelInput value={hsl.l} min={0} max={100} ariaLabel="Lightness" onCommit={l => update({ l })} />
+    </>
+  )
+}
+
+export interface ColorPickerInputProps {
+  value: string
+  onChange: (color: string) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function ColorPickerInput({ value, onChange, disabled, className }: ColorPickerInputProps) {
+  const [open, setOpen] = React.useState(false)
+  const [format, setFormat] = React.useState<ColorFormat>('HEX')
+
+  const formatGroups: ActionsMenuGroup[] = [
+    {
+      items: FORMATS.map(f => ({
+        id: f,
+        label: f,
+        onClick: () => setFormat(f),
+      })),
+    },
+  ]
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <InputTrigger
+          disabled={disabled}
+          aria-label="Pick custom color"
+          startIcon={<ColorSwatch color={value} />}
+          selectedLabel={<span className="uppercase">{value}</span>}
+          endIcon={<TriggerChevron />}
+          className={cn('group', className)}
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        sideOffset={4}
+        className="z-[1400] w-[320px] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)] text-ods-text-primary shadow-md [&_.react-colorful]:!w-full [&_.react-colorful]:!h-[190px] [&_.react-colorful\\_\\_saturation]:!rounded-sm [&_.react-colorful\\_\\_last-control]:!rounded-lg [&_.react-colorful\\_\\_hue]:!h-4 [&_.react-colorful\\_\\_hue]:!mt-[var(--spacing-system-m)]"
+      >
+        <div className="flex flex-col gap-[var(--spacing-system-m)]">
+          <HexColorPicker color={value} onChange={onChange} />
+          <div className="flex items-center gap-[var(--spacing-system-xs)]">
+            <ActionsMenuDropdown
+              groups={formatGroups}
+              align="start"
+              sideOffset={4}
+              contentClassName="z-[1500]"
+              customTrigger={
+                <InputTrigger
+                  aria-label={`Color format: ${format}`}
+                  selectedLabel={format}
+                  endIcon={<TriggerChevron />}
+                  className="group w-24 shrink-0"
+                />
+              }
+            />
+            <div className="flex flex-1 min-w-0 items-center gap-[var(--spacing-system-xs)]">
+              {format === 'HEX' && <HexInputs value={value} onChange={onChange} />}
+              {format === 'RGB' && <RgbInputs value={value} onChange={onChange} />}
+              {format === 'HSL' && <HslInputs value={value} onChange={onChange} />}
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+

package/src/components/ui/index.ts

@@ -59,6 +59,7 @@ export * from './hover-dropdown'
 export * from '../chat'
 export * from '../layout/list-page-layout'
 export * from '../layout/page-container'
+export * from '../layout/page-heading'
 export * from '../layout/page-layout'
 export * from '../layout/article-detail-layout'
 export { ToggleGroup, ToggleGroupItem } from '../toggle-group'
@@ -147,6 +148,8 @@ export * from './image-uploader'
 
 // Ticket components
 export * from './ticket-status-tag'
+export * from './ticket-status-config-row'
+export * from './color-preset-select'
 export * from './assignee-dropdown'
 export * from './ticket-info-section'
 export * from './ticket-detail-section'

package/src/components/ui/input.tsx

@@ -104,7 +104,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             // File input adjustments
             "file:border-0 file:bg-transparent",
             // Disabled
-            "disabled:cursor-not-allowed disabled:placeholder:text-ods-border",
+            "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
             // Touch
             "touch-manipulation",
             // Autofill override

package/src/components/ui/ticket-info-section.tsx

@@ -7,7 +7,7 @@ import { cn } from "../../utils/cn"
 import { AssigneeDropdown, type TicketAssigneeOption } from "./assignee-dropdown"
 import { SquareAvatar } from "./square-avatar"
 import { Tag } from "./tag"
-import { TicketStatusTag } from "./ticket-status-tag"
+import { TicketStatusTag, type TicketStatusTagOption } from "./ticket-status-tag"
 import { TicketDetailSection } from "./ticket-detail-section"
 import { type TicketAttachment, TicketAttachmentsList } from "./ticket-attachments-list"
 import type { TicketNote } from "./ticket-note-card"
@@ -32,6 +32,16 @@ export interface TicketInfoSectionProps {
   }
   /** Status tag */
   status?: string
+  /** Display label for the status tag (e.g. a custom status name). */
+  statusLabel?: string
+  /** Hex color for the status tag (e.g. a custom status color). */
+  statusColor?: string
+  /** When provided, the status tag becomes an inline changer with these options. */
+  statusOptions?: TicketStatusTagOption[]
+  /** Called with the chosen status id from the inline status dropdown. */
+  onStatusSelect?: (id: string) => void
+  /** Disables the inline status dropdown while a change is in flight. */
+  isStatusPending?: boolean
   /** Expand button click handler */
   onExpand?: () => void
   /** Whether the section is expanded */
@@ -106,6 +116,11 @@ export function TicketInfoSection({
   organization,
   device,
   status,
+  statusLabel,
+  statusColor,
+  statusOptions,
+  onStatusSelect,
+  isStatusPending,
   onExpand,
   expanded = false,
   className,
@@ -172,9 +187,16 @@ export function TicketInfoSection({
 
         {/* Status tag + expand button */}
         <div className="flex items-center gap-4 min-w-0">
-          {status && (
+          {(status || statusLabel) && (
             <div className="min-w-0">
-              <TicketStatusTag status={status} />
+              <TicketStatusTag
+                status={status ?? ""}
+                label={statusLabel}
+                color={statusColor}
+                options={statusOptions}
+                onSelect={onStatusSelect}
+                isPending={isStatusPending}
+              />
             </div>
           )}
           {onExpand && (

package/src/components/ui/ticket-status-config-row.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core'
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { DraggerIcon } from '../icons-v2-generated/interface/dragger-icon'
+import { TrashIcon } from '../icons-v2-generated/interface/trash-icon'
+import { InfoCircleIcon } from '../icons-v2-generated/signs-and-symbols/info-circle-icon'
+import { Button } from './button'
+import { ColorPresetSelect, ColorPickerInput } from './color-preset-select'
+import { Input } from './input'
+import { type TagProps } from './tag'
+import { TicketStatusTag } from './ticket-status-tag'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+
+type SystemTagVariant = Extract<TagProps['variant'], 'outline' | 'primary'>
+
+export interface TicketStatusConfigRowProps {
+  variant: 'system' | 'custom'
+  /**
+   * Canonical ticket-status key for system rows (e.g. 'ACTIVE', 'RESOLVED'),
+   * or the row's unique id for custom rows. Forwarded to TicketStatusTag.
+   */
+  statusKey: string
+  name: string
+  onNameChange?: (value: string) => void
+  color?: string
+  presetKey?: string
+  onColorChange?: (next: { color: string; preset?: string }) => void
+  systemTooltip?: string
+  systemTagVariant?: SystemTagVariant
+  onDelete?: () => void
+  deleteDisabled?: boolean
+  deleteDisabledReason?: string
+  dragHandleProps?: DraggableSyntheticListeners
+  dragHandleAttributes?: DraggableAttributes
+  isDragging?: boolean
+}
+
+function WithLeftTooltip({ content, children }: { content?: string; children: React.ReactElement }) {
+  if (!content) return children
+  return (
+    <TooltipProvider delayDuration={150}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side="left" className="max-w-xs">
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+export function TicketStatusConfigRow({
+  variant,
+  statusKey,
+  name,
+  onNameChange,
+  color,
+  presetKey,
+  onColorChange,
+  systemTooltip,
+  systemTagVariant,
+  onDelete,
+  deleteDisabled,
+  deleteDisabledReason,
+  dragHandleProps,
+  dragHandleAttributes,
+  isDragging,
+}: TicketStatusConfigRowProps) {
+  const isSystem = variant === 'system'
+  const isCustomColor = !isSystem && presetKey === undefined
+  const previewColor = isSystem ? undefined : color
+  const showColorPicker = !isSystem && onColorChange && color !== undefined
+  // Custom rows render as filled pills (no border); system rows take the
+  // page-configured variant (outline/primary). text-h5 already uppercases.
+  const previewVariant: SystemTagVariant | undefined = systemTagVariant ?? (isSystem ? undefined : 'primary')
+
+  return (
+    <div
+      className={cn(
+        'flex w-full items-center gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card',
+        'p-[var(--spacing-system-m)]',
+        isDragging && 'opacity-70 shadow-lg',
+      )}
+    >
+      <div className="flex size-8 shrink-0 items-center justify-center text-ods-text-secondary">
+        {isSystem ? (
+          <DraggerIcon size={24} aria-hidden className="opacity-40" />
+        ) : (
+          <button
+            type="button"
+            aria-label="Drag to reorder"
+            className="flex size-6 cursor-grab items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ods-focus active:cursor-grabbing"
+            {...dragHandleAttributes}
+            {...dragHandleProps}
+          >
+            <DraggerIcon size={24} />
+          </button>
+        )}
+      </div>
+
+      <div className="flex flex-1 min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+        <Input
+          value={name}
+          onChange={e => onNameChange?.(e.target.value)}
+          disabled={isSystem}
+          readOnly={isSystem}
+          aria-label="Status name"
+          maxLength={50}
+        />
+      </div>
+
+      {showColorPicker ? (
+        <div className="flex flex-1 min-w-0">
+          <ColorPresetSelect value={color} presetKey={presetKey} onChange={onColorChange} />
+        </div>
+      ) : (
+        <div aria-hidden className="hidden flex-1 min-w-0 md:block" />
+      )}
+
+      {showColorPicker && isCustomColor ? (
+        <div className="flex flex-1 min-w-0">
+          <ColorPickerInput value={color} onChange={next => onColorChange({ color: next, preset: undefined })} />
+        </div>
+      ) : (
+        <div aria-hidden className="hidden flex-1 min-w-0 md:block" />
+      )}
+
+      <div className="flex h-12 flex-1 min-w-0 items-center justify-end">
+        <TicketStatusTag
+          status={statusKey}
+          label={name || ' '}
+          color={previewColor}
+          variant={previewVariant}
+          showIcon={isSystem}
+          className="max-w-full"
+        />
+      </div>
+
+      <div className="flex size-12 shrink-0 items-center justify-center">
+        {isSystem ? (
+          <WithLeftTooltip content={systemTooltip}>
+            <button
+              type="button"
+              aria-label={systemTooltip ?? 'System status'}
+              className="flex size-6 items-center justify-center text-ods-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
+            >
+              <InfoCircleIcon size={24} />
+            </button>
+          </WithLeftTooltip>
+        ) : (
+          <WithLeftTooltip content={deleteDisabled ? deleteDisabledReason : undefined}>
+            <span className="inline-flex">
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                aria-label="Delete status"
+                disabled={deleteDisabled}
+                onClick={deleteDisabled ? undefined : onDelete}
+                className="size-12"
+              >
+                <TrashIcon className="text-ods-error"/>
+              </Button>
+            </span>
+          </WithLeftTooltip>
+        )}
+      </div>
+    </div>
+  )
+}