diff --git a/public/market.html b/public/market.html index 111b729..6712529 100644 --- a/public/market.html +++ b/public/market.html @@ -74,12 +74,13 @@ -
+

@@ -118,8 +119,9 @@

Leave this empty if you want the AI Character to invent the scenario on its own.

- - +
diff --git a/public/market.js b/public/market.js index 24a01fe..3afcc35 100644 --- a/public/market.js +++ b/public/market.js @@ -9,8 +9,10 @@ const marketPanels = document.querySelectorAll("[data-market-panel]"); const marketCreateAiCharacterBtn = $("marketCreateAiCharacter"); const marketCreateUserPersonaBtn = $("marketCreateUserPersona"); const marketPreviewModal = $("marketPreviewModal"); +const marketPreviewTitle = $("marketPreviewTitle"); const marketPreviewName = $("marketPreviewName"); const marketPreviewMeta = $("marketPreviewMeta"); +const marketPreviewBody = $("marketPreviewBody"); const marketPreviewPronouns = $("marketPreviewPronouns"); const marketPreviewAppearance = $("marketPreviewAppearance"); const marketPreviewBackground = $("marketPreviewBackground"); @@ -23,7 +25,6 @@ const marketPreviewScenarioField = $("marketPreviewScenarioField"); const marketPreviewScenario = $("marketPreviewScenario"); const marketPreviewStepOne = $("marketPreviewStepOne"); const marketPreviewStepTwo = $("marketPreviewStepTwo"); -const marketPreviewBack = $("marketPreviewBack"); const marketPreviewConfirm = $("marketPreviewConfirm"); const marketPreviewClose = $("marketPreviewClose"); const marketPersonaModal = $("marketPersonaModal"); @@ -191,9 +192,13 @@ function closeMarketPreview() { function renderMarketPreviewStep() { const isScenarioStep = marketPreviewStep === 2; + const isAssistant = pendingMarketPersona?.persona_type === "assistant"; + if (marketPreviewBody) marketPreviewBody.classList.toggle("hidden", isScenarioStep && isAssistant); if (marketPreviewStepOne) marketPreviewStepOne.classList.toggle("hidden", isScenarioStep || pendingMarketPersona?.persona_type !== "assistant"); if (marketPreviewStepTwo) marketPreviewStepTwo.classList.toggle("hidden", !isScenarioStep || pendingMarketPersona?.persona_type !== "assistant"); - if (marketPreviewBack) marketPreviewBack.classList.toggle("hidden", !isScenarioStep || pendingMarketPersona?.persona_type !== "assistant"); + if (marketPreviewTitle) { + marketPreviewTitle.textContent = isAssistant && isScenarioStep ? "Set the opening scene" : "Persona details"; + } if (marketPreviewIntro) { marketPreviewIntro.textContent = pendingMarketPersona?.persona_type === "assistant" ? (isScenarioStep @@ -202,11 +207,7 @@ function renderMarketPreviewStep() { : "Review this persona and choose how you want to use it."; } if (marketPreviewConfirm) { - if (pendingMarketPersona?.persona_type !== "assistant") { - marketPreviewConfirm.textContent = "Collect persona"; - } else { - marketPreviewConfirm.textContent = isScenarioStep ? "Start roleplay" : "Continue"; - } + marketPreviewConfirm.textContent = pendingMarketPersona?.persona_type !== "assistant" ? "Collect persona" : "Start roleplay"; } } @@ -508,13 +509,6 @@ marketPreviewConfirm.addEventListener("click", async () => { closeMarketPreview(); await collectMarketPersona(marketId); }); -if (marketPreviewBack) { - marketPreviewBack.addEventListener("click", () => { - marketPreviewStep = 1; - renderMarketPreviewStep(); - marketPreviewUserPersonaSelect.focus(); - }); -} marketPersonaClose.addEventListener("click", closePersonaForm); marketPersonaModal.addEventListener("click", (event) => { if (event.target === marketPersonaModal) closePersonaForm(); diff --git a/public/style.css b/public/style.css index 1f35c45..6b2c99b 100644 --- a/public/style.css +++ b/public/style.css @@ -420,8 +420,13 @@ button, } button { - padding: 12px 18px; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 11px 16px; font-weight: 700; + line-height: 1.2; color: var(--button-text); background: linear-gradient(145deg, var(--brand), var(--brand-strong)); box-shadow: none; @@ -712,10 +717,7 @@ select:focus { } .secondary-action { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 11px 14px; + padding: 11px 16px; min-height: 44px; background: rgba(164, 85, 45, 0.1); color: var(--text); @@ -1597,10 +1599,6 @@ select:focus { .persona-item-actions, .persona-section-actions, .market-header-actions, -.market-preview-actions { - flex-wrap: wrap; -} - .market-preview-user-field { width: 100%; } @@ -1609,8 +1607,38 @@ select:focus { width: 100%; } +.market-preview-actions { + display: grid; + gap: 16px; + align-items: stretch; +} + +.market-preview-footer { + display: flex; + justify-content: flex-end; + gap: 10px; + flex-wrap: wrap; +} + +.market-preview-footer button, +.market-preview-footer .secondary-action { + flex: 1 1 160px; + min-width: 0; +} + +.market-preview-name { + margin-top: 6px; +} + +.market-preview-user-field select, +.market-preview-scenario-field textarea { + width: 100%; +} + .persona-item-actions button { - padding: 8px 11px; + flex: 1 1 0; + min-width: 0; + padding: 10px 12px; font-size: 0.84rem; } @@ -1682,7 +1710,8 @@ select:focus { .popup-actions .secondary-action, .popup-actions button { - min-width: 132px; + flex: 1 1 140px; + min-width: 0; } .persona-modal-heading { diff --git a/server.js b/server.js index c5a0109..9922c9c 100644 --- a/server.js +++ b/server.js @@ -669,7 +669,7 @@ const listMarketPersonasStmt = db.prepare(` creator_username, name, pronouns, - appearance, + appearance, background, details, example_dialogues,