{{define "content" -}}
<style>
/* Scoped beads styles — inlined because the scss bundle is not rebuilt in dev.
The look deliberately mimics todo.sr.ht (sourcehut's own issue tracker): flat
and square (no radius, no shadows, no gradients), hairline gray borders,
monospace ids, and squared bordered labels. Colours come from CSS variables
that mirror core.sr.ht's Bootstrap palette for the light default and the
prefers-color-scheme: dark variant sourcehut ships, so the view inherits the
host theme. The Mardi Gras lanes survive only as muted accent swatches and a
2px lane cap — never saturated fills — so it reads as sourcehut, not a
separate app. */
.beads {
--lane-rolling: #c9930a; --lane-linedup: #2f9e44;
--lane-stalled: #9c36b5; --lane-past: #868e96;
--bd-bg: #ffffff; --bd-panel: #f2f3f5; --bd-fg: #212529;
--bd-muted: #6c757d; --bd-border: #ced4da; --bd-stripe: rgba(0,0,0,.05);
--bd-danger: #b52a2a;
}
@media (prefers-color-scheme: dark) {
.beads {
--bd-bg: #212529; --bd-panel: #343a40; --bd-fg: #dee2e6;
--bd-muted: #adb5bd; --bd-border: #6c757d; --bd-stripe: rgba(255,255,255,.05);
--bd-danger: #ff6b6b;
}
}
.beads .rolling { --lane: var(--lane-rolling); }
.beads .lined-up { --lane: var(--lane-linedup); }
.beads .stalled { --lane: var(--lane-stalled); }
.beads .past-stand { --lane: var(--lane-past); }
.beads .total { --lane: var(--bd-muted); }
/* freshness line (the shared "beadsHead" partial): one quiet row under the
title, muted and small — it qualifies the page, it does not announce
anything. */
.beads .beads-freshness { font-size: .78rem; color: var(--bd-muted); margin: -.35rem 0 .7rem; }
.beads .beads-freshness a { color: var(--bd-muted); }
.beads .beads-freshness code { font-size: .72rem; color: inherit; }
/* a small square colour chip standing in for the lane's Mardi Gras hue */
.beads .swatch {
display: inline-block; width: .7rem; height: .7rem; flex: 0 0 auto;
background: var(--lane); border: 1px solid rgba(0,0,0,.25); vertical-align: -1px;
}
/* summary: one flat hairline-bordered strip, cells divided by hairlines */
/* filter bar: flat, hairline-bordered controls in the todo.sr.ht idiom */
.beads-filter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.beads-filter input, .beads-filter select, .beads-filter button {
font: inherit; font-size: .82rem; padding: .25rem .45rem; color: var(--bd-fg);
background: var(--bd-bg); border: 1px solid var(--bd-border); border-radius: 0;
}
.beads-filter input[type="search"] { min-width: 12rem; flex: 1 1 12rem; }
.beads-filter button { background: var(--bd-panel); cursor: pointer; }
.beads-filter .beads-filter-clear { font-size: .82rem; color: var(--bd-muted); align-self: center; }
.beads-ready-toggle { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--bd-fg); }
.ready-dot { margin-right: .25rem; }
/* layout toggle: the same page in two shapes, so it is a pair of words and not
a tab — the current one is plain text, the other one a link */
.beads-layout { display: flex; gap: .35rem; align-items: baseline; font-size: .82rem; margin: -.5rem 0 1rem; }
.beads-layout .l { color: var(--bd-muted); }
.beads-layout .sep { color: var(--bd-muted); }
.beads-layout .current { color: var(--bd-fg); font-weight: 700; }
/* transitive dependency tree: indent by --depth via a hairline guide */
.dep-graph { margin: 0 0 1.25rem; }
.dep-tree { list-style: none; padding-left: 0; margin: 0 0 .5rem; }
.dep-tree .dep-node {
padding: .18rem 0 .18rem calc(var(--depth, 0) * 1.1rem + .1rem);
border-top: 1px solid var(--bd-border);
}
.dep-tree .dep-node:first-child { border-top: none; }
.dep-tree code { font-size: .8rem; }
.beads-summary { display: flex; flex-wrap: wrap; border: 1px solid var(--bd-border); margin-bottom: 1rem; }
.beads-summary .stat {
flex: 1 1 7rem; min-width: 6.5rem; padding: .35rem .6rem;
border-left: 1px solid var(--bd-border);
}
.beads-summary .stat:first-child { border-left: none; }
.beads-summary .stat .n { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.beads-summary .stat .l { display: flex; align-items: center; gap: .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bd-muted); }
/* lanes: flat squared columns with a 2px accent cap */
.beads-lanes { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.beads-lane { flex: 1 0 15rem; min-width: 15rem; }
.beads-lane .lane-head {
display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; font-weight: 700;
background: var(--bd-panel); color: var(--bd-fg);
border: 1px solid var(--bd-border); border-top: 2px solid var(--lane);
}
.beads-lane .lane-head .count { margin-left: auto; color: var(--bd-muted); font-weight: 400; font-size: .85rem; }
.beads-lane .lane-body { border: 1px solid var(--bd-border); border-top: none; }
/* stream: the same lanes stacked as one readable column. The heads are the lane
heads (2px accent cap, swatch, count) made sticky, so the section a row
belongs to stays named while its issues scroll past. */
.beads-stream { max-width: 52rem; }
.beads-stream .beads-section { margin-bottom: .75rem; }
.beads-stream .stream-head {
display: flex; align-items: baseline; gap: .4rem; padding: .3rem .5rem; font-weight: 700;
background: var(--bd-panel); color: var(--bd-fg);
border: 1px solid var(--bd-border); border-top: 2px solid var(--lane);
position: sticky; top: 0;
}
/* A flex summary drops the browser's disclosure marker, and a collapsed section
with no affordance reads as an empty one — so draw the triangle back. */
.beads-stream summary.stream-head { cursor: pointer; list-style: none; }
.beads-stream summary.stream-head::-webkit-details-marker { display: none; }
.beads-stream summary.stream-head::before { content: "\25B8"; color: var(--bd-muted); }
.beads-stream details[open] > summary.stream-head::before { content: "\25BE"; }
.beads-stream .stream-head .swatch { align-self: center; }
.beads-stream .stream-head .note { color: var(--bd-muted); font-weight: 400; font-size: .72rem; }
.beads-stream .stream-head .count { margin-left: auto; color: var(--bd-muted); font-weight: 400; font-size: .85rem; }
.beads-stream .stream-body { border: 1px solid var(--bd-border); border-top: none; }
/* issue rows: todo.sr.ht ticket-list feel — hairline separated, no radius */
.bead-row { display: block; padding: .3rem .5rem; text-decoration: none; color: var(--bd-fg); border-top: 1px solid var(--bd-border); }
.bead-row:first-child { border-top: none; }
.bead-row:hover { background: var(--bd-stripe); text-decoration: none; color: var(--bd-fg); }
.bead-row .r-id { font-family: monospace; font-size: .72rem; color: var(--bd-muted); }
.bead-row .r-title { display: block; margin: .05rem 0 .2rem; color: var(--bd-fg); }
.bead-row .r-meta { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.beads-empty { color: var(--bd-muted); font-size: .8rem; font-style: italic; padding: .35rem .5rem; }
/* labels: sourcehut .label — squared, hairline-bordered, transparent */
.blabel {
display: inline-block; font-size: .7rem; line-height: 1.5; padding: 0 .3rem; white-space: nowrap;
border: 1px solid var(--bd-border); background: transparent; color: var(--bd-fg);
}
.blabel.prio { border-color: var(--lane-rolling); color: var(--bd-fg); font-weight: 700; }
.blabel.assignee { border-color: var(--lane-linedup); }
.blabel.block { border-color: var(--bd-danger); color: var(--bd-danger); }
.blabel.muted { color: var(--bd-muted); }
/* detail pane */
.bead-detail .ticket-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .5rem; }
.bead-detail .ticket-title code { font-size: 1.1rem; }
.bead-detail .lane-label { border: 1px solid var(--lane); color: var(--bd-fg); padding: 0 .4rem; font-size: .75rem; }
.bead-detail .lane-label .swatch { margin-right: .3rem; }
.bead-detail .field-label { color: var(--bd-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.bead-detail table td.field-label { white-space: nowrap; width: 9rem; vertical-align: middle; }
pre.field-body {
white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bd-panel);
border: 1px solid var(--bd-border); color: var(--bd-fg); padding: .5rem; margin: .25rem 0 1rem;
}
/* copy-ready bd commands: the page shows work and cannot change it — a write
path would mean the SQL engine, a working set, a commit and a push, the
dependency this build is deliberately free of — so it hands over the command
instead. One quiet block in the same flat, square, hairline idiom as the rest,
not a call-to-action panel. `user-select: all` per line makes one click select
one whole command, which is why no JavaScript and no clipboard API is
involved. */
.bead-detail .bead-commands {
background: var(--bd-panel); border: 1px solid var(--bd-border);
padding: .3rem .5rem; margin: 0 0 1rem; max-width: 34rem;
}
.bead-detail .bead-commands .cmd {
display: block; font-family: monospace; font-size: .78rem; line-height: 1.6;
color: var(--bd-fg); -webkit-user-select: all; user-select: all;
}
.bead-deplist { list-style: none; padding-left: 0; margin-bottom: 0; }
.bead-deplist li { padding: .2rem 0; border-top: 1px solid var(--bd-border); }
.bead-deplist li:first-child { border-top: none; }
.bead-deplist code { font-size: .8rem; }
.bead-comment { border: 1px solid var(--bd-border); border-left: 2px solid var(--lane-linedup); padding: .4rem .6rem; margin-bottom: .5rem; }
.bead-comment .c-head { font-size: .8rem; color: var(--bd-muted); margin-bottom: .2rem; }
.bead-comment .c-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bd-fg); }
/* epic: badge, subtask rollup, progress meter */
.epic-badge { border-color: var(--lane-stalled); color: var(--bd-fg); text-transform: uppercase; letter-spacing: .04em; }
.epic-subtasks { margin-bottom: 1.25rem; }
.epic-progress { height: 6px; background: var(--bd-panel); border: 1px solid var(--bd-border); margin: .1rem 0 .6rem; }
.epic-progress-bar { height: 100%; background: var(--lane-linedup); }
.subtask-list li { padding: .3rem 0; }
/* a thin status accent on the left cap of each subtask row */
.subtask-list li.subtask { border-left: 2px solid var(--bd-border); padding-left: .5rem; }
.subtask-list li.subtask.in_progress { border-left-color: var(--lane-rolling); }
.subtask-list li.subtask.closed { border-left-color: var(--lane-past); }
.subtask-list li.subtask.closed a code { text-decoration: line-through; }
/* activity: Comments | History tabs (pure-CSS radio switch, no JS) */
.bead-activity .acttab-radio { position: absolute; opacity: 0; pointer-events: none; }
.acttabs { display: flex; gap: 0; border-bottom: 1px solid var(--bd-border); margin-bottom: .75rem; }
.acttabs label {
padding: .35rem .85rem; cursor: pointer; color: var(--bd-muted);
border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
#acttab-comments:checked ~ .acttabs label[for="acttab-comments"],
#acttab-history:checked ~ .acttabs label[for="acttab-history"] {
color: var(--bd-fg); background: var(--bd-panel);
border-color: var(--bd-border); border-bottom: 1px solid var(--bd-panel);
}
.bead-activity .actpanel { display: none; }
#acttab-comments:checked ~ .panel-comments { display: block; }
#acttab-history:checked ~ .panel-history { display: block; }
.bead-timeline { list-style: none; padding-left: 0; margin: 0; border-left: 2px solid var(--bd-border); }
.bead-timeline .tl-item { position: relative; padding: .2rem 0 .5rem .8rem; }
.bead-timeline .tl-item::before {
content: ""; position: absolute; left: -5px; top: .5rem;
width: 8px; height: 8px; background: var(--bd-muted); border: 1px solid var(--bd-bg);
}
.bead-timeline .tl-comment::before { background: var(--lane-linedup); }
.bead-timeline .tl-dep::before { background: var(--lane-stalled); }
.bead-timeline .tl-head { font-size: .85rem; color: var(--bd-fg); }
.bead-timeline .tl-when { color: var(--bd-muted); }
.bead-timeline .tl-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bd-fg); margin-top: .15rem; padding-left: .1rem; }
/* stored rows: the pane's own check on itself, and not the reason a reader came
— so it opens collapsed, exactly as the stream's Past Stand section does. The
idiom is the rest of the page's: flat, square, hairline borders, monospace for
anything that came out of the database. */
.bead-raw { margin: 1.5rem 0 0; border-top: 1px solid var(--bd-border); padding-top: .6rem; }
.bead-raw > summary { cursor: pointer; font-size: .8rem; color: var(--bd-muted); }
.bead-raw > summary .raw-note { font-style: italic; }
.bead-raw .raw-table { margin: .6rem 0 0; }
.bead-raw .raw-name {
display: flex; align-items: baseline; gap: .4rem; padding: .2rem .4rem;
background: var(--bd-panel); border: 1px solid var(--bd-border);
font-family: monospace; font-size: .75rem; color: var(--bd-fg);
}
.bead-raw .raw-name .raw-count { margin-left: auto; font-family: inherit; color: var(--bd-muted); }
.bead-raw table.raw-row {
width: 100%; border: 1px solid var(--bd-border); border-top: none;
border-collapse: collapse; margin: 0;
}
.bead-raw table.raw-row + table.raw-row { border-top: 2px solid var(--bd-border); }
.bead-raw table.raw-row td { padding: .1rem .4rem; vertical-align: top; border-top: 1px solid var(--bd-border); }
.bead-raw table.raw-row tr:first-child td { border-top: none; }
.bead-raw td.raw-col {
width: 11rem; white-space: nowrap; font-size: .72rem; color: var(--bd-muted);
border-right: 1px solid var(--bd-border);
}
/* A long value scrolls inside its own cell rather than stretching the page: this
is a section a reader glances into, and one 8kB description must not push
everything else out of reach. */
.bead-raw .raw-text {
display: block; max-height: 9rem; overflow: auto;
font-family: monospace; font-size: .75rem; color: var(--bd-fg);
white-space: pre-wrap; overflow-wrap: anywhere;
}
/* The two absences a raw view may never conflate. A cell that holds no value is
the only place the word NULL is written by the page itself — a chip, muted and
italic, so it cannot be mistaken for the four characters a row might store —
and a cell holding the empty string says that it is empty instead of rendering
as nothing at all, which is what a null used to look like. */
.bead-raw .raw-null {
font-size: .72rem; font-style: italic; color: var(--bd-muted);
border: 1px solid var(--bd-border); padding: 0 .25rem;
}
.bead-raw .raw-text:empty::after { content: "(empty)"; font-style: italic; color: var(--bd-muted); }
</style>
<div class="beads">
<h2><a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}">~{{.Repo.OwnerName}}/{{.Repo.Name}}</a> · parade</h2>
{{template "beadsHead" (dict "Repo" .Repo "Ref" .Ref "Head" .Head)}}
{{template "viewtabs" (dict "Repo" .Repo "Views" .Views "Current" "beads" "Ref" .Ref)}}
{{if or (eq .Data.Mode "detail") (eq .Data.Mode "epic")}}
{{/* ------------- detail / epic pane ------------- */}}
<p><a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads">← Back to the parade</a></p>
{{with .Data.Issue}}
{{/* The board's banner below can say "the first N of M" because it knows how
many cards it placed. A detail pane has no such N — it read one issue out
of tables that were clipped at 2000 rows each — so it says the part it can
support: the read was partial, and, when the issues table itself was cut,
how many issues the tracker really holds. Same banner, same words for the
same fact; it is not a second style. */}}
{{if $.Data.Truncated}}
<div class="alert alert-warning">This read was clipped, so what is below may be short.{{if $.Data.IssuesClipped}} The tracker holds {{$.Data.ShownOf}} issues and only the first of them were read.{{end}}</div>
{{end}}
<div class="bead-detail">
<h2 class="ticket-title">
<code>{{.ID}}</code> <span>{{.Title}}</span>
{{if eq $.Data.Mode "epic"}}<span class="blabel epic-badge">epic</span>{{end}}
<span class="lane-label" style="--lane: {{.Accent}};"><span class="swatch"></span>{{.Lane}}</span>
</h2>
<div class="r-meta mb-3">
<span class="blabel muted">status: {{.Status}}</span>
{{if .Priority}}<span class="blabel prio">P{{.Priority}}</span>{{end}}
{{if .IssueType}}<span class="blabel">{{.IssueType}}</span>{{end}}
{{if .Assignee}}<span class="blabel assignee">@{{.Assignee}}</span>{{end}}
{{range .Labels}}<span class="blabel muted">{{.}}</span>{{end}}
</div>
{{/* The command this page cannot run for you. Which ones are offered follows
the issue's status through the lane the detail pane already derived from
it (Rolling = in progress, Past Stand = closed, Lined Up = open), so there
is no second status vocabulary here — and nothing is offered that bd would
refuse. The command names the issue and nothing about paths: this service
does not know where the tracker is checked out, and the database name is
in the breadcrumb if the reader needs to pick a directory. */}}
<div class="bead-commands" role="group" aria-label="bd commands for this issue">
{{if eq .Lane "Rolling"}}
<code class="cmd">bd close {{.ID}}</code>
<code class="cmd">bd update {{.ID}} --status=open</code>
{{else if eq .Lane "Past Stand"}}
<code class="cmd">bd reopen {{.ID}}</code>
{{else}}
<code class="cmd">bd update {{.ID}} --claim</code>
<code class="cmd">bd close {{.ID}}</code>
{{end}}
</div>
<table class="table table-sm">
<tbody>
{{if .CreatedBy}}<tr><td class="field-label">Created by</td><td>{{.CreatedBy}}</td></tr>{{end}}
{{if .Owner}}<tr><td class="field-label">Owner</td><td>{{.Owner}}</td></tr>{{end}}
{{if .EstimatedMinutes}}<tr><td class="field-label">Estimate</td><td>{{.EstimatedMinutes}} min</td></tr>{{end}}
{{if .ExternalRef}}<tr><td class="field-label">External ref</td><td>{{.ExternalRef}}</td></tr>{{end}}
{{if .SpecID}}<tr><td class="field-label">Spec</td><td>{{.SpecID}}</td></tr>{{end}}
{{if .CreatedAt}}<tr><td class="field-label">Created</td><td>{{.CreatedAt}}</td></tr>{{end}}
{{if .StartedAt}}<tr><td class="field-label">Started</td><td>{{.StartedAt}}</td></tr>{{end}}
{{if .UpdatedAt}}<tr><td class="field-label">Updated</td><td>{{.UpdatedAt}}</td></tr>{{end}}
{{if .ClosedAt}}<tr><td class="field-label">Closed</td><td>{{.ClosedAt}}</td></tr>{{end}}
</tbody>
</table>
{{/* The long-text bodies go through $.Links, which escapes the stored text and
then wraps the issue ids it recognises in links to the database that owns
them. An id whose prefix belongs to no database this viewer may browse is
left as the text it is. */}}
{{if .Description}}<div class="field-label">Description</div><pre class="field-body">{{$.Links.Text .Description}}</pre>{{end}}
{{if .Design}}<div class="field-label">Design</div><pre class="field-body">{{$.Links.Text .Design}}</pre>{{end}}
{{if .AcceptanceCriteria}}<div class="field-label">Acceptance criteria</div><pre class="field-body">{{$.Links.Text .AcceptanceCriteria}}</pre>{{end}}
{{if .Notes}}<div class="field-label">Notes</div><pre class="field-body">{{$.Links.Text .Notes}}</pre>{{end}}
</div>
{{if eq $.Data.Mode "epic"}}
<div class="epic-subtasks">
<h4>Subtasks{{if $.Data.SubtaskTotal}} <small class="text-muted">{{$.Data.SubtaskDone}} of {{$.Data.SubtaskTotal}} done</small>{{end}}</h4>
{{if $.Data.SubtaskTotal}}
<div class="epic-progress" title="{{$.Data.SubtaskPct}}% complete">
<div class="epic-progress-bar" style="width: {{$.Data.SubtaskPct}}%"></div>
</div>
<ul class="bead-deplist subtask-list">
{{range $.Data.Subtasks}}
<li class="subtask {{.Category}}">
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}"><code>{{.ID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
{{if .PriorityLabel}}<span class="blabel prio">{{.PriorityLabel}}</span>{{end}}
<span class="blabel muted">{{.Status}}</span>
{{if .Assignee}}<span class="blabel assignee">@{{.Assignee}}</span>{{end}}
{{if .Blocked}}<span class="blabel block">🚧</span>{{end}}
</li>
{{end}}
</ul>
{{else}}<p class="beads-empty">No subtasks linked to this epic.</p>{{end}}
</div>
{{end}}
<div class="row">
<div class="col-md-6">
<h4>Depends on</h4>
{{if $.Data.DependsOn}}
<ul class="bead-deplist">
{{range $.Data.DependsOn}}
<li>
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.IssueID | urlquery}}"><code>{{.IssueID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
<span class="blabel muted">{{.Type}}</span>
{{if .Closed}}<span class="blabel muted">closed</span>{{else}}<span class="blabel block">{{.Status}}</span>{{end}}
</li>
{{end}}
</ul>
{{else}}<p class="beads-empty">No outgoing dependencies.</p>{{end}}
</div>
<div class="col-md-6">
<h4>Depended on by</h4>
{{if $.Data.DependedOnBy}}
<ul class="bead-deplist">
{{range $.Data.DependedOnBy}}
<li>
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.IssueID | urlquery}}"><code>{{.IssueID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
<span class="blabel muted">{{.Type}}</span>
</li>
{{end}}
</ul>
{{else}}<p class="beads-empty">Nothing depends on this issue.</p>{{end}}
</div>
</div>
{{if or $.Data.DependsTree $.Data.DependentTree}}
<div class="dep-graph">
{{if $.Data.DependsTree}}
<h4>Prerequisite chain <small class="text-muted">— everything this waits on, transitively</small></h4>
<ul class="dep-tree">
{{range $.Data.DependsTree}}
<li class="dep-node" style="--depth: {{.Depth}}">
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}"><code>{{.ID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
<span class="blabel muted">{{.Type}}</span>
{{if .Closed}}<span class="blabel muted">closed</span>{{else}}<span class="blabel block">{{.Status}}</span>{{end}}
</li>
{{end}}
</ul>
{{end}}
{{if $.Data.DependentTree}}
<h4>Unblocks <small class="text-muted">— everything waiting on this, transitively</small></h4>
<ul class="dep-tree">
{{range $.Data.DependentTree}}
<li class="dep-node" style="--depth: {{.Depth}}">
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}"><code>{{.ID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
<span class="blabel muted">{{.Type}}</span>
{{if .Closed}}<span class="blabel muted">closed</span>{{else}}<span class="blabel block">{{.Status}}</span>{{end}}
</li>
{{end}}
</ul>
{{end}}
</div>
{{end}}
<div class="bead-activity">
<input type="radio" name="acttab" id="acttab-comments" class="acttab-radio" checked>
<input type="radio" name="acttab" id="acttab-history" class="acttab-radio">
<div class="acttabs">
<label for="acttab-comments">Comments</label>
<label for="acttab-history">History</label>
</div>
<div class="actpanel panel-comments">
{{if $.Data.Comments}}
{{range $.Data.Comments}}
<div class="bead-comment">
<div class="c-head"><strong>{{.Author}}</strong> {{if .CreatedAt}}· {{.CreatedAt}}{{end}}</div>
<div class="c-body">{{$.Links.Text .Text}}</div>
</div>
{{end}}
{{else}}<p class="beads-empty">No comments.</p>{{end}}
{{/* The Comments tab has no closed event, so the close reason is shown here
at the end; the History tab already carries it as the closed event. */}}
{{if .CloseReason}}
<h4>Close reason</h4>
<pre class="field-body">{{.CloseReason}}</pre>
{{end}}
</div>
<div class="actpanel panel-history">
{{if $.Data.History}}
<ul class="bead-timeline">
{{range $.Data.History}}
<li class="tl-item tl-{{.Kind}}">
<div class="tl-head">
<strong>{{.Actor}}</strong> {{$.Links.Text .Summary}}
{{if .CreatedAt}}<span class="tl-when">· {{.CreatedAt}}</span>{{end}}
</div>
{{if .Text}}<div class="tl-body">{{$.Links.Text .Text}}</div>{{end}}
</li>
{{end}}
</ul>
{{else}}<p class="beads-empty">No activity yet.</p>{{end}}
</div>
</div>
{{/* ------------- the stored rows behind all of the above -------------
Everything on this pane is a reading of these rows — a field set that names
some columns and drops the rest, an event humanized into a sentence, an edge
reduced to an id and a type — and a reading that went wrong looks exactly
like one that did not. So the rows themselves are here, as they were read,
to be compared against the rendering above them.
Collapsed, because this is a tool for checking the page and not the reason
anyone opened it — the same <details> the stream layout gives Past Stand.
The values go through {{.Value}} and nothing else: they are stored text, so
html/template escapes them, and they are deliberately NOT run through
$.Links.Text the way the description and the comment bodies above are. A
linkifier rewrites what it is given — an id inside a value would come out as
an anchor — and a value that has been rewritten is no longer the value that
is stored, which is the only thing this section is for. */}}
{{if $.Data.Raw}}
<details class="bead-raw">
<summary>Stored rows <span class="raw-note">— what this pane was built from, as read</span></summary>
{{range $.Data.Raw}}
<div class="raw-table" data-table="{{.Table}}">
<div class="raw-name">
{{.Table}}
<span class="raw-count">{{if .Clipped}}first {{len .Rows}} of {{.Matched}} rows{{else}}{{.Matched}} row{{if ne .Matched 1}}s{{end}}{{end}}</span>
</div>
{{range .Rows}}
<table class="raw-row">
<tbody>
{{range .Cells}}
<tr>
<td class="raw-col">{{.Column}}</td>
<td class="raw-val">{{if .Null}}<span class="raw-null">NULL</span>{{else}}<span class="raw-text">{{.Value}}</span>{{end}}</td>
</tr>
{{end}}
</tbody>
</table>
{{end}}
</div>
{{end}}
</details>
{{end}}
{{else}}
{{/* Two ways an issue can be missing, and the page may only claim the one it
can see. A complete read that does not carry the id is an absence; a read
clipped at 2000 rows is not, because the id may sit in the tail this page
never looked at, and "not found" there would be the page stating something
it does not know. */}}
{{if $.Data.MissingBeyondCap}}
<div class="alert alert-warning">Not among the issues read. The tracker holds {{$.Data.ShownOf}} issues and only the first of them were read, so this id may sit in the tail this page never saw rather than not exist.</div>
{{else}}
<div class="alert alert-warning">Issue not found.</div>
{{end}}
{{end}}
{{else}}
{{/* ---------------- board ---------------- */}}
{{/* The board reports the tables it draws from, and no others — and it reports
them one by one, because they fail differently. The count line is the issues
read and is printed only when the issues read was short: "the first 4 of 4"
is not a warning, it is a wrong sentence. Every other clipped table names
itself, both its row counts and what the board lost by the rows it never
read — a clipped labels table costs every card its pills and narrows the
label filter while leaving all four counts true, which is why one flag could
not have carried this. The issues entry is skipped in the list below because
the count line above is that entry, in the wording the board has always
used. */}}
{{if .Data.Clipped}}
<div class="alert alert-warning">
{{if .Data.IssuesClipped}}Showing the first {{.Data.Total}} of {{.Data.ShownOf}} issues.{{end}}
{{range .Data.Clipped}}{{if ne .Table "issues"}}
<div>The <code>{{.Table}}</code> table was clipped at {{.Shown}} of {{.Total}} rows: {{.Effect}}.</div>
{{end}}{{end}}
</div>
{{end}}
<form class="beads-filter" method="get" action="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads">
{{if .Ref}}<input type="hidden" name="ref" value="{{.Ref}}">{{end}}
{{/* The layout is not a filter, but this form is a GET: without carrying it,
submitting a filter from the stream would answer with the board. */}}
{{if eq .Data.Layout "stream"}}<input type="hidden" name="layout" value="stream">{{end}}
<input type="search" name="q" value="{{.Data.Filter.Query}}" placeholder="Search id / title">
<select name="type" aria-label="Type">
<option value="">All types</option>
{{range .Data.FilterOpts.Types}}<option value="{{.}}"{{if eq . $.Data.Filter.Type}} selected{{end}}>{{.}}</option>{{end}}
</select>
<select name="priority" aria-label="Priority">
<option value="">All priorities</option>
{{range .Data.FilterOpts.Priorities}}<option value="{{.}}"{{if eq . $.Data.Filter.Priority}} selected{{end}}>P{{.}}</option>{{end}}
</select>
<select name="assignee" aria-label="Assignee">
<option value="">Anyone</option>
{{range .Data.FilterOpts.Assignees}}<option value="{{.}}"{{if eq . $.Data.Filter.Assignee}} selected{{end}}>@{{.}}</option>{{end}}
</select>
<select name="label" aria-label="Label">
<option value="">Any label</option>
{{range .Data.FilterOpts.Labels}}<option value="{{.}}"{{if eq . $.Data.Filter.Label}} selected{{end}}>{{.}}</option>{{end}}
</select>
<label class="beads-ready-toggle"><input type="checkbox" name="ready" value="1"{{if .Data.Filter.Ready}} checked{{end}}> ⚡ Ready only</label>
<button type="submit">Filter</button>
{{/* Clear drops the filters and keeps the layout: the layout is how the page
is read, not what it is filtered to. */}}
{{if .Data.Filter.Active}}<a class="beads-filter-clear" href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads{{if .Ref}}?ref={{.Ref}}{{if eq .Data.Layout "stream"}}&layout=stream{{end}}{{else}}{{if eq .Data.Layout "stream"}}?layout=stream{{end}}{{end}}">Clear</a>{{end}}
</form>
<div class="beads-layout">
<span class="l">view:</span>
{{if eq .Data.Layout "stream"}}
<a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads{{withQuery .Data.Query "layout" ""}}">Board</a>
{{else}}<span class="current" aria-current="page">Board</span>{{end}}
<span class="sep">·</span>
{{if eq .Data.Layout "stream"}}<span class="current" aria-current="page">Stream</span>
{{else}}<a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads{{withQuery .Data.Query "layout" "stream"}}">Stream</a>{{end}}
</div>
<div class="beads-summary">
<div class="stat rolling"><div class="n">{{.Data.Counts.Rolling}}</div><div class="l"><span class="swatch"></span>Rolling</div></div>
<div class="stat lined-up"><div class="n">{{.Data.Counts.LinedUp}}</div><div class="l"><span class="swatch"></span>Lined Up</div></div>
<div class="stat stalled"><div class="n">{{.Data.Counts.Stalled}}</div><div class="l"><span class="swatch"></span>Stalled</div></div>
<div class="stat past-stand"><div class="n">{{.Data.Counts.PastStand}}</div><div class="l"><span class="swatch"></span>Past Stand</div></div>
<div class="stat total"><div class="n">{{.Data.Counts.Total}}</div><div class="l">Total</div></div>
</div>
{{if eq .Data.Layout "stream"}}
{{/* ---------------- stream: the same buckets as one column ---------------- */}}
<div class="beads-stream">
{{range .Data.Sections}}
{{if .Collapsed}}
<details class="beads-section {{.Slug}}">
<summary class="stream-head">
<span class="swatch"></span>{{.Name}}{{if .Note}}<span class="note">{{.Note}}</span>{{end}}<span class="count">{{len .Issues}}</span>
</summary>
{{template "beadStreamRows" (dict "Repo" $.Repo "Section" .)}}
</details>
{{else}}
<section class="beads-section {{.Slug}}">
<div class="stream-head">
<span class="swatch"></span>{{.Name}}{{if .Note}}<span class="note">{{.Note}}</span>{{end}}<span class="count">{{len .Issues}}</span>
</div>
{{template "beadStreamRows" (dict "Repo" $.Repo "Section" .)}}
</section>
{{end}}
{{end}}
</div>
{{else}}
{{/* ---------------- board: four lanes side by side ---------------- */}}
<div class="beads-lanes">
{{range .Data.Lanes}}
<div class="beads-lane {{.Slug}}">
<div class="lane-head">
<span class="swatch"></span>{{.Name}}<span class="count">{{len .Issues}}</span>
</div>
<div class="lane-body">
{{range .Issues}}
<a class="bead-row" href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}">
<span class="r-id">{{if .Ready}}<span class="ready-dot" title="Ready to work">⚡</span>{{end}}{{.ID}}</span>
<span class="r-title">{{.Title}}</span>
<span class="r-meta">
{{if .PriorityLabel}}<span class="blabel prio">{{.PriorityLabel}}</span>{{end}}
{{if .Type}}<span class="blabel">{{.Type}}</span>{{end}}
{{if .Assignee}}<span class="blabel assignee">@{{.Assignee}}</span>{{end}}
{{range .Labels}}<span class="blabel muted">{{.}}</span>{{end}}
{{if .BlockedBy}}<span class="blabel block">🚧 {{.BlockedBy}}</span>{{end}}
{{if .Blocks}}<span class="blabel muted">blocks {{.Blocks}}</span>{{end}}
</span>
</a>
{{else}}
<p class="beads-empty">Empty lane.</p>
{{end}}
</div>
</div>
{{end}}
</div>
{{end}}{{/* layout */}}
{{end}}{{/* detail vs board */}}
</div>
{{- end}}
{{/* One stream section's cards. The row markup is the board's row markup: the
same card, only differently arranged — so the two copies move together.
It is copied rather than shared because folding the board's lane body into
this partial would reflow the board's output, and the board is meant to
render exactly what it rendered before this layout existed. */}}
{{define "beadStreamRows"}}
<div class="stream-body">
{{range .Section.Issues}}
<a class="bead-row" href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}">
<span class="r-id">{{if .Ready}}<span class="ready-dot" title="Ready to work">⚡</span>{{end}}{{.ID}}</span>
<span class="r-title">{{.Title}}</span>
<span class="r-meta">
{{if .PriorityLabel}}<span class="blabel prio">{{.PriorityLabel}}</span>{{end}}
{{if .Type}}<span class="blabel">{{.Type}}</span>{{end}}
{{if .Assignee}}<span class="blabel assignee">@{{.Assignee}}</span>{{end}}
{{range .Labels}}<span class="blabel muted">{{.}}</span>{{end}}
{{if .BlockedBy}}<span class="blabel block">🚧 {{.BlockedBy}}</span>{{end}}
{{if .Blocks}}<span class="blabel muted">blocks {{.Blocks}}</span>{{end}}
</span>
</a>
{{else}}
<p class="beads-empty">Nothing in this section.</p>
{{end}}
</div>
{{end}}