Frontend: ElementsSidebar (1160 Z.) in 5 Komponenten gesplittet

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-12 08:15:31 +02:00
parent 5c35939eab
commit 2c426e6ac4
8 changed files with 1125 additions and 1126 deletions
--- a/frontend/src/components/elements/ElementSuggestion.vue
+++ b/frontend/src/components/elements/ElementSuggestion.vue
@@ -0,0 +1,184 @@
+<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>