feat: add tag removal from document slide-over drawer

TagBadge gains an optional removable prop with a dismiss (x) icon.
DocumentSlideOver passes removable and emits removeTag.
DocumentList handles the API call to strip the tag and refresh state.

Author: fmaass

docs-web/src/main/webapp/src/components/DocumentSlideOver.vue

@@ -22,6 +22,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'update:visible': [value: boolean]
   addTag: [tagId: string]
+  removeTag: [tagId: string]
   openFullView: []
   editDocument: [id: string]
 }>()
@@ -81,7 +82,7 @@ const tagOptions = computed(() =>
 
       <div class="slide-section">
         <div class="slide-tags-row">
-          <TagBadge v-for="tag in document.tags" :key="tag.id" :name="tag.name" :color="tag.color" />
+          <TagBadge v-for="tag in document.tags" :key="tag.id" :name="tag.name" :color="tag.color" removable @remove="emit('removeTag', tag.id)" />
           <Button v-if="!slideOverTagAdding" icon="pi pi-plus" text rounded size="small" class="tag-add-btn" @click="slideOverTagAdding = true" aria-label="Add tag" />
         </div>
         <div v-if="slideOverTagAdding" class="tag-add-row">

docs-web/src/main/webapp/src/components/TagBadge.vue

@@ -2,9 +2,29 @@
 defineProps<{
   name: string
   color: string
+  removable?: boolean
+}>()
+
+const emit = defineEmits<{
+  remove: []
 }>()
 </script>
 
 <template>
-  <span class="teedy-tag" :style="{ backgroundColor: color }">{{ name }}</span>
+  <span class="teedy-tag" :style="{ backgroundColor: color }">{{ name }}<i v-if="removable" class="pi pi-times tag-remove-icon" role="button" aria-label="Remove tag" @click.stop="emit('remove')" /></span>
 </template>
+
+<style scoped>
+.tag-remove-icon {
+  font-size: 0.625rem;
+  margin-left: 0.25rem;
+  opacity: 0.7;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: opacity 0.15s;
+  color: inherit;
+}
+.tag-remove-icon:hover {
+  opacity: 1;
+}
+</style>

docs-web/src/main/webapp/src/views/document/DocumentList.vue

@@ -138,6 +138,24 @@ async function addTagToSlideOver(tagId: string) {
   }
 }
 
+async function removeTagFromSlideOver(tagId: string) {
+  if (!slideOverDoc.value || !tagId) return
+  const doc = slideOverDoc.value
+  const currentTagIds = doc.tags?.map((t) => t.id).filter((id) => id !== tagId) ?? []
+  const params = new URLSearchParams()
+  params.set('title', doc.title)
+  params.set('language', doc.language)
+  for (const id of currentTagIds) params.append('tags', id)
+  try {
+    await updateDocument(doc.id, params)
+    const { data } = await getDocument(doc.id)
+    slideOverDoc.value = data
+    queryClient.invalidateQueries({ queryKey: ['documents'] })
+  } catch {
+    showTagUpdateError()
+  }
+}
+
 function buildFilterLabel(): string {
   const parts: string[] = []
   for (const tag of tf.selectedTags) parts.push(tag.name)
@@ -244,6 +262,7 @@ const contextMenuItems = computed(() => {
       :document="slideOverDoc"
       :available-tags="availableTagsForSlideOver"
       @add-tag="addTagToSlideOver"
+      @remove-tag="removeTagFromSlideOver"
       @open-full-view="openFullView"
       @edit-document="(id: string) => router.push({ name: 'document-edit', params: { id } })"
     />