k0-board 0.4.0 → 0.5.0

package/web/board.css

@@ -1,6 +1,10 @@
 /* The house variables — colours, fonts, scale — live in base.css, which belongs to both
    pages. From here down there is only the board. */
 @import url('/base.css');
+/* And the list, which is the other half of the dashboard: the same stories as rows. It is a file
+   of its own because it is a view of its own — the board reaches it through one line in `render` —
+   and because it carries the whole of the panel that opens beside a row. */
+@import url('/list.css');
 
 /* The page no longer scrolls: it is the board that moves underneath the view. */
 body {
@@ -32,24 +36,32 @@ body {
   letter-spacing: 1px;
 }
 
+/* The pills, the shape of the view and the repository: one group on the bar, because they are one
+   question. Two of them say what you are looking at and the third says what shape it comes in, and
+   a switch that changed the shape from the other end of the bar would not look like it belonged to
+   the same answer. */
+.filterbar { display: flex; align-items: center; gap: 12px; flex: 1; flex-wrap: wrap; }
+
 /* The legend IS the filter: click a status and it leaves the board. */
-.filters { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
+/* Seven pills is the widest thing on the bar by a long way, and the bar has to end up on one row:
+   what is trimmed here is the space around the words and never the words, which are the legend. */
+.filters { display: flex; gap: 6px; flex-wrap: wrap; }
 .filters button {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 6px;
   border: 1px solid var(--line);
   background: #fffdf7;
   border-radius: 999px;
-  padding: 5px 13px 5px 9px;
-  font-size: .82rem;
+  padding: 5px 11px 5px 8px;
+  font-size: .8rem;
   font-weight: 600;
   color: var(--ink);
   cursor: pointer;
 }
 .filters button i {
-  width: 13px;
-  height: 13px;
+  width: 12px;
+  height: 12px;
   border-radius: 4px;
   flex: none;
   border: 1px solid rgba(0, 0, 0, .12);
@@ -81,6 +93,11 @@ body {
 /* `display: flex` beats the browser's `[hidden]`: until there is a sample, it hides here. */
 .gauge[hidden] { display: none; }
 .gauge:hover { border-color: #bdb6a5; background: #fff; }
+/* RAM over CPU rather than side by side, with the closing time under them. The bar is one row again
+   and the four mode buttons have gone two by two: the gauge gives back the width it was taking by
+   going up instead of along, and written across it was over two hundred pixels of a bar that had
+   none to give. The dot stays where it was — the box is what became three lines, not the chip. */
+.gauge .nums { display: flex; flex-direction: column; line-height: 1.15; }
 .gauge i {
   width: 9px;
   height: 9px;
@@ -89,9 +106,9 @@ body {
   background: var(--calm);
 }
 /* That k0 is looking after the memory for you is worth knowing once and then forgetting: it sits
-   on the same chip, lighter than the numbers beside it, because the numbers are what you came to
-   read and this is only there so the closing is never a surprise. */
-.gauge .idle { font-weight: 500; opacity: .6; margin-left: -2px; white-space: nowrap; }
+   on the same chip, under the numbers and lighter than them, because the numbers are what you came
+   to read and this is only there so the closing is never a surprise. */
+.gauge .idle { font-weight: 500; opacity: .6; white-space: nowrap; }
 .gauge.warn i { background: var(--warn); }
 .gauge.bad i { background: var(--alert); }
 /* Solid red only when it is critical: the one moment it is allowed to interrupt. */
@@ -113,6 +130,50 @@ body {
 .new svg,
 .log svg { width: 17px; height: 17px; display: block; }
 
+/* The plus opens a little menu, so it has to have something to hang off. */
+.new-wrap { position: relative; flex: none; display: flex; }
+
+/* Two entries and no more: the two things k0 can make. It is a menu and not a second dialog
+   because the choice is one word long — and the sentence under each word is the whole difference
+   between them, since one is typed here and the other is talked through in a terminal. */
+.new-wrap .menu {
+  position: absolute;
+  z-index: 6;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 230px;
+  padding: 5px;
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 11px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.new-wrap .menu[hidden] { display: none; }
+.new-wrap .menu button {
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  border-radius: 7px;
+  padding: 8px 11px;
+  text-align: left;
+  font-size: .95rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+.new-wrap .menu button:hover { background: #f0ede3; border: none; }
+.new-wrap .menu button em {
+  display: block;
+  margin-top: 2px;
+  font-style: normal;
+  font-size: .76rem;
+  font-weight: 400;
+  color: var(--muted);
+}
+
 /* The way out to the ChangeLog. It is a link, not a button, because it goes somewhere — and it
    is drawn quieter than the plus, because starting work matters more than reading about it. */
 .log {
@@ -121,15 +182,127 @@ body {
   color: var(--muted);
 }
 .log:hover { background: #fff; border-color: #c9c3b4; color: var(--ink); }
+/* `display: flex` beats the browser's `[hidden]`, the same trap the gauge and the What's New mark
+   fall into. The door to the backlog is drawn hidden and put on the bar only when the server says
+   there is a backlog behind the board; without this it would sit there whatever the answer was,
+   leading to a page whose whole content is the sentence "The k0 backlog is switched off." */
+.log[hidden] { display: none; }
+
+/* ── The mark that says k0 moved ──────────────────────────────────────
+   It sits against the name and it is a dot, not a badge with a number on it: there is nothing to
+   count. It only exists at all when the server says so — after a version jump, or when npm has
+   something newer — so it is never one more thing on the bar that means nothing today. */
+.whatsnew {
+  flex: none;
+  margin-left: -6px;
+  align-self: flex-start;
+  padding: 4px;
+  display: flex;
+  border-radius: 999px;
+}
+/* `display: flex` beats the browser's `[hidden]`, the same trap the gauge falls into: the mark
+   ships hidden and is shown only when the server has something to say. Without this the dot sits
+   against the name for ever on a board where nothing is new, and with no sentence on it either —
+   the title is only written when there is one. */
+.whatsnew[hidden] { display: none; }
+.whatsnew span {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--warn);
+  display: block;
+}
+.whatsnew:hover span { transform: scale(1.3); }
+
+/* ── Kanban or List ───────────────────────────────────────────────────
+   One control with two halves, not two buttons: the same stories as a board, or the same stories as
+   rows. It stands inside the filter group because it is the same kind of control as the pills next
+   to it — how you are looking at what you have already chosen to see — and it is on the bar at all
+   only where there is a backlog behind the board. */
+.columns {
+  flex: none;
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--paper);
+}
+/* `display: flex` beats the browser's `[hidden]`, the same trap the gauge and the What's New mark
+   fall into: without this the switch stands on the bar of a board that has no backlog behind it. */
+.columns[hidden] { display: none; }
+.columns button {
+  border: none;
+  background: none;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: .8rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+.columns button:hover { background: rgba(0, 0, 0, .05); border: none; }
+/* The lit half is dark, the same ink as the primary button in a dialog. Two greys would read as
+   two buttons waiting to be pressed rather than as one answer already given. */
+.columns button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
+.columns button[aria-checked="true"]:hover { background: var(--ink); }
+
+/* And which repository, which now serves both views: the list has no columns to be repositories,
+   and on the board it narrows what is already there.
+
+   Drawn here rather than left to the browser. It was a `<select>`, which on macOS opens the
+   system's own list in the system's own type in the middle of the screen — a panel from another
+   application landing on top of a board made of paper — and which cannot hold the search that
+   makes a list of twenty repositories usable at all. It is the same picker the new-story dialog
+   has, so there is one way of choosing a repository in k0 and not two. */
+.repo-filter { flex: none; }
+.repo-filter > button {
+  font: inherit;
+  font-size: .82rem;
+  font-weight: 600;
+  color: var(--ink);
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 5px 12px;
+  /* A repository with a long name must not be what pushes the bar onto a second row: past this it
+     is cut with an ellipsis, and the whole name is still in the list. */
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.repo-filter > button:hover { border-color: #bdb6a5; }
+.repo-filter > button[aria-expanded="true"] { border-color: #bdb6a5; background: var(--bg); }
+/* Wider than the button it hangs off: the button is cut short on purpose and the list is where the
+   whole name is read. */
+.repo-filter .picker-list { left: 0; right: auto; min-width: 260px; }
+.repo-filter .picker-list input {
+  display: block;
+  width: 100%;
+  font: inherit;
+  font-size: .9rem;
+  padding: 7px 10px;
+  margin-bottom: 5px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--paper);
+}
+.repo-filter .picker-list input:focus { outline: none; border-color: #bdb6a5; }
 
 /* ── The four modes ───────────────────────────────────────────────────
    At the end of the bar, a row of four: how awake the machine has to stay. Switched off they are
    pale outlines like the statuses filtered away; the lit one takes the colour of its mode. The
    colour is not decoration: from across the room — which is what driving mode is for — you do not
    focus on the icon, but you do see the colour. */
+/* Two by two rather than four across: the bar was going to a second row, and of everything on it
+   these four are the ones that lose the least by being stacked — they are a scale you glance at,
+   not a sentence you read. The columns are `auto` and not a width, because driving mode makes each
+   button 46px and a fixed column would clip them. */
 .modes {
   flex: none;
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, auto);
   gap: 3px;
 }
 .modes button {
@@ -177,6 +350,58 @@ body {
    not to make: an amber ring around it, and the title says the rest. */
 .modes button[data-partial] { box-shadow: 0 0 0 2px #e0a72e; }
 
+/* ── Inside an epic ───────────────────────────────────────────────────
+   A strip under the bar, on the page only once you have gone into a lane. It says the four things
+   there are to say about standing in one: which epic, where it lives, how far it has got, and the
+   way back out. The colour is the epic's own — the hue is worked out from its key, the same one
+   the label on every note below is drawn in — so the strip and the notes under it are visibly one
+   thing rather than two that happen to be on screen together. */
+.lane {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 22px;
+  background: hsl(var(--h) 48% 95%);
+  border-bottom: 1px solid hsl(var(--h) 34% 84%);
+}
+.lane[hidden] { display: none; }
+.lane .key {
+  flex: none;
+  font: 700 .8rem/1 var(--mono);
+  color: hsl(var(--h) 52% 30%);
+}
+.lane .name {
+  font: 600 1.4rem/1 var(--hand);
+  color: var(--ink);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lane .repo { flex: none; font-size: .8rem; color: var(--muted); }
+/* Done over total and no weighting: eleven stories with one finished is a bar one eleventh along,
+   however big that one was. Anything else is an estimate with a progress bar drawn round it. */
+.lane .bar {
+  flex: none;
+  width: 160px;
+  height: 6px;
+  border-radius: 999px;
+  background: hsl(var(--h) 28% 87%);
+  overflow: hidden;
+}
+.lane .bar i {
+  display: block;
+  height: 100%;
+  background: hsl(var(--h) 52% 46%);
+  transition: width .3s ease;
+}
+.lane .count { flex: none; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
+.lane .spacer { flex: 1; }
+/* Words and not an ✕: coming back to the whole board is not closing something, and there is
+   nothing here to close. */
+.lane button { flex: none; padding: 5px 13px; font-size: .82rem; font-weight: 600; }
+
 /* ── The board ───────────────────────────────────────────────────────── */
 /* The viewport is the fixed window, the board is the content sliding behind it: one transform on
    .board, and no scrollbar anywhere. */
@@ -279,6 +504,8 @@ body {
 .column > h2 .fold[disabled] { opacity: .12; cursor: default; }
 .column > h2 .fold[disabled]:hover { opacity: .12; background: none; }
 
+/* Where the state columns used to be there is now a view of its own: see list.css. */
+
 .empty {
   position: absolute;
   inset: 0;
@@ -376,9 +603,26 @@ body {
 .postit.BACKLOG { background: var(--BACKLOG); }
 .postit.COMPLETED { background: var(--COMPLETED); opacity: .6; }
 .postit.COMPLETED .title { text-decoration: line-through; }
-/* Grinding away: the faintest breath, no blinking dots. */
-.postit.WORKING, .postit.PLANNING { animation: breathe 2.6s ease-in-out infinite; }
-@keyframes breathe { 50% { box-shadow: 2px 3px 8px rgba(0, 0, 0, .17), 0 0 0 3px rgba(59, 130, 246, .22); } }
+/* Grinding away: the faintest breath, no blinking dots.
+   The breath is a ring on a layer of its own, and the only thing moving is that layer's opacity,
+   which the browser composites without redrawing anything. It used to animate `box-shadow` on the
+   post-it itself — a blurred shadow, recomputed and repainted sixty times a second, for every
+   working post-it, in every open tab, for as long as the board was on screen. On a machine already
+   under pressure that was the most expensive thing k0 did, and none of it was in k0's own process:
+   the bill arrived under the browser's name. The ring sits just inside the edge rather than just
+   outside it, because the post-it clips what overflows it. */
+.postit.WORKING::after, .postit.PLANNING::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 3px rgba(59, 130, 246, .22);
+  pointer-events: none;
+  opacity: 0;
+  will-change: opacity;
+  animation: breathe 2.6s ease-in-out infinite;
+}
+@keyframes breathe { 50% { opacity: 1; } }
 
 /* The repository's name and, beside it, how it is doing: the two read together. */
 .postit .head {
@@ -423,8 +667,11 @@ body {
   font-style: italic;
   color: rgba(0, 0, 0, .56);
   margin-top: 6px;
+  /* The notes are written one per line and have to read that way: `- OMI` under `- Locato`, not
+     `- OMI - Locato` run together. Three lines, like the prompt, so two notes that wrap both show. */
+  white-space: pre-wrap;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -451,6 +698,104 @@ body {
 .postit .since { margin-left: auto; }
 .postit .dead { font-style: italic; }
 
+/* ── What the backlog adds to a note ──────────────────────────────────
+   Four marks and no more: what the story is called, the epic it belongs to, the star, and whether
+   it is waiting on something. Everything else a story has — its decisions, its rounds, its plan —
+   is a page and not a note, and a post-it that tried to carry it would stop being a post-it. With
+   the backlog off none of them is drawn and the note is the note it has always been. */
+
+/* `K42` is the name the story keeps for ever; `1.12` is where it is sitting in the tree today and
+   moves the moment the tree does. Two different facts, so two weights — said in one breath they
+   would read as one long name. */
+.postit .key {
+  flex: none;
+  font-family: var(--mono);
+  font-size: .72rem;
+  font-weight: 700;
+  line-height: 1;
+  color: rgba(0, 0, 0, .6);
+  cursor: default;
+}
+.postit .key em {
+  font-style: normal;
+  font-weight: 500;
+  color: rgba(0, 0, 0, .36);
+  margin-left: 4px;
+}
+
+/* The epic, in the epic's colour, and the way into it. The hue is on the element itself, worked
+   out from the key: nothing stores a colour, so there is nothing to keep in step with an epic
+   that gets renamed or moved. */
+.postit .epic {
+  flex: 0 1 auto;
+  min-width: 0;
+  padding: 2px 8px;
+  border: none;
+  border-radius: 999px;
+  background: hsl(var(--h) 58% 88%);
+  color: hsl(var(--h) 55% 26%);
+  font-size: .72rem;
+  font-weight: 700;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.postit .epic:hover { background: hsl(var(--h) 58% 81%); border: none; }
+
+/* Waiting on something that is not done. It warns and it never stops: what it is waiting for is
+   in the title, and the button that starts the story asks once and then goes ahead. */
+.postit .waits {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--alert);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  cursor: default;
+}
+.postit .waits svg { width: 13px; height: 13px; display: block; }
+
+/* The flag: the mark and the target both, at the bottom right, mirroring the pencil at the top.
+
+   It is invisible until the pointer is on the note, and then it is a faint outline — an outline
+   sitting on every note all the time is a mark that is everywhere and therefore marks nothing. Set,
+   it stays on whether or not anybody is looking, and the note takes a border and its key and name
+   take the same colour: the point of flagging something is to find it again from across the room,
+   and a fifteen-pixel glyph cannot be seen from there. */
+.postit .flag {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: none;
+  border-color: transparent;
+  box-shadow: none;
+  color: rgba(0, 0, 0, .35);
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity .12s ease;
+}
+.postit .flag svg { width: 15px; height: 15px; display: block; }
+.postit:hover .flag, .postit .flag:focus-visible { opacity: 1; }
+.postit .flag:hover { background: rgba(255, 255, 255, .72); border-color: rgba(0, 0, 0, .14); }
+/* On: the colour, and no longer waiting to be hovered. */
+.postit .flag.on { opacity: 1; color: var(--warn); }
+.postit.flagged { border: 2px solid var(--warn); }
+/* And the two pieces of writing at the top take it with them, so a flagged note is told apart from
+   the ones beside it by more than a hairline of border. */
+.postit.flagged .key, .postit.flagged .title { color: var(--warn); }
+/* The room the flag needs. It sits over the row of buttons, which is empty space until you hover:
+   this is what stops the last of them running underneath it once they come out. */
+.postit .actions { padding-right: 22px; }
+
 /* ── The last column: every repository ────────────────────────────────
    Headings only, one per repository, in the order you last used them. No cards and no counts:
    this is how you get into the files of a directory you are not working on — which without this
@@ -566,7 +911,7 @@ body {
 .postit .load.hot { color: var(--alert); }
 
 /* The corner icon: the pencil opens the editor, and on a finished card — where there is nothing
-   left to edit — the bin takes its place. */
+   left to edit — the bin takes its place. The flag at the bottom right is hung the same way. */
 .postit .corner {
   position: absolute;
   top: 6px;
@@ -591,9 +936,12 @@ body {
    git mark stays next to the repository name instead of next to the pencil. */
 .postit .head, .postit .title { padding-right: 26px; }
 
-/* The buttons stay hidden until you hover: the dashboard stays clean. */
+/* The buttons stay hidden until you hover: the dashboard stays clean. The row wraps and the words
+   in it do not — a note is 268px wide and three buttons can outgrow that, but a label broken over
+   two lines reads as two buttons and made the post-it grow a row taller than the ones beside it. */
 .postit .actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 7px;
   margin-top: 11px;
   opacity: 0;
@@ -603,6 +951,7 @@ body {
 .postit .actions button {
   font-size: .84rem;
   font-weight: 600;
+  white-space: nowrap;
   padding: 6px 13px;
   background: rgba(255, 255, 255, .72);
   border-color: rgba(0, 0, 0, .14);
@@ -625,6 +974,28 @@ body {
    The dialog and its buttons live in base.css, which belongs to both pages: the file viewer opens
    one too. What is left here is only what belongs to a card's editor and to nothing else. */
 
+/* An aside on the label's own line rather than under it. base.css makes a dialog's `small` a block,
+   which is right where it explains a field you have already filled in and wrong where it is a
+   parenthesis after the field's name — there it costs a whole line to say four words. */
+dialog label small.aside { display: inline; margin: 0; font-weight: 400; }
+
+/* The epic dialog says what pressing the button will actually do, because what it does is open a
+   terminal — and a dialog whose one button starts a conversation somewhere else has to say so. */
+#epic-new select {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  font: inherit;
+  font-size: 1rem;
+  color: var(--ink);
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+}
+#epic-new .note { margin: 0 0 18px; font-size: .88rem; line-height: 1.5; color: var(--muted); }
+#epic-new .note code { font: .85em var(--mono); background: var(--bg); border-radius: 4px; padding: 1px 5px; }
+
 /* Choosing the repository: a searchable field, most used at the top. */
 .picker { position: relative; }
 .picker-list {
@@ -673,6 +1044,9 @@ body {
   transition: opacity .2s, transform .2s;
   max-width: 80vw;
   font-size: .92rem;
+  /* The one refusal in k0 is a paragraph and then the decisions it is about, one to a line. The
+     line breaks are in the text, and without this they collapse into a wall. */
+  white-space: pre-line;
 }
 .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
 
@@ -718,6 +1092,12 @@ html[data-driving] .postit .corner svg { width: 20px; height: 20px; }
 html[data-driving] .zoom button { width: 40px; height: 40px; }
 html[data-driving] .zoom button svg { width: 22px; height: 22px; }
 
+/* The flag. It is exactly what you are meant to
+   pick out from a distance, so it grows with everything else. The border round the note does the
+   work at that range; this is what says which mark it is once you are closer. */
+html[data-driving] .postit .flag { width: 28px; height: 28px; }
+html[data-driving] .postit .flag svg { width: 21px; height: 21px; }
+
 /* The card is in pixels too: with the text at 22 it would choke inside 268. And since the card is
    never taller than it is wide, raising this raises the ceiling with it. */
 html[data-driving] { --card-w: 340px; }