Add desktop Batch toggle, fix xAIGen library hide/selection, per-engine steps/CFG, and mobile prompt editor.

Desktop Batch splits only on double blank lines when enabled; library hide actually conceals thumbs and pinned clicks stick; steps/CFG restore per image model; mobile opens a near-fullscreen prompt editor.
This commit is contained in:
Towsty
2026-10-01 17:06:25 -05:00
parent 4f40641050
commit 5788d74001
6 changed files with 203 additions and 31 deletions
+89 -1
View File
@@ -139,6 +139,7 @@
:selected="ctx.selected"
:folder-id="ctx.form?.folderId"
:preview-hidden="!ctx.eyeOpen"
:is-hidden="ctx.isHidden"
@close="ctx.closeLibrary()"
@select="ctx.selectOutput"
@use-image="ctx.onLibraryUseImage"
@@ -223,7 +224,17 @@
<label class="m-label">Lyrics<textarea v-model="ctx.music.lyrics" rows="8" class="m-area" /></label>
</template>
<template v-else>
<label class="m-label">Prompt<textarea v-model="ctx.form.promptSections.action" rows="5" class="m-area" placeholder="Describe the image or the shot." /></label>
<label class="m-label">Prompt
<textarea
:value="ctx.form.promptSections.action"
rows="5"
class="m-area"
placeholder="Describe the image or the shot."
readonly
@focus="openPromptEditor"
@click="openPromptEditor"
/>
</label>
<label v-if="ctx.form.engine==='qwen21' && (ctx.form.mode==='generate' || ctx.form.mode==='edit')" class="m-check"><input v-model="ctx.form.enhancePrompt" type="checkbox"> Enhance prompt</label>
<label v-if="ctx.form.engine==='qwen21' && (ctx.form.mode==='generate' || ctx.form.mode==='edit')" class="m-check"><input v-model="ctx.form.turbo" type="checkbox"> Turbo</label>
<p v-if="ctx.form.engine==='qwen21' && ctx.form.turbo" class="m-muted">6-step Viggle distill. CFG stays 1. Enhance prompt recommended.</p>
@@ -355,6 +366,25 @@
<button v-if="ctx.canClearFinished" type="button" class="m-link" @click="ctx.clearFinished">Clear finished</button>
</div>
</aside>
<div
v-if="promptEditorOpen"
class="m-prompt-editor"
role="dialog"
aria-modal="true"
aria-label="Edit prompt"
>
<header class="m-prompt-editor-head">
<strong>Prompt</strong>
<button type="button" @click="closePromptEditor">Done</button>
</header>
<textarea
ref="promptEditorEl"
v-model="promptEditorDraft"
class="m-prompt-editor-area"
placeholder="Describe the image or the shot."
/>
</div>
</div>
</template>
@@ -364,12 +394,33 @@ export type Studio2MobileCtx = Record<string, any>
const props = defineProps<{ ctx: Studio2MobileCtx }>()
const sheet = ref('')
const touchStart = ref<{ x: number; y: number } | null>(null)
const promptEditorOpen = ref(false)
const promptEditorDraft = ref('')
const promptEditorEl = ref<HTMLTextAreaElement | null>(null)
function openPromptEditor() {
promptEditorDraft.value = String(props.ctx.form?.promptSections?.action || '')
promptEditorOpen.value = true
nextTick(() => {
promptEditorEl.value?.focus()
const el = promptEditorEl.value
if (el) {
const n = el.value.length
el.setSelectionRange(n, n)
}
})
}
function closePromptEditor() {
if (props.ctx.form?.promptSections) props.ctx.form.promptSections.action = promptEditorDraft.value
promptEditorOpen.value = false
}
function toggleSheet(id: string) {
sheet.value = sheet.value === id ? '' : id
}
function closeMenus() {
sheet.value = ''
if (promptEditorOpen.value) closePromptEditor()
}
function runAction(kind: 'use-image' | 'use-prompt' | 'copy' | 'copy-raw' | 'load-input' | 'load-input-raw' | 'delete') {
sheet.value = ''
@@ -726,4 +777,41 @@ watch(() => props.ctx.form.mode, () => { sheet.value = '' })
.m-job-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.m-job-progress-bar { flex: 1; height: 4px; accent-color: var(--amber); }
.m-link { border: 0; background: transparent; color: var(--amber); text-align: left; }
.m-prompt-editor {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
background: #0e0e10;
padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.m-prompt-editor-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
}
.m-prompt-editor-head button {
border: 0;
background: transparent;
color: var(--amber);
font-size: 16px;
font-weight: 600;
}
.m-prompt-editor-area {
flex: 1;
width: 100%;
margin: 0;
padding: 16px;
border: 0;
resize: none;
background: #0e0e10;
color: #f3f1ea;
font: inherit;
font-size: 17px;
line-height: 1.45;
outline: none;
}
</style>