@joewinke/jatui 0.1.11 → 0.1.20

package/src/lib/components/BurndownChart.svelte

@@ -0,0 +1,778 @@
+<script lang="ts">
+  interface OtherMilestone {
+    ordinal: string // "01", "02", etc.
+    name: string
+    acceptedAt: string
+  }
+
+  let {
+    tasks,
+    milestoneFilter = "",
+    currentMilestoneId = null,
+    milestones = [],
+    otherMilestones = [],
+    showHealth = false,
+    paymentDate = null,
+  }: {
+    tasks: any[]
+    milestoneFilter?: string
+    currentMilestoneId?: string | null
+    milestones?: any[]
+    otherMilestones?: OtherMilestone[]
+    showHealth?: boolean
+    paymentDate?: string | null
+  } = $props()
+
+  const DONE = new Set(["accepted", "deployed", "closed", "completed"])
+
+  // Layout constants
+  const MARGIN = { top: 16, right: 20, bottom: 32, left: 40 }
+  const MAIN_H = 150
+  const GAP = 10
+  const VOL_H = 50
+  const TOTAL_H = MARGIN.top + MAIN_H + GAP + VOL_H + MARGIN.bottom
+
+  const PALETTE = [
+    "oklch(0.65 0.20 160)",
+    "oklch(0.70 0.15 220)",
+    "oklch(0.74 0.16 85)",
+    "oklch(0.66 0.19 30)",
+    "oklch(0.68 0.16 290)",
+    "oklch(0.68 0.17 200)",
+  ]
+
+  let chartEl: HTMLDivElement | undefined = $state()
+  let chartWidth = $state(0)
+
+  let activeMilestones = $derived.by(() => {
+    const ids = new Set(
+      tasks
+        .filter((t) => t.status !== "dev")
+        .map((t) => t.milestone_id)
+        .filter(Boolean),
+    )
+    return (milestones as any[])
+      .filter((m) => ids.has(m.id))
+      .sort((a, b) => a.sort_order - b.sort_order)
+  })
+
+  // svelte-ignore state_referenced_locally
+  let selected = $state(milestoneFilter)
+  $effect(() => {
+    selected = milestoneFilter
+  })
+
+  function buildPts(milestoneId: string, startDay: number, totalDays: number) {
+    const mt = tasks.filter(
+      (t) => t.milestone_id === milestoneId && t.status !== "dev",
+    )
+    if (!mt.length) return null
+    const creations = mt
+      .map((t) =>
+        new Date(new Date(t.created_at).setHours(0, 0, 0, 0)).getTime(),
+      )
+      .sort((a, b) => a - b)
+    const completions = mt
+      .filter((t) => DONE.has(t.status))
+      .map((t) => {
+        const d = t.closed_at
+          ? new Date(t.closed_at)
+          : t.completed_at
+            ? new Date(t.completed_at)
+            : new Date(t.updated_at)
+        return new Date(d.setHours(0, 0, 0, 0)).getTime()
+      })
+      .sort((a, b) => a - b)
+    const pts: { x: number; y: number }[] = []
+    for (let d = 0; d <= totalDays; d++) {
+      const ts = startDay + d * 86400000
+      pts.push({
+        x: d,
+        y: Math.max(
+          0,
+          creations.filter((c) => c <= ts).length -
+            completions.filter((c) => c <= ts).length,
+        ),
+      })
+    }
+    return pts
+  }
+
+  let range = $derived.by((): { startDay: number; totalDays: number } => {
+    const relevant =
+      selected === ""
+        ? tasks.filter((t) => t.status !== "dev" && t.milestone_id)
+        : tasks.filter((t) => t.milestone_id === selected && t.status !== "dev")
+    if (!relevant.length) return { startDay: Date.now(), totalDays: 1 }
+    const min = relevant.reduce(
+      (m, t) => Math.min(m, new Date(t.created_at).getTime()),
+      Infinity,
+    )
+    const startDay = new Date(new Date(min).setHours(0, 0, 0, 0)).getTime()
+    const totalDays = Math.ceil((Date.now() - startDay) / 86400000)
+    return { startDay, totalDays }
+  })
+
+  let lines = $derived.by(() => {
+    const { startDay, totalDays } = range
+    if (selected === "") {
+      return activeMilestones
+        .map((m, i) => {
+          const pts = buildPts(m.id, startDay, totalDays)
+          return pts
+            ? {
+                id: m.id,
+                name: m.name,
+                color: PALETTE[i % PALETTE.length],
+                pts,
+              }
+            : null
+        })
+        .filter(Boolean) as {
+        id: string
+        name: string
+        color: string
+        pts: { x: number; y: number }[]
+      }[]
+    } else {
+      const m = (milestones as any[]).find((m) => m.id === selected)
+      const pts = buildPts(selected, startDay, totalDays)
+      return pts
+        ? [{ id: selected, name: m?.name ?? "", color: PALETTE[0], pts }]
+        : []
+    }
+  })
+
+  // Augment each line with its zero-crossing day (first day it hits 0 from above)
+  let linesWithZero = $derived(
+    lines.map((line) => {
+      let zeroCrossingDay: number | null = null
+      for (let i = 1; i < line.pts.length; i++) {
+        if (line.pts[i].y === 0 && line.pts[i - 1].y > 0) {
+          zeroCrossingDay = i
+          break
+        }
+      }
+      return { ...line, zeroCrossingDay }
+    }),
+  )
+
+  let anyZeroCrossing = $derived(
+    linesWithZero.some((l) => l.zeroCrossingDay !== null),
+  )
+
+  let paymentDay = $derived.by((): number | null => {
+    if (!paymentDate) return null
+    const ts = new Date(new Date(paymentDate).setHours(0, 0, 0, 0)).getTime()
+    const day = Math.round((ts - range.startDay) / 86400000)
+    return day >= 0 && day <= range.totalDays ? day : null
+  })
+
+  // Predicted completion ETA from a 7-day rolling net burn rate.
+  // Single-milestone mode only.
+  let burnEta = $derived.by((): string | null => {
+    if (linesWithZero.length !== 1) return null
+    const line = linesWithZero[0]
+    if (line.zeroCrossingDay !== null) return null
+    if (range.totalDays <= 7) return null
+    const pts = line.pts
+    if (pts.length < 8) return null
+    const remaining = pts[pts.length - 1].y
+    if (remaining <= 0) return null
+    const burnRate = (pts[pts.length - 8].y - pts[pts.length - 1].y) / 7
+    if (burnRate <= 0) return null
+    const daysToZero = Math.ceil(remaining / burnRate)
+    const eta = new Date(Date.now() + daysToZero * 86400000)
+    const sameYear = eta.getFullYear() === new Date().getFullYear()
+    return eta.toLocaleDateString(
+      "en-US",
+      sameYear
+        ? { month: "short", day: "numeric" }
+        : { month: "short", day: "numeric", year: "numeric" },
+    )
+  })
+
+  // Other milestone markers (their accepted dates mapped into this chart's day range)
+  let milestoneMarkers = $derived.by(() => {
+    return otherMilestones
+      .map((m) => {
+        const ts = new Date(
+          new Date(m.acceptedAt).setHours(0, 0, 0, 0),
+        ).getTime()
+        const day = Math.round((ts - range.startDay) / 86400000)
+        return { ordinal: m.ordinal, name: m.name, day }
+      })
+      .filter((m) => m.day > 0 && m.day < range.totalDays)
+  })
+
+  let volatility = $derived.by(() => {
+    const { startDay, totalDays } = range
+    const added = new Array(totalDays + 1).fill(0)
+    const closed = new Array(totalDays + 1).fill(0)
+
+    const relevantTasks =
+      selected === ""
+        ? tasks.filter((t) => t.status !== "dev" && t.milestone_id)
+        : tasks.filter((t) => t.milestone_id === selected && t.status !== "dev")
+
+    for (const t of relevantTasks) {
+      const cd = Math.round(
+        (new Date(new Date(t.created_at).setHours(0, 0, 0, 0)).getTime() -
+          startDay) /
+          86400000,
+      )
+      if (cd >= 0 && cd <= totalDays) added[cd]++
+      if (DONE.has(t.status)) {
+        const d = t.closed_at
+          ? new Date(t.closed_at)
+          : t.completed_at
+            ? new Date(t.completed_at)
+            : new Date(t.updated_at)
+        const dd = Math.round(
+          (new Date(d.setHours(0, 0, 0, 0)).getTime() - startDay) / 86400000,
+        )
+        if (dd >= 0 && dd <= totalDays) closed[dd]++
+      }
+    }
+    const maxVal = Math.max(1, ...added, ...closed)
+    return { added, closed, maxVal }
+  })
+
+  // Scope creep / stalled health signal
+  let health = $derived.by(
+    (): {
+      state: "stalled" | "scope_creep" | "on_track" | "complete"
+      message: string
+    } | null => {
+      if (!showHealth) return null
+      if (linesWithZero.length === 0) return null
+      const { added, closed } = volatility
+      const total = added.length
+      if (total < 7) return null
+
+      const allComplete = linesWithZero.every((l) => l.zeroCrossingDay !== null)
+      if (allComplete) {
+        return { state: "complete", message: "All tasks complete" }
+      }
+
+      let stalledDays = 0
+      for (let i = total - 1; i >= 0; i--) {
+        if (closed[i] === 0) stalledDays++
+        else break
+      }
+      if (stalledDays >= 5) {
+        return {
+          state: "stalled",
+          message: `No completions in ${stalledDays} days — potentially stalled`,
+        }
+      }
+
+      const windowStart = Math.max(0, total - 7)
+      let added7 = 0,
+        closed7 = 0
+      for (let i = windowStart; i < total; i++) {
+        added7 += added[i]
+        closed7 += closed[i]
+      }
+
+      if (closed7 > 0 && added7 > closed7 * 1.5) {
+        const ratio = added7 / closed7
+        const ratioDisp =
+          ratio >= 10 ? Math.round(ratio).toString() : ratio.toFixed(1)
+        return {
+          state: "scope_creep",
+          message: `Adding ${ratioDisp}× faster than completing — watch scope`,
+        }
+      }
+
+      const closedPerDay = closed7 / 7
+      const closedDisp =
+        closedPerDay >= 1
+          ? Math.round(closedPerDay).toString()
+          : closedPerDay.toFixed(1)
+      const noun = closedDisp === "1" ? "task" : "tasks"
+      return {
+        state: "on_track",
+        message: `Completing ${closedDisp} ${noun}/day — on track`,
+      }
+    },
+  )
+
+  let maxY = $derived(
+    Math.max(1, ...linesWithZero.flatMap((l) => l.pts.map((p) => p.y))),
+  )
+
+  let innerW = $derived(Math.max(0, chartWidth - MARGIN.left - MARGIN.right))
+  let volBaseline = $derived(MARGIN.top + MAIN_H + GAP + VOL_H / 2)
+
+  function xPos(d: number) {
+    return (d / range.totalDays) * innerW
+  }
+  function yMain(y: number) {
+    return MARGIN.top + MAIN_H - (y / maxY) * MAIN_H
+  }
+  function toPolyline(pts: { x: number; y: number }[]) {
+    return pts
+      .map((p) => `${xPos(p.x).toFixed(1)},${yMain(p.y).toFixed(1)}`)
+      .join(" ")
+  }
+
+  let barW = $derived(Math.max(1, innerW / (range.totalDays + 1) - 0.5))
+  function volBarH(count: number) {
+    return (count / volatility.maxVal) * (VOL_H / 2)
+  }
+
+  let yTicks = $derived.by(() => {
+    const step =
+      maxY <= 10 ? 2 : maxY <= 50 ? 10 : Math.ceil(maxY / 5 / 10) * 10
+    const t: number[] = []
+    for (let v = 0; v <= maxY; v += step) t.push(v)
+    return t
+  })
+
+  let xTicks = $derived.by(() => {
+    const d = range.totalDays
+    const step = d <= 14 ? 7 : d <= 60 ? 14 : d <= 180 ? 30 : 60
+    const t = [0]
+    for (let v = step; v < d; v += step) t.push(v)
+    t.push(d)
+    return [...new Set(t)]
+  })
+
+  function xLabel(d: number) {
+    const ts = range.startDay + d * 86400000
+    return new Date(ts).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+    })
+  }
+
+  let tooltipDay = $state<number | null>(null)
+  function onMove(e: MouseEvent) {
+    if (!chartEl) return
+    const rect = chartEl.getBoundingClientRect()
+    tooltipDay = Math.max(
+      0,
+      Math.min(
+        range.totalDays,
+        Math.round(
+          ((e.clientX - rect.left - MARGIN.left) / innerW) * range.totalDays,
+        ),
+      ),
+    )
+  }
+
+  $effect(() => {
+    if (!chartEl) return
+    const ro = new ResizeObserver((e) => {
+      chartWidth = e[0].contentRect.width
+    })
+    ro.observe(chartEl)
+    chartWidth = chartEl.clientWidth
+    return () => ro.disconnect()
+  })
+</script>
+
+<div>
+  <div class="mb-4">
+    <p class="font-serif italic text-xs text-base-content/40 mb-0.5">
+      tasks remaining over time
+    </p>
+    <h3
+      class="font-serif font-medium text-lg text-base-content tracking-tight leading-tight"
+    >
+      Burn-down
+    </h3>
+    {#if burnEta}
+      <p
+        class="font-serif italic text-xs text-base-content/60 mt-1 tabular-nums"
+      >
+        At current pace: done ~{burnEta}
+      </p>
+    {/if}
+    {#if health}
+      <p
+        class="font-serif italic text-xs mt-1 tabular-nums"
+        style="color:var(--color-{health.state === 'stalled'
+          ? 'error'
+          : health.state === 'scope_creep'
+            ? 'warning'
+            : 'success'})"
+      >
+        {health.message}
+      </p>
+    {/if}
+    <p class="font-serif italic text-xs text-base-content/40 mt-0.5">
+      <span style="color:var(--color-success)">+ added</span>
+      <span class="mx-1 text-base-content/20">·</span>
+      <span style="color:var(--color-error)">− completed</span>
+      {#if anyZeroCrossing}
+        <span class="mx-1 text-base-content/20">·</span>
+        <span style="color:var(--color-warning)">● done</span>
+      {/if}
+      {#if paymentDay !== null}
+        <span class="mx-1 text-base-content/20">·</span>
+        <span style="color:var(--color-success)">$ paid</span>
+      {/if}
+      {#if selected !== "" && linesWithZero[0]}
+        <span class="mx-1 text-base-content/20">·</span>
+        {linesWithZero[0].name}
+      {/if}
+    </p>
+  </div>
+
+  <!-- Line legend (multi-milestone) -->
+  {#if linesWithZero.length > 1}
+    <div
+      class="mb-3 flex flex-wrap gap-x-4 gap-y-1 text-xs font-serif italic text-base-content/50"
+    >
+      {#each linesWithZero as line}
+        <span class="flex items-center gap-1.5">
+          <svg width="16" height="4"
+            ><line
+              x1="0"
+              y1="2"
+              x2="16"
+              y2="2"
+              style="stroke:{line.color}"
+              stroke-width="2"
+            /></svg
+          >
+          {line.name}
+          {#if line.zeroCrossingDay !== null}<span
+              style="color:var(--color-warning)"
+            >
+              ●</span
+            >{/if}
+        </span>
+      {/each}
+    </div>
+  {/if}
+
+  {#if linesWithZero.length === 0}
+    <div
+      class="flex items-center justify-center text-sm font-serif italic text-base-content/40"
+      style="height:{TOTAL_H}px"
+    >
+      No data
+    </div>
+  {:else}
+    <div
+      bind:this={chartEl}
+      class="relative select-none"
+      role="img"
+      aria-label="Burn-down chart with daily task change"
+      onmousemove={onMove}
+      onmouseleave={() => (tooltipDay = null)}
+    >
+      {#if chartWidth > 0}
+        <svg width={chartWidth} height={TOTAL_H} class="overflow-visible">
+          <g transform="translate({MARGIN.left},0)">
+            <!-- Other milestone completion markers (render behind everything) -->
+            {#each milestoneMarkers as marker}
+              {@const x = xPos(marker.day)}
+              <line
+                x1={x}
+                y1={MARGIN.top}
+                x2={x}
+                y2={MARGIN.top + MAIN_H}
+                stroke="currentColor"
+                stroke-opacity="0.1"
+                stroke-width="1"
+                stroke-dasharray="2,3"
+              />
+              <text
+                {x}
+                y={MARGIN.top + 9}
+                text-anchor="middle"
+                font-size="8"
+                fill="currentColor"
+                opacity="0.28"
+                font-style="italic">{marker.ordinal}</text
+              >
+            {/each}
+
+            <!-- Y grid + labels -->
+            {#each yTicks as tick}
+              <line
+                x1={0}
+                y1={yMain(tick)}
+                x2={innerW}
+                y2={yMain(tick)}
+                stroke="currentColor"
+                stroke-opacity="0.07"
+              />
+              <text
+                x={-6}
+                y={yMain(tick) + 4}
+                text-anchor="end"
+                font-size="10"
+                fill="currentColor"
+                opacity="0.4">{tick}</text
+              >
+            {/each}
+
+            <!-- Burn-down lines with zero-crossing split -->
+            {#each linesWithZero as line}
+              {#if line.zeroCrossingDay !== null}
+                <polyline
+                  points={toPolyline(
+                    line.pts.slice(0, line.zeroCrossingDay + 1),
+                  )}
+                  fill="none"
+                  stroke={line.color}
+                  stroke-width="2"
+                  stroke-linejoin="round"
+                  stroke-linecap="round"
+                />
+                {#if line.zeroCrossingDay < line.pts.length - 1}
+                  <polyline
+                    points={toPolyline(line.pts.slice(line.zeroCrossingDay))}
+                    fill="none"
+                    stroke={line.color}
+                    stroke-width="1.5"
+                    stroke-opacity="0.2"
+                    stroke-dasharray="3,2"
+                    stroke-linejoin="round"
+                    stroke-linecap="round"
+                  />
+                {/if}
+                {@const zcX = xPos(line.zeroCrossingDay)}
+                {@const zcY = yMain(0)}
+                <circle
+                  cx={zcX}
+                  cy={zcY}
+                  r="5"
+                  style="fill:var(--color-warning)"
+                  stroke="var(--fallback-b2,oklch(var(--b2)/1))"
+                  stroke-width="2"
+                />
+                <line
+                  x1={zcX}
+                  y1={zcY + 5}
+                  x2={zcX}
+                  y2={MARGIN.top + MAIN_H}
+                  style="stroke:var(--color-warning)"
+                  stroke-opacity="0.2"
+                  stroke-width="1"
+                />
+              {:else}
+                <polyline
+                  points={toPolyline(line.pts)}
+                  fill="none"
+                  stroke={line.color}
+                  stroke-width="2"
+                  stroke-linejoin="round"
+                  stroke-linecap="round"
+                />
+              {/if}
+            {/each}
+
+            <!-- Payment marker -->
+            {#if paymentDay !== null}
+              {@const px = xPos(paymentDay)}
+              {@const py = yMain(0)}
+              <line
+                x1={px}
+                y1={MARGIN.top}
+                x2={px}
+                y2={py - 7}
+                style="stroke:var(--color-success)"
+                stroke-opacity="0.25"
+                stroke-width="1"
+                stroke-dasharray="2,3"
+              />
+              <circle
+                cx={px}
+                cy={py}
+                r="7"
+                style="fill:var(--color-success)"
+                stroke="var(--fallback-b2,oklch(var(--b2)/1))"
+                stroke-width="2"
+              />
+              <text
+                x={px}
+                y={py + 4}
+                text-anchor="middle"
+                font-size="9"
+                font-weight="700"
+                fill="white"
+                opacity="0.95">$</text
+              >
+              <line
+                x1={px}
+                y1={py + 7}
+                x2={px}
+                y2={MARGIN.top + MAIN_H}
+                style="stroke:var(--color-success)"
+                stroke-opacity="0.15"
+                stroke-width="1"
+              />
+            {/if}
+
+            <!-- Main chart baseline -->
+            <line
+              x1={0}
+              y1={MARGIN.top + MAIN_H}
+              x2={innerW}
+              y2={MARGIN.top + MAIN_H}
+              stroke="currentColor"
+              stroke-opacity="0.12"
+            />
+
+            <!-- Volatility zero line -->
+            <line
+              x1={0}
+              y1={volBaseline}
+              x2={innerW}
+              y2={volBaseline}
+              stroke="currentColor"
+              stroke-opacity="0.15"
+            />
+
+            <!-- Volatility bars -->
+            <g>
+              {#each volatility.added as count, d}
+                {@const cx = xPos(d)}
+                {@const bL = Math.max(0, cx - barW / 2)}
+                {@const bR = Math.min(innerW, cx + barW / 2)}
+                {@const bW = Math.max(0, bR - bL)}
+                {@const ah = volBarH(count)}
+                {@const ch = volBarH(volatility.closed[d])}
+                {#if count > 0 && bW > 0}
+                  <rect
+                    x={bL}
+                    y={volBaseline - ah}
+                    width={bW}
+                    height={ah}
+                    style="fill:var(--color-success)"
+                    opacity="0.7"
+                    rx="0.5"
+                  />
+                {/if}
+                {#if volatility.closed[d] > 0 && bW > 0}
+                  <rect
+                    x={bL}
+                    y={volBaseline}
+                    width={bW}
+                    height={ch}
+                    style="fill:var(--color-error)"
+                    opacity="0.6"
+                    rx="0.5"
+                  />
+                {/if}
+              {/each}
+            </g>
+
+            <!-- Crosshair + dots -->
+            {#if tooltipDay !== null}
+              <line
+                x1={xPos(tooltipDay)}
+                y1={MARGIN.top}
+                x2={xPos(tooltipDay)}
+                y2={MARGIN.top + MAIN_H + GAP + VOL_H}
+                stroke="currentColor"
+                stroke-opacity="0.2"
+                stroke-width="1"
+                stroke-dasharray="3,3"
+              />
+              {#each linesWithZero as line}
+                {@const pt =
+                  line.pts[Math.min(tooltipDay, line.pts.length - 1)]}
+                {#if pt}
+                  <circle
+                    cx={xPos(pt.x)}
+                    cy={yMain(pt.y)}
+                    r="4"
+                    fill={line.color}
+                    stroke="var(--fallback-b2,oklch(var(--b2)/1))"
+                    stroke-width="1.5"
+                  />
+                {/if}
+              {/each}
+            {/if}
+
+            <!-- X axis labels -->
+            {#each xTicks as d}
+              <text
+                x={xPos(d)}
+                y={MARGIN.top + MAIN_H + GAP + VOL_H + 18}
+                text-anchor="middle"
+                font-size="10"
+                fill="currentColor"
+                opacity="0.4">{xLabel(d)}</text
+              >
+            {/each}
+          </g>
+        </svg>
+
+        <!-- Tooltip -->
+        {#if tooltipDay !== null}
+          {@const added = volatility.added[tooltipDay] ?? 0}
+          {@const done = volatility.closed[tooltipDay] ?? 0}
+          {@const marker = milestoneMarkers.find((m) => m.day === tooltipDay)}
+          {@const tipL = Math.max(
+            60,
+            Math.min(chartWidth - 90, MARGIN.left + xPos(tooltipDay)),
+          )}
+          <div
+            class="pointer-events-none absolute top-0 -translate-x-1/2 rounded-lg border border-base-300 bg-base-100 px-3 py-2 text-xs shadow-lg"
+            style="left:{tipL}px"
+          >
+            <div class="mb-1 font-serif italic text-xs text-base-content/50">
+              {xLabel(tooltipDay)}
+            </div>
+            {#each linesWithZero as line}
+              {@const pt = line.pts[Math.min(tooltipDay, line.pts.length - 1)]}
+              {@const isZero = line.zeroCrossingDay === tooltipDay}
+              {#if pt}
+                <div
+                  class="flex items-center gap-1.5 mb-0.5"
+                  style="color:{isZero ? 'var(--color-warning)' : line.color}"
+                >
+                  <span
+                    class="inline-block h-1.5 w-3 rounded-full"
+                    style="background:currentColor"
+                  ></span>
+                  {#if selected === ""}<span
+                      class="text-[10px] text-base-content/40"
+                      >{line.name}:</span
+                    >{/if}
+                  {isZero ? "complete ·" : ""}
+                  {pt.y} remaining
+                </div>
+              {/if}
+            {/each}
+            {#if marker}
+              <div
+                class="font-serif italic text-[10px] text-base-content/50 mt-0.5"
+              >
+                {marker.ordinal} accepted
+              </div>
+            {/if}
+            {#if paymentDay !== null && tooltipDay === paymentDay}
+              <div
+                class="font-serif italic text-[10px] mt-0.5"
+                style="color:var(--color-success)"
+              >
+                $ payment received
+              </div>
+            {/if}
+            {#if added > 0 || done > 0}
+              <div
+                class="mt-1 border-t border-base-300 pt-1 flex gap-3 font-serif italic text-[10px]"
+              >
+                {#if added > 0}<span style="color:var(--color-success)"
+                    >+{added} added</span
+                  >{/if}
+                {#if done > 0}<span style="color:var(--color-error)"
+                    >−{done} completed</span
+                  >{/if}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      {/if}
+    </div>
+  {/if}
+</div>