rvlib-shipkit 1.3.0 → 1.5.0

package/src/serve/hub-app/home-st.ts

@@ -20,6 +20,7 @@ import { PlannedSt } from './planned-st.ts'
 import { ActivitySt } from './activity-st.ts'
 import { ProjectsSvc } from './projects-svc.ts'
 import { parseFilter, RepoSt } from './repo-st.ts'
+import { openSection, repoSections, sectionOfRepo } from './repo-sections.ts'
 
 /** the longest one repo's read ahead holds the next one back */
 export const PREFETCH_WAIT_MS = 10_000
@@ -68,7 +69,7 @@ export class HomeSt {
     planned: PlannedSt
     /** what every repo committed and holds, polled while it is the page */
     activity: ActivitySt
-    /** the one picker, cmd+k */
+    /** the one picker, cmd+j */
     palette: PaletteSt
     /** the widths of the project list and a repo's sidebar */
     layout: LayoutSt
@@ -169,8 +170,19 @@ export class HomeSt {
         for (const r of this.repos.values()) r.dispose()
     }
 
-    /** a list click, a repo row: that repo, in place, as a history entry */
+    /** a list click, a repo row: that repo, in place, as a history entry,
+     *  on the section the repo left showed. One already inside that section
+     *  keeps its own page there, and one that has no such section opens its
+     *  README. Written before the repo shows, so the one history entry
+     *  already names it */
     select(name: string): void {
+        const from = this.page === 'repo' ? this.shown : null
+        const to = this.repo(name)
+        const want = from == null || from === to ? null : sectionOfRepo(from)
+        if (want != null && sectionOfRepo(to) !== want) {
+            const known = to.cols.loaded || to.cols.cached
+            openSection(to, known && !repoSections(to).some((s) => s.id === want) ? 'readme' : want)
+        }
         this.show('repo', name, 'push')
     }
 
@@ -178,7 +190,7 @@ export class HomeSt {
      *  before the repo is shown, so the one history entry already names it */
     openCheck(repo: string, check: string): void {
         this.repo(repo).cols.select('checks', `check:${check}`)
-        this.select(repo)
+        this.show('repo', repo, 'push')
     }
 
     /** a link to a page of the home: the same page, in place */

package/src/serve/hub-app/home-strip.css

@@ -10,14 +10,42 @@
 .hswatch input{width:16px;height:16px;padding:0;border:1px solid var(--line);border-radius:3px;background:none;cursor:pointer}
 .hswatch input::-webkit-color-swatch-wrapper{padding:0}
 .hswatch input::-webkit-color-swatch{border:none;border-radius:2px}
-.halert{display:inline-flex;align-items:center;font-size:12px;color:var(--errink)}
-.herr{font-size:12px;color:var(--errink);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/* the bottom line: its height is reserved whether or not it says anything,
-   so the daemon or pm going down never moves the page. The strip renders it,
-   its order puts it last in the page column (hub.css .appcol) */
-.hbar{order:1;display:flex;align-items:center;gap:var(--s3);height:22px;flex:none;padding:0 var(--s3);border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;font-size:12px}
-.hdown{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--errink)}
-.hdown b{color:var(--red);margin-right:var(--s2)}
+/* trouble, as cards (float-cards.tsx), never taking room, so one coming or
+   going moves nothing: at the top right, in a zero height box right after
+   the bar, so just under it whatever its height. The words wrap, never cut */
+.htoasts{position:absolute;right:var(--s3);top:var(--s2);z-index:25;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1);max-width:min(60ch,calc(100% - 2 * var(--s3)));pointer-events:none}
+.hanchor{position:relative;height:0;flex:none;z-index:25}
+.htoast{max-width:100%;padding:var(--s1) var(--s2);background:var(--panel);border:1px solid var(--red);border-radius:4px;box-shadow:0 6px 20px var(--shadow);font-size:12px;line-height:1.45;color:var(--errink);white-space:normal;overflow-wrap:anywhere;pointer-events:auto}
+.htoast b{color:var(--red);margin-right:var(--s1)}
+.htoast.warn{border-color:var(--warn);color:var(--warn)}
+.htoast.warn b{color:var(--warn)}
+.htoast .hproc{vertical-align:middle}
+/* the bar's run: one small check… button, then a spinner while a run goes,
+   its words in a tooltip (header-bar.tsx) */
+.hcheck{height:22px;padding:0 var(--s2);font-size:11.5px;flex:none}
+.hbusy{display:inline-flex;align-items:center;justify-content:center;width:18px;min-width:18px;height:22px;flex:none;border-radius:3px;cursor:default;outline:none}
+.hbusy:focus-visible{box-shadow:0 0 0 1px var(--accent)}
+/* a popover opened on a click (floating.tsx Pop) */
+.fpop{z-index:40;width:max-content;max-width:min(44ch,90vw);padding:var(--s1);background:var(--panel2);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 20px var(--shadow);outline:none}
+.hmenu{display:flex;flex-direction:column;gap:var(--s0)}
+.fpopw{max-width:min(96ch,94vw)}
+.hmenu2{display:flex;align-items:stretch}
+.hmacts{flex:none;min-width:24ch;max-width:36ch}
+.hmabout{flex:1 1 auto;min-width:0;max-width:56ch;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:var(--s1);margin-left:var(--s1);padding:var(--s1) var(--s2);border-left:1px solid var(--line);user-select:text}
+.hmabout .md{overflow-wrap:anywhere}
+.hmabout .md>:first-child{margin-top:0}
+.hmlog{display:block;font-size:11px;color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere}
+@media (max-width:640px){.hmenu2{flex-direction:column}.hmabout{margin:var(--s1) 0 0;border-left:0;border-top:1px solid var(--line)}}
+.hmitem{display:flex;align-items:flex-start;gap:var(--s2);width:100%;padding:var(--s1) var(--s2);border:0;border-radius:3px;background:none;color:var(--ink);text-align:left;white-space:normal;cursor:pointer}
+.hmitem:hover:not(:disabled),.hmitem:focus-visible{background:var(--panel)}
+.hmitem:disabled{opacity:.45;cursor:default}
+.hmitem .hico{flex:none;width:14px;height:14px;margin-top:2px}
+.hmitem span{display:flex;flex-direction:column;gap:2px}
+.hmitem b{font-size:12.5px;font-weight:600}
+.hmitem small{font-size:11.5px;line-height:1.4;color:var(--dim)}
+.hmhead{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2) 0;font-size:12.5px}
+.hmhead span{color:var(--dim)}
+.hmnote{display:block;font-size:11.5px;line-height:1.4;color:var(--dim);overflow-wrap:anywhere}
 .hdot{display:inline-block;width:8px;height:8px;border-radius:4px;margin-right:var(--s1);background:var(--line)}
 .hdot.up{background:var(--ok)}.hdot.starting,.hdot.stopping{background:var(--warn)}.hdot.crashed{background:var(--red)}
 .hres{display:inline-flex;align-items:center;padding:var(--s0) var(--s2);font-size:12px}
@@ -30,7 +58,7 @@
 /* each widget card exactly as wide as what it holds; a widget's leading
    <header> joins the title line, dim */
 .hmon{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s2)}
-.hwidget{flex:0 1 auto;max-width:100%;padding:var(--s1) var(--s2);border:1px solid var(--line);border-radius:3px;font-size:12px;line-height:1.5;overflow:auto}
+.hwidget{flex:0 1 auto;max-width:100%;padding:var(--s0) var(--s2);border:1px solid var(--line);border-radius:3px;font-size:12px;line-height:1.4;overflow:auto}
 .hwidget h3{margin:0;font-size:12px;font-weight:650;white-space:nowrap}
 .hwidget h3 .hdim{font-weight:400}
 /* meters in two columns: <table class="wmeters">, label · bar · value, twice a row */
@@ -38,8 +66,13 @@
 .wmeters td:nth-child(3n){padding-right:var(--s3)}
 .wmeters td:last-child{padding-right:0}
 .wmeters .wbar{margin-right:0}
+/* a meter's value: small, its digits one width so a column never jitters */
+.wmeters .wv{font-size:11px;font-variant-numeric:tabular-nums}
 .hwidget table{border-collapse:collapse}
 .hwidget td{padding:0 var(--s3) 0 0;white-space:nowrap;vertical-align:middle}
+/* a widget error: in its card where the html goes, or one mark after the cards */
+.hwerr{font-size:12px;color:var(--warn);white-space:nowrap;cursor:help}
+.hwerr .gpwarn{margin:0 var(--s1) 0 0}
 .hbad{color:var(--errink)}
 .hwait{flex:1;min-height:0;padding:var(--s4);color:var(--dim);font-size:13px;overflow:auto}
 .hwait p{margin:0 0 var(--s2)}
@@ -57,7 +90,7 @@
    sideways */
 .gpwrap{container-type:inline-size;font-size:13px}
 .c-gpname{width:180px}.c-gpver{width:56px}.c-gppid{width:64px}.c-gpstate{width:110px}
-.c-gpb.take{width:78px}.c-gpb.restart{width:64px}.c-gpb.stop{width:58px}.c-gpb.open{width:58px}
+.c-gpb.take{width:78px}.c-gpb.stop,.c-gpb.restart{width:24px}
 .gptable td{vertical-align:middle}
 .gptable td.acname{vertical-align:top}
 .gpcore{color:var(--ink)}
@@ -78,20 +111,30 @@
 .gpstate{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
 .gpstate.up{color:var(--ok)}.gpstate.crashed{color:var(--red)}.gpstate.starting{color:var(--warn)}
 .gptable td.gpb{padding-left:0;padding-right:var(--s1);text-align:right;overflow:visible}
-.gpb button{padding:0 var(--s2);font-size:12px}
+.gptable td.gpb.stop,.gptable td.gpb.restart{padding:0;text-align:center}
+/* a small icon button: a process's start or stop, its restart, the open before its url */
+.gpi{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:3px;background:none;color:var(--dim);cursor:pointer;vertical-align:middle}
+.gpi .hico{width:14px;height:14px;color:inherit}
+.gpi:hover:not(:disabled){color:var(--ink);background:var(--panel2)}
+.gpi.go{color:var(--ok)}
+.gpi:disabled{opacity:.35;cursor:default}
+.gphost .gpi{margin-right:var(--s1)}
+/* the app button while its app builds: a spinner, never faded */
+.gpi[aria-busy]:disabled{opacity:1;cursor:progress}
 .gpb button.hsm{padding:0 var(--s1);font-size:11px}
 .gpb.act{white-space:nowrap}
 .gpb.act button + button{margin-left:var(--s1)}
-.gphead div{display:flex;justify-content:flex-end;align-items:center;gap:var(--s1)}
+.gphead div{display:flex;align-items:center;gap:var(--s1)}
+.gphead .sp{flex:1}
 .gphead button.hsm{padding:0 var(--s1);font-size:11px}
-.gpnote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* what a process has to say (its note, a refused take over): a mark after
+   its state words, the words on hover, never a line of its own */
+.gpwarn{display:inline-block;vertical-align:middle;width:6px;height:6px;margin-left:var(--s1);border-radius:1px;background:var(--warn)}
+.gpstate span[title]{cursor:help}
 @container (max-width:620px){.c-gphost,.gphost,.c-gpver,.gpver,.c-gppid,.gppid{display:none}.gptable .c-name{width:96px}.c-gpname{width:110px}.c-gpstate{width:88px}}
 /* a phone: the state words go too, the dot and the tint still say it, and
-   only start (stop) and open stay, the label taking what is left */
-@container (max-width:440px){.c-gpstate,.gpstate,.c-gpb.act,.gpb.act,.c-gpb.take,.gpb.take,.c-gpb.restart,.gpb.restart,.gphead button.hsm{display:none}.gptable .c-name{width:64px}.c-gpname{width:auto}.c-gpb.stop,.c-gpb.open{width:50px}}
-.hopen{margin-left:var(--s2)}
-.hopen button{display:inline-flex;align-items:center;padding:var(--s0) var(--s1)}
-.hopen .hico{color:inherit}
+   only start (stop) stays, the label taking what is left */
+@container (max-width:440px){.c-gpstate,.gpstate,.c-gpb.act,.gpb.act,.c-gpb.take,.gpb.take,.c-gpb.restart,.gpb.restart{display:none}.gptable .c-name{width:64px}.c-gpname{width:auto}}
 .hsec{min-width:0}
 .hsec h2{display:flex;align-items:center;gap:var(--s2);height:28px;margin:0 0 var(--s2);padding-bottom:var(--s1);border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
@@ -107,7 +150,14 @@
 .hnote{font-size:12px;color:var(--warn)}
 /* a filled bar any widget can draw: <span class="wbar" style="--p:51%"><i></i></span>,
    green below 70%, `mid` from 70%, `hi` from 90% (the widget picks the class) */
-.wbar{display:inline-block;vertical-align:middle;width:56px;height:7px;margin-right:var(--s2);border-radius:4px;background:var(--line);overflow:hidden}
+.wbar{display:inline-block;vertical-align:middle;width:40px;height:7px;margin-right:var(--s2);border-radius:4px;background:var(--line);overflow:hidden}
 .wbar > i{display:block;height:100%;width:var(--p,0%);background:var(--ok)}
 .wbar.mid > i{background:var(--warn)}
 .wbar.hi > i{background:var(--red)}
+
+/* a process card on the processes page: the menu's two panels at page width */
+.pcard .hmacts{max-width:none}
+.pcard .hmabout{max-width:none;max-height:none}
+.pcard>.cstitle{margin:var(--s3) 0 var(--s1)}
+.pcard .hlog{margin-top:0}
+.pcard.lit{border-color:var(--accent)}