refactor

frontend/src/components/SourceForm.vue

@@ -0,0 +1,72 @@
+<script setup>
+// Quellenauswahl (Typ-Buttons + Link-Feld/Ordnerwahl), geteilt zwischen dem Anlegen-Panel
+// und dem Bearbeiten-Panel der Sidebar. v-model trägt { type, ort }.
+const props = defineProps({
+  modelValue: { type: Object, required: true },   // { type, ort }
+  folders: { type: Object, default: () => ({}) }, // { projekt: [...], uni: [...] }
+})
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const TYPES = [
+  { key: 'thema', label: 'Thema' },
+  { key: 'link', label: 'Link' },
+  { key: 'projekt', label: 'Projekt' },
+  { key: 'uni', label: 'Uni' },
+]
+
+function setType(key) {
+  emit('update:modelValue', { type: key, ort: '' })  // Typwechsel verwirft den alten Ort
+}
+function setOrt(ort) {
+  emit('update:modelValue', { ...props.modelValue, ort })
+}
+</script>
+
+<template>
+  <div class="dlg-sources">
+    <button v-for="t in TYPES" :key="t.key" :class="{ active: modelValue.type === t.key }"
+            @click="setType(t.key)">{{ t.label }}</button>
+  </div>
+  <input
+    v-if="modelValue.type === 'link'"
+    class="dlg-input" :value="modelValue.ort"
+    placeholder="https://…"
+    @input="setOrt($event.target.value)"
+    @keyup.enter="emit('submit')"
+  />
+  <select
+    v-else-if="modelValue.type === 'projekt' || modelValue.type === 'uni'"
+    class="dlg-input" :value="modelValue.ort"
+    @change="setOrt($event.target.value)"
+  >
+    <option value="" disabled>Ordner wählen…</option>
+    <option v-for="fo in (folders[modelValue.type] || [])" :key="fo.location" :value="fo.location">{{ fo.name }}</option>
+  </select>
+</template>
+
+<style scoped>
+.dlg-sources { display: flex; gap: 0.3rem; }
+.dlg-sources button {
+  flex: 1;
+  padding: 0.35rem 0.2rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--panel-soft);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+.dlg-sources button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+.dlg-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.4rem 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+}
+.dlg-input:focus { outline: none; border-color: var(--accent); }
+select.dlg-input { cursor: pointer; }
+</style>