fix
This commit is contained in:
Kelorastus
@@ -6,6 +6,7 @@
|
||||
import KeyArt from "./components/KeyArt.svelte";
|
||||
import MarketplaceDrawer from "./components/MarketplaceDrawer.svelte";
|
||||
import NewsPanel from "./components/NewsPanel.svelte";
|
||||
import ReleasePanel from "./components/ReleasePanel.svelte";
|
||||
import SettingsDrawer from "./components/SettingsDrawer.svelte";
|
||||
import SyncPanel from "./components/SyncPanel.svelte";
|
||||
import StatusBar from "./components/StatusBar.svelte";
|
||||
@@ -43,6 +44,10 @@
|
||||
<div class="sync-slot"><SyncPanel /></div>
|
||||
{/if}
|
||||
|
||||
{#if launcher.releaseOpen}
|
||||
<div class="sync-slot"><ReleasePanel /></div>
|
||||
{/if}
|
||||
|
||||
<SettingsDrawer bind:open={settingsOpen} />
|
||||
<MarketplaceDrawer />
|
||||
</div>
|
||||
|
||||
@@ -113,23 +113,11 @@
|
||||
] as const;
|
||||
|
||||
// ---- releasing ------------------------------------------------------------
|
||||
const plan = $derived(launcher.release);
|
||||
const releasing = $derived(busy === "release");
|
||||
let releaseOpen = $state(false);
|
||||
let nodePassword = $state("");
|
||||
let withApi = $state(true);
|
||||
|
||||
async function openRelease() {
|
||||
releaseOpen = true;
|
||||
launcher.releaseOpen = true;
|
||||
await launcher.loadRelease();
|
||||
}
|
||||
|
||||
async function doRelease() {
|
||||
await launcher.releaseRun(nodePassword, withApi);
|
||||
nodePassword = ""; // held for the one run, never kept
|
||||
releaseOpen = false;
|
||||
}
|
||||
|
||||
async function browseCheckout() {
|
||||
const path = await launcher.pickFolder();
|
||||
if (path) await launcher.setDev({ dev_root: path });
|
||||
@@ -324,51 +312,6 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if releaseOpen}
|
||||
<div class="dev-release-panel">
|
||||
{#if releasing && !plan}
|
||||
<p class="dev-note">Looking at what is live and what this PC holds…</p>
|
||||
{:else if plan}
|
||||
<ul class="dev-plan">
|
||||
{#each plan.items as row (row.key)}
|
||||
<li class:behind={row.behind === true} class:dirty={row.dirty}>
|
||||
<span class="dev-plan-name">{row.title}</span>
|
||||
<span class="dev-plan-live mono">{row.live ?? "—"}</span>
|
||||
<span class="dev-plan-note">{row.note}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="dev-checks mono">
|
||||
<span class:ok={plan.online}>DHP {plan.online ? "✓" : "✗"}</span>
|
||||
<span class:ok={plan.docker}>Docker {plan.docker ? "✓" : "✗"}</span>
|
||||
<span class:ok={plan.scripts}>scripts {plan.scripts ? "✓" : "✗"}</span>
|
||||
</div>
|
||||
{#if plan.blocked}
|
||||
<p class="dev-note attention">{plan.blocked}</p>
|
||||
{:else}
|
||||
<label class="dev-check">
|
||||
<input type="checkbox" bind:checked={withApi} disabled={!plan.docker || releasing} />
|
||||
<span>Also roll the Engine API{plan.docker ? "" : " (needs Docker)"} — logs everyone out</span>
|
||||
</label>
|
||||
<div class="dev-row">
|
||||
<input
|
||||
class="dev-path"
|
||||
type="password"
|
||||
placeholder="node sudo password"
|
||||
bind:value={nodePassword}
|
||||
disabled={releasing}
|
||||
/>
|
||||
<button class="btn" disabled={releasing || !nodePassword.trim()} onclick={doRelease}>Release</button>
|
||||
</div>
|
||||
<p class="dev-note">
|
||||
Runs in its own window. Each step decides for itself whether it has anything to do.
|
||||
</p>
|
||||
{/if}
|
||||
{/if}
|
||||
<button class="btn-link" onclick={() => (releaseOpen = false)}>Close</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<label class="dev-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -644,50 +587,6 @@
|
||||
.dev-release {
|
||||
font-weight: 600;
|
||||
}
|
||||
.dev-release-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--line, #2a3139);
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.dev-plan {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.dev-plan li {
|
||||
display: grid;
|
||||
grid-template-columns: 5.5rem 4.5rem 1fr;
|
||||
gap: 0.4rem;
|
||||
align-items: baseline;
|
||||
font-size: 0.76rem;
|
||||
color: var(--text-dim, #9aa3ad);
|
||||
}
|
||||
.dev-plan li.behind .dev-plan-name {
|
||||
color: #46d17f;
|
||||
}
|
||||
.dev-plan li.dirty .dev-plan-note {
|
||||
color: #e6b35a;
|
||||
}
|
||||
.dev-plan-name {
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
.dev-checks {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
font-size: 0.72rem;
|
||||
color: #e06c6c;
|
||||
}
|
||||
.dev-checks span.ok {
|
||||
color: #46d17f;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: grid;
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
<script lang="ts">
|
||||
import { fly } from "svelte/transition";
|
||||
import { prefersReducedMotion } from "svelte/motion";
|
||||
import Icon from "./Icon.svelte";
|
||||
import { launcher } from "../lib/launcher.svelte";
|
||||
|
||||
// Its own panel rather than a block inside the action card: the card is anchored to the
|
||||
// bottom of the window and cannot grow, so three rows plus a password field pushed the
|
||||
// Release button off the bottom - visible, unreachable, and reported as "it doesn't work".
|
||||
const plan = $derived(launcher.release);
|
||||
const busy = $derived(launcher.busy === "release");
|
||||
|
||||
let password = $state("");
|
||||
let withApi = $state(true);
|
||||
|
||||
async function release() {
|
||||
await launcher.releaseRun(password, withApi);
|
||||
password = ""; // held for the one run, never kept
|
||||
}
|
||||
|
||||
/** The short version of a row's state, for the column that has room for three words.
|
||||
NOT called `state`: that shadows the `$state` rune in this file, and everything
|
||||
declared with it silently stops being reactive. */
|
||||
function rowState(row: { behind: boolean | null; dirty: boolean }): { text: string; tone: string } {
|
||||
if (row.dirty) return { text: "uncommitted", tone: "warn" };
|
||||
if (row.behind === true) return { text: "behind", tone: "go" };
|
||||
if (row.behind === false) return { text: "up to date", tone: "dim" };
|
||||
return { text: "unknown", tone: "dim" };
|
||||
}
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="release glass"
|
||||
aria-label="Build and deploy"
|
||||
transition:fly={{ y: 8, duration: prefersReducedMotion.current ? 0 : 200 }}
|
||||
>
|
||||
<header class="head">
|
||||
<Icon name="code" size={14} />
|
||||
<h2 class="eyebrow">Build & deploy</h2>
|
||||
<span class="grow"></span>
|
||||
<button class="icon-btn" aria-label="Close" onclick={() => (launcher.releaseOpen = false)}>
|
||||
<Icon name="close" size={14} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
{#if !plan}
|
||||
<p class="note">Looking at what is live and what this PC holds…</p>
|
||||
{:else}
|
||||
<ul class="plan">
|
||||
{#each plan.items as row (row.key)}
|
||||
{@const st = rowState(row)}
|
||||
<li>
|
||||
<span class="name">{row.title}</span>
|
||||
<span class="live mono">{row.live ?? "—"}</span>
|
||||
<span class="state {st.tone}">{st.text}</span>
|
||||
<span class="commit mono">{row.commit ?? ""}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="checks mono">
|
||||
<span class:ok={plan.online}>DHP {plan.online ? "✓" : "✗"}</span>
|
||||
<span class:ok={plan.docker}>Docker {plan.docker ? "✓" : "✗"}</span>
|
||||
<span class:ok={plan.scripts}>scripts {plan.scripts ? "✓" : "✗"}</span>
|
||||
</div>
|
||||
|
||||
{#if plan.blocked}
|
||||
<p class="note warn">{plan.blocked}</p>
|
||||
{:else}
|
||||
<p class="note">
|
||||
Each step decides for itself whether it has anything to do, so a press releases only
|
||||
what has moved. It runs in its own window.
|
||||
</p>
|
||||
<label class="check">
|
||||
<input type="checkbox" bind:checked={withApi} disabled={!plan.docker || busy} />
|
||||
<span>
|
||||
Also roll the Engine API{plan.docker ? "" : " — needs Docker"}
|
||||
<em>— every operator is logged out</em>
|
||||
</span>
|
||||
</label>
|
||||
<div class="row">
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
placeholder="node sudo password"
|
||||
bind:value={password}
|
||||
disabled={busy}
|
||||
/>
|
||||
<button class="btn primary-ish" disabled={busy || !password.trim()} onclick={release}>
|
||||
{busy ? "Starting…" : "Release"}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.release {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: min(460px, calc(100vh - 180px));
|
||||
background: var(--glass-strong);
|
||||
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 8px 8px 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: #46d17f;
|
||||
}
|
||||
.grow {
|
||||
flex: 1;
|
||||
}
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
padding: 12px 16px 14px;
|
||||
overflow: auto;
|
||||
}
|
||||
.plan {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.plan li {
|
||||
display: grid;
|
||||
grid-template-columns: 6.5rem 4.5rem 6rem 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: baseline;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.live,
|
||||
.commit {
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.state.go {
|
||||
color: #46d17f;
|
||||
font-weight: 600;
|
||||
}
|
||||
.state.warn {
|
||||
color: #e6b35a;
|
||||
}
|
||||
.state.dim {
|
||||
color: var(--muted);
|
||||
}
|
||||
.checks {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
font-size: 0.74rem;
|
||||
color: #e06c6c;
|
||||
}
|
||||
.checks span.ok {
|
||||
color: #46d17f;
|
||||
}
|
||||
.note {
|
||||
margin: 0;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.45;
|
||||
color: var(--muted);
|
||||
}
|
||||
.note.warn {
|
||||
color: #e6b35a;
|
||||
}
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.check em {
|
||||
color: #e6b35a;
|
||||
font-style: normal;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.row .input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.primary-ish {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user