mr.zeroandClaude Opus 5
cd5361e222
Everything that is not a title moved out of the bar into a menu on the left that folds away with the button in the bar; the state is remembered between runs. It carries the stores on this machine, the two actions, the categories and the language. Categories narrow the grid one at a time, with counts: the state of a title on this machine, then a row per platform and per kind. The axes are built from what the catalog contains — a WarpEngine catalog has no genre — and a category that disappears under you falls back to Everything rather than leaving a blank grid. With more than one store installed, clicking another in the menu opens it: the grid, the categories and the folders follow, the choice is remembered, and stores sharing an id are told apart by their folder. app:state now reports every store, store:use switches, and the engine is re-checked per store because two stores can be at different versions. While the CLI runs, the menu, the log drawer and the filters stay live; only what would start a second call is disabled. Fixes the grid, which was broken and passing every check: its implicit rows split the window's height evenly instead of following their content, so every card came out 94px tall with its box art collapsed to nothing and its buttons clipped away. The DOM was intact throughout — ten cards, twenty buttons — which is exactly why the counts said nothing. Rows are content-sized now, and the art is one band of one height, with the title's first letter where the catalog has no image. So the window is looked at and not only counted, `SELFTEST_SHOT` has it photograph itself; the terminal has no screen-recording permission here. The selftest also clicks the store that is not open when there are two, and checks that the bar, the grid and the categories follow. Also fixes scripts/release.sh, which could not upload a package whose name has a space in it — "WarpEngine Store-1.1.0-arm64.dmg" does — because the list was one string split on whitespace. And `make release` cleans dist/ first, so a release cannot pick up the previous version's artifacts. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
321 lines
9.1 KiB
CSS
321 lines
9.1 KiB
CSS
/* One dark theme, no assets: the box art is the only image the app loads. */
|
|
:root {
|
|
--bg: #11151c;
|
|
--panel: #182029;
|
|
--panel-2: #1e2732;
|
|
--line: #2a3440;
|
|
--ink: #e8eef5;
|
|
--ink-dim: #93a4b8;
|
|
--accent: #37b98a;
|
|
--accent-ink: #05130d;
|
|
--warn: #e0a44a;
|
|
--radius: 12px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --- shell: the side menu and everything else --------------------------- */
|
|
.shell {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
overflow: hidden; /* so the collapsed menu is clipped rather than scrolled to */
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.side {
|
|
--side-width: 244px;
|
|
width: var(--side-width);
|
|
flex: none;
|
|
background: var(--panel);
|
|
border-right: 1px solid var(--line);
|
|
/* The menu itself does not scroll: the category list does. Letting the whole
|
|
column scroll made the bottom block — pinned there with margin-top: auto —
|
|
sit on top of the overflowing categories. */
|
|
overflow: hidden;
|
|
padding: 14px 12px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
transition: margin-left .16s ease-out;
|
|
}
|
|
body.nav-closed .side { margin-left: calc(-1 * var(--side-width)); }
|
|
|
|
.side-block { display: flex; flex-direction: column; gap: 6px; flex: none; }
|
|
.side-cats { flex: 1; min-height: 0; }
|
|
.side-foot { padding-top: 12px; border-top: 1px solid var(--line); }
|
|
.side-head {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-dim);
|
|
margin: 0 0 2px 4px;
|
|
}
|
|
.btn-wide { width: 100%; text-align: left; }
|
|
|
|
.nav-toggle {
|
|
font: inherit;
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
color: var(--ink-dim);
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 6px 10px;
|
|
cursor: pointer;
|
|
}
|
|
.nav-toggle:hover { color: var(--ink); border-color: #3a4757; }
|
|
|
|
/* Store switcher: one row per store on this machine, the open one marked. */
|
|
.store-list { display: flex; flex-direction: column; gap: 4px; }
|
|
.store-row {
|
|
font: inherit;
|
|
text-align: left;
|
|
color: var(--ink);
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 6px 10px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
.store-row:hover:not(:disabled) { background: var(--panel-2); }
|
|
.store-row.is-active {
|
|
background: var(--panel-2);
|
|
border-color: #2f5a49;
|
|
}
|
|
.store-row .store-row-name { font-weight: 600; }
|
|
.store-row .store-row-id {
|
|
font-size: 11px;
|
|
color: var(--ink-dim);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.store-row:disabled { opacity: .55; cursor: default; }
|
|
|
|
/* Categories: what the catalog is filtered down to. */
|
|
.cats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
|
|
.cat {
|
|
font: inherit;
|
|
text-align: left;
|
|
color: var(--ink-dim);
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
.cat:hover { background: var(--panel-2); color: var(--ink); }
|
|
.cat.is-active { background: var(--panel-2); color: var(--ink); font-weight: 600; }
|
|
.cat-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.cat-count { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
|
|
.cat-group {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: .07em;
|
|
text-transform: uppercase;
|
|
color: #6b7d92;
|
|
padding: 8px 10px 2px;
|
|
}
|
|
|
|
.side-lang { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); }
|
|
.side-lang .select { margin-left: auto; }
|
|
|
|
/* --- top bar ------------------------------------------------------------ */
|
|
.bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 18px;
|
|
background: var(--panel);
|
|
border-bottom: 1px solid var(--line);
|
|
flex: none;
|
|
}
|
|
.bar-title { display: flex; align-items: baseline; gap: 10px; font-weight: 700; margin-right: auto; }
|
|
.logo { color: var(--accent); font-size: 18px; }
|
|
.store-id {
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: var(--ink-dim);
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 1px 8px;
|
|
}
|
|
.bar-actions { display: flex; align-items: center; gap: 8px; }
|
|
.progress { color: var(--ink-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
|
|
|
|
/* --- controls ----------------------------------------------------------- */
|
|
.btn {
|
|
font: inherit;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 7px 14px;
|
|
cursor: pointer;
|
|
transition: background .15s, border-color .15s, transform .05s;
|
|
}
|
|
.btn:hover:not(:disabled) { background: #26313e; border-color: #3a4757; }
|
|
.btn:active:not(:disabled) { transform: scale(.97); }
|
|
.btn:disabled { opacity: .45; cursor: default; }
|
|
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
|
|
.btn-primary:hover:not(:disabled) { background: #45cd9b; }
|
|
.btn-ghost { background: transparent; color: var(--ink-dim); }
|
|
.btn-tiny { padding: 3px 9px; font-size: 12px; font-weight: 500; }
|
|
.select {
|
|
font: inherit;
|
|
color: var(--ink);
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 6px 8px;
|
|
}
|
|
.link { color: var(--accent); cursor: pointer; text-decoration: underline; }
|
|
|
|
/* --- gate (no python, or no store yet) ---------------------------------- */
|
|
.gate {
|
|
margin: auto;
|
|
max-width: 520px;
|
|
padding: 28px;
|
|
text-align: center;
|
|
}
|
|
.gate h1 { font-size: 20px; margin: 0 0 10px; }
|
|
.gate p { color: var(--ink-dim); white-space: pre-line; margin: 0 0 20px; word-break: break-all; }
|
|
.gate-actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
|
|
.gate-choice { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: 13px; }
|
|
|
|
/* --- the grid ----------------------------------------------------------- */
|
|
.grid {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: grid;
|
|
/* Narrower than it was: the side menu takes 244px off the window, and at 260px
|
|
a 1040px window had room for only two columns. */
|
|
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
|
gap: 14px;
|
|
padding: 18px;
|
|
/* Content-sized rows, spelled out. Left to `auto` the implicit rows split the
|
|
grid's height evenly — every card came out 94px tall with its box art
|
|
collapsed to nothing and its buttons clipped away, which is how the grid
|
|
looked before this was measured. */
|
|
grid-auto-rows: max-content;
|
|
align-content: start;
|
|
}
|
|
.empty { margin: auto; color: var(--ink-dim); }
|
|
.gate { overflow-y: auto; }
|
|
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.card.is-installed { border-color: #2f5a49; }
|
|
|
|
.art {
|
|
/* One height for every card, art or not, so the titles and the buttons line up
|
|
across a row. The images are cropped anyway (object-fit: cover). */
|
|
height: 148px;
|
|
flex: none;
|
|
background: #0d1117;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.art img { width: 100%; height: 100%; object-fit: cover; }
|
|
.art-glyph { font-size: 44px; font-weight: 700; color: #263341; }
|
|
|
|
.body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
|
|
.body h2 { font-size: 15px; margin: 0; }
|
|
.meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
.badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border-radius: 999px;
|
|
padding: 2px 8px;
|
|
border: 1px solid var(--line);
|
|
color: var(--ink-dim);
|
|
}
|
|
.badge-app { color: var(--accent); border-color: #2f5a49; }
|
|
.badge-web { color: var(--warn); border-color: #5a4a2f; }
|
|
.version { font-size: 12px; color: var(--ink-dim); margin-left: auto; }
|
|
.desc {
|
|
margin: 0;
|
|
font-size: 12.5px;
|
|
color: var(--ink-dim);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.actions { display: flex; gap: 8px; margin-top: auto; }
|
|
|
|
/* --- log ---------------------------------------------------------------- */
|
|
.log {
|
|
flex: none;
|
|
background: var(--panel);
|
|
border-top: 1px solid var(--line);
|
|
padding: 8px 18px 10px;
|
|
}
|
|
.log-toggle {
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--ink-dim);
|
|
background: none;
|
|
border: 0;
|
|
padding: 0 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
.log-lines {
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 11.5px;
|
|
color: var(--ink-dim);
|
|
background: #0d1117;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 8px 10px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.log-line { white-space: pre-wrap; word-break: break-all; }
|
|
.log-paths { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.paths-line {
|
|
font-size: 11.5px;
|
|
color: var(--ink-dim);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
word-break: break-all;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|