185 lines
3.8 KiB
Vue
185 lines
3.8 KiB
Vue
<script setup>
|
||
import { ref, nextTick } from 'vue'
|
||
import { renderMarkdown } from '../../markdown.js'
|
||
|
||
const props = defineProps({
|
||
change: { type: Object, required: true },
|
||
busy: { type: Boolean, default: false },
|
||
})
|
||
|
||
const emit = defineEmits(['apply', 'dismiss', 'refine'])
|
||
|
||
const ACTION_LABELS = { entfernen: 'Entfernen:', anpassen: 'Anpassen:', hinzufuegen: 'Hinzufügen:' }
|
||
|
||
const editing = ref(false)
|
||
const instruction = ref('')
|
||
const inputEl = ref(null)
|
||
|
||
function toggleEdit() {
|
||
editing.value = !editing.value
|
||
if (editing.value) nextTick(() => inputEl.value?.focus())
|
||
}
|
||
|
||
function submit() {
|
||
const text = instruction.value.trim()
|
||
if (!text || props.busy) return
|
||
emit('refine', text)
|
||
instruction.value = ''
|
||
editing.value = false
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="style-sugg" :class="{ busy }">
|
||
<div class="style-sugg-text"><strong>{{ ACTION_LABELS[change.action] }}</strong> {{ change.text }}</div>
|
||
<div v-if="change.content" class="style-sugg-preview markdown" v-html="renderMarkdown(change.content)"></div>
|
||
<div class="style-sugg-actions">
|
||
<button class="sugg-ok" :disabled="busy" @click="emit('apply')">Bestätigen</button>
|
||
<button class="sugg-no" :disabled="busy" @click="emit('dismiss')">Ablehnen</button>
|
||
<button class="sugg-edit" :disabled="busy" title="Vorschlag per Anweisung anpassen" @click="toggleEdit">✏️</button>
|
||
</div>
|
||
<div v-if="editing" class="sugg-edit-row">
|
||
<input
|
||
ref="inputEl"
|
||
v-model="instruction"
|
||
placeholder="Anweisung zum Vorschlag…"
|
||
@keyup.enter="submit"
|
||
/>
|
||
<button :disabled="!instruction.trim() || busy" @click="submit">➤</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.style-sugg {
|
||
margin: 0.3rem 0 0.6rem;
|
||
padding: 0.5rem 0.6rem;
|
||
border: 1px dashed var(--accent);
|
||
border-radius: 8px;
|
||
background: var(--panel-soft);
|
||
}
|
||
|
||
.style-sugg.busy {
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
50% { opacity: 0.45; }
|
||
}
|
||
|
||
.style-sugg-text {
|
||
font-size: 0.76rem;
|
||
line-height: 1.4;
|
||
color: var(--text);
|
||
}
|
||
|
||
.style-sugg-text strong {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.style-sugg-preview {
|
||
margin-top: 0.35rem;
|
||
font-size: 0.76rem;
|
||
line-height: 1.45;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.style-sugg-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 0.45rem;
|
||
}
|
||
|
||
.sugg-ok,
|
||
.sugg-no {
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
font-size: 0.74rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sugg-ok {
|
||
border: none;
|
||
background: var(--accent);
|
||
color: var(--on-accent);
|
||
}
|
||
|
||
.sugg-no {
|
||
border: 1px solid var(--border-strong);
|
||
background: none;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.sugg-no:hover {
|
||
border-color: var(--danger);
|
||
color: var(--danger);
|
||
}
|
||
|
||
.sugg-edit {
|
||
border: none;
|
||
background: none;
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
padding: 2px 4px;
|
||
border-radius: 6px;
|
||
filter: grayscale(0.4);
|
||
}
|
||
|
||
.sugg-edit:hover {
|
||
background: var(--border);
|
||
filter: none;
|
||
}
|
||
|
||
.sugg-ok:disabled,
|
||
.sugg-no:disabled,
|
||
.sugg-edit:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.sugg-edit-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-top: 0.45rem;
|
||
}
|
||
|
||
.sugg-edit-row input {
|
||
flex: 1;
|
||
padding: 5px 8px;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 6px;
|
||
font-size: 0.76rem;
|
||
background: var(--panel);
|
||
color: var(--text);
|
||
outline: none;
|
||
}
|
||
|
||
.sugg-edit-row input:focus {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.sugg-edit-row button {
|
||
width: 30px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: var(--accent);
|
||
color: var(--on-accent);
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sugg-edit-row button:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Markdown: Basis global (assets/markdown.css); kompakte Vorschau-Code-Blöcke */
|
||
.markdown :deep(pre) {
|
||
padding: 6px 8px;
|
||
border-radius: 6px;
|
||
margin: 0.3em 0;
|
||
}
|
||
</style>
|