main
/**
* The board body: a kanban grouped by priority, or the same rows as a table.
*
* The API has no column concept — an issue is open/closed and carries a
* priority — so the kanban columns *are* the priorities, which makes dragging a
* card a real `PATCH …/issues/{id} {priority}` write instead of a client-side
* illusion. Loading / empty / error / out-of-range paging are all rendered from
* the request state, never from placeholder data.
*/
import {
IconArrowRight as ArrowRight,
IconCircle as Circle,
IconCircleCheck as CircleCheck,
IconInbox as Inbox,
IconLoader2 as Loader2,
IconFlag as MilestoneIcon,
IconPlus as Plus,
} from '@tabler/icons-react'
import { useState } from 'react'
import './board-polish.css'
import { ErrorPanel, Markdown } from '@app/components'
import {
type Board,
type BoardRef,
type IssueBoardView,
type IssueListItem,
type IssuePriority,
issueLabel,
issueRef,
issueStamp,
type Milestone,
normalizeColor,
PRIORITIES,
priorityOf,
STATES,
updateIssue,
} from '@app/domains/issues/model'
import { useT } from '@app/i18n'
import type { BoardData } from '../model/use-board-data'
import { AvatarStack, DueChip, FilterMenu, PriorityBadge, PriorityGlyph } from './parts'
export interface IssueBoardBodyProps {
boardRef: BoardRef
data: BoardData
view: IssueBoardView
filtered: boolean
onFilter: (updates: Partial<IssueBoardView>) => void
onClear: () => void
/** `issue` is the board-scoped number so the URL stays readable. */
onOpenIssue: (issue: string) => void
onCreate: (preset?: { priority?: IssuePriority }) => void
onChanged: () => void
onRetry: () => void
}
const PAGE_SIZE_FALLBACK = 50
export function IssueBoardBody(props: IssueBoardBodyProps) {
const { t, tc } = useT()
const { data, view } = props
const state = data.issues
const failure = state.error as { code?: number; message?: string } | undefined
const page = state.data
const total = page?.total ?? 0
const limit = page?.limit || PAGE_SIZE_FALLBACK
const offset = page?.offset ?? (view.page - 1) * limit
const loaded = page?.items ?? []
if (failure && loaded.length === 0) {
return (
<div className="w-full rounded-lg border-2 border-shell-hairline bg-shell-surface p-4">
<ErrorPanel
status={typeof failure.code === 'number' ? failure.code : 0}
what={t('issue.board.errorList')}
note={failure.message}
onRetry={props.onRetry}
/>
</div>
)
}
if (!page && state.loading) return <BoardSkeleton columns={view.view === 'board' ? 5 : 1} />
// Paging past the end (a stale `?page=`, or issues deleted meanwhile) would
// otherwise read as "no results" — say what it is and offer the way back.
if (page && loaded.length === 0 && offset > 0) {
return (
<div className="flex w-full flex-col items-center gap-3 rounded-lg border-2 border-shell-hairline bg-shell-surface px-4 py-10 text-center">
<p className="text-[13px]">{tc('issue.board.pageOutOfRange', total, { page: view.page, total, limit })}</p>
<button
type="button"
onClick={() => props.onFilter({ page: 1 })}
className="rounded-md border-2 border-shell-hairline bg-shell-field px-4 py-1.5 text-[13px] transition-colors hover:border-shell-ink"
>
{t('issue.board.backToFirst')}
</button>
</div>
)
}
const rows = loaded
if (rows.length === 0) {
return props.filtered ? (
<EmptyNote
title={t('issue.board.emptyFilteredTitle')}
hint={t('issue.board.emptyFilteredHint')}
action={{ label: t('issue.filter.clear'), onClick: props.onClear }}
/>
) : (
<EmptyNote
title={t('issue.board.emptyTitle')}
hint={t('issue.board.emptyHint')}
action={{ label: t('issue.board.new'), onClick: () => props.onCreate() }}
/>
)
}
return (
<div className="issue-board-body flex min-h-0 w-full flex-col gap-2">
{view.view === 'board' ? <BoardColumns {...props} rows={rows} /> : <IssueList {...props} rows={rows} />}
<Pager view={view} total={total} limit={limit} onFilter={props.onFilter} />
{state.loading ? (
<p className="flex items-center gap-1.5 text-[11.5px] text-shell-ink-muted">
<Loader2 className="h-3 w-3 animate-spin" aria-hidden /> {t('issue.board.refreshing')}
</p>
) : null}
</div>
)
}
/* ------------------------------------------------------------- kanban --- */
function BoardColumns({
boardRef,
rows,
data,
onOpenIssue,
onCreate,
onChanged,
}: IssueBoardBodyProps & { rows: IssueListItem[] }) {
// Optimistic priority while a PATCH is in flight, so a dropped card never
// jumps back. The overrides are stamped with the row set they were painted
// over: as soon as the data changes (reload, page switch) they expire on
// their own, which keeps a failed write from sticking forever.
const { t, tc } = useT()
const stamp = rows.map((row) => row.id).join(',')
const [override, setOverride] = useState<{
stamp: string
moves: Record<string, IssuePriority>
error: string | null
}>({ stamp, moves: {}, error: null })
const fresh = override.stamp === stamp
const moves = fresh ? override.moves : {}
const error = fresh ? override.error : null
const [dragging, setDragging] = useState<string | null>(null)
const [over, setOver] = useState<IssuePriority | null>(null)
async function moveTo(issue: IssueListItem, priority: IssuePriority) {
if (priorityOf(issue.priority).id === priority) return
const base = fresh ? override.moves : {}
setOverride({ stamp, moves: { ...base, [issue.id]: priority }, error: null })
try {
await updateIssue(boardRef, issue.id, { priority })
onChanged()
} catch (err) {
const next = { ...base }
delete next[issue.id]
setOverride({
stamp,
moves: next,
error: t('issue.board.moveFailed', {
priority: priorityOf(priority).label,
reason: (err as Error)?.message ?? t('common.state.unknown'),
}),
})
}
}
return (
<div className="issue-board-columns flex min-h-0 flex-1 gap-3">
{PRIORITIES.map((meta) => {
const cards = rows.filter((issue) => (moves[issue.id] ?? issue.priority) === meta.id)
return (
<section
key={meta.id}
aria-label={tc('issue.board.columnAria', cards.length, { priority: meta.label, count: cards.length })}
data-priority={meta.id}
data-drag-over={over === meta.id || undefined}
onDragOver={(event) => {
event.preventDefault()
setOver(meta.id)
}}
onDragLeave={() => setOver((current) => (current === meta.id ? null : current))}
onDrop={(event) => {
event.preventDefault()
setOver(null)
const id = event.dataTransfer.getData('text/plain') || dragging
const issue = rows.find((row) => row.id === id)
if (issue) void moveTo(issue, meta.id)
setDragging(null)
}}
className={`issue-board-column flex h-full w-[266px] shrink-0 flex-col gap-2 rounded-lg p-2.5 transition-colors ${
over === meta.id ? 'bg-shell-active' : 'bg-shell-board'
}`}
>
<header className="issue-board-column-header flex h-6 shrink-0 items-center gap-2">
<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: meta.color }} aria-hidden />
<span className="text-[14px] font-semibold">{meta.label}</span>
<span className="issue-board-count text-[12px] text-shell-ink-muted">{cards.length}</span>
<button
type="button"
aria-label={t('issue.board.addInColumn', { column: meta.label })}
title={t('issue.board.addInColumn', { column: meta.label })}
onClick={() => onCreate({ priority: meta.id })}
className="issue-board-add ml-auto rounded px-1 text-[15px] leading-none text-shell-ink-muted transition-colors hover:bg-shell-active hover:text-shell-ink"
>
<Plus className="h-4 w-4" aria-hidden />
</button>
</header>
<div className="min-h-0 flex-1 space-y-2 overflow-y-auto pb-1">
{cards.map((issue) => (
<IssueCard
key={issue.id}
issue={{ ...issue, priority: moves[issue.id] ?? issue.priority }}
board={data.board.data}
moving={dragging === issue.id}
milestone={data.milestones.data?.items.find((m) => m.id === issue.milestone_id)}
draggable
onDragStart={() => setDragging(issue.id)}
onDragEnd={() => setDragging(null)}
onOpen={() => onOpenIssue(issueRef(data.board.data, issue.number))}
/>
))}
{cards.length === 0 ? (
<button
type="button"
onClick={() => onCreate({ priority: meta.id })}
className="issue-board-column-empty"
>
<Plus className="h-5 w-5" aria-hidden />
<span>{t('issue.board.addCard')}</span>
<small>{t('issue.board.addCardHint')}</small>
</button>
) : null}
</div>
</section>
)
})}
{error ? (
<p
role="alert"
className="fixed bottom-6 left-1/2 z-40 -translate-x-1/2 rounded-md bg-[#e5484d] px-3 py-2 text-[12.5px] font-medium text-white shadow-lg"
>
{error}
</p>
) : null}
</div>
)
}
function IssueCard({
issue,
board,
milestone,
onOpen,
draggable,
moving,
onDragStart,
onDragEnd,
}: {
issue: IssueListItem
board?: Board
milestone?: Milestone
onOpen: () => void
draggable?: boolean
moving?: boolean
onDragStart?: () => void
onDragEnd?: () => void
}) {
const { t } = useT()
return (
<article
draggable={draggable}
data-moving={moving || undefined}
onDragStart={(event) => {
event.dataTransfer.setData('text/plain', issue.id)
event.dataTransfer.effectAllowed = 'move'
onDragStart?.()
}}
onDragEnd={onDragEnd}
onClick={onOpen}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
onOpen()
}
}}
role="button"
tabIndex={0}
aria-label={t('issue.board.cardAria', { number: issueLabel(board, issue.number), title: issue.title })}
className="issue-board-card cursor-pointer space-y-2 rounded-lg bg-shell-surface p-3 shadow-[0_1px_2px_rgb(28_30_34/8%)] outline-none transition-shadow hover:shadow-[0_2px_8px_rgb(28_30_34/14%)] focus-visible:ring-2 focus-visible:ring-shell-tile"
>
<div className="flex items-start gap-2">
<p className="issue-board-card-title min-w-0 flex-1 text-[13px] font-medium leading-5 break-words">
<Markdown inline>{issue.title}</Markdown>
</p>
<PriorityBadge priority={issue.priority} compact />
</div>
<div className="issue-board-card-meta flex items-center gap-2">
<span className="font-mono text-[11px] text-shell-ink-muted">{issueLabel(board, issue.number)}</span>
{milestone ? (
<span
className="truncate text-[11px] text-shell-ink-muted"
title={t('issue.board.milestoneTitle', { name: milestone.name })}
>
{milestone.name}
</span>
) : null}
<DueChip due={issue.due_at} state={issue.state} />
<span className="ml-auto flex items-center gap-1.5">
<AvatarStack users={issue.assignees} size={23} />
{issue.state === 'closed' ? (
<CircleCheck className="h-3.5 w-3.5 text-shell-ink-muted" aria-label={t('label.issueState.closed')} />
) : null}
</span>
</div>
</article>
)
}
/* --------------------------------------------------------------- list --- */
/**
* Linear-style rows: priority mark, state mark, key, title, then the trailing
* facts (milestone, assignees, updated). No header, no cell borders, no card —
* hover is the only container, so the page reads as one list of issues.
*/
function IssueList({ boardRef, rows, data, onOpenIssue, onChanged }: IssueBoardBodyProps & { rows: IssueListItem[] }) {
const { t } = useT()
// One shared width for the key column: a long prefix (APACHE-17) must not
// wrap, and every row still starts its title at the same x.
const keyChars = Math.max(4, ...rows.map((issue) => issueLabel(data.board.data, issue.number).length))
return (
<div className="issue-list" role="list" aria-label={t('issue.board.tableCaption')}>
{rows.map((issue) => {
const milestone = data.milestones.data?.items.find((item) => item.id === issue.milestone_id)
const open = () => onOpenIssue(issueRef(data.board.data, issue.number))
return (
<div key={issue.id} role="listitem" className="issue-list-row" onClick={open}>
{/* The priority mark is a control inside a clickable row: its own
clicks must not fall through and open the issue. */}
<span className="issue-list-priority" onClick={(event) => event.stopPropagation()}>
<FilterMenu
label={t('issue.board.filter.priority')}
iconOnly
leading={<PriorityGlyph priority={issue.priority} />}
value={issue.priority}
options={PRIORITIES.map((meta) => ({ value: meta.id, label: meta.label, color: meta.color }))}
onChange={async (value) => {
await updateIssue(boardRef, issue.id, { priority: value as IssuePriority }).catch(() => undefined)
onChanged()
}}
/>
</span>
<span className="issue-list-state" data-state={issue.state} title={STATES[issue.state]?.label}>
{issue.state === 'closed' ? (
<CircleCheck className="h-3.5 w-3.5" aria-hidden />
) : (
<Circle className="h-3.5 w-3.5" aria-hidden />
)}
<span className="sr-only">{STATES[issue.state]?.label}</span>
</span>
<span className="issue-list-key" style={{ minWidth: keyChars + 'ch' }}>
{issueLabel(data.board.data, issue.number)}
</span>
<button
type="button"
className="issue-list-title"
title={issue.title}
onClick={(event) => {
event.stopPropagation()
open()
}}
>
<Markdown inline>{issue.title}</Markdown>
</button>
<span className="issue-list-meta">
{(issue.labels ?? []).slice(0, 3).map((label) => (
<span key={label.id} className="issue-list-chip" title={label.name}>
<span
className="issue-list-dot"
style={{ backgroundColor: normalizeColor(label.color) }}
aria-hidden
/>
<span className="issue-list-chip-text">{label.name}</span>
</span>
))}
{(issue.labels ?? []).length > 3 ? (
<span className="issue-list-chip">+{(issue.labels ?? []).length - 3}</span>
) : null}
{milestone ? (
<span className="issue-list-chip" title={t('issue.board.milestoneTitle', { name: milestone.name })}>
<MilestoneIcon className="h-3 w-3 shrink-0" aria-hidden />
<span className="issue-list-chip-text">{milestone.name}</span>
</span>
) : null}
<AvatarStack users={issue.assignees} max={2} size={20} />
<span className="issue-list-date" title={issue.updated_at ?? issue.created_at}>
{issueStamp(issue.updated_at ?? issue.created_at)}
</span>
</span>
</div>
)
})}
</div>
)
}
/* --------------------------------------------------------------- misc --- */
function Pager({
view,
total,
limit,
onFilter,
}: {
view: IssueBoardView
total: number
limit: number
onFilter: (updates: Partial<IssueBoardView>) => void
}) {
const { t, tc } = useT()
const pages = Math.max(1, Math.ceil(total / limit))
if (pages <= 1) return null
const page = Math.min(view.page, pages)
return (
<div className="flex shrink-0 items-center justify-end gap-2 text-[12.5px] text-shell-ink-muted">
<span>{tc('issue.board.pager', total, { page, pages, total })}</span>
<button
type="button"
disabled={page <= 1}
onClick={() => onFilter({ page: page - 1 })}
className="rounded-md border-2 border-shell-hairline bg-shell-field px-2 py-1 transition-colors hover:border-shell-ink disabled:opacity-40"
>
{t('issue.board.prev')}
</button>
<button
type="button"
disabled={page >= pages}
onClick={() => onFilter({ page: page + 1 })}
className="rounded-md border-2 border-shell-hairline bg-shell-field px-2 py-1 transition-colors hover:border-shell-ink disabled:opacity-40"
>
{t('issue.board.next')}
</button>
</div>
)
}
/** Public so the route layer can hold the frame while a preference decides the layout. */
export function BoardSkeleton({ columns }: { columns: number }) {
const { t } = useT()
return (
<div
className="issue-board-columns issue-board-skeleton flex min-h-0 flex-1 gap-3"
role="status"
aria-label={t('issue.board.loading')}
aria-busy
>
{Array.from({ length: columns }, (_, index) => (
<section
key={index}
className="issue-board-column flex h-full w-[266px] shrink-0 flex-col gap-2 rounded-lg bg-shell-board p-2.5"
>
<div className="h-6 w-24 rounded-full bg-shell-active" />
{Array.from({ length: 3 }, (_, card) => (
<div key={card} className="space-y-2 rounded-lg bg-shell-surface p-3">
<div className="h-4 rounded-full bg-shell-active" />
<div className="h-4 w-2/3 rounded-full bg-shell-active" />
</div>
))}
</section>
))}
</div>
)
}
function EmptyNote({
title,
hint,
action,
}: {
title: string
hint: string
action?: { label: string; onClick: () => void }
}) {
return (
<div className="issue-board-empty flex w-full flex-col items-center gap-2 rounded-lg border-2 border-dashed border-shell-hairline bg-shell-board px-4 py-16 text-center">
<span className="issue-board-empty-icon">
<Inbox className="h-7 w-7" strokeWidth={1.6} aria-hidden />
</span>
<p className="text-[14px] font-semibold">{title}</p>
<p className="max-w-sm text-[12.5px] text-shell-ink-muted">{hint}</p>
{action ? (
<button
type="button"
onClick={action.onClick}
className="mt-2 inline-flex items-center gap-2 rounded-md bg-shell-action px-3.5 py-1.5 text-[13px] font-semibold text-white transition-[filter] hover:brightness-95"
>
{action.label}
<ArrowRight className="h-4 w-4" aria-hidden />
</button>
) : null}
</div>
)
}