refactor: implement review feedback

- Change default clickable prop to false (simpler code)
- Update Labels.vue to explicitly set clickable=true
- Remove clickable=false from QuickActions and FilterCommandsList (now default)
- Add {label} placeholder to translation string
- Use i18n-t component to render label within translation
- Move router.push from ShowTasks to Home via event emission
- Add clearLabelFilter event handler in Home.vue

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

frontend/src/components/input/filter/FilterCommandsList.vue

@@ -12,7 +12,6 @@
 					<XLabel
 						v-if="item.fieldType === 'labels'"
 						:label="(item.item as unknown as ILabel)"
-						:clickable="false"
 						class="filter-autocomplete__label"
 					/>
 					<User

frontend/src/components/quick-actions/QuickActions.vue

@@ -71,10 +71,7 @@
 							@keyup.prevent.esc="searchInput?.focus()"
 						>
 							<template v-if="r.type === ACTION_TYPE.LABELS">
-								<XLabel
-									:label="i"
-									:clickable="false"
-								/>
+								<XLabel :label="i" />
 							</template>
 							<template v-else-if="r.type === ACTION_TYPE.TASK">
 								<SingleTaskInlineReadonly

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

@@ -6,7 +6,7 @@ const props = withDefaults(defineProps<{
 	label: ILabel
 	clickable?: boolean
 }>(), {
-	clickable: true,
+	clickable: false,
 })
 
 const {getLabelStyles} = useLabelStyles()

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

@@ -4,6 +4,7 @@
 			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"
+      "filterByLabel": "Filtering by label: {label}"
     },
     "detail": {
       "chooseDueDate": "Click here to set a due date",

frontend/src/views/Home.vue

@@ -41,13 +41,14 @@
 			:label-ids="labelIds"
 			class="show-tasks"
 			@tasksLoaded="tasksLoaded = true"
+			@clearLabelFilter="handleClearLabelFilter"
 		/>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
 
 import Message from '@/components/misc/Message.vue'
 import ShowTasks from '@/views/tasks/ShowTasks.vue'
@@ -68,6 +69,7 @@ const salutation = useDaytimeSalutation()
 const authStore = useAuthStore()
 const projectStore = useProjectStore()
 const route = useRoute()
+const router = useRouter()
 
 const projectHistory = computed(() => {
 	// If we don't check this, it tries to load the project background right after logging out	
@@ -100,6 +102,15 @@ const showTasksKey = ref(0)
 function updateTaskKey() {
 	showTasksKey.value++
 }
+
+function handleClearLabelFilter() {
+	const query = {...route.query}
+	delete query.labels
+	router.push({
+		name: route.name as string,
+		query,
+	})
+}
 </script>
 
 <style scoped lang="scss">

frontend/src/views/tasks/ShowTasks.vue

@@ -10,13 +10,19 @@
 			v-if="filteredLabels.length > 0"
 			class="label-filter-info mbe-2"
 		>
-			<span class="filter-label-text">{{ $t('task.show.filterByLabel') }}:</span>
-			<XLabel
-				v-for="label in filteredLabels"
-				:key="label.id"
-				:label="label"
-				:clickable="false"
-			/>
+			<i18n-t
+				keypath="task.show.filterByLabel"
+				tag="span"
+				class="filter-label-text"
+			>
+				<template #label>
+					<XLabel
+						v-for="label in filteredLabels"
+						:key="label.id"
+						:label="label"
+					/>
+				</template>
+			</i18n-t>
 			<BaseButton
 				class="clear-filter-button"
 				@click="clearLabelFilter"
@@ -126,6 +132,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	'tasksLoaded': true,
+	'clearLabelFilter': void,
 }>()
 
 const authStore = useAuthStore()
@@ -212,12 +219,7 @@ function setShowNulls(show: boolean) {
 }
 
 function clearLabelFilter() {
-	const query = {...route.query}
-	delete query.labels
-	router.push({
-		name: route.name as string,
-		query,
-	})
+	emit('clearLabelFilter')
 }
 
 async function loadPendingTasks(from: Date|string, to: Date|string) {