@taskmark/ui 0.3.0 → 0.3.1

package/components/board/overall-tree-list.tsx

@@ -0,0 +1,467 @@
+"use client"
+
+import * as React from "react"
+import { ChevronRightIcon } from "lucide-react"
+
+import { AttributionAvatarGroup } from "@/components/board/attribution-avatars"
+import { ChildProgressBar } from "@/components/board/child-progress-bar"
+import {
+  IdCreatedTooltip,
+  SizeWithPointsTooltip,
+  StatusWithSolvedTooltip,
+} from "@/components/board/date-tooltip"
+import { ListFiltersBar } from "@/components/board/list-filters-bar"
+import { ListPagination } from "@/components/board/list-pagination"
+import {
+  statusRowClass,
+  TypeBadge,
+} from "@/components/board/status-badge"
+import { TimeframeFilter } from "@/components/board/timeframe-filter"
+import { ViewWorkItemButton } from "@/components/board/work-item-sheet"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { usePaginatedRows } from "@/hooks/use-paginated-rows"
+import { usePersistedHideCompleted } from "@/hooks/use-persisted-hide-completed"
+import { displayFileName } from "@/lib/display-path"
+import type { ProjectEpicList } from "@/lib/taskmark/epic-types"
+import type { EpicWorkItemsList } from "@/lib/taskmark/flat-work-item-types"
+import type { StoryItemList } from "@/lib/taskmark/item-types"
+import {
+  DEFAULT_TIMEFRAME_FILTER,
+  type TimeframeFilterState,
+} from "@/lib/taskmark/list-filters"
+import {
+  buildOverallTree,
+  filterOverallTree,
+  searchRevealIds,
+  type OverallTreeNode,
+} from "@/lib/taskmark/overall-tree"
+import type { SolvedCompletionSample } from "@/lib/taskmark/timeframe-filters"
+import { cn } from "@/lib/utils"
+
+type OverallTreeListProps = {
+  list: ProjectEpicList
+  workItemsByEpic: Record<string, EpicWorkItemsList>
+  itemsByStory: Record<string, StoryItemList>
+  selectedEpicId?: string | null
+  selectedStoryId?: string | null
+  countableCompletions?: readonly SolvedCompletionSample[]
+  initialHideCompleted?: boolean
+}
+
+function allNodes(nodes: readonly OverallTreeNode[]): OverallTreeNode[] {
+  return nodes.flatMap((node) => [node, ...allNodes(node.children)])
+}
+
+function expansionStorageKey(projectId: string): string {
+  return `taskmark:overall-expanded:${projectId}`
+}
+
+function readExpanded(projectId: string): string[] {
+  if (typeof window === "undefined") return []
+  try {
+    const parsed = JSON.parse(
+      window.sessionStorage.getItem(expansionStorageKey(projectId)) ?? "[]"
+    )
+    return Array.isArray(parsed)
+      ? parsed.filter((value): value is string => typeof value === "string")
+      : []
+  } catch {
+    return []
+  }
+}
+
+function TreeNodeRow({
+  node,
+  level,
+  expanded,
+  selectedEpicId,
+  selectedStoryId,
+  onToggle,
+}: {
+  node: OverallTreeNode
+  level: number
+  expanded: ReadonlySet<string>
+  selectedEpicId: string | null
+  selectedStoryId: string | null
+  onToggle: (id: string) => void
+}) {
+  const expandable = node.kind === "epic" || node.kind === "story"
+  const isExpanded = expandable && expanded.has(node.id)
+  const selected =
+    (node.kind === "epic" && node.id === selectedEpicId) ||
+    (node.kind === "story" && node.id === selectedStoryId)
+  const emptyMessage =
+    node.kind === "epic"
+      ? "No stories, tasks, or bugs under this epic yet."
+      : "No tasks or bugs under this story yet."
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!expandable || (event.key !== "Enter" && event.key !== " ")) return
+    if ((event.target as HTMLElement).closest("button")) return
+    event.preventDefault()
+    onToggle(node.id)
+  }
+
+  return (
+    <div role="none">
+      <div
+        role="treeitem"
+        aria-level={level}
+        aria-expanded={expandable ? isExpanded : undefined}
+        aria-selected={selected}
+        tabIndex={0}
+        data-state={selected ? "selected" : undefined}
+        onKeyDown={onKeyDown}
+        className={cn(
+          "grid min-h-12 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 border-b px-2 py-1.5 outline-none transition-colors hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring sm:grid-cols-[minmax(0,1fr)_5rem_5rem_4rem_5.5rem_3rem]",
+          statusRowClass(node.status),
+          selected && "bg-muted/60"
+        )}
+      >
+        <div
+          className="flex min-w-0 items-center gap-1.5"
+          style={{ paddingInlineStart: `${Math.max(0, level - 1) * 12}px` }}
+        >
+          {expandable ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-11 shrink-0 sm:size-9"
+              aria-label={`${isExpanded ? "Collapse" : "Expand"} ${node.id}`}
+              aria-expanded={isExpanded}
+              onClick={() => onToggle(node.id)}
+            >
+              <ChevronRightIcon
+                className={cn(
+                  "size-4 transition-transform",
+                  isExpanded && "rotate-90"
+                )}
+              />
+            </Button>
+          ) : (
+            <span className="w-11 shrink-0 sm:w-9" aria-hidden />
+          )}
+          <TypeBadge type={node.kind} />
+          <div className="min-w-0">
+            <div className="flex min-w-0 flex-wrap items-baseline gap-x-2">
+              <IdCreatedTooltip id={node.id} created={node.created} />
+              <span className="min-w-0 break-words font-medium leading-snug">
+                {node.title}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="sm:hidden">
+          {node.children.length > 0 ? (
+            <ChildProgressBar
+              done={node.doneWorkItemCount}
+              total={node.workItemCount}
+            />
+          ) : (
+            <StatusWithSolvedTooltip
+              status={node.status}
+              solvedAt={node.completedAt}
+            />
+          )}
+        </div>
+        <div className="hidden sm:block">
+          <SizeWithPointsTooltip size={node.size} points={node.points} />
+        </div>
+        <div className="hidden justify-center sm:flex">
+          <AttributionAvatarGroup
+            reporters={node.reporters}
+            resolvers={node.resolvers}
+          />
+        </div>
+        <div className="hidden tabular-nums sm:block">
+          {node.children.length > 0 ? node.workItemCount : "—"}
+        </div>
+        <div className="hidden justify-center sm:flex">
+          {node.children.length > 0 ? (
+            <ChildProgressBar
+              done={node.doneWorkItemCount}
+              total={node.workItemCount}
+            />
+          ) : (
+            <StatusWithSolvedTooltip
+              status={node.status}
+              solvedAt={node.completedAt}
+            />
+          )}
+        </div>
+        <div className="hidden justify-end sm:flex pl-2">
+          <ViewWorkItemButton
+            label={`View details for ${node.id}`}
+            itemRef={{
+              kind:
+                node.kind === "epic"
+                  ? "epic"
+                  : node.kind === "story"
+                    ? "story"
+                    : "item",
+              id: node.id,
+              title: node.title,
+              filePath: node.filePath,
+              itemType:
+                node.kind === "task" || node.kind === "bug"
+                  ? node.kind
+                  : undefined,
+            }}
+          />
+        </div>
+        <div className="col-span-2 flex justify-end sm:hidden pt-0.5">
+          <ViewWorkItemButton
+            label={`View details for ${node.id}`}
+            itemRef={{
+              kind:
+                node.kind === "epic"
+                  ? "epic"
+                  : node.kind === "story"
+                    ? "story"
+                    : "item",
+              id: node.id,
+              title: node.title,
+              filePath: node.filePath,
+              itemType:
+                node.kind === "task" || node.kind === "bug"
+                  ? node.kind
+                  : undefined,
+            }}
+          />
+        </div>
+      </div>
+      {isExpanded ? (
+        <div role="group">
+          {node.children.length > 0 ? (
+            node.children.map((child) => (
+              <TreeNodeRow
+                key={`${child.kind}:${child.id}:${child.filePath}`}
+                node={child}
+                level={level + 1}
+                expanded={expanded}
+                selectedEpicId={selectedEpicId}
+                selectedStoryId={selectedStoryId}
+                onToggle={onToggle}
+              />
+            ))
+          ) : (
+            <p
+              className="border-b py-3 pr-3 text-sm text-muted-foreground"
+              style={{ paddingInlineStart: `${level * 12 + 44}px` }}
+            >
+              {emptyMessage}
+            </p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export function OverallTreeList({
+  list,
+  workItemsByEpic,
+  itemsByStory,
+  selectedEpicId = null,
+  selectedStoryId = null,
+  countableCompletions = [],
+  initialHideCompleted = false,
+}: OverallTreeListProps) {
+  const { project, errors } = list
+  const tree = React.useMemo(
+    () => buildOverallTree(list, workItemsByEpic, itemsByStory),
+    [list, workItemsByEpic, itemsByStory]
+  )
+  const [query, setQuery] = React.useState("")
+  const [hideCompleted, setHideCompleted] = usePersistedHideCompleted(
+    "epics",
+    initialHideCompleted
+  )
+  const [timeframe, setTimeframe] = React.useState<TimeframeFilterState>(
+    DEFAULT_TIMEFRAME_FILTER
+  )
+  const [expandedIds, setExpandedIds] = React.useState<string[]>(() => [
+    ...(selectedEpicId ? [selectedEpicId] : []),
+    ...(selectedStoryId ? [selectedStoryId] : []),
+  ])
+
+  React.useEffect(() => {
+    let active = true
+    queueMicrotask(() => {
+      if (!active) return
+      setExpandedIds((current) => [
+        ...new Set([
+          ...current,
+          ...readExpanded(project.id),
+          ...(selectedEpicId ? [selectedEpicId] : []),
+          ...(selectedStoryId ? [selectedStoryId] : []),
+        ]),
+      ])
+    })
+    return () => {
+      active = false
+    }
+  }, [project.id, selectedEpicId, selectedStoryId])
+
+  const filtered = React.useMemo(
+    () => filterOverallTree(tree, { query, hideCompleted, timeframe }),
+    [tree, query, hideCompleted, timeframe]
+  )
+  const effectiveExpanded = React.useMemo(
+    () => new Set([...expandedIds, ...searchRevealIds(filtered, query)]),
+    [expandedIds, filtered, query]
+  )
+  const completedAts = React.useMemo(
+    () => allNodes(tree).map((node) => node.completedAt),
+    [tree]
+  )
+  const resetKey = `${project.id}|${query}|${hideCompleted}|${JSON.stringify(timeframe)}`
+  const {
+    pageRows,
+    page,
+    pageSize,
+    totalCount,
+    totalPages,
+    setPage,
+    setPageSize,
+  } = usePaginatedRows(filtered, resetKey)
+
+  React.useEffect(() => {
+    if (!selectedEpicId) return
+    const index = filtered.findIndex((node) => node.id === selectedEpicId)
+    if (index >= 0) setPage(Math.floor(index / pageSize) + 1)
+  }, [selectedEpicId, filtered, pageSize, setPage])
+
+  const toggle = React.useCallback(
+    (id: string) => {
+      setExpandedIds((current) => {
+        const next = new Set(current)
+        if (next.has(id)) next.delete(id)
+        else next.add(id)
+        const values = [...next]
+        try {
+          window.sessionStorage.setItem(
+            expansionStorageKey(project.id),
+            JSON.stringify(values)
+          )
+        } catch {
+          // Session storage may be unavailable in privacy-restricted contexts.
+        }
+        return values
+      })
+    },
+    [project.id]
+  )
+
+  const nestedErrors = [
+    ...Object.values(workItemsByEpic).flatMap((value) => value.errors),
+    ...Object.values(itemsByStory).flatMap((value) => value.errors),
+  ]
+  const allErrors = [
+    ...errors.map((error) => ({
+      filePath: error.filePath,
+      message: error.message,
+    })),
+    ...nestedErrors,
+  ]
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="font-head text-xl">{project.name}</CardTitle>
+        {tree.length > 0 ? (
+          <CardAction>
+            <TimeframeFilter
+              id={`overall-tree-timeframe-${project.id}`}
+              value={timeframe}
+              onChange={setTimeframe}
+              completedAts={completedAts}
+              countableCompletions={countableCompletions}
+            />
+          </CardAction>
+        ) : null}
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {allErrors.length > 0 ? (
+          <div
+            role="status"
+            className="rounded border-2 border-destructive/40 bg-destructive/10 px-3 py-2 text-sm"
+          >
+            <p className="font-medium text-destructive">
+              {allErrors.length} file{allErrors.length === 1 ? "" : "s"} could
+              not be parsed
+            </p>
+            <ul className="mt-2 flex flex-col gap-1 font-mono text-xs text-muted-foreground">
+              {allErrors.map((error, index) => (
+                <li key={`${error.filePath}:${error.message}:${index}`}>
+                  {displayFileName(error.filePath)}: {error.message}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+
+        {tree.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No epics in this board yet.
+          </p>
+        ) : (
+          <>
+            <ListFiltersBar
+              searchId={`overall-tree-search-${project.id}`}
+              query={query}
+              onQueryChange={setQuery}
+              hideCompleted={hideCompleted}
+              onHideCompletedChange={setHideCompleted}
+            />
+            {filtered.length === 0 ? (
+              <p className="text-sm text-muted-foreground">
+                No work matches the current search or filters.
+              </p>
+            ) : (
+              <>
+                <div className="overflow-hidden rounded-md border" role="tree">
+                  <div className="hidden grid-cols-[minmax(0,1fr)_5rem_5rem_4rem_5.5rem_3rem] gap-x-3 border-b bg-muted/30 px-2 py-2 text-xs font-medium text-muted-foreground sm:grid">
+                    <span>Work</span>
+                    <span>Size</span>
+                    <span className="text-center">People</span>
+                    <span>Items</span>
+                    <span className="text-center">Status</span>
+                    <span className="sr-only pl-2">Actions</span>
+                  </div>
+                  {pageRows.map((node) => (
+                    <TreeNodeRow
+                      key={`${node.id}:${node.filePath}`}
+                      node={node}
+                      level={1}
+                      expanded={effectiveExpanded}
+                      selectedEpicId={selectedEpicId}
+                      selectedStoryId={selectedStoryId}
+                      onToggle={toggle}
+                    />
+                  ))}
+                </div>
+                <ListPagination
+                  page={page}
+                  totalPages={totalPages}
+                  totalCount={totalCount}
+                  pageSize={pageSize}
+                  onPageChange={setPage}
+                  onPageSizeChange={setPageSize}
+                />
+              </>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/board/overall-work-items-list.tsx

@@ -28,7 +28,10 @@ import {
 import { ListFiltersBar } from "@/components/board/list-filters-bar"
 import { ListPagination } from "@/components/board/list-pagination"
 import { SortableTableHead } from "@/components/board/sortable-table-head"
-import { TypeBadge } from "@/components/board/status-badge"
+import {
+  statusRowClass,
+  TypeBadge,
+} from "@/components/board/status-badge"
 import { TimeframeFilter } from "@/components/board/timeframe-filter"
 import { ViewWorkItemButton } from "@/components/board/work-item-sheet"
 import { AttributionAvatarGroup } from "@/components/board/attribution-avatars"
@@ -251,6 +254,7 @@ export function OverallWorkItemsList({
                           key={`${project.id}:${row.kind}:${row.id}:${row.filePath}`}
                           data-state={selected ? "selected" : undefined}
                           className={cn(
+                            statusRowClass(row.status),
                             selected && "bg-muted/60",
                             "hover:bg-muted/40"
                           )}

package/components/board/points-heatmap.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+import { format } from "date-fns"
+
+import {
+  buildPointsCalendar,
+  pointsHeatLevel,
+  type PointsCalendarDay,
+  type PointsCalendarWeek,
+} from "@/lib/taskmark/points-calendar"
+import type { SolvedCompletionSample } from "@/lib/taskmark/timeframe-filters"
+import { cn } from "@/lib/utils"
+
+/** White through #C4A1FF: darker means more story points completed. */
+const LEVEL_CLASS: Record<0 | 1 | 2 | 3 | 4, string> = {
+  0: "bg-white dark:bg-neutral-900",
+  1: "bg-[#f0e8ff] dark:bg-[#2f2542]",
+  2: "bg-[#e2d0ff] dark:bg-[#4c3a73]",
+  3: "bg-[#d3b9ff] dark:bg-[#8368c0]",
+  4: "bg-[#c4a1ff]",
+}
+
+const WEEKDAY_LABELS = ["Mon", "", "Wed", "", "Fri", "", ""]
+const CELL_SIZE = "0.75rem"
+const CELL_GAP = "3px"
+
+function pointsLabel(points: number): string {
+  return points === 1 ? "1 story point" : `${points} story points`
+}
+
+function dayLabel(day: PointsCalendarDay): string {
+  return `${format(day.date, "MMM d, yyyy")} · ${pointsLabel(day.points)}`
+}
+
+function monthLabels(weeks: readonly PointsCalendarWeek[]): string[] {
+  let previous: number | null = null
+  return weeks.map((week, index) => {
+    const first = week.days[0]!.date
+    const month = first.getMonth()
+    const changed = previous !== null && month !== previous
+    previous = month
+    // Skip the last column so a label never runs past the grid.
+    if (!changed || index >= weeks.length - 1) return ""
+    return format(first, "MMM")
+  })
+}
+
+function HeatmapCell({ day, maxPoints }: { day: PointsCalendarDay; maxPoints: number }) {
+  if (day.isFuture) return <span aria-hidden className="size-3" />
+
+  const level = pointsHeatLevel(day.points, maxPoints)
+  const className = cn(
+    "size-3 rounded-[2px] border border-black/20 dark:border-white/15",
+    LEVEL_CLASS[level]
+  )
+  const label = dayLabel(day)
+
+  if (day.points <= 0) {
+    return <span aria-hidden title={label} className={className} />
+  }
+
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      className={cn(
+        className,
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+      )}
+    />
+  )
+}
+
+type PointsHeatmapProps = {
+  samples: readonly SolvedCompletionSample[]
+  now?: Date
+}
+
+export function PointsHeatmap({ samples, now }: PointsHeatmapProps) {
+  const calendar = buildPointsCalendar(samples, now)
+  const { weeks, maxPoints, totalPoints, start, end } = calendar
+  const labels = monthLabels(weeks)
+  const summary = `Story points completed per day between ${format(start, "MMM d, yyyy")} and ${format(end, "MMM d, yyyy")}: ${pointsLabel(totalPoints)} in total.`
+
+  return (
+    <section
+      className="border-2 border-black bg-card p-4 shadow-[4px_4px_0_0_var(--shadow-color)]"
+      aria-label="Completed story points calendar"
+    >
+      <div className="mb-3 flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h2 className="font-head text-base tracking-tight">Story points</h2>
+          <p className="text-xs text-muted-foreground">
+            Done tasks and bugs over the last year
+          </p>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {maxPoints > 0
+            ? `${pointsLabel(totalPoints)} completed`
+            : "No completed story points in this window yet."}
+        </p>
+      </div>
+
+      <p className="sr-only">{summary}</p>
+
+      <div className="overflow-x-auto pb-1">
+        <div className="mx-auto flex w-max gap-1.5">
+          <div
+            className="grid shrink-0"
+            style={{
+              gridTemplateRows: `repeat(7, ${CELL_SIZE})`,
+              rowGap: CELL_GAP,
+              // Clear the month-label row so weekday labels line up with their cells.
+              paddingTop: `calc(${CELL_SIZE} + ${CELL_GAP})`,
+            }}
+            aria-hidden
+          >
+            {WEEKDAY_LABELS.map((label, index) => (
+              <span
+                key={`weekday-${index}`}
+                className="flex items-center pr-1 text-[9px] leading-none text-muted-foreground"
+              >
+                {label}
+              </span>
+            ))}
+          </div>
+
+          <div className="flex flex-col" style={{ rowGap: CELL_GAP }}>
+            <div
+              className="grid"
+              style={{
+                gridTemplateColumns: `repeat(${weeks.length}, ${CELL_SIZE})`,
+                columnGap: CELL_GAP,
+              }}
+              aria-hidden
+            >
+              {labels.map((label, index) => (
+                <span
+                  key={`month-${weeks[index]?.key ?? index}`}
+                  className="h-3 whitespace-nowrap text-[9px] leading-3 text-muted-foreground"
+                >
+                  {label}
+                </span>
+              ))}
+            </div>
+
+            <div
+              className="grid grid-flow-col"
+              style={{
+                gridTemplateRows: `repeat(7, ${CELL_SIZE})`,
+                gridAutoColumns: CELL_SIZE,
+                gap: CELL_GAP,
+              }}
+            >
+              {weeks.flatMap((week) =>
+                week.days.map((day) => (
+                  <HeatmapCell key={day.key} day={day} maxPoints={maxPoints} />
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-3 flex items-center justify-center gap-2 text-[10px] text-muted-foreground">
+        <span>Less</span>
+        <div className="flex items-center gap-1" aria-hidden>
+          {([0, 1, 2, 3, 4] as const).map((level) => (
+            <span
+              key={level}
+              className={cn(
+                "size-3 rounded-[2px] border border-black/20 dark:border-white/15",
+                LEVEL_CLASS[level]
+              )}
+            />
+          ))}
+        </div>
+        <span>More</span>
+      </div>
+    </section>
+  )
+}