fix: address review feedback

- Fix Icon import path (Icon.vue -> Icon)
- Update translation string to remove colon
- Make labels clickable ONLY on ListLabels page
- Remove clickable from Labels.vue (labels on tasks are not clickable)
- Update ListLabels to use XLabel component with clickable={true}
- Add edit button with pen icon next to labels on ListLabels page

Co-authored-by: kolaente <13721712+kolaente@users.noreply.github.com>

frontend/src/components/tasks/partials/Labels.vue

@@ -4,7 +4,6 @@
 			v-for="label in displayLabels"
 			:key="label.id"
 			:label="label"
-			:clickable="true"
 		/>
 	</div>
 </template>

frontend/src/i18n/lang/en.json

@@ -808,7 +808,7 @@
       "fromuntil": "Tasks from {from} until {until}",
       "select": "Select a date range",
       "noTasks": "Nothing to do — Have a nice day!",
-      "filterByLabel": "Filtering by label: {label}"
+      "filterByLabel": "Filtering by label {label}"
     },
     "detail": {
       "chooseDueDate": "Click here to set a due date",

frontend/src/views/labels/ListLabels.vue

@@ -33,21 +33,19 @@
 					v-for="label in labelStore.labelsArray"
 					:key="label.id"
 					:class="{'disabled': userInfo.id !== label.createdBy.id}"
-					:style="getLabelStyles(label)"
-					class="tag"
+					class="label-item"
 				>
-					<span
-						v-if="userInfo.id !== label.createdBy.id"
-						v-tooltip.bottom="$t('label.edit.forbidden')"
-					>
-						{{ label.title }}
-					</span>
+					<XLabel
+						:label="label"
+						:clickable="true"
+					/>
 					<BaseButton
-						v-else
+						v-if="userInfo.id === label.createdBy.id"
+						class="edit-button"
 						:style="{'color': label.textColor}"
 						@click="editLabel(label)"
 					>
-						{{ label.title }}
+						<Icon icon="pen" />
 					</BaseButton>
 					<BaseButton
 						v-if="userInfo.id === label.createdBy.id"
@@ -142,6 +140,8 @@ import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
 import Editor from '@/components/input/AsyncEditor'
 import ColorPicker from '@/components/input/ColorPicker.vue'
+import XLabel from '@/components/tasks/partials/Label.vue'
+import Icon from '@/components/misc/Icon'
 
 import LabelModel from '@/models/label'
 import type {ILabel} from '@/modelTypes/ILabel'
@@ -212,3 +212,27 @@ function showDeleteDialoge(label: ILabel) {
 	showDeleteModal.value = true
 }
 </script>
+
+<style lang="scss" scoped>
+.label-item {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	margin: 0.25rem;
+	
+	&.disabled {
+		opacity: 0.6;
+	}
+	
+	.edit-button {
+		padding: 0.25rem 0.5rem;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+}
+</style>

frontend/src/views/tasks/ShowTasks.vue

@@ -101,7 +101,7 @@ import {formatDate} from '@/helpers/time/formatDate'
 import {setTitle} from '@/helpers/setTitle'
 
 import BaseButton from '@/components/base/BaseButton.vue'
-import Icon from '@/components/misc/Icon.vue'
+import Icon from '@/components/misc/Icon'
 import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import SingleTaskInProject from '@/components/tasks/partials/SingleTaskInProject.vue'
 import DatepickerWithRange from '@/components/date/DatepickerWithRange.vue'